/* ================================================================
   Heimspiel – Fotoreportage Mainz
   Seitenspezifische Styles. Gemeinsame Klassen (story-grid-*,
   story-full, story-intro, story-closing, hero-title, hero-meta,
   page-hero-label, has-fullscreen-hero) liegen in style.css
   ================================================================ */

/* ── Hero ──────────────────────────────────────────────────────── */
.hs-hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  background: var(--night);
  overflow: hidden;
}
.hs-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.hs-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(11,28,38,0.75) 0%, rgba(11,28,38,0.10) 45%, rgba(11,28,38,0.00) 70%, rgba(11,28,38,0.30) 100%),
    linear-gradient(to right, rgba(11,28,38,0.55) 0%, rgba(11,28,38,0.10) 40%, rgba(11,28,38,0.00) 70%);
}
.hs-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 64px 72px;
}
.hs-hero .page-hero-label { color: var(--coral); }
.hs-hero .hero-title {
  font-size: clamp(64px, 13vw, 170px);
  letter-spacing: -0.02em;
  line-height: 0.9;
}
.hs-hero .hero-meta { color: rgba(245,243,232,0.6); }

/* ── Feiner Abschnitts-Trenner (statt sichtbarer Kapitel) ──────── */
.hs-break {
  width: 48px;
  height: 1px;
  background: var(--night);
  opacity: 0.18;
  margin: 72px auto;
}

/* ── Lauftext zwischen den Bildern ─────────────────────────────── */
.hs-text {
  max-width: 620px;
  margin: 0 auto;
  padding: 32px 48px;
}
.hs-text p {
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1.7;
  color: var(--night);
  margin: 0 0 20px;
}
.hs-text p:last-child { margin-bottom: 0; }

/* ── Hochformat, zentriert ─────────────────────────────────────── */
.hs-single {
  max-width: 560px;
  margin: 4px auto;
}

/* ── Bild-Caption ──────────────────────────────────────────────── */
.hs-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--night);
  opacity: 0.45;
  text-align: center;
  max-width: 620px;
  margin: 12px auto 28px;
  padding: 0 24px;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hs-hero-content { padding: 48px 40px; }
  .hs-break { margin: 60px auto; }
  .hs-text { padding: 28px 32px; }
}
@media (max-width: 640px) {
  .hs-hero-content { padding: 40px 24px; }
  .hs-break { margin: 48px auto; }
  .hs-text { padding: 24px 24px; }
  .hs-text p { font-size: 18px; }
  .hs-single { max-width: 100%; }
}