/* ============================================================
   JIMEO — app landing page
   Centred title/subtitle/badge, then a horizontal row of phone
   shots. The row reuses .cases__row / .cases__nav / .cases__arrow
   from sections.css (same scroller, same controls) — only the card
   itself is new, since these carry a title above rather than
   copy overlaid on the image.
   ============================================================ */

.jimeo-hero {
  padding: calc(var(--nav-h) + clamp(var(--s-5), 12vh, var(--s-6))) 0 var(--s-4);
}

/* .cases__row carries a top margin to clear the section title it usually
   sits under. There is no title here, so it is just a gap. */
.jimeo-phones .cases__row { margin-top: 0; }

/* the wordmark stands in for the h1's type. Width tracks the viewport so it
   scales with the page rather than sitting at one fixed size, capped so it
   never outgrows the measure the subtitle sets below it */
.jimeo-hero__title {
  margin: 0;
  line-height: 0; /* the img is the whole line: no strut, no gap under it */
}
.jimeo-hero__title img {
  display: inline-block;
  width: clamp(192px, 26vw, 312px);
  height: auto;
}

/* ---- meta ----
   Description against the labelled facts, seven twelfths to five: the copy is
   the substance here, but the facts column now carries three rows including a
   pair of links, so it needs more than the quarter it had. Written as 7fr/5fr
   rather than a span of the 12-col grid, so neither side jumps a whole column
   as the viewport moves. */
/* no padding of its own: the phone row below is a .section and already
   brings its own generous top padding, and doubling the two left a dead
   band between the meta and the shots */
.jimeo-meta__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-4) clamp(var(--s-4), 6vw, var(--s-6));
  align-items: start;
}

/* still no max-width: at seven twelfths the column already lands the copy at
   50-53ch across the container's range, which is a measure in its own right.
   A cap would only bite on the widest screens and leave the column part
   empty, and the facts beside it have no cap to line up against either. */
.jimeo-meta__description {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
}

.jimeo-meta__facts {
  display: grid;
  gap: var(--s-3);
  margin: 0;
}

/* the label column is fixed so every value starts on the same edge, the way
   the labels themselves already line up */
.jimeo-meta__row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: var(--s-2);
}

/* same eyebrow treatment the section headings use, one step dimmer: these
   name the value next to them rather than announcing a section */
.jimeo-meta__label {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.jimeo-meta__value {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1);
}

