/* ─── Maria CHOIR page ─── */

/* ─── Page background: matches gradient top, no blurred-bg flash on load ───
   html:root (not plain html) bumps specificity above nav.css's own
   `html { background: #0d0902 }` so this always wins on overscroll/
   rubber-band bounce, regardless of stylesheet load order. ─── */
html:root, body { background: #0b0a0a; }
.bg-wrap, .bg-overlay { display: none; }

/* ─── Hero video zoom-out ───
   bg extended ±27% on all sides → 154vw wide × 154vh tall.
   scale(0.65) on video: 154 × 0.65 ≈ 100 in both axes — no gaps.
   Parallax JS sets translateY on .page-hero__bg; video scale is independent. */
.page-hero__bg {
  top: -27%;
  bottom: -27%;
  left: -27%;
  right: -27%;
}
.page-hero__video {
  transform: scale(0.65);
  transform-origin: center center;
}

/* ─── Content body ─── */
.choir-body {
  position: relative;
  z-index: 5;
  background: linear-gradient(180deg, #0b0a0a 19.96%, #14151a 100%);
  /* pt: 150→48 / px: 120→20 / pb: 240→80 (1920→390) */
  padding: clamp(48px, 6.67vw + 22px, 150px)
           clamp(20px, 6.25vw, 120px)
           clamp(40px, 8.33vw, 160px);
}
.choir-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-rows);
}

/* ─── Intro row (flex, two cols) ─── */
.choir-row-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.choir-intro-main {
  flex: 0 0 75%;
  min-width: 0;
}
.choir-intro-meta {
  flex: 0 0 clamp(160px, 5.23vw + 139.6px, 240px);
  min-width: 0;
  padding-top: 4px;
}

/* ─── Text block (75% width — matches main column) ─── */
.choir-text-block {
  width: 75%;
}

/* ─── Typography ─── */

/* Intro heading — Slack Light, 44→24 — same token as bio-featured */
.choir-title {
  font-family: "Slack Light", sans-serif;
  font-weight: 300;
  font-size: var(--fs-featured);
  line-height: 1.2;
  letter-spacing: -0.44px;
  margin-bottom: clamp(16px, 1.67vw, 32px);
}

/* Body text — PP Neue Montreal, 28→16 */
.choir-body-text {
  font-family: "PP Neue Montreal Book", sans-serif;
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.25;
  letter-spacing: 0.28px;
}
.choir-body-text + .choir-body-text { margin-top: 1.25em; }

/* Meta / caption / credits — PP Neue Montreal, 20→14 */
.choir-meta-text,
.choir-caption,
.choir-credit-item,
.choir-section-item {
  font-family: "PP Neue Montreal Book", sans-serif;
  font-weight: 400;
  font-size: var(--fs-meta);
  line-height: 1.25;
  letter-spacing: 0.2px;
}
.choir-meta-text + .choir-meta-text { padding-top: 10px; }
.choir-meta-text a {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
  color: inherit;
  transition: text-decoration-color 0.2s;
}
.choir-meta-text a:hover { text-decoration: none; }

/* ─── Vertical images (two equal cols) ─── */
.choir-images {
  display: flex;
  gap: clamp(8px, 0.83vw, 16px);
}
.choir-img-col { flex: 1 0 0; }
.choir-img-col img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

/* ─── Diagrams (two equal cols, gap 72→24) ─── */
.choir-diagrams {
  display: flex;
  gap: clamp(24px, 3.14vw + 11.77px, 72px);
  align-items: flex-start;
}
.choir-diagram-col {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 0.83vw, 16px);
}
.choir-diagram-col img { width: 100%; display: block; }

/* ─── Videos (60% centered, right col offset down) ─── */
.choir-videos {
  width: clamp(240px, 60vw, 1002px);
  margin: 0 auto;
  display: flex;
  gap: clamp(8px, 0.83vw, 16px);
  align-items: flex-start;
}
.choir-video-col { flex: 1 0 0; }
.choir-video-col video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
}
.choir-video-col--offset { padding-top: clamp(36px, 7.5vw, 144px); }

