/* ===== css/page.css — unified hero + small enhancements ===== */

:root { --text:#666; --hero-text:#fff; }

/* Typography polish */
h1, h2, h3 { line-height: 1.25; }

/* Scale headings nicely */
.page-wide-title    { font-size: clamp(2rem, 6vw, 4rem); color: var(--hero-text); text-shadow: 0 3px 4px #000; }
.page-wide-subtitle { font-size: clamp(1.5rem, 4.5vw, 3rem); color: var(--hero-text); text-shadow: 0 3px 4px #000; }

/* --- Promo / CTA fixes (book image) --- */
.promo { clear: both; text-align: center; }
.promo-link { display: inline-block; text-decoration: none; }
.promo-image { float: none; width: 300px; margin: 30px auto 8px; left: auto; transform: none; }
.promo-image img { display: block; width: 100%; height: auto; }
.promo-title { text-align: center; margin: 8px 0 0; }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .page-wide-title, .page-wide-subtitle { animation: none !important; transform: none !important; }
}

/* Mobile promo tweak */
@media (max-width: 768px) { .promo-image { width: 70vw; } }

/* ===========================================================
   UNIFIED HERO (works on any page wrapped in .hero)
   =========================================================== */

.hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 38vw, 520px); /* consistent visual depth site-wide */
  overflow: hidden;
}
.hero .main-image,
.hero .main-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero .main-image img {
  object-fit: cover;   /* crops taller/wider sources to the same height */
  object-position: center;
  display: block;
}

/* Overlay headings centered in the hero */
.hero .page-wide-title,
.hero .page-wide-subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;          /* override negative margins from master.css */
  width: 100%;
  text-align: center;
  font-weight: 500;
}

/* Title sits higher, subtitle below */
.hero .page-wide-title {
  top: 22%;
  animation: heroTitleIn 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
}
.hero .page-wide-subtitle {
  top: 48%;
  animation: heroSubIn 3.6s forwards cubic-bezier(0.5, 1, 0.89, 1);
}

@keyframes heroTitleIn { from { transform: translate(-50%, 10px) scale(0.92); opacity: .85; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes heroSubIn   { from { transform: translate(-50%, 10px) scale(0.92); opacity: .85; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }

/* Small screens: nudge overlay positions down slightly */
@media (max-width: 768px) {
  .hero { height: clamp(260px, 50vw, 420px); }
  .hero .page-wide-title { top: 26%; }
  .hero .page-wide-subtitle { top: 56%; }
}

/* ===========================================================
   LEGACY PAGES (no .hero wrapper)
   We leave them unchanged; their existing float/negative margins still apply.
   =========================================================== */