/* ==========================================================================
   Brava · athlete profile (Matchday)
   Served at bravamade.com/profile.css. Linked by every live profile the
   Worker renders (worker/src/routes/render.ts) and by the sample at
   /sample/. Load order: /assets/fonts/fonts.css, /assets/brava.css, then
   this file. Tokens and b-* components come from brava.css; this sheet only
   lays out the profile. Spec: design/matchday/SPEC.md "Athlete profile".

   Grounds: Bone for reading (identity, stats, facts, contact), one Stone
   band for the verifier and one for "In her words", Night only for film.
   Volt appears on light ground only inside .b-chip-verified.
   ========================================================================== */

body { margin: 0; }

/* Shared horizontal inset: the gutter on phones, the 1200px grid edge on wide
   screens (used by rows that sit on a full-bleed photo). */
.pf-hero { --edge: max(var(--gutter), calc((100% - var(--max)) / 2)); }

/* P0 + P1 hero -------------------------------------------------------------- */
/* Full-bleed photo with only her name on it. The top row rides a top scrim,
   the name a strong bottom scrim. With no photo the slot falls back to a
   Night block with the same name (.pf-hero--nophoto). */
.pf-hero { height: 82vw; min-height: 260px; max-height: 560px; --focus: var(--white); }
.pf-hero > img, .pf-hero > picture > img { object-position: 50% 35%; }
.pf-hero::after { background: var(--scrim-top), var(--scrim-up-strong); }
.pf-hero--nophoto { height: auto; min-height: 240px; max-height: none; display: flex; flex-direction: column; justify-content: flex-end; }
.pf-hero--nophoto::after { content: none; }
/* Headshot fallback: a portrait 4:5 photo stretched across the slot crops to
   her eyes, so it sits as a portrait panel on the Night hero instead. */
.pf-hero--portrait > img { position: absolute; top: 0; right: 0; width: auto; height: 100%; aspect-ratio: 4 / 5; object-position: 50% 30%; }

.top-bar {
  position: absolute; z-index: 2; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  height: 52px; padding: 0 var(--edge);
}
.pf-mark { display: inline-flex; align-items: center; min-height: 44px; }
.pf-mark img { display: block; height: 16px; width: auto; }
.pf-share { margin-right: -10px; color: var(--white); }

.pf-hero__over { position: absolute; z-index: 1; left: 0; right: 0; bottom: 16px; padding: 0 var(--edge); }
.pf-hero--nophoto .pf-hero__over { position: relative; bottom: auto; padding-top: 72px; padding-bottom: 20px; }
/* Her name: Barlow Condensed 700 at 56px, stepping down for long names so
   the longest line (--name-ch characters) always fits the measure. */
.pf-hero__name {
  color: var(--white);
  font-size: clamp(34px, calc((100vw - 2 * var(--gutter)) / (var(--name-ch, 9) * 0.46)), 56px);
  overflow-wrap: anywhere;
}
.pf-hero__name--wrap span { display: block; }

/* Sample badge on photos (SPEC §0.3.6) uses brava.css .b-photo__badge. */
.gallery__item .b-photo__badge, .reel__player .b-photo__badge { pointer-events: none; }

/* P2 identity --------------------------------------------------------------- */
.pf-identity { display: flex; flex-direction: column; gap: 4px; padding: 16px var(--gutter) 0; }
.pf-identity__role { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.35; }
.pf-identity__meta { margin: 0; font-size: 15px; line-height: 1.45; color: var(--fg-2); }
.pf-identity__height { white-space: nowrap; }
.pf-identity__meta .b-entered, .pf-identity__meta .b-stat-row__mark { margin-left: 4px; font-size: 13px; }
.pf-identity__meta .b-stat-row__mark { display: inline-flex; vertical-align: -1px; }
.pf-identity__film { align-self: flex-start; font-size: 15px; }

/* P3 stat strip ------------------------------------------------------------- */
.pf-strip { margin: 8px var(--gutter) 0; }
/* Long position labels wrap (never cut off); balanced so a unit like "%"
   is never left alone on a line. */
.pf-strip .b-stat__label { text-wrap: balance; }

/* P4 verifier: Stone band ---------------------------------------------------- */
.pf-verifier { display: flex; flex-direction: column; gap: 6px; padding: 16px var(--gutter); background: var(--stone); }
.pf-identity + .pf-verifier { margin-top: 24px; }
.pf-verifier p { margin: 0; }
.pf-verifier__name { font-weight: 600; font-size: 20px; line-height: 1.25; }
.pf-verifier__role { font-size: 15px; line-height: 1.45; color: var(--fg-2); }
.pf-verifier .pf-verifier__said { margin: 4px 0 6px; font-size: 15px; line-height: 1.5; }
.pf-verifier__email { align-self: flex-start; color: var(--ink); text-decoration: none; }