/* ─── Two-col text (50/50 with gap) ─── */
.choir-two-col {
  display: flex;
  gap: clamp(24px, 2.61vw + 13.81px, 64px);
  align-items: flex-start;
}
.choir-two-col-item { flex: 1 0 0; min-width: 0; }
.choir-two-col-item .choir-body-text + .choir-body-text { margin-top: 1.25em; }

/* ─── Image slider ─── */
.choir-slider-wrap {
  position: relative;
  height: clamp(300px, 41.67vw, 800px);
  overflow: hidden;
  cursor: grab;
  user-select: none;
}
.choir-slider-wrap:active { cursor: grabbing; }
.choir-slider__track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.choir-slide { flex: 0 0 100%; height: 100%; }
.choir-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.choir-slider__dots {
  position: absolute;
  bottom: clamp(12px, 1.25vw, 24px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}
.choir-slider__dot {
  width: 8px; height: 8px;
  border-radius: 4px;
  background: #fff;
  opacity: 0.5;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0 4px;
  transition: opacity 0.2s;
}
.choir-slider__dot--active { opacity: 1; }

/* ─── Credits (two equal cols inside 75% block) ─── */
.choir-credits-grid {
  display: flex;
  gap: clamp(24px, 2.61vw + 13.81px, 64px);
  align-items: flex-start;
  padding-top: clamp(16px, 1.56vw, 30px);
}
.choir-credits-col { flex: 1 0 0; min-width: 0; }
.choir-credit-item + .choir-credit-item { padding-top: clamp(12px, 1.56vw, 30px); }
.choir-credit-label { color: rgba(255, 255, 255, 0.66); }
.choir-credit-value { color: #fff; }

/* ─── Section rows with top divider (prizes, support) ─── */
.choir-divider-block {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: clamp(16px, 1.25vw, 24px);
}
.choir-section-inner {
  display: flex;
  gap: clamp(24px, 2.61vw + 13.81px, 64px);
  align-items: center;
}
.choir-section-heading { flex: 1 0 0; }
.choir-section-content { flex: 1 0 0; }

/* Section heading — Slack Light, 24→16 */
.choir-section-head-text {
  font-family: "Slack Light", sans-serif;
  font-weight: 300;
  font-size: var(--fs-section-head);
  line-height: 1.25;
}
.choir-section-item + .choir-section-item { padding-top: 10px; }

.choir-support-logo {
  height: clamp(24px, 2.53vw, 49px);
  width: auto;
  display: block;
}

/* ─── Go-up arrow (mirrors bio scroll-top pattern) ─── */
.choir-scroll-top {
  display: flex;
  justify-content: center;
  /* margin-top matches choir-body padding-bottom → equal space above and below arrow */
  margin-top: clamp(40px, 8.33vw, 160px);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
  animation: hero-arrow-bounce 2.4s ease-in-out infinite;
}
.choir-scroll-top:hover { opacity: 1; }

/* ─── Tablet (<960px) ─── */
@media (max-width: 959px) {
  .choir-row-intro { flex-direction: column; gap: 32px; }
  .choir-intro-main { flex: none; width: 100%; }
  .choir-intro-meta { flex: none; width: 100%; }
  .choir-text-block { width: 100%; }
  .choir-two-col { flex-direction: column; }
  .choir-diagrams { flex-direction: column; }
  .choir-videos { width: 90%; }
  .choir-credits-grid { flex-direction: column; gap: 20px; }
  .choir-section-inner { flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* ─── Mobile (<600px) ─── */
@media (max-width: 599px) {
  .choir-images { flex-direction: column; }
  .choir-img-col img { aspect-ratio: 4 / 3; }
  .choir-videos { width: 100%; }
  .choir-slider-wrap { height: auto; aspect-ratio: 1 / 1; }
  .choir-meta-text + .choir-meta-text { padding-top: 8px; }
  /* More breathing room around the go-up arrow */
  .choir-scroll-top { margin-top: 64px; }
  /* 220px inferiores: el nav móvil envuelve en dos filas (~170px) */
  .choir-body { padding-bottom: 220px; }
}