/* =========================================================================
   Temporary hero: Sturm und Drang (Haydn / Mendelssohn) — 1 June 2026
   Drop-in stylesheet. Linked from elements/header.php.
   Remove this file + the <section class="sturm-hero"> block in onepage.php
   + the <link> in header.php after the concert.
   ========================================================================= */

.sturm-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100lvh;
  overflow: hidden;
  color: #d8dee2;
  font-family: var(--font-sans, Mulish, sans-serif);
  font-weight: var(--normal, 400);
  letter-spacing: var(--letter-spacing-sm, -0.01em);
  isolation: isolate;
  background-color: #1a2530;
}

/* --- Background image (the flyer's watercolor) --------------------------- */
.sturm-hero__bg,
.sturm-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.sturm-hero__bg img {
  object-fit: cover;
  /* show the dramatic sky in the upper half on desktop */
  object-position: center 30%;
  filter: saturate(1.05);
}

/* Soft vignettes top + bottom for text legibility */
.sturm-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(20, 28, 38, 0.45) 0%,
    rgba(20, 28, 38, 0.05) 25%,
    rgba(20, 28, 38, 0.05) 45%,
    rgba(20, 28, 38, 0.75) 75%,
    rgba(15, 22, 30, 0.9) 100%
  );
  pointer-events: none;
}

/* --- Content layout ------------------------------------------------------ */
.sturm-hero__content {
  position: relative;
  z-index: 2;
  min-height: inherit;
  display: flex;
  align-items: flex-end;
  padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 5vw, 5rem);
}
.sturm-hero__inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1.25rem, calc(2.5vw + 0.5vh), 3rem);
}

/* --- Title row ----------------------------------------------------------- */
.sturm-hero__header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem 3.5rem;
  align-items: start;
}
.sturm-hero__titles {
  display: grid;
  gap: 0.25em;
}
.sturm-hero__title {
  /* Overrides for the theme's default h2 (font-serif, text-align:center, display:none) */
  display: block;
  text-align: left;
  font-family: var(--font-sans, Mulish, sans-serif);

  margin: 0;
  font-size: clamp(3.6rem, 6vw, 6rem);
  font-weight: 800; /* Mulish ExtraBold, matches the flyer's heavy STURM UND DRANG */
  letter-spacing: 0.005em;
  line-height: 0.95;
  color: #b3c7e7;
  text-transform: uppercase;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45);
}
.sturm-hero__composers {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  font-weight: var(--bold, 400);
  color: #b3c7e7;
  line-height: 1.05;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.35);
}
.sturm-hero__when {
  padding: 1em 0;
  text-align: right;
  display: grid;
  gap: 0.05em;
  font-weight: var(--normal, 400);
  color: #b3c7e7;
  line-height: 1.3;
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.45);
}
.sturm-hero__date {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.9rem);
  white-space: nowrap;
  letter-spacing: 0.06em;
}
.sturm-hero__time {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.9rem);
  white-space: nowrap;
}

/* --- Programme ----------------------------------------------------------- */
.sturm-hero__programme {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  line-height: 1.5;
  color: #c6cfd4;
}
.sturm-hero__programme li + li {
  margin-top: 0.2em;
}
.sturm-hero__programme em {
  font-style: italic;
  color: #d8dee2;
}

/* --- Credits ------------------------------------------------------------- */
.sturm-hero__credits {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem 3rem;
  align-items: end;
}
.sturm-hero__performers {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.15em;
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  line-height: 1.45;
}
.sturm-hero__performers li {
  color: #d8dee2;
}
.sturm-hero__performers strong {
  font-weight: var(--bold, 700);
  color: #ffffff;
}
.sturm-hero__performers span {
  color: #99a3a9;
  font-style: italic;
  margin-left: 0.4em;
  font-weight: var(--light, 300);
}
.sturm-hero__performers--secondary {
  text-align: right;
  font-size: clamp(0.9rem, 1.1vw, 1rem);
}
.sturm-hero__performers--secondary strong {
  color: #eef2f4;
}

/* --- Footer (venue + CTA) ------------------------------------------------ */
.sturm-hero__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.25rem 2rem;
  padding-top: clamp(0.5rem, 1.5vw, 1rem);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.sturm-hero__venue {
  display: grid;
  gap: 0.2em;
}
.sturm-hero__venue-name {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  color: #ffffff;
  font-weight: var(--normal, 400);
}
.sturm-hero__venue-address {
  margin: 0;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  color: #aab3b8;
  line-height: 1.4;
}