.pf-aside__contact { display: none; }

/* P5 film: Night band ------------------------------------------------------ */
.pf-film { display: flex; flex-direction: column; gap: 12px; padding: 32px var(--gutter) 40px; }
.pf-film > p { margin: 0; }
.pf-film__title { margin: 0; font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }

/* Reel block: 16:9 poster with a 64px play circle and a duration pill.
   Portrait (phone) reels letterbox quietly inside the frame. */
.reel__player { position: relative; margin: 4px calc(-1 * var(--gutter)) 0; aspect-ratio: 16 / 9; background: var(--surface); }
.reel__player video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--night); }
.reel__player.is-poster video { object-fit: cover; }
.pf-reel__play {
  position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 0 4px; border: 0; border-radius: 50%; background: var(--volt); color: var(--night); cursor: pointer;
}
.pf-reel__play:hover { background: var(--volt-pressed); }
.pf-reel__play[hidden] { display: none; }
.pf-reel__play svg { width: 18px; height: 20px; }
.pf-reel__dur {
  position: absolute; right: 12px; bottom: 12px; display: none; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--pill); background: rgba(13, 13, 15, 0.7); color: var(--bone); font: 500 13px/1 var(--font-sans);
}
.reel__player.is-poster .pf-reel__dur:not(:empty) { display: inline-flex; }
.footage__hint { font-size: 14px; color: var(--fg-2); }

