/* Sunlit Sanctuary Hymns and Hymn Fest pages: an editorial music archive with parchment fields, forest structure, sun-gold controls, and authentic KIWM gallery imagery. */
.hymns-hero,
.hymn-fest-hero {
  color: #fff;
  isolation: isolate;
  min-height: 510px;
  overflow: hidden;
  padding: 8rem 0 5.25rem;
  position: relative;
}

.hymns-hero > img,
.hymns-hero-wash,
.hymn-fest-hero > img,
.hymn-fest-hero-wash {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.hymns-hero > img,
.hymn-fest-hero > img {
  object-fit: cover;
  z-index: -2;
}

.hymns-hero-wash,
.hymn-fest-hero-wash {
  background: linear-gradient(
    90deg,
    rgba(17, 45, 37, 0.93),
    rgba(17, 45, 37, 0.33)
  );
  z-index: -1;
}

.hymns-hero .eyebrow,
.hymn-fest-hero .eyebrow {
  color: #fff;
}

.hymns-hero .eyebrow span,
.hymn-fest-hero .eyebrow span {
  margin: 0 0.45rem;
}

.hymns-hero h1,
.hymn-fest-hero h1 {
  color: #fff;
  font-size: clamp(4.25rem, 8vw, 8.2rem);
  margin: 1rem 0;
}

.hymns-hero h1 em,
.hymn-fest-hero h1 em {
  color: var(--sun);
}

.hymns-hero p:not(.eyebrow),
.hymn-fest-hero p:not(.eyebrow) {
  font-family: "Playfair Display", serif;
  font-size: 1.22rem;
  line-height: 1.6;
  max-width: 650px;
}

.hymns-prologue,
.hymn-fest-prologue {
  background: #fffdf9;
  padding: 6.5rem 0;
}

.hymns-prologue .container,
.hymn-fest-prologue .container {
  align-items: end;
  display: grid;
  gap: 3rem;
  grid-template-columns: 1.1fr 0.9fr;
}

.hymns-prologue h2,
.hymn-fest-prologue h2 {
  font-size: clamp(3.3rem, 5.2vw, 5.9rem);
  margin: 0;
}

.hymns-prologue h2 em,
.hymn-fest-prologue h2 em {
  color: var(--clay);
}

.hymns-prologue p:not(.eyebrow),
.hymn-fest-prologue p:not(.eyebrow) {
  color: #536159;
  font-family: "Playfair Display", serif;
  font-size: 1.18rem;
  line-height: 1.65;
  margin: 0;
}

.hymns-channels {
  background: #efe3cb;
  padding: 1.35rem 0;
}

.hymns-channels .container {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  justify-content: space-between;
}

.hymns-channels p {
  color: var(--forest);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0;
  text-transform: uppercase;
}

.hymns-channel-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.3rem;
}

.hymns-channel-links a {
  color: var(--forest);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}

.hymn-video-section,
.hymn-fest-archive {
  background: #f7f1e6;
  padding: 6.4rem 0;
}

.hymn-video-heading,
.hymn-fest-heading {
  align-items: end;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 2.5rem;
}

.hymn-video-heading h2,
.hymn-fest-heading h2 {
  font-size: clamp(3rem, 4.8vw, 5.1rem);
  margin: 0;
}

.hymn-video-heading h2 em,
.hymn-fest-heading h2 em {
  color: var(--clay);
}

.hymn-video-heading p:not(.eyebrow),
.hymn-fest-heading p:not(.eyebrow) {
  color: #5f6b64;
  font-family: "Playfair Display", serif;
  line-height: 1.6;
  margin: 0;
  max-width: 410px;
}

.hymn-video-card,
.hymn-fest-card {
  background: #fffdf9;
  height: 100%;
}

