/*
 * /product/ — the product landing page's own sections (web/src/pages/product.astro).
 *
 *   hero additions    .pw-hero-sub, .pw-hero-ctas (equal-width button pair)
 *   transitions       .hero-dissolve, .pw-divider--in / --out (divider-2.png, as before)
 *   light zone        .pw-light: section heads (.pw-head), the workflow rows (shared
 *                     .pmod rows, css/product-module.css)
 *   traceability      .pw-trace: a dark band (optional background image) under the
 *                     light → dark divider
 *   dark zone         .pw-dark: infrastructure cards, then the architecture diagram as
 *                     an image (its source styles: css/quix-architecture.css)
 *
 * The workflow rows and the rest of the page (Quix AI two-up, Use cases, Why Quix,
 * CTA) keep their existing stylesheets.
 */

/* Anchor targets land below the fixed nav; smooth unless reduced motion. */
#workflow, .pmod[id] { scroll-margin-top: calc(var(--nav-height) + 40px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── Hero additions ──────────────────────────────────────────────────────── */
.pw-hero-sub { max-width: 760px; font-size: 19px; margin-bottom: 36px; opacity: 0.9; }
/* The two hero buttons are an equal pair: each as wide as the wider one (labels are
   CMS-editable, so this holds whatever they say), label centred. Stacked on phones. */
.pw-hero-ctas {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: fit-content;
  margin-inline: auto;
}
.pw-hero-ctas .btn { justify-content: center; }

/* ── Transitions ─────────────────────────────────────────────────────────── */
.hero-dissolve { height: 180px; }
.pw-divider {
  position: relative;
  width: 100%;
  height: 130px;
  background: url('/images/divider-2.png') repeat-x left center / auto 100%;
  z-index: 2;
}
.pw-divider--in { top: 64px; }
.pw-divider--out { top: -64px; transform: scaleY(-1); }

/* ── Section heads (light and dark) ──────────────────────────────────────── */
.pw-head { max-width: 860px; margin: 0 auto 80px; padding: 0 16px; text-align: center; }
.pw-head__eyebrow {
  font: 400 13px/1 var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #3F3F3F;
  margin: 0 0 20px;
}
.pw-head__eyebrow--orange { color: var(--orange-dark); }
.pw-head__heading {
  font-family: var(--font-sans); font-weight: 500; font-size: 52px; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--black); margin: 0; text-wrap: balance;
}
.pw-head__sub {
  font: 400 20px/1.45 var(--font-sans);
  color: #3F3F3F;
  max-width: 660px;
  margin: 20px auto 0;
}
.pw-head--dark .pw-head__eyebrow { color: rgba(255, 255, 255, 0.6); }
.pw-head--dark .pw-head__eyebrow--orange { color: var(--orange); }
.pw-head--dark .pw-head__heading { color: var(--white); }
.pw-head--dark .pw-head__sub { color: rgba(255, 255, 255, 0.7); }
.pw-head__cta { margin-top: 36px; }

/* ── Light zone ──────────────────────────────────────────────────────────── */
/* #DADADA to match divider-2.png's solid edge. No side padding: .pmods insets
   itself with --rail-edge, which must resolve against the full page width. */
.pw-light { position: relative; background: #DADADA; padding: 140px 0 160px; color: var(--black); }
.pw-steps { padding-top: 0; }

/* ── Traceability band ───────────────────────────────────────────────────── */
/* Starts where the light → dark divider's dither ends (the divider's 130px slot sits
   64px up, so -64px here). divider-2.png breaks up through BLACK squares, so the band
   must not run under it: the photo fades up out of black at the top and back down to
   black at the foot, into the infrastructure section. Without an image it's plain black. */
.pw-trace { position: relative; margin-top: -64px; padding: 170px 0 140px; }
.pw-trace .pw-head { margin-bottom: 0; }
.pw-trace--image {
  background:
    linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.45) 160px, rgba(0, 0, 0, 0.55) 60%, #000 100%),
    var(--trace-img) center / cover no-repeat;
}

/* ── Dark zone ───────────────────────────────────────────────────────────── */
.pw-dark { padding: 48px var(--content-edge) 150px; color: var(--white); }
.pw-dark--top { padding-top: 120px; padding-bottom: 140px; }   /* top: below the rule after the traceability band */
.pw-dark--bottom { padding-top: 120px; }
.pw-dark .pw-head__heading { font-size: 44px; }

/* Infrastructure: three cards */
.pw-infra__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pw-infra__cell { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.pw-infra__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
  background: #0A0A0A;
}
.pw-infra__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.pw-infra__name { font: 400 28px/1.1 var(--font-pixel); color: var(--white); margin: 0 0 10px; }
.pw-infra__line {
  font: 400 15px/1.5 var(--font-sans);
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 16px;
  max-width: 34em;
  text-wrap: pretty;
}
.pw-infra__link {
  margin-top: auto;
  font: 400 11px/1.4 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.15s;
}
.pw-infra__link-meta { color: rgba(255, 255, 255, 0.55); }
.pw-infra__link:hover { text-decoration-color: var(--orange); }
.pw-infra__link:focus-visible { outline: 1px solid var(--orange); outline-offset: 4px; }

/* Quix architecture: a static image (source: components/QuixArchitecture.astro). */
.pw-qa-img img { display: block; width: 100%; height: auto; }

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .hero-dissolve { height: 100px; }
  .pw-head { margin-bottom: 56px; }
  .pw-head__heading, .pw-dark .pw-head__heading { font-size: 36px; }
  .pw-head__sub { font-size: 18px; }
  .pw-light { padding: 110px 0 120px; }
  .pw-trace { padding: 130px 0 120px; }
  .pw-dark { padding: 32px 38px 110px; }
  .pw-dark--top { padding-top: 90px; padding-bottom: 100px; }
  .pw-dark--bottom { padding-top: 90px; }
  .pw-infra__grid { grid-template-columns: 1fr; gap: 48px; max-width: 560px; margin: 0 auto; }
}

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .pw-hero-sub { font-size: 16px; }
  .pw-hero-ctas { grid-auto-flow: row; }
  .pw-head__heading, .pw-dark .pw-head__heading { font-size: 30px; }
  .pw-dark { padding: 24px 20px 90px; }
  .pw-dark--top { padding-top: 72px; padding-bottom: 80px; }
  .pw-dark--bottom { padding-top: 72px; }
}