/* ════════════════════════════════════════════════════════════
   page-template.css
   Shared compression + hero-zone styling for all JewishSong.org
   pages that have a hero asset (video, embed, image).

   Canonical above-the-fold budget: 664 px
   (see memory: project-above-the-fold-template-constraint)

   To use: every page with a hero zone links this file AFTER base.css.
   Pages compose:
     <nav>...standard nav...</nav>
     <section class="hero">
       <div class="container">
         <h1>Title <em>highlight</em></h1>
         <p class="hero-sub">One line subtitle with <span class="credential">credentials</span>.</p>
         <div class="hero-video">
           <div class="video-wrap">
             <iframe src="https://www.youtube.com/embed/XXX?rel=0&modestbranding=1&color=white" ...></iframe>
           </div>
         </div>
         <p class="hero-caption">
           <strong>Song Title</strong> — full attribution chain.
           <a href="/story-url">Read the story →</a>
         </p>
       </div>
     </section>

   Pages add their own page-specific styles via inline <style> below the template link.
   ════════════════════════════════════════════════════════════ */

/* ── Nav compression — homepage feedback 2026-05-26: reduce strip by ~20% ── */
nav { padding: 0.7rem 0; }
nav .container { gap: 1.2rem 1.5rem; }
.nav-logo { font-size: 1rem; }
.nav-links { gap: 0.5rem 1.4rem; }
.nav-links a { font-size: 0.82rem; }

/* ── Hero zone — above-the-fold budget 664 px ── */
.hero {
  padding: 0.5rem 0 0.7rem;
  text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-dark) 100%);
}
.hero h1 {
  margin: 0 0 0.3rem;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.hero h1 em { font-style: normal; color: var(--amber); }

/* One-line subtitle directly under H1 — never wraps to 2+ lines at desktop */
.hero-sub {
  font-size: 0.86rem;
  color: var(--text-mid);
  max-width: 820px;
  margin: 0 auto 0.55rem;
  line-height: 1.4;
  font-weight: 600;
}
.hero-sub strong { color: var(--text-main); }
.hero-sub .credential { color: var(--amber); font-weight: 800; }

/* Primary hero asset — single iframe per page, 760px max width, 16:9 = 429 px tall */
.hero-video {
  max-width: 760px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(230,57,70,0.18);
  border: 2px solid var(--border);
}
.video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; }

/* Caption under video — full attribution chain, fits in 2 lines at desktop */
.hero-caption {
  max-width: 940px;
  margin: 0.6rem auto 0;
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 0 1.5rem;
}
.hero-caption strong { color: var(--text-main); font-weight: 800; }
.hero-caption a { color: var(--amber); font-weight: 700; }

/* ── Optional: section label / eyebrow before H1 — keep tight ── */
.hero .section-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 0.3rem;
}