/* Homepage spacing: sections, related groups, and full-width transitions. */
:root {
  --section-space: clamp(64px, 6.25vw, 96px);
  --content-space: clamp(24px, 3vw, 40px);
}
main > .section:not(.awards-showcase) {
  padding-block: var(--section-space);
  margin-block: 0;
}
main > .section {
  scroll-margin-top: 92px;
}
.section .section-heading {
  margin-bottom: var(--content-space);
}
.intro {
  row-gap: 24px;
}
.intro > .detail-teaser {
  margin-top: 0;
}
main > .stats {
  padding-top: 0 !important;
  padding-bottom: var(--section-space);
}
.history-stack .legacy-panel {
  position: relative;
  top: auto;
}
.history-stack .timeline {
  min-height: 0;
  padding-bottom: 0;
}
.history-stack .timeline article {
  position: relative;
  top: auto;
}
.history-stack > .detail-teaser {
  grid-column: 2 / 4;
  margin-top: 0;
}
main > .anniversary {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  min-height: 0;
}
.anniversary .anniversary-mark {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: 480px;
  min-height: 0;
  margin: 0 auto;
  transform: none;
}
.anniversary .anniversary-copy {
  display: block;
  min-height: 0;
}
.anniversary .anniversary-copy > h2,
.anniversary .anniversary-copy > p:not(.section-label) {
  max-width: 560px;
}
.anniversary-copy > p:not(.section-label) {
  margin-top: 20px;
}
.anniversary-copy .detail-teaser {
  margin-top: 20px;
}
main > .video-repertoire {
  /* The desktop collage is absolutely positioned and needs reserved space. */
  min-height: clamp(700px, 72vw, 880px);
}
@media (min-width: 761px) {
  .video-card-bucovina {
    left: clamp(16px, 3vw, 56px);
    top: clamp(350px, 34vw, 430px);
  }
}
main > .contact {
  padding-top: clamp(32px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
@media (max-width: 900px) {
  :root { --section-space: 64px; }
  .history-stack > .detail-teaser { grid-column: 1 / -1; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  main > .video-repertoire { min-height: clamp(700px, 84vw, 820px); }
}
@media (max-width: 760px) {
  /* Mobile cards use normal grid flow, so their content sets the height. */
  main > .video-repertoire { min-height: 0; }
}
@media (max-width: 620px) {
  :root { --section-space: 48px; --content-space: 24px; }
  main > .anniversary { grid-template-columns: 1fr; gap: 28px; }
  .anniversary .anniversary-mark { max-width: 300px; }
  .history-stack { row-gap: 24px; }
  .intro { row-gap: 20px; }
  main > .contact { padding-top: 32px; }
}