/* Sub-Features — "Even More To Draw You In"
   A 2x2 bento derived from flowty's "Get Even More with Flowty" grid.

   The column rhythm is still flowty's, measured at 1440x900: a three-column
   grid, 37fr / 15fr / 37fr, where a SHORT card takes one outer column and a
   LONG card spans the middle column plus the other outer one. Alternating the
   side each row flips who owns the middle column, so the seam zig-zags:

     row 1   [ short 37 ][ long 15 + 37 .......... ]
     row 2   [ long 37 + 15 .......... ][ short 37 ]

   flowty's numbers, for reference when tuning:
     gap 20px · radius 60px · card height 674px (all at their 1920 design width)

   Departure from flowty: every card carries BOTH its copy and its screenshot,
   so there are no image-only cards. Four cards, four features. */

.subs {
  position: relative;
  z-index: 2;
  overflow: clip;             /* the scrubbed x-drift must not widen the page */
  padding: var(--sp-32) var(--gutter) var(--sp-32);
  background: var(--bg-2);
  color: var(--text);
  /* Card edges are a whisper — they separate the card from the page without
     drawing a line the eye stops on. */
  --subs-hair: rgba(26, 26, 26, 0.055);
}

/* ---- Header: headline left, supporting paragraph right, baselines aligned --- */
.subs__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-12);
  margin-bottom: var(--sp-24);
}
.subs__title {
  flex-shrink: 0;
  font-size: var(--fs-section);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--text);
}
.subs__lead {
  max-width: 42ch;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- The staggered grid ---------------------------------------------- */
/* Each row is its own three-column grid rather than one tall grid with
   explicit placement: the two cards in a row still stretch to a shared
   height, and nothing can fall into an implicit row when a card is added. */
.subs__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.subs__row {
  display: grid;
  grid-template-columns: 37fr 15fr 37fr;
  gap: var(--sp-5);
}

.subs__cell {
  position: relative;
  overflow: hidden;
  border-radius: clamp(26px, 3.2vw, 46px);
  /* A DEFINITE height, not min-height. The figure rows are `1fr`, and against
     an auto-height card `1fr` resolves from content — so the screenshot's own
     intrinsic height (874px scaled up to the card's width) drove the card to
     1500px tall. A definite height gives `1fr` something to divide. */
  height: clamp(320px, 35vw, 512px);
  background: var(--bg-3);
  border: 1px solid var(--subs-hair);
  will-change: transform;
}

.subs__row--a .subs__cell--short { grid-column: 1; }
.subs__row--a .subs__cell--long  { grid-column: 2 / span 2; }
.subs__row--b .subs__cell--long  { grid-column: 1 / span 2; }
.subs__row--b .subs__cell--short { grid-column: 3; }

/* Short cards are the neutral --bg-3; the two long cards carry a gradient, one
   cool and one warm, drawn from the page's blue-to-orange palette. Set by
   explicit modifiers in the markup, not nth-child, so reordering cannot
   silently re-colour the run. */
.subs__cell--tint-cool { background: linear-gradient(155deg, #CDEBFF 0%, #EAF5FF 55%, #FFEEDC 100%); }
.subs__cell--tint-warm { background: linear-gradient(155deg, #FFE7CE 0%, #FFF4E6 55%, #FFD9B8 100%); }

/* ---- The three card arrangements ------------------------------------- */
/* Copy carries the padding; the figure bleeds to the card's edges. */
.subs__cell--lr {                   /* image left, copy right */
  display: grid;
  grid-template-columns: 42% 1fr;
}
.subs__cell--ti {                   /* copy top, image bottom */
  display: grid;
  grid-template-rows: auto 1fr;
}
.subs__cell--it {                   /* image top, copy bottom */
  display: grid;
  grid-template-rows: 1fr auto;
}


.subs__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;                     /* or long words cannot shrink the column */
  padding: clamp(26px, 3.6vw, 56px);
}
.subs__cell--ti .subs__copy,
.subs__cell--it .subs__copy {
  justify-content: flex-start;
  padding: clamp(24px, 3vw, 44px);
}

/* ---- Figure ---------------------------------------------------------- */
/* The screenshot is a phone sitting INSIDE the card, with the card's own fill
   visible around it — NOT an image stretched to fill the box. It is anchored to
   the top of the figure and runs off the bottom edge, so what you see is the
   top of the app screen.
   Everything is sized against the FIGURE, never the viewport: the two follow
   different curves across breakpoints, and a viewport-sized phone silently
   loses its headroom and clips through the top edge on a narrow screen. */
.subs__figure {
  position: relative;
  overflow: hidden;
  min-height: 0;                    /* a grid item must be allowed to shrink */
}
.subs__figure img {
  position: absolute;
  top: 16%;
  left: var(--art-x, 10%);
  width: auto;
  height: auto;
  aspect-ratio: 402 / 874;
  border-radius: clamp(12px, 1.3vw, 20px);
  /* Grow DOWNWARD. The phone is far taller than its figure, so scaling about
     its centre pushes the top edge up out of the card — the entry scale left
     only 16px of headroom. From the top edge, the scale costs nothing above. */
  transform-origin: 50% 0%;
  transform: rotate(var(--art-rot, -5deg));
  box-shadow:
    0 34px 66px -28px rgba(26, 26, 26, 0.38),
    0 8px 20px -10px rgba(26, 26, 26, 0.2);
  will-change: transform;
}
/* A tall narrow figure sizes the phone by HEIGHT; a wide shallow one by WIDTH.
   One rule cannot serve both — height-sizing leaves a 121px phone stranded in a
   547px-wide box, and width-sizing overflows a full-height column. */
/* The long cards run larger than the short ones by the owner's call — cropping
   more off the bottom there is fine. The limit is horizontal, not vertical: the
   tilt swings the phone sideways the further down you look, so a phone much
   wider than this clips its own edge against the figure. */
.subs__cell--lr .subs__figure img { height: 104%; }
/* The offset has to follow the TILT, which is set per row: a -5deg phone leans
   its lower half right and needs room on that side, a +5deg one leans left.
   One shared value clipped whichever row leaned the wrong way. */
.subs__row--a .subs__cell--lr .subs__figure { --art-x: 8.5%; }
.subs__row--b .subs__cell--lr .subs__figure { --art-x: 19%; }
.subs__cell--it .subs__figure img { width: 36%; }
/* Collections is the only --ti card, so this reaches it alone — matched to the
   long cards' 240px rendered width. */
.subs__cell--ti .subs__figure img { width: 44%; }

/* Anchored to the BOTTOM instead: the crop then keeps the lower half of the
   app screen. Car Mode uses this — its large playback controls sit low, and the
   default top anchor cropped them away. The transform origin moves with it, so
   the entry scale still grows into the cropped region rather than off the
   visible edge. */
.subs__figure[data-anchor="bottom"] img {
  top: auto;
  bottom: 8%;
  transform-origin: 50% 100%;
  /* The default shadow throws ~70px DOWN, but this phone's bottom edge is
     visible with only a small gap beneath it — the figure clipped the shadow
     into a hard flat line. Bias it upward and keep the contact shadow tight
     enough to stay inside the gap. */
  box-shadow:
    0 -26px 54px -30px rgba(26, 26, 26, 0.34),
    0 2px 10px -6px rgba(26, 26, 26, 0.12);
}

/* Stated on both rows, not just --b: the JS reads this value per figure to keep
   the tilt across its own transform, and an unset property gives it nothing to
   read. A single card can override it inline — Prayers does. */
.subs__row--a { --art-rot: -5deg; }
.subs__row--b { --art-rot: 5deg; }

/* ---- Copy ------------------------------------------------------------ */
.subs__card-title {
  font-size: var(--fs-card-title);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
.subs__card-body {
  margin-top: var(--sp-6);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--text-muted);
}
/* ---- Line-mask reveal ------------------------------------------------ */
/* One clipping box per rendered line; the line slides up out of it. The
   from-state is set in JS, never here — a JS failure must leave the copy
   readable rather than blank (CLAUDE.md Rev 9). */
.ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.14em;    /* descender room, or 'g' and 'y' get clipped */
  margin-bottom: -0.14em;
}
.ln__i { display: block; will-change: transform, opacity; }
.no-motion .ln__i { opacity: 1 !important; transform: none !important; }

/* ---- Tablet and below: one column, image above copy ------------------ */
/* Portrait counts as stacked here too — see the note in css/hero.css. A 1024px
   wide iPad in portrait is past the width line but is shaped like a tall phone,
   and was taking the desktop layout. */
@media (max-width: 1023px), (orientation: portrait) {
  .subs { padding: var(--sp-24) var(--gutter); }
  .subs__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
    margin-bottom: var(--sp-16);
  }
  .subs__grid { gap: var(--sp-4); }
  .subs__row { grid-template-columns: 1fr; gap: var(--sp-4); }
  .subs__row--a .subs__cell--short,
  .subs__row--a .subs__cell--long,
  .subs__row--b .subs__cell--short,
  .subs__row--b .subs__cell--long { grid-column: 1; }

  /* Every card takes the same shape when stacked — image on top, copy below —
     so the rhythm stays regular instead of inheriting the desktop variety. */
  .subs__cell--lr,
  .subs__cell--ti,
  .subs__cell--it {
    grid-template-columns: 1fr;
    grid-template-rows: clamp(220px, 42vw, 340px) auto;
    height: auto;              /* stacked, the copy sets the card's height */
  }
  .subs__cell .subs__figure { grid-row: 1; }
  .subs__cell .subs__copy   { grid-row: 2; }
  /* Stacked, every figure is wide and shallow — size the phone by width. */
  .subs__cell--lr .subs__figure img,
  .subs__cell--ti .subs__figure img,
  .subs__cell--it .subs__figure img { width: 46%; height: auto; }
}

@media (max-width: 767px) {
  .subs { padding: var(--sp-20) var(--gutter); }
  .subs__title, .subs__lead { text-align: center; }
  .subs__head { align-items: center; }
  .subs__lead { margin-inline: auto; }
  .subs__card-body { font-size: var(--fs-base); }
  .subs__copy { gap: var(--sp-8); }
}