/* Clip rows: fully tappable, Night hairlines between. */
.pf-clips { display: flex; flex-direction: column; margin-top: 4px; border-bottom: 1px solid var(--rule); }
.pf-clip {
  display: flex; align-items: center; gap: 12px; min-height: 88px; padding: 8px 0;
  border-top: 1px solid var(--rule); color: var(--fg); text-decoration: none;
}
.footage__thumb {
  position: relative; flex: 0 0 128px; width: 128px; aspect-ratio: 16 / 9; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--surface);
}
.footage__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.footage__thumb--icon { color: var(--volt); }
.footage__thumb--icon svg { width: 18px; height: 20px; }
.footage__thumb--icon span { font: 700 13px/1 var(--font-cond); letter-spacing: 0.02em; text-transform: uppercase; }
.pf-clip__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf-clip__num { font: 600 13px/1.2 var(--font-cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.pf-clip__title { font-weight: 500; font-size: 16px; line-height: 1.3; }
.pf-clip__meta { font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.footage__watch { width: 16px; height: 16px; flex: 0 0 16px; color: var(--fg-2); }
.pf-clip:hover .pf-clip__title { text-decoration: underline; text-underline-offset: 3px; }

/* Reading sections (P6 to P10) ---------------------------------------------- */
.pf-section { padding: 40px var(--gutter) 0; }
.pf-section > .b-label, .pf-about > .b-label { margin-bottom: 12px; }
.pf-section > .b-meta { margin: -6px 0 12px; }
.pf-fact__value { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }

/* P8 honors */
.accolades__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--rule); }
.accolade { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 52px; padding: 10px 0; border-top: 1px solid var(--rule); }
.accolade__title { font-size: 16px; line-height: 1.4; }
.accolade__year { flex: 0 0 auto; font: 600 15px/1 var(--font-cond); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; color: var(--fg-2); }

/* Photos: a rail on phones, a two-up grid beside the stats on desktop. No
   overflow clipping on the tiles, so the focus ring on the zoom button
   shows; the rail's block padding keeps its scroll box from clipping it. */
.gallery .b-rail { margin: 0 calc(-1 * var(--gutter)); padding-block: 4px; }
.gallery__item { position: relative; aspect-ratio: 4 / 3; margin: 0; background: var(--stone); }
.gallery__item img, .gallery__item picture { display: block; width: 100%; height: 100%; }
.gallery__item img { object-fit: cover; object-position: 50% 30%; }
.gallery__zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* The 4:5 headshot sits whole as a portrait panel on Night, as in the hero,
   instead of a forehead-to-chin crop (SPEC §0.3.7). */
.gallery__headshot { background: var(--night); }
.gallery__headshot img { object-fit: contain; }

/* P9 in her words: Stone band. Her opening paragraph is set large. */
.pf-words { margin-top: 40px; padding: 32px var(--gutter); background: var(--stone); }
.bio__text { max-width: 62ch; }
.bio__text p { margin: 16px 0 0; font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.bio__text p:first-child { margin-top: 12px; font-weight: 500; font-size: 22px; line-height: 1.35; letter-spacing: -0.005em; }

/* P10 provenance */
.pf-about { padding: 32px var(--gutter) 0; }
.pf-about p { margin: 0; max-width: 62ch; text-wrap: pretty; font-size: 14px; line-height: 1.5; color: var(--fg-2); }

/* P11 contact --------------------------------------------------------------- */
.contact-cta { display: flex; flex-direction: column; gap: 10px; padding: 40px var(--gutter) 24px; }
.contact-cta__title { margin: 0; font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; }
.contact-cta__line { margin: 0 0 6px; font-size: 16px; line-height: 1.5; color: var(--fg-2); }
.contact-cta__note { margin: 0; font-size: 14px; line-height: 1.45; color: var(--fg-2); text-align: center; text-wrap: balance; }
.contact-cta .pf-coach-link { align-self: center; font-size: 15px; text-align: center; }

.pf-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 var(--gutter); padding: 18px 0 32px; border-top: 1px solid var(--rule); }
.pf-foot__mark { display: inline-flex; align-items: center; min-height: 44px; }
.pf-foot__mark img { display: block; height: 14px; width: auto; }
.pf-foot p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.pf-layout + .pf-foot { margin-top: 40px; }

/* Sticky bars ---------------------------------------------------------------- */
/* Coach view: name + 'Email Maya'. Sample: '$349 one time' + 'Start her
   profile'. Hidden (and inert) until the script shows them. */
.pf-bar:not(.is-visible) { visibility: hidden; transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 0s linear 150ms; }
.pf-bar__who { display: flex; flex-direction: column; min-width: 0; margin: 0; font-weight: 500; font-size: 14px; line-height: 1.3; }
.pf-bar__who span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf-bar__who span + span { color: var(--fg-2); }
.pf-bar .b-pill { flex: 0 0 auto; }
.pf-bar .b-sticky-bar__price .b-meta { white-space: nowrap; }

/* Toast ('Link copied'). */
.pf-toast {
  position: fixed; z-index: 120; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 10px 16px; border-radius: var(--pill); background: var(--ink); color: var(--white);
  font: 500 14px/1.2 var(--font-sans); transform: translate(-50%, 8px); opacity: 0; pointer-events: none;
  transition: opacity 150ms var(--ease), transform 150ms var(--ease);
}
.pf-toast:empty { display: none; }
.pf-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* Tablet --------------------------------------------------------------------- */
@media (min-width: 768px) {
  .pf-hero { height: min(56.25vw, 640px); max-height: none; }
  .pf-hero--nophoto { height: auto; min-height: 360px; }
  /* Wide screens: the portrait panel aligns to the grid edge and her name
     sits on Night to its left. */
  .pf-hero--portrait { height: min(48vw, 560px); }
  .pf-hero--portrait > img { right: var(--edge); }
  .pf-hero--portrait::after { background: var(--scrim-top); }
  .pf-hero__over { bottom: 40px; }
  .pf-hero__name { font-size: clamp(56px, calc(min(100vw, 1200px) * 0.62 / (var(--name-ch, 9) * 0.46)), 96px); }
  .reel__player { margin-left: 0; margin-right: 0; }
  .gallery .b-rail { margin: 0; }
}

/* Desktop: 12 columns. Left 5 sticky (identity, strip, verifier, contact
   pill), right 7 (film, stats, facts, honors, photos, her words, provenance). */
@media (min-width: 1024px) {
  .pf-layout {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start;
    max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 56px var(--gutter) 0;
  }
  .pf-aside { grid-column: 1 / span 5; padding-right: 24px; }
  .pf-content { grid-column: 6 / span 7; }
  .pf-identity, .pf-section, .pf-about { padding-left: 0; padding-right: 0; }
  .pf-identity { padding-top: 0; }
  .pf-identity__role { font-size: 20px; }
  .pf-identity__meta { font-size: 16px; }
  .pf-strip { margin: 24px 0 0; }
  .pf-verifier { padding: 24px; }
  .pf-identity + .pf-verifier { margin-top: 32px; }
  .pf-aside__contact { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .pf-film { padding: 32px 32px 40px; }
  .pf-content > .pf-section:first-child { padding-top: 0; }
  .pf-section { padding-top: 56px; }
  .pf-words { margin-top: 56px; padding: 40px; }
  .pf-about { padding-top: 40px; }
  .gallery .b-rail { --rail-cols: 2; gap: 16px; }
  .contact-cta { display: none; }
  .pf-foot, .pf-layout + .pf-foot { margin: 80px max(var(--gutter), calc((100% - var(--max)) / 2)) 0; }
  .pf-bar--contact { display: none; }
}
/* /sample/ keeps its column in the flow (.pf-aside--flow): there the parent
   sticky bar is the sticky element, and it hides while her contact pill is
   on screen. */
@media (min-width: 1024px) and (min-height: 760px) {
  .pf-aside:not(.pf-aside--flow) { position: sticky; top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-toast, .pf-bar:not(.is-visible) { transition: none; }
}