/* --- CTA button ---------------------------------------------------------- */
.sturm-hero__cta {
  --btn-bg: var(--green, #78918e);
  --btn-bg-hover: var(--green-light, #809a97);
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.95em 1.6em;
  background: var(--btn-bg);
  color: #ffffff !important;
  font-family: inherit;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: var(--bold, 700);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  box-shadow:
    0 8px 24px -10px rgba(0, 0, 0, 0.7),
    0 0 0 0 rgba(255, 255, 255, 0);
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
  white-space: nowrap;
}
.sturm-hero__cta:hover,
.sturm-hero__cta:focus-visible {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px -10px rgba(0, 0, 0, 0.8),
    0 0 0 4px rgba(255, 255, 255, 0.08);
  text-decoration: none;
}
.sturm-hero__cta-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.sturm-hero__cta:hover .sturm-hero__cta-icon {
  transform: translateX(3px);
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 900px) {
  .sturm-hero__bg img {
    object-position: center 25%;
  }
  .sturm-hero__header,
  .sturm-hero__credits,
  .sturm-hero__footer {
    grid-template-columns: 1fr;
  }
  .sturm-hero__when {
    text-align: left;
  }
  .sturm-hero__performers--secondary {
    text-align: left;
  }
}

/* --- Phone --------------------------------------------------------------- */
@media (max-width: 600px) {
  .sturm-hero {
    min-height: 107lvh;
  }
  .sturm-hero__bg img {
    object-position: center 18%;
  }

  .sturm-hero__content {
    padding: 7rem 1.25rem 5rem;
  }
  .sturm-hero__inner {
    gap: 1.1rem;
  }
  .sturm-hero__brand {
    display: none !important;
  }

  .sturm-hero__when {
    display: flex;
    gap: 1em;
    align-items: baseline;
  }

  /* Drop the long address on small phones — venue name is enough */
  .sturm-hero__venue-address {
    display: none;
  }

  /* Secondary credits (scenography) compressed to one line */
  .sturm-hero__performers--secondary {
    font-size: 0.85rem;
    opacity: 0.85;
  }
  .sturm-hero__performers--secondary span {
    margin-left: 0.3em;
  }

  .sturm-hero__cta {
    width: 100%;
    justify-content: center;
    padding: 1em 1.4em;
  }
}

/* --- Orchestra brand on top of the hero --------------------------------- */
.sturm-hero__brand {
  position: absolute;
  top: clamp(1.5rem, 4vh, 3rem);
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.sturm-hero__brand img {
  display: block;
  width: min(85vw, calc(400px + 5vw));
  height: auto;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 18px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 40px rgba(0, 0, 0, 0.4));
  animation: sturmFadeIn 1.6s ease-out forwards;
  opacity: 0;
}
@keyframes sturmFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 600px) {
  .sturm-hero__brand img {
    width: min(70vw, 240px);
  }
}

/* =========================================================================
   Entrance animations — staggered fade-in for the rest of the hero,
   plus a very gentle ken-burns on the watercolor.
   ========================================================================= */
.sturm-hero__bg {
  opacity: 0.2;
  animation: opacity 6s ease-out forwards;
}
@keyframes opacity {
  from {
    opacity: 0.2;
  }
  to {
    opacity: 1;
  }
}
.sturm-hero__bg img {
  animation: sturmKenBurns 16s ease-out 0.1s both;
}
@keyframes sturmKenBurns {
  from {
    transform: scale(1.035);
  }
  to {
    transform: scale(1);
  }
}

.sturm-hero__titles,
.sturm-hero__when,
.sturm-hero__programme,
.sturm-hero__credits,
.sturm-hero__footer {
  opacity: 0;
  transform: translateY(14px);
  animation: sturmRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sturm-hero__titles {
  animation-delay: 0.45s;
}
.sturm-hero__when {
  animation-delay: 0.6s;
}
.sturm-hero__programme {
  animation-delay: 0.85s;
}
.sturm-hero__credits {
  animation-delay: 1.05s;
}
.sturm-hero__footer {
  animation-delay: 1.25s;
}

@keyframes sturmRise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sturm-hero__bg img,
  .sturm-hero__brand img,
  .sturm-hero__titles,
  .sturm-hero__when,
  .sturm-hero__programme,
  .sturm-hero__credits,
  .sturm-hero__footer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.header {
  --scroll-opacity: 0.95 !important;
  --scroll-translate: 0 !important;
}
.header__arrow {
  display: none !important;
}
.header__hero {
  height: 80vh !important;
}

/* =========================================================================
   Hide the original top header — the Sturm und Drang hero is now the landing
   view and carries the orchestra logo. Comment this block out to bring the
   original splash screen back.
   ========================================================================= */
/* .header__logo,
.header__hero {
  display: none !important;
} */

/* Optional: hide the existing green concert info blocks for this concert.
   Uncomment if you decide the temporary hero replaces them entirely. */
/*
.main .news:first-of-type,
.main .calendar,
.main [data-area-handle="concerts"] { display: none; }
*/