/* ==========================================================================
   SKYBOUND SCALING - case-home.css
   The home page CASE STUDIES section.

   A quiet, spacious alternating layout. Four projects, each one a row of two
   columns that swap sides down the section: text left / shot right, then
   mirrored, then back. The rhythm comes from the swap and from the air
   between rows, not from decoration, so the work carries the section and the
   type stays out of its way.

   Composition rules that hold the whole thing together:
     - one shared grid. Both columns sit on the same two tracks at every
       width, so the four rows align to each other even though they mirror.
     - the shot is contained, never bled. Clean edges on both sides is what
       makes the section read as refined rather than busy.
     - the text column is optically centred against the shot, and its measure
       is capped at ~42ch so the paragraph never runs wider than it reads.

   Motion is scroll-driven only, shared with /work/ through case-showcase.js:
   the shot eases in its frame and the index rule draws itself. Nothing is
   behind a hover, so touch gets exactly what a pointer gets, and reduced
   motion and no-JS both land on the finished layout.

   Title: matches /work/ exactly (eyebrow with the blue tick, CASE flush
   left, STUDIES flush right) so the two case-study surfaces read as one.

   Loaded by: / only.

   TABLE OF CONTENTS
   ------------------------------------------------------------------
   01  Section shell
   02  Head - eyebrow + CASE STUDIES title
   03  The row
   04  The shot
   05  The text column
   06  See more control
   07  Wide layout (alternating two columns)
   08  Tablet + mobile
   09  Press, focus, reduced motion
   ------------------------------------------------------------------ */

/* ============ 01 SECTION SHELL ============ */
.csh{
  position:relative;
  padding:clamp(80px,12vh,170px) 0 clamp(50px,8vh,110px);
  --csh-r:clamp(14px,1.5vw,22px);    /* corner radius on the shot */
  --csh-gap:clamp(36px,5.5vw,110px); /* gutter between the two columns */
}
.csh-head,.csh-list{padding-inline:var(--pad)}

/* ============ 02 HEAD ============
   Byte-for-byte the treatment on /work/: the eyebrow with its blue tick, then
   the two words set at the width axis ceiling with the tracking pulled in, so
   they fill the measure instead of floating in it. */
.csh-head{margin-bottom:clamp(48px,9vh,120px)}
.csh-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 clamp(20px,3.4vh,34px);
  color:rgba(10,10,12,.62);
}
.csh-eyebrow::before{
  content:"";width:26px;height:1px;background:var(--blue);flex:none;
}
.csh-title{
  margin:0;
  font-weight:900;font-variation-settings:'wdth' 125;
  font-size:clamp(44px,13.4vw,200px);
  line-height:.8;letter-spacing:-.045em;
  text-transform:uppercase;
  color:var(--ink);
}
.csh-title .csh-ln{display:block}

/* ============ 03 THE ROW ============ */
.csh-list{
  display:flex;flex-direction:column;
  gap:clamp(64px,11vh,150px);
}
.csh-case{
  --ac:var(--blue);
  position:relative;display:block;
  color:inherit;text-decoration:none;
}
/* the accent alternates with the side, so colour and geometry move together */
.csh-case:nth-child(even){--ac:var(--orange)}

/* ============ 04 THE SHOT ============ */
.csh-shot{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--csh-r);
  background:var(--paper-deep);
  border:1px solid var(--line);
  box-shadow:
    0 40px 80px -44px rgba(15,25,70,.42),
    0 12px 30px -18px rgba(15,25,70,.16),
    inset 0 1px 0 rgba(255,255,255,.5);
  transform:translateZ(0);
}
/* The screenshot displays whole at its own ratio: full width, natural height,
   nothing cropped and nothing panned. The width/height attributes on the img
   reserve the box before load, so the row never shifts as it loads. */
.csh-shot img{
  display:block;width:100%;height:auto;
}

/* ============ 05 THE TEXT COLUMN ============ */
.csh-panel{
  display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;
}
/* accent rule + sector on one optical line */
.csh-index{
  display:grid;grid-template-columns:minmax(24px,1fr) auto;
  align-items:center;column-gap:clamp(12px,1.4vw,20px);
  width:100%;
}
.csh-rule{position:relative;height:1px;background:var(--line);overflow:hidden}
.csh-rule::after{
  content:"";position:absolute;inset:0;background:var(--ac);
  transform:scaleX(1);transform-origin:0 50%;
}
[data-cs-live] .csh-rule::after{transform:scaleX(var(--pc,0))}
.csh-sector{color:rgba(10,10,12,.55);text-align:right;white-space:nowrap}

