/* Keep every localized homepage headline fully visible on narrow screens. */
@media (max-width: 640px) {
  .front-content .ex-hero {
    align-items: flex-start;
    min-height: calc(100svh - 76px);
    padding-top: clamp(24px, 5svh, 42px);
    padding-bottom: clamp(20px, 3svh, 32px);
  }

  .front-content .hero-grid {
    min-width: 0;
  }

  .front-content .hero-copy h1 {
    max-width: 100%;
    font-size: clamp(41px, 10.5vw, 59px);
    line-height: 1.09;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
    margin-bottom: 22px;
  }

  .front-content .hero-copy .eyebrow {
    max-width: 100%;
    line-height: 1.7;
  }

  .front-content .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 20px;
    row-gap: clamp(14px, 2svh, 20px);
  }

  .front-content .hero-actions .ex-button,
  .front-content .hero-actions .text-link {
    max-width: 100%;
  }

  .front-content .hero-stamp {
    display: none;
  }

  .front-content .hero-copy .eyebrow {
    margin-bottom: clamp(14px, 2svh, 21px);
  }
  .front-content .hero-actions {
    margin-top: clamp(17px, 3svh, 25px);
  }
  .front-content .hero-footnote {
    margin-top: clamp(24px, 4svh, 43px);
  }
}

/* Unified Opera House banners on internal pages. The original per-page background is overridden, not removed from media. */
.inner-banner {
  background-image: url("https://thumb.wikimedia.org/wikipedia/commons/thumb/d/d3/Odesa_National_opera_Theatre.jpg/1280px-Odesa_National_opera_Theatre.jpg?utm_source=commons.wikimedia.org&utm_campaign=index&utm_content=thumbnail") !important;
  background-position: center 50%;
  background-size: cover;
  background-attachment: fixed;
}

/* Scroll-linked parallax works on mobile without background-attachment: fixed. */
@media (max-width: 900px) {
  .inner-banner {
    background-attachment: scroll;
    background-size: auto 125%;
    background-position: center 40%;
  }
}
@supports (animation-timeline: view()) {
  @media (max-width: 900px) {
    .inner-banner {
      animation: excurs-inner-banner-parallax 1s linear both;
      animation-timeline: view(block);
      animation-range: cover;
    }
  }
}
@keyframes excurs-inner-banner-parallax {
  from { background-position: center 36%; }
  to { background-position: center 64%; }
}
@media (prefers-reduced-motion: reduce) {
  .inner-banner { animation: none !important; background-attachment: scroll; }
}