/* ============================================================
   SWISS CLUSTER RAILS — component styles
   Framework-free. Two thin vertical decorative rectangles with
   dashed borders matching the section card style. Pinned to the
   left and right edges of the .page container, spanning the
   full page height to suggest a grid/frame around the content.

   Block:     .sc-rails       (container, sits inside .page)
   Modifiers: .sc-rails__rail (the individual rectangle)
              .sc-rails__rail--left   (pinned to .page left edge)
              .sc-rails__rail--right  (pinned to .page right edge)

   Usage:
     Place ONE .sc-rails block as the first child of .page:
       <div class="page">
         <div class="sc-rails" aria-hidden="true">
           <div class="sc-rails__rail sc-rails__rail--left"></div>
           <div class="sc-rails__rail sc-rails__rail--right"></div>
         </div>
         ...rest of page content...
       </div>

     Requires the parent .page to have `position: relative` so the
     rails anchor to its bounds (set in page.css alongside this).

   Theming: override the CSS variables in :root or on the rail.
   ============================================================ */

.sc-rails {
  /* ---- design tokens (override to re-theme) ---- */
  --sc-rails-width: 40px; /* thickness of each rail rectangle  */
  --sc-rails-stroke: var(--sc-gray); /* dashed border colour              */
  --sc-rails-dash: 16px; /* dash length                       */
  --sc-rails-gap: 10px; /* gap between dashes                */

  /* ---- layout ----
     The .sc-rails block itself is invisible — it just exists so the
     two child rails can position relative to it (or directly to .page,
     since the rails use absolute positioning). */
  pointer-events: none;
}

/* a single vertical rail — full page height, dashed border on all
   four sides drawn with the same gradient technique as the section
   cards (so dashes are guaranteed to match). */
.sc-rails__rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sc-rails-width);
  pointer-events: none;
  z-index: 0;

  /* dashed border drawn with four gradient layers (top/bottom/left/right)
     matching .sc-card--dashed exactly: 16px dash, 10px gap, var(--sc-gray). */
  background-image:
    linear-gradient(
      90deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    ),
    linear-gradient(
      90deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    ),
    linear-gradient(
      0deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    ),
    linear-gradient(
      0deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    );
  background-size:
    calc(var(--sc-rails-dash) + var(--sc-rails-gap)) 1px,
    calc(var(--sc-rails-dash) + var(--sc-rails-gap)) 1px,
    1px calc(var(--sc-rails-dash) + var(--sc-rails-gap)),
    1px calc(var(--sc-rails-dash) + var(--sc-rails-gap));
  background-position:
    left top,
    left bottom,
    left top,
    right top;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* pin each rail just outside the section card's edge.
   Section cards have max-width: 1680px and are centered in their column,
   so each card's outer edge sits at `50% ± 840px` from the parent's center.
   The rail's INNER edge (the one closest to the content) lands at that
   same coordinate — i.e. the rail sits flush against the card. */
.sc-rails__rail--left {
  /* rail's right edge = card's left edge.
     Clamp so the rail can never poke past the page edge: once the viewport
     is narrower than the card's max-width the card shrinks but this offset
     stayed pinned at 840px, pushing the rail off-screen (horizontal scroll).
     min() pins it to the page edge instead below that threshold. */
  right: min(calc(50% + 840px), calc(100% - var(--sc-rails-width)));
  /* draw ONLY the outer (left) vertical + top + bottom borders.
     The inner (right) vertical line is omitted entirely so it can never
     double up with the card's own border at that seam. */
  background-image:
    linear-gradient(
      90deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    ),
    linear-gradient(
      90deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    ),
    linear-gradient(
      0deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    );
  background-size:
    calc(var(--sc-rails-dash) + var(--sc-rails-gap)) 1px,
    calc(var(--sc-rails-dash) + var(--sc-rails-gap)) 1px,
    1px calc(var(--sc-rails-dash) + var(--sc-rails-gap));
  background-position:
    left top,
    left bottom,
    left top;
  background-repeat: repeat-x, repeat-x, repeat-y;
}
.sc-rails__rail--right {
  /* rail's left edge = card's right edge (clamped — see --left above) */
  left: min(calc(50% + 840px), calc(100% - var(--sc-rails-width)));
  /* draw ONLY the outer (right) vertical + top + bottom borders.
     The inner (left) vertical line is omitted so it can't double the card border. */
  background-image:
    linear-gradient(
      90deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    ),
    linear-gradient(
      90deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    ),
    linear-gradient(
      0deg,
      var(--sc-rails-stroke) 0 var(--sc-rails-dash),
      transparent var(--sc-rails-dash) calc(var(--sc-rails-dash) + var(--sc-rails-gap))
    );
  background-size:
    calc(var(--sc-rails-dash) + var(--sc-rails-gap)) 1px,
    calc(var(--sc-rails-dash) + var(--sc-rails-gap)) 1px,
    1px calc(var(--sc-rails-dash) + var(--sc-rails-gap));
  background-position:
    left top,
    left bottom,
    right top;
  background-repeat: repeat-x, repeat-x, repeat-y;
}

/* ---- RESPONSIVE ----
   Shrink rail width on smaller screens so they don't overwhelm
   narrow viewports. Hide entirely on mobile where they'd clip
   into the content area. */
@media (max-width: 1400px) {
  .sc-rails {
    --sc-rails-width: 32px;
  }
}

@media (max-width: 1100px) {
  .sc-rails {
    --sc-rails-width: 20px;
  }
}

@media (max-width: 720px) {
  /* on phones the rails would sit on top of the content padding;
     hide them so the page stays clean. */
  .sc-rails {
    display: none;
  }
}