/* ==========================================================================
   pages.css  —  Welavyn content pages            v2, 17 Sep 2026
   --------------------------------------------------------------------------
   The new pages are built almost entirely from the homepage's own components
   (section bands, three-across icon cards, image+text splits, ingredient
   cards, pricing cards, the .faq accordion). Those classes are all already in
   the tree-shaken styles.css because index.html uses them.

   This file therefore only covers the four things the homepage has no
   equivalent for. Everything else is lifted from index.html unchanged.
     1. the sub-page nav in the legal header
     2. the comparison table (homepage has no table component)
     3. the "awaiting real reviews" placeholder slot
     4. a small prose block for the long-form article body
   ========================================================================== */

/* 1 — sub-page nav ------------------------------------------------------- */
.legal-header .wv-nav { display: none; }
@media (min-width: 64rem) {
  .legal-header .wv-nav {
    display: flex; align-items: center; gap: 1.5rem; margin: 0 auto;
    font-size: .9rem; font-weight: 500; color: var(--color-on-surface-variant);
  }
  .legal-header .wv-nav a { color: inherit; transition: color .15s cubic-bezier(.4,0,.2,1); }
  .legal-header .wv-nav a:hover { color: #064a3a; }
  .legal-header .wv-nav a[aria-current="page"] { color: #064a3a; font-weight: 700; }
}

/* 2 — comparison table --------------------------------------------------- */
.wv-cmp { border: 1px solid var(--color-outline-variant); border-radius: 2.5rem; overflow: hidden; background: var(--color-surface); }
.wv-cmp table { width: 100%; border-collapse: collapse; }
.wv-cmp th, .wv-cmp td {
  padding: 1rem 1.15rem; text-align: left; font-size: .93rem; line-height: 1.6;
  border-bottom: 1px solid var(--color-outline-variant); vertical-align: top;
  color: var(--color-on-surface-variant);
}
.wv-cmp thead th { background: #064a3a; color: #fff; padding: 1.5rem 1.15rem; vertical-align: bottom; }
.wv-cmp thead img { display: block; margin: 0 auto .7rem; width: 118px; height: auto; }
.wv-cmp thead .wv-cmp-mark {
  display: grid; place-items: center; margin: 0 auto .7rem; width: 72px; height: 72px;
  border-radius: 9999px; background: #ffffff1a; border: 1px dashed #ffffff4d; color: #ffffffcc;
}
.wv-cmp thead .wv-cmp-mark .material-symbols-outlined { font-size: 2rem; }
.wv-cmp thead strong { display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; color: #fff; text-align: center; }
.wv-cmp thead span.wv-cmp-sub { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 500; color: #ffffff9e; text-align: center; }
.wv-cmp tbody th { width: 11.5rem; font-weight: 700; color: var(--color-primary); background: var(--color-surface-container-low); }
.wv-cmp tr:last-child th, .wv-cmp tr:last-child td { border-bottom: 0; }
.wv-cmp .wv-yes { color: #10b981; font-weight: 700; }
.wv-cmp .wv-no  { color: #b4763a; font-weight: 700; }
@media (max-width: 52rem) {
  .wv-cmp { border-radius: 2rem; }
  .wv-cmp thead { display: none; }
  .wv-cmp table, .wv-cmp tbody, .wv-cmp tr, .wv-cmp th, .wv-cmp td { display: block; width: auto; }
  .wv-cmp tr { border-bottom: 1px solid var(--color-outline-variant); }
  .wv-cmp tr:last-child { border-bottom: 0; }
  .wv-cmp tbody th { width: auto; background: var(--color-surface-container); border-bottom: 0; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
  .wv-cmp td { border-bottom: 0; padding-top: .3rem; }
  .wv-cmp td::before {
    content: attr(data-l); display: block; font-size: .68rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .1em; color: #8a948f; margin-bottom: .15rem;
  }
}

/* 3 — placeholder for real reviews, pending client confirmation ----------- */
.wv-slot {
  border: 1px dashed #b9c4bf; border-radius: 2.5rem; background: var(--color-surface-container-low);
  padding: 2.4rem 1.5rem; text-align: center;
}
.wv-slot .material-symbols-outlined { font-size: 2.1rem; color: #8a948f; }
.wv-slot h3 { font-family: var(--font-display); font-weight: 800; color: #12382e; margin-top: .6rem; font-size: 1.05rem; }
.wv-slot p { color: var(--color-on-surface-variant); font-size: .9rem; line-height: 1.6; max-width: 34rem; margin: .5rem auto 0; }

/* 4 — long-form prose block ---------------------------------------------- */
.wv-prose > * + * { margin-top: 1rem; }
.wv-prose p, .wv-prose li { color: var(--color-on-surface-variant); font-size: 1rem; line-height: 1.75; }
.wv-prose h3 { font-family: var(--font-display); color: var(--color-primary); font-size: 1.15rem; font-weight: 800; margin-top: 1.9rem; }
.wv-prose strong { color: var(--color-primary); font-weight: 700; }
.wv-prose a { color: #0b705a; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.wv-prose ul { display: grid; gap: .55rem; }
.wv-prose ul li { position: relative; padding-left: 1.5rem; list-style: none; }
.wv-prose ul li::before { content: ""; position: absolute; left: .3rem; top: .68rem; width: .4rem; height: .4rem; border-radius: 9999px; background: #34c759; }

/* 5 — two small additions the homepage has no equivalent for --------------- */
/* four-across grid: the homepage only ever goes to three */
.wv-grid-4 { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .wv-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .wv-grid-4 { grid-template-columns: repeat(4, 1fr); } }
/* sub-page h1: smaller than the homepage hero, which is set for one line of copy */
.wv-h1 { font-size: clamp(2.1rem, 3.4vw, 3.4rem); }

/* ==========================================================================
   v3 — measured to the client's design guidelines (17 Sep 2026)
   Type scale and the one-section-one-screen rule come from his own site:
     h2 SECTION default 43.2px / 1.25 / max 2 lines / 672px column
     h2 STATEMENT      57.6px / 1.04 / max 2 lines / full 1136px, centred
     h2 half-column    36px   / 1.25 / max 2 lines   <- steps DOWN, never 43.2
   ========================================================================== */

/* half-column heading: the step-down that stops 3-line blocks in 548px splits */
.wv-h2-half { font-size: 36px; line-height: 1.25; }

/* STATEMENT heading: used exactly once per page, at its strongest moment */
.wv-h2-statement { font-size: 57.6px; line-height: 1.04; letter-spacing: -.025em; }
@media (max-width: 52rem) { .wv-h2-statement { font-size: 36px; line-height: 1.15; } }

/* --- scroll-snap rail -----------------------------------------------------
   Replaces tall stacked card grids. Same [data-rail] / [data-rail-prev] /
   [data-rail-next] contract the agency already uses on the welavie build, so
   the behaviour is familiar. Cards are never clipped: scroll-padding and a
   full-width trailing spacer keep the first and last card fully reachable. */
.wv-rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4rem; margin-bottom: 1.4rem; }
.wv-rail-nav { display: flex; gap: .5rem; flex: none; }
.wv-rail-nav button {
  width: 2.9rem; height: 2.9rem; border-radius: 9999px; display: grid; place-items: center;
  background: var(--color-surface); border: 1px solid var(--color-outline-variant);
  color: #064a3a; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s;
}
.wv-rail-nav button:hover:not(:disabled) { background: var(--color-emerald-soft); border-color: #34c759; }
.wv-rail-nav button:disabled { opacity: .35; cursor: default; }
.wv-rail-nav .material-symbols-outlined { font-size: 1.35rem; }
.wv-rail {
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-inline: 0; padding-block: .4rem 1.1rem; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
/* Cards fill the track exactly, so a snap position never leaves a part-card
   showing at the edge — the client's "nothing cropped" rule applies to rails. */
.wv-rail > * { flex: 0 0 calc((100% - 2 * 1.25rem) / 3); scroll-snap-align: start; }
@media (max-width: 64rem) { .wv-rail > * { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 46rem) { .wv-rail > * { flex-basis: 100%; } }
.wv-rail-hint { display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin-top: .2rem; font-size: .78rem; color: var(--color-on-surface-variant); }
.wv-rail-hint .material-symbols-outlined { font-size: 1rem; }
@media (min-width: 64rem) { .wv-rail-hint { display: none; } }

/* --- image rules ----------------------------------------------------------
   "Without breaking the pixel": never displayed above natural size.
   "Nothing cropped": rail and related-card images are contained, not covered. */
.wv-fit { object-fit: contain; }
.wv-natural { max-width: 100%; height: auto; }


/* ==========================================================================
   v4 — media columns (17 Sep 2026)
   Deepak: the hero picture sat marooned with dead green above and below it.
   Project rule: "align-items:center and cap the media - min-height:0;
   max-height:min(60vh,520px). The copy drives the hero height, never the
   picture."

   So: the grid stretches (no align-items:center), the media column fills the
   row, and the <img> box IS the visible image - height:100%, width:auto,
   object-fit:contain. That gives zero dead space above or below the picture
   inside its own column, with nothing cropped and nothing upscaled.

   This only works when the image is portrait or square: a landscape asset in a
   half-width column cannot be as tall as a block of copy without either
   cropping or upscaling. The 323x206 bottle shots and the 1568x1003 science
   render are therefore card/table assets only, never a hero or a split.
   ========================================================================== */
/* The picture is taken out of flow so it cannot feed back into the row height
   - otherwise height:100% resolves against auto and the image sets the row
   again. Out of flow, the COPY alone drives the height and the panel matches
   it exactly: zero dead space above or below the picture in its own column. */
/* The 60vh/520px cap is a HERO rule - it stops a tall picture driving the
   first screen. Applying it to in-body splits would re-create the dead band it
   exists to prevent, so body splits are uncapped and simply match their copy. */
.wv-media { position: relative; min-height: 0; }
.wv-media-hero { max-height: min(60vh, 520px); }
.wv-media > img {
  position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin-inline: auto;
  display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 2.5rem;
}
.wv-media.wv-media-plain > img { border-radius: 0; }

/* Phones: one column, so the picture is simply full width at its own ratio. */
@media (max-width: 64rem) {
  .wv-media { position: static; max-height: none; }
  .wv-media > img { position: static; width: 100%; height: auto; }
}

/* ---- v4 (23 Sep 2026): head-to-head comparison with both products + difference markers ---- */
.wv-cmp-section h2 { color: #fff; }
.wv-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 1.25rem; max-width: 780px; margin: 0 auto 2.5rem; }
.wv-duel-card { text-align: center; padding: 1.5rem 1.25rem 1.35rem; border-radius: 1.75rem; border: 1px solid #ffffff21;
  background: radial-gradient(circle at 50% 38%, #37d3a42e, #0000 55%), linear-gradient(145deg, #ffffff17, #ffffff06);
  box-shadow: 0 30px 70px -40px #000000b8; }
.wv-duel-img { height: 230px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.wv-duel-img img { max-height: 100%; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 24px 28px #00000066); }
.wv-duel-img img.wv-duel-photo { width: 230px; height: 230px; max-width: 100%; object-fit: cover; border-radius: 1.25rem; filter: none; }
.wv-duel-card strong { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: #fff; }
.wv-duel-card > span { display: block; margin-top: .2rem; font-size: .78rem; color: #ffffffa8; }
.wv-duel-note { display: block; margin-top: .45rem; font-size: .68rem; font-style: normal; color: #ffffff80; }
.wv-duel-vs { align-self: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; font-size: 1rem; letter-spacing: .04em; color: #1c1405; background: linear-gradient(135deg, #f59e0b, #f5b301);
  box-shadow: 0 0 0 6px #f59e0b26; }
.wv-mark-no { background: #fbe4dd !important; color: #b4452f !important; }
.wv-mark-info { background: #e8eef7 !important; color: #52627a !important; }
.wv-cmp-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem 1.1rem; margin-top: 1.1rem;
  font-size: .74rem; color: #ffffffb3; }
.wv-leg { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.wv-cmp-legend .comparison-check, .wv-cmp-legend .comparison-cross { flex: 0 0 1.35rem; width: 1.35rem; height: 1.35rem; box-shadow: none; }
.wv-cmp-legend .material-symbols-outlined { font-size: 14px !important; }
@media (max-width: 639px) {
  .wv-duel { gap: .6rem; margin-bottom: 1.75rem; }
  .wv-duel-card { padding: 1rem .6rem; border-radius: 1.25rem; }
  .wv-duel-img { height: 150px; margin-bottom: .6rem; }
  .wv-duel-img img.wv-duel-photo { width: 150px; height: 150px; }
  .wv-duel-card strong { font-size: 1rem; }
  .wv-duel-card > span { font-size: .7rem; }
  .wv-duel-vs { width: 2.5rem; height: 2.5rem; font-size: .8rem; box-shadow: 0 0 0 4px #f59e0b26; }
  .wv-cmp2 { overflow: visible; }
  .wv-cmp2 .premium-comparison-table { min-width: 0; grid-template-columns: 1fr 1fr; }
  .wv-cmp2 .premium-comparison-table > .comparison-table-label { grid-column: 1 / -1; min-height: 0; padding: .7rem .9rem .55rem; font-size: .8rem; }
  .wv-cmp2 .premium-comparison-table > .comparison-table-label.comparison-table-heading { display: none; }
  .wv-cmp2 .premium-comparison-table > .comparison-table-heading { min-height: 0 !important; padding: .8rem .9rem; }
  .wv-cmp2 .premium-comparison-table > div:not(.comparison-table-label) { padding: .75rem .8rem; gap: .5rem; font-size: .74rem; }
  .wv-cmp2 .comparison-check, .wv-cmp2 .comparison-cross { flex-basis: 1.5rem; width: 1.5rem; height: 1.5rem; }
}

/* ---- v5 (24 Sep 2026): person + product hero, one image per page ---- */
.wv-hero-combo { position: relative; align-self: center; height: max-content; width: 100%; max-width: 440px; margin: 0 auto; padding: 0 0 2.5rem 2.5rem; }
.wv-hero-combo .wv-hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.75rem;
  box-shadow: 0 40px 80px -40px #000000b0; max-height: min(62vh, 540px); }
.wv-hero-combo-wide { max-width: 560px; padding-bottom: 3.5rem; }
.wv-hero-combo-wide .wv-hero-photo { aspect-ratio: 3 / 2; max-height: none; }
.wv-hero-combo-wide .wv-hero-prod-wide { width: 58%; left: -1rem; }
.wv-hero-prod { position: absolute; left: 0; bottom: 0; width: 44%; height: auto; filter: drop-shadow(0 22px 26px #00000073); }
.wv-hero-prod-wide { width: 62%; }
.wv-hero-pair { position: absolute; left: 0; bottom: 0; display: flex; align-items: flex-end; gap: .35rem;
  padding: .9rem 1rem .8rem; border-radius: 1.4rem; background: #ffffffeb; box-shadow: 0 24px 50px -24px #000000a6; }
.wv-hero-pair img { width: auto; height: 118px; }
.wv-hero-pair img:first-child { height: 104px; }
.wv-hero-pair b { align-self: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem;
  font-weight: 800; color: #1c1405; background: linear-gradient(135deg, #f59e0b, #f5b301); }
@media (min-width: 1024px) { .wv-hero-combo { max-width: 470px; margin-right: 0; } }
@media (max-width: 639px) {
  .wv-hero-combo { max-width: 340px; padding: 0 0 1.75rem 1.75rem; }
  .wv-hero-pair img { height: 84px; } .wv-hero-pair img:first-child { height: 74px; }
}

/* ---- v6 (25 Sep 2026): body photos fill their column edge to edge, same height as the copy ---- */
.wv-media.wv-fill { position: relative !important; overflow: hidden; border-radius: 1.75rem; min-height: 420px; align-self: stretch;
  box-shadow: 0 30px 60px -40px #00000059; }
.wv-media.wv-fill > img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important;
  max-height: none !important; object-fit: cover; object-position: 50% 20%; border-radius: 0; }
@media (max-width: 1023px) { .wv-media.wv-fill { min-height: 0; aspect-ratio: 4 / 3; } }
.grid:has(> .wv-fill) > div:not(.wv-fill) { display: flex; flex-direction: column; justify-content: center; }