.jimeo-meta__date {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Reads as one phrase — "Privacy policy, Support" — while staying two
   separate destinations. Normal inline flow rather than the flex .value
   sets: a flex gap cannot put a comma between items, and it spaced the pair
   like two unrelated chips. The comma and the word space after it are text
   in the markup, so the line sets the way a written list does. */
.jimeo-meta__links {
  display: block;
  color: var(--ink);
}
.jimeo-meta__link {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* ---- App Store badge ----
   Standard black "Download on the App Store" mark. Plain and unlinked
   until there is a real App Store URL to send it to — swap the <div>
   for an <a href="…"> in jimeo.html once jimeo ships. */
.badge-appstore {
  display: inline-flex;
}
/* pre-launch state. Opacity only: Apple's guidelines forbid redrawing or
   recolouring the lockup, so the mark itself is untouched and just sits
   back. Drop this class the day there's a listing to link to. */
.badge-appstore--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
/* height only: the official artwork keeps its own proportions, and Apple's
   guidelines don't allow the lockup to be stretched or recoloured. 38px was
   set to match the category pills that used to sit under this badge. */
.badge-appstore img { display: block; height: 38px; width: auto; }

/* ---- phone cards ----
   One shared height for every shot on the row (the Apple screenshots page
   is the reference: tiles of very different widths, all locked to one
   height, bottom-aligned). Width is never set — each <img> is height:100%
   / width:auto, a replaced element sizing itself off its own aspect ratio,
   so the frame (and the card) simply become as wide as their photos need.
   That's also why the middle card comes out so much wider: it holds four
   of those same full-height photos in a row instead of one.
   50% taller than the original clamp(346px, 37vw, 559px) — the frame's
   padding stays fixed at --s-4, so the extra height goes entirely to the
   images via their existing height:100%, rather than growing the padding
   along with them. */
:root { --phone-card-h: clamp(519px, 55.5vw, 838.5px); }

.phone-card {
  flex: 0 0 auto; /* hold natural width — the row overflows and scrolls rather than squeezing cards to fit */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  scroll-snap-align: start;
}

/* a fixed two-line band for the title, so every card reserves the same room
   for it and their screenshots all land at one height however the text wraps.
   --phone-pad is the card's own inset, a step up from the --s-4 it used to
   borrow, so it no longer tracks that token. */
:root {
  --phone-title-h: calc(2 * var(--lh-h2) * var(--fs-h2));
  --phone-pad: 60px;
  /* the shots at 92% of the height the card used to give them — the frame
     then sizes itself around them (see below), so shrinking the photos
     closes the card up rather than leaving a band of dead space under it */
  --phone-img-h: calc(
    0.92 * (var(--phone-card-h) - 2 * var(--phone-pad)
            - var(--phone-title-h) - var(--s-3))
  );
}

/* the frame IS the card now: title above the image row, both inside the same
   padded, rounded, backgrounded box. The title is taken out of flow (see
   below), so the top padding has to carry its band plus the gap under it —
   that keeps the visible inset even on all four sides.
   Height is left to the content: the images carry an explicit height and the
   padding adds the rest, so the inset stays even top and bottom. Every card
   still lands at one height, since they all share --phone-img-h. */
.phone-card__frame {
  position: relative;
  padding: calc(var(--phone-pad) + var(--phone-title-h) + var(--s-3))
           var(--phone-pad) var(--phone-pad);
  border-radius: var(--radius);
  background: var(--bg-card);
  overflow: hidden;
}

/* absolutely positioned on purpose: an out-of-flow box contributes nothing
   to its parent's intrinsic width, so the frame is sized by its screenshots
   alone and the side padding stays exactly --phone-pad. In flow — at any
   width, including width:0 with a percentage min-width — a long title instead
   drags the whole frame open and the inset balloons. The left/right offsets
   then span it across the frame's content box to centre over the shots. */
.phone-card__title {
  position: absolute;
  top: var(--phone-pad);
  left: var(--phone-pad);
  right: var(--phone-pad);
  height: var(--phone-title-h);
  margin: 0;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: -0.02em;
  font-weight: var(--fs-heading-weight);
  text-align: center;
}

/* the old .phone-card__frame row: sets the shots' height, which the frame
   above then wraps its padding around */
.phone-card__images {
  height: var(--phone-img-h);
  display: flex;
  align-items: center;
  gap: var(--gutter); /* same rhythm as the gap between cards below */
}

.phone-card__images img {
  height: 100%;
  width: auto;
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  /* swiping is the affordance here, so the arrows (hidden below this width
     in sections.css) would be redundant */
  :root { --phone-card-h: min(144vw, 757.5px); }

  /* two columns stop paying for themselves once the description is down to
     a few words a line */
  .jimeo-meta__grid { grid-template-columns: minmax(0, 1fr); }

  /* ---- phone cards: one per screen, next one peeking ----
     Same treatment as .case-card on the home page: the card runs 28px short
     of the content column, the row gap halves, and the leftover plus the page
     margin leaves a fixed 40px sliver of the next card at every width.

     Sizing flips from height-driven to width-driven to get there. On desktop
     the shots carry an explicit height and the frame becomes as wide as they
     need; here the card's width is the fixed quantity, so the shots take
     their width from it and their height follows the 700x1444 artwork. The
     inset drops from 60px to 24px — at this card width the desktop padding
     would eat most of the shot. */
  .jimeo-phones .cases__row { gap: 12px; }
  .phone-card { flex: 0 0 calc(100% - 28px); }
  :root { --phone-pad: 24px; }
  .phone-card__images { height: auto; }
  .phone-card__images img { width: 100%; height: auto; }

  /* the band under the title reads too open at this card width, from two
     causes. The gap itself comes down a step, --s-3 to --s-2; and the band
     keeps reserving two lines — it has to, so all three shots start at the
     same height however the titles wrap — but the text now sits at the
     bottom of it. A one-line title ("Share with friends") therefore lands
     right above its shot rather than leaving the spare line stranded in
     between, and the gap looks the same on all three cards instead of
     changing with the wrap. */
  .phone-card__frame {
    width: 100%;
    padding-top: calc(var(--phone-pad) + var(--phone-title-h) + var(--s-2));
  }
  .phone-card__title {
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }

  /* the four-shot card can't sit four across in one screen's width, so the
     shots stack in a single grid cell and take turns instead (js/jimeo.js).
     Grid rather than absolute positioning keeps them in flow, so the cell is
     still sized by the artwork and the card matches its neighbours' height. */
  .phone-card--b .phone-card__images {
    display: grid;
    gap: 0;
  }
  .phone-card--b .phone-card__images > img {
    grid-area: 1 / 1;
    transition: opacity 500ms ease;
  }
  /* default, and what's left if the script never runs: the first shot alone */
  .phone-card--b .phone-card__images > img:not(:first-child) { opacity: 0; }
  /* once the script takes over, it owns which one shows */
  .phone-card--b .phone-card__images.is-rotating > img { opacity: 0; }
  .phone-card--b .phone-card__images.is-rotating > img.is-active { opacity: 1; }
}

@media (max-width: 560px) {
  /* the label column costs more than it earns here: it squeezes the pills
     into wrapping one per line. Stack instead. */
  .jimeo-meta__row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--s-1);
  }

  /* with each row stacked to label-over-value, the two rows are narrow enough
     to sit beside each other rather than run down the page — which puts DATE
     back on the same line as AVAILABLE. Intrinsic columns packed left, not
     two halves: the badge and the date only need the room they need, and
     splitting the width down the middle would strand them at opposite ends.
     align-items: start is what actually lines the two labels up, since the
     badge makes its column the taller of the two. */
  .jimeo-meta__facts {
    grid-template-columns: auto auto;
    justify-content: start;
    align-items: start;
    column-gap: clamp(var(--s-4), 10vw, var(--s-5));
  }
}