/* ==========================================================================
   02 — PLATFORM INTRO
   Statement left, note right. Everything structural comes from .rb-grid +
   data-span; this file only carries what is genuinely specific to the section:
   the two page-edge hairlines and the plus-mark bracket around the note.
   ========================================================================== */

/* --- Column assignment ----------------------------------------------------
   4 / 4 stacked below 768, 8 / 8 stacked to 1199, then 7 + empty 8 + 9→12.
   Leaving column 8 empty is the composition: it is the gutter that lets the
   note read as a separate voice rather than a second column of the headline. */
.rb-platformintro__statement {
  --rb-span-m: 4;
  --rb-span-t: 8;
  --rb-span-d: 7;
}

.rb-platformintro__note {
  --rb-span-m: 4;
  --rb-span-t: 8;
  --rb-span-d: 4;
  --rb-start-d: 9;
  position: relative;                 /* anchor for the four plus marks */
  padding: var(--rb-ref-space-3) var(--rb-ref-space-4);
}

/* --- Plus marks -----------------------------------------------------------
   Decorative brackets on the note's four corners.
   NORMALISED: the reference nudged the two TOP marks 6px inward while the
   bottom pair sat flush (and kept the same 6px when the mark shrank to 8px),
   which has no design reason — squared up so all four tick the exact corner.
   NORMALISED: the reference also dropped the mark from 12px to 8px below
   1200; the shared .rb-plus is a fixed 12px and sections do not restyle it. */
.rb-platformintro__plus { position: absolute; }

.rb-platformintro__plus--top-start    { inset-block-start: 0; inset-inline-start: 0; }
.rb-platformintro__plus--top-end      { inset-block-start: 0; inset-inline-end:   0; }
.rb-platformintro__plus--bottom-start { inset-block-end:   0; inset-inline-start: 0; }
.rb-platformintro__plus--bottom-end   { inset-block-end:   0; inset-inline-end:   0; }

/* --- Desktop --------------------------------------------------------------- */
@media (min-width: 1200px) {
  /* The note is shorter than the three-line statement; centring the row is
     what the reference does and keeps the bracket optically balanced. */
  .rb-platformintro__grid { align-items: center; }

  .rb-platformintro__note {
    padding: var(--rb-ref-space-4) var(--rb-ref-space-7);
  }

  /* Two full-height hairlines, inset 48px from the page edge — 16px outside
     the 64px content gutter. Purely decorative, hence pseudo-elements. */
  .rb-platformintro::before,
  .rb-platformintro::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: var(--rb-ref-border-hairline);
    background: var(--rb-sys-border-teal);
  }
  .rb-platformintro::before { inset-inline-start: var(--rb-ref-space-9); }
  .rb-platformintro::after  { inset-inline-end:   var(--rb-ref-space-9); }
}