.hymn-video-art,
.hymn-fest-art {
  aspect-ratio: 16 / 10;
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

.hymn-video-art > img,
.hymn-video-wash,
.hymn-fest-art > img,
.hymn-fest-wash {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.hymn-video-art > img,
.hymn-fest-art > img {
  object-fit: cover;
  transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -2;
}

.hymn-video-card:hover .hymn-video-art > img,
.hymn-fest-card:hover .hymn-fest-art > img {
  transform: scale(1.05);
}

.hymn-video-wash,
.hymn-fest-wash {
  background: linear-gradient(
    180deg,
    rgba(17, 45, 37, 0.03),
    rgba(17, 45, 37, 0.76)
  );
  z-index: -1;
}

.hymn-source-label,
.hymn-fest-location {
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.63rem;
  font-weight: 800;
  left: 1rem;
  letter-spacing: 0.1em;
  position: absolute;
  text-transform: uppercase;
  top: 1rem;
}

.hymn-play-button {
  align-items: center;
  background: var(--sun);
  border: 0;
  bottom: 1rem;
  color: var(--forest);
  display: flex;
  font-family: "DM Sans", sans-serif;
  font-size: 0.63rem;
  font-weight: 800;
  gap: 0.45rem;
  letter-spacing: 0.06em;
  padding: 0.78rem 0.95rem;
  position: absolute;
  right: 1rem;
  text-transform: uppercase;
  transition: transform 0.18s cubic-bezier(0.23, 1, 0.32, 1);
}

.hymn-play-button:hover {
  background: #fff3ca;
}

.hymn-play-button:active {
  transform: scale(0.96);
}

/* Home Featured Hymns playback button: uses the shared YouTube modal without changing the established card composition. */
.home-hymn-play {
  bottom: 1rem;
  position: absolute;
  right: 1rem;
}

.hymn-video-copy,
.hymn-fest-copy {
  padding: 1.5rem 1.45rem 1.7rem;
}

.hymn-video-copy > p,
.hymn-fest-copy > p {
  color: #a0783d;
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin: 0 0 0.7rem;
  text-transform: uppercase;
}

.hymn-video-copy h3,
.hymn-fest-copy h3 {
  color: var(--forest);
  font-family: "DM Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.28;
  margin: 0;
}

.hymn-video-copy span,
.hymn-fest-copy span {
  color: #6d776f;
  display: block;
  font-size: 0.8rem;
  margin-top: 0.75rem;
}

.hymns-book-section {
  background: #fffdf9;
}

.hymn-fest-card {
  border-top: 4px solid var(--sun);
}

.hymn-fest-year {
  background: var(--forest);
  color: #fff;
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 0.65rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.hymn-fest-closing {
  background: var(--forest);
  color: #e2ebe4;
  padding: 6.2rem 0;
  text-align: center;
}

.hymn-fest-closing .eyebrow {
  color: #fff;
}

.hymn-fest-closing h2 {
  color: #fff;
  font-size: clamp(3.2rem, 5vw, 5.7rem);
  margin: 1rem auto 1.4rem;
  max-width: 760px;
}

.hymn-fest-closing h2 em {
  color: var(--sun);
}

.hymn-fest-closing p:not(.eyebrow) {
  margin: 0 auto 2rem;
  max-width: 580px;
}

@media (max-width: 767px) {
  .hymns-hero,
  .hymn-fest-hero {
    min-height: 440px;
    padding: 6rem 0 4rem;
  }

  .hymns-hero p:not(.eyebrow),
  .hymn-fest-hero p:not(.eyebrow) {
    font-size: 1.08rem;
  }

  .hymns-prologue,
  .hymn-fest-prologue,
  .hymn-video-section,
  .hymn-fest-archive {
    padding: 4.8rem 0;
  }

  .hymns-prologue .container,
  .hymn-fest-prologue .container {
    display: block;
  }

  .hymns-prologue h2,
  .hymn-fest-prologue h2 {
    margin-bottom: 1.5rem;
  }

  .hymn-video-heading,
  .hymn-fest-heading {
    align-items: start;
    display: block;
    margin-bottom: 2rem;
  }

  .hymn-video-heading p:not(.eyebrow),
  .hymn-fest-heading p:not(.eyebrow) {
    margin-top: 1rem;
  }

  .hymns-channels {
    padding: 1.25rem 0;
  }

  .hymn-fest-closing {
    padding: 4.8rem 0;
  }
}