.csh-name{
  margin:clamp(20px,3vh,34px) 0 0;
  font-weight:900;font-variation-settings:'wdth' 120;
  font-size:clamp(34px,4.2vw,68px);
  line-height:.98;letter-spacing:-.035em;
  text-transform:uppercase;
}
.csh-blurb{
  margin:clamp(16px,2.4vh,24px) 0 0;
  max-width:42ch;
  font-size:clamp(15px,1.12vw,17px);
  line-height:1.65;
  color:rgba(10,10,12,.66);
}

/* ============ 06 SEE MORE ============
   A text label with a bordered arrow disc. Lighter than the site's filled
   pill, which would shout four times in one section, but it keeps the same
   arrow-travel idea so it still feels like the same family of controls. */
.csh-go{
  display:inline-flex;align-items:center;gap:14px;
  margin-top:clamp(24px,3.6vh,38px);
  font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);
}
.csh-go-disc{
  position:relative;overflow:hidden;flex:none;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-strong);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .38s cubic-bezier(.65,0,.35,1),
             border-color .38s cubic-bezier(.65,0,.35,1),
             color .38s cubic-bezier(.65,0,.35,1);
}
.csh-go-disc .arr{
  display:block;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
/* the label gets a rule that draws in from the left on approach */
.csh-go-label{position:relative;padding-bottom:3px}
.csh-go-label::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s cubic-bezier(.65,0,.35,1);
}
.csh-case:hover .csh-go-disc,
.csh-case:focus-visible .csh-go-disc{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.csh-case:hover .csh-go-disc .arr,
.csh-case:focus-visible .csh-go-disc .arr{transform:translateX(3px)}
.csh-case:hover .csh-go-label::after,
.csh-case:focus-visible .csh-go-label::after{transform:scaleX(1)}

/* ============ 07 WIDE LAYOUT ============
   One grid for every row. The shot and the panel simply trade tracks, which
   is what keeps four mirrored rows aligned to each other rather than merely
   adjacent. */
@media (min-width:1024px){
  .csh-case{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    column-gap:var(--csh-gap);
    align-items:center;
  }
  /* odd: text left, shot right */
  .csh-case:nth-child(odd)  .csh-panel{grid-column:1;grid-row:1}
  .csh-case:nth-child(odd)  .csh-shot {grid-column:2;grid-row:1}
  /* even: mirrored, and the ratio mirrors with it so the shot keeps the wider
     track on both sides */
  .csh-case:nth-child(even){grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
  .csh-case:nth-child(even) .csh-shot {grid-column:1;grid-row:1}
  .csh-case:nth-child(even) .csh-panel{grid-column:2;grid-row:1}

  /* STUDIES hangs off the right margin, squaring the title block against both
     edges and turning the leftover space into one clean diagonal */
  .csh-title .csh-ln + .csh-ln{text-align:right}
}
@media (min-width:1500px){
  .csh-blurb{max-width:44ch}
}

/* ============ 08 TABLET + MOBILE ============
   Below the two-column breakpoint every row goes fully vertical: shot first,
   then the text under it, in the same order for all four so the page reads
   straight down with no mirroring to track. The shot leads because it is the
   thing being sold. */
@media (max-width:1023px){
  .csh-case{display:flex;flex-direction:column;gap:clamp(22px,3.4vh,32px)}
  .csh-panel{align-items:flex-start}
  .csh-name{margin-top:clamp(16px,2.4vh,24px)}
}
@media (max-width:760px){
  .csh-list{gap:clamp(56px,9vh,88px)}
  .csh-name{font-size:clamp(30px,8.4vw,44px)}
  .csh-blurb{max-width:none;font-size:15.5px}
  /* long sector labels would otherwise force the meta row to overflow */
  .csh-sector{white-space:normal;text-align:right}
  .csh-index{column-gap:12px}
  .csh-go{gap:12px;margin-top:22px}
  .csh-go-disc{width:44px;height:44px}   /* stays a comfortable tap target */
}

/* ============ 09 PRESS, FOCUS, REDUCED MOTION ============ */
.csh-case:active .csh-shot{transform:scale(.992);transition:transform .18s ease}
.csh-case:focus-visible{outline:2px solid var(--blue);outline-offset:8px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .csh-go-disc,.csh-go-disc .arr,.csh-go-label::after{transition:none}
  .csh-case:active .csh-shot{transition:none;transform:none}
}