/* =============================================================
   FIZ — Showcase pieces for the marketing pages
   Real app screenshots in a device frame, real patch art, and the
   "what it costs" deal rows. Shared by /, /for-events/ and
   /for-coaches/ so a phone looks the same on all three.

   ⚠️ Every .phone shows a REAL screen rendered by
   test/marketing/landing_shots_test.dart (FIZ_SHOTS=1), never a
   screen drawn in CSS. Fixtures are made up (Coldwater Classic,
   Harbourline): never a real organiser's event or art.
   Images live in /media/app/ (720w WebP) and /media/patches/.

   Loaded AFTER editorial.css. Version with ?v= like editorial.css.
   ============================================================= */

/* ====== DEVICE FRAME ======
   Screens are 1320x2868 plates with the status-bar safe area baked
   in, so the island sits in empty space. Width is set by --w. */
.phone {
  --w: 300px;
  position: relative;
  width: var(--w);
  /* Height comes from the screen's own aspect, never from the parent:
     as a flex/grid item the frame used to stretch, and object-fit then
     cropped the sides of the screenshot. */
  height: auto;
  align-self: flex-start;
  padding: calc(var(--w) * 0.032);
  border-radius: calc(var(--w) * 0.16);
  background: linear-gradient(160deg, #2A2A2E 0%, #0B0B0C 38%, #0B0B0C 70%, #1E1E21 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 40px 80px -30px rgba(0, 0, 0, 0.75),
    0 18px 36px -18px rgba(0, 0, 0, 0.55);
  flex: none;
}
.phone__screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 2868;
  overflow: hidden;
  border-radius: calc(var(--w) * 0.13);
  background: #0A0A0B;
}
.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.phone__screen::after {
  /* The island. Plates leave the status bar empty for it. */
  content: '';
  position: absolute;
  top: calc(var(--w) * 0.035);
  left: 50%;
  width: 31%;
  height: calc(var(--w) * 0.088);
  transform: translateX(-50%);
  border-radius: 100px;
  background: #000;
}
/* A cropped plate (scrolled region of a screen) has no status bar. */
.phone--bare .phone__screen::after { display: none; }

[data-theme="light"] .phone {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 70px -34px rgba(0, 0, 0, 0.45),
    0 16px 30px -18px rgba(0, 0, 0, 0.3);
}

/* ====== HERO FAN ======
   Three phones and two patches, one composition. The middle phone
   leads; the side phones sit behind and lower. On a phone-width
   screen the side phones tuck in so nothing scrolls sideways. */
.fan {
  position: relative;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  aspect-ratio: 1 / 1.08;
}
.fan .phone { position: absolute; top: 0; }
/* Widths are px-capped viewport units, not % of the fan: the frame's
   radii and island are calc()s on --w and need a length. */
.fan__mid { --w: min(46vw, 294px); left: calc(50% - var(--w) / 2); z-index: 3; }
.fan__left, .fan__right { --w: min(39vw, 250px); top: 11%; }
.fan__left { left: 0; z-index: 2; transform: rotate(-6deg); }
.fan__right { right: 0; z-index: 1; transform: rotate(6deg); }
.fan .patch-img { position: absolute; z-index: 4; }
.fan__patch-a { width: 32%; left: -9%; bottom: -3%; transform: rotate(-9deg); }
.fan__patch-b { width: 28%; right: -2%; bottom: 14%; transform: rotate(8deg); }
@media (max-width: 600px) {
  .fan { aspect-ratio: 1 / 1.22; }
  .fan__patch-a { left: 0; }
  .fan__patch-b { right: 0; }
}

/* ====== PATCH ART ======
   Transparent PNGs of embroidered patches. The shadow is what makes
   them read as an object lying on the page. */
.patch-img {
  height: auto;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}
[data-theme="light"] .patch-img {
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.22)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

/* ====== PAIR / DUO ======
   Two phones side by side, the second lower. Used in spreads. */
.duo {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 4%;
  padding-bottom: 8%;
}
.duo .phone { --w: min(42vw, 260px); }
.duo .phone:nth-child(2) { margin-top: 12%; }
@media (max-width: 600px) {
  .duo .phone { --w: 44vw; }
}

/* Single phone, centred, for a spread column. */
.solo { display: flex; justify-content: center; }
.solo .phone { --w: min(70vw, 300px); }

/* ====== SHOT CAPTION ====== */
.shot-cap {
  margin-top: 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted, #71717A);
  text-align: center;
}

/* ====== DEAL ROWS ======
   What something costs, as label + figure rows on hairlines. The
   figure is the hero of each row. */
.deal { border-top: 1px solid var(--hairline, rgba(10, 10, 10, 0.12)); }
.deal__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--hairline, rgba(10, 10, 10, 0.12));
}
.deal__t { font-size: 16px; font-weight: 600; line-height: 1.4; }
.deal__d { grid-column: 1 / -1; font-size: 14px; line-height: 1.6; color: var(--text-muted, #71717A); max-width: 560px; }
.deal__v {
  font-family: 'Archivo Black', 'Inter', sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.deal__v--accent { color: var(--accent, #FF4848); }

/* ====== TICK LIST ====== */
.ticks { display: grid; gap: 12px; }
.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 15px;
  line-height: 1.5;
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.3em;
  width: 12px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
}
.ticks--2 { grid-template-columns: 1fr; column-gap: 40px; }
@media (min-width: 720px) { .ticks--2 { grid-template-columns: 1fr 1fr; } }

/* ====== SHELF ======
   A row of phones that scrolls sideways on small screens and sits
   in a row on large ones. Each item: phone + caption. */
.shelf {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px 16px 32px;
  margin: 0 -16px;
  scrollbar-width: none;
}
.shelf::-webkit-scrollbar { display: none; }
.shelf__item { scroll-snap-align: center; flex: none; display: flex; flex-direction: column; align-items: center; }
.shelf .phone { --w: 236px; }
.shelf__t { margin-top: 18px; font-size: 15px; font-weight: 700; text-align: center; }
.shelf__d { margin-top: 4px; max-width: 236px; font-size: 13px; line-height: 1.5; color: var(--text-muted, #71717A); text-align: center; }
@media (min-width: 1100px) {
  .shelf { justify-content: center; overflow: visible; margin: 0; padding: 8px 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .fan .phone, .fan .patch-img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .fan:hover .fan__left { transform: rotate(-8deg) translateX(-6px); }
  .fan:hover .fan__right { transform: rotate(8deg) translateX(6px); }
  .fan:hover .fan__patch-a { transform: rotate(-12deg) translateY(-6px); }
}

/* ====== BROWSER FRAME ======
   A real partner.joinfiz.com capture (1440x928 WebP in /media/product/)
   inside a quiet window chrome. Three dots and a hairline, nothing
   else: the screenshot is the subject. */
.browser {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #0B0B0C;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 50px 90px -40px rgba(0, 0, 0, 0.8),
    0 20px 40px -24px rgba(0, 0, 0, 0.6);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  background: #141416;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #2E2E32; }
.browser__url {
  margin-left: 12px;
  font-size: 11px;
  font-weight: 500;
  color: #71717A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser img { width: 100%; height: auto; }
[data-theme="light"] .browser {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.1),
    0 40px 80px -40px rgba(0, 0, 0, 0.45),
    0 16px 32px -20px rgba(0, 0, 0, 0.3);
}