/* =================================================================
   styles-v2.css — Premium Visual Standard V2 add-on layer
   Loaded AFTER /styles.css, ONLY by the *-v2 pages. Adds:
     - full-bleed photographic hero (dark brand-gradient overlay)
     - editorial image/text split sections
     - photo-backed contrast bands
     - no-JS-safe scroll-reveal
     - accessibility/contrast tweaks for the Lighthouse floor
   Images are wired via CSS custom properties (--hero-img / --band-img)
   so a real photo drops in with zero layout shift (CLS = 0). Until an
   image is set, a premium brand gradient is used as the fallback.
   ================================================================= */

/* ---------- Scroll reveal (no-JS safe: only hides when html.js is set) ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .reveal.is-in { opacity: 1; transform: none; transition: none; }
}

/* ---------- Full-bleed photographic hero ---------- */
.hero-v2 {
  position: relative;
  color: #fff;
  padding: 64px 0 72px;
  background-color: var(--brand-dark);
  background-image:
    linear-gradient(180deg, rgba(15,34,56,.78) 0%, rgba(15,34,56,.86) 100%),
    var(--hero-img, linear-gradient(135deg, #16304f 0%, #1f4068 60%, #0f2238 100%));
  background-size: cover;
  background-position: center;
}
.hero-v2 .hero-grid { align-items: center; }
.hero-v2 .eyebrow { color: var(--accent); }
.hero-v2 h1 { color: #fff; }
.hero-v2 .subhead { color: #e7edf5; }
.hero-v2 .hero-points li { color: #eef2f8; }
.hero-v2 .hero-points .ico { color: var(--accent); }
/* The rating is a WHITE pill by default — on the dark hero that's both jarring and
   (with light text) unreadable. Make it a translucent dark "glass" chip with bright text. */
.hero-v2 .hero-rating { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); box-shadow: none; }
.hero-v2 .hero-rating-text { color: #eef3fa; }
/* The gold offer pill is already a solid, high-contrast block, so it needs no dark-hero
   override — but the shadow is deepened so it lifts off the photographic background. */
.hero-v2 .hero-offer { box-shadow: 0 8px 24px rgba(0,0,0,.32); }
.hero-v2 .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.hero-v2 .btn-ghost:hover { background: rgba(255,255,255,.14); }
/* Desktop "Prefer to talk?" line. The base rule colours it for a LIGHT section;
   on this dark hero those tokens drop to ~2.5:1 (and the number to 1.2:1), so the
   number has to be re-stated in light ink. The number itself is the point — keep
   it white, bold and gold-underlined so it stays scannable, not bland. */
.hero-v2 .hero-callout { color: #cdd8e8; }
.hero-v2 .hero-callout .ico { color: var(--accent); }
.hero-v2 .hero-callout a { color: #fff; border-bottom-color: var(--accent); }
.hero-v2 .hero-callout a:hover { color: var(--accent); }
/* The form card is white, but it lives INSIDE .hero-v2 (color:#fff). Reset its text
   to dark ink so choice labels and field labels (which have no explicit color of
   their own) don't inherit white and turn invisible on the white card. */
.hero-v2 .form-card { color: var(--ink); }

/* ---------- Editorial image / text split ---------- */
.editorial-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
}
.editorial-rev .editorial-grid { direction: rtl; }
.editorial-rev .editorial-grid > * { direction: ltr; }
.editorial-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow);
  /* premium gradient placeholder until a real photo is dropped in */
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(194,135,47,.22), transparent 60%),
    linear-gradient(135deg, #16304f 0%, #1f4068 55%, #0f2238 100%);
}
.editorial-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-media .editorial-ph {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center;
  color: rgba(255,255,255,.86); padding: 24px;
}
.editorial-media .editorial-ph svg { width: 46px; height: 46px; fill: var(--accent); opacity: .9; }
.editorial-media .editorial-ph span { font-size: .82rem; letter-spacing: .02em; color: rgba(255,255,255,.7); }
.editorial-copy h2 { text-align: left; }
.editorial-copy .ticks { margin: 18px 0 24px; }

/* ---------- Photo-backed contrast band ---------- */
.photo-band {
  position: relative;
  color: #fff;
  padding: 66px 0;
  text-align: center;
  background-color: var(--brand-dark);
  background-image:
    linear-gradient(180deg, rgba(15,34,56,.82), rgba(15,34,56,.9)),
    var(--band-img, linear-gradient(135deg, #1f4068, #0f2238));
  background-size: cover;
  background-position: center;
}
.photo-band h2 { color: #fff; }
.photo-band .section-sub { color: #d7e0ee; }
.photo-band .band-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 30px; }
.photo-band .band-stat strong { display: block; font-family: var(--serif); font-size: 1.7rem; color: #fff; }
.photo-band .band-stat span { color: #cdd8e8; font-size: .9rem; }

/* ---------- Accessibility / Lighthouse contrast floor ---------- */
/* Darken the draft verify labels so they clear WCAG AA (4.5:1) in the audit.
   These are removed for production anyway. */
.verify-label { color: #6f5210; background: #fbf1da; border-color: #e7cf9b; }
/* Ensure the gold solid button text contrast stays AA on v2 (uses --accent-btn). */

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .editorial-grid { grid-template-columns: 1fr; gap: 24px; }
  .editorial-rev .editorial-grid { direction: ltr; }
  .editorial-media { order: -1; aspect-ratio: 16 / 10; }
  .photo-band .band-stats { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (max-width: 640px) {
  .hero-v2 { padding: 40px 0 48px; }
}