/* ============================================
    programs.css — Single Page Programs Experience
    ============================================ */

.programs-page {
   overflow-x: clip;
}

.programs-hero {
   position: relative;
   padding: 8rem 0 4.5rem;
   background:
      radial-gradient(circle at 15% 20%, rgba(200, 182, 255, 0.28), transparent 32%),
      radial-gradient(circle at 82% 12%, rgba(184, 192, 255, 0.24), transparent 28%),
      linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent),
      var(--color-bg);
}

.programs-hero__inner {
   position: relative;
   z-index: 1;
}

.programs-hero__glow {
   position: absolute;
   border-radius: 999px;
   filter: blur(60px);
   opacity: 0.55;
   pointer-events: none;
}

.programs-hero__glow--one {
   top: 5rem;
   left: -4rem;
   width: 14rem;
   height: 14rem;
   background: rgba(184, 192, 255, 0.35);
}

.programs-hero__glow--two {
   top: 2rem;
   right: -3rem;
   width: 16rem;
   height: 16rem;
   background: rgba(255, 214, 255, 0.26);
}

.programs-eyebrow,
.programs-kicker,
.program-video-modal__label {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
   margin-bottom: 0.9rem;
   font-family: 'Cinzel', serif;
   font-size: 0.82rem;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--color-primary);
}

.programs-eyebrow::before,
.programs-kicker::before,
.program-video-modal__label::before {
   content: '';
   width: 2.5rem;
   height: 1px;
   background: currentColor;
   opacity: 0.55;
}

.programs-hero h1 {
   max-width: none;
   font-size: clamp(3rem, 8vw, 5.6rem);
   line-height: 0.95;
   margin-bottom: 1.25rem;
}

.programs-hero__lead,
.programs-section-head p,
.program-band__heading p {
   max-width: 46rem;
   color: var(--color-text-muted);
   font-size: 1.05rem;
}

.programs-overview {
   padding-top: 0;
}

.programs-section-head {
   margin-bottom: 2rem;
}

.programs-section-head h2,
.program-band__heading h2 {
   font-size: clamp(2.2rem, 4vw, 3.4rem);
   margin-bottom: 0.8rem;
   white-space: nowrap;
}

.programs-overview__grid {
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
   gap: 1rem;
}

.programs-overview__card {
   display: flex;
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: 1.5rem;
   background: var(--color-card-bg);
   box-shadow: var(--shadow-sm);
   text-align: left;
   transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.programs-overview__card:hover,
.programs-overview__card:focus-visible,
.programs-overview__card.is-active {
   transform: translateY(-6px);
   box-shadow: var(--shadow-lg);
   border-color: var(--color-primary);
}

.programs-overview__image {
   position: relative;
   display: block;
   aspect-ratio: 4 / 3;
   overflow: hidden;
}

.programs-overview__image::after {
   content: '';
   position: absolute;
   inset: 0;
   /* background: linear-gradient(180deg, transparent 15%, color-mix(in srgb, var(--color-heading) 55%, transparent)); */
}

.programs-overview__image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.programs-overview__card:hover .programs-overview__image img,
.programs-overview__card:focus-visible .programs-overview__image img {
   transform: scale(1.06);
}

.programs-overview__body {
   display: grid;
   gap: 0.45rem;
   padding: 1rem 1rem 1.15rem;
}

.programs-overview__body i {
   font-size: 1rem;
   color: var(--color-primary);
}

.programs-overview__body strong {
   font-size: 1.25rem;
   font-family: 'Cormorant Garamond', serif;
   color: var(--color-heading);
}

.programs-overview__body small {
   color: var(--color-text-muted);
   font-size: 0.9rem;
   line-height: 1.5;
}

.program-band {
   padding: 4.5rem 0;
}

.program-band--alt {
   background:
      linear-gradient(180deg, transparent, rgba(184, 192, 255, 0.08), transparent),
      var(--color-bg-alt);
}

.program-band__heading {
   margin-bottom: 2rem;
}

.program-main-card,
.program-support-card {
   overflow: hidden;
   border: 1px solid var(--color-border);
   border-radius: 1.5rem;
   background: var(--color-card-bg);
   box-shadow: var(--shadow-sm);
}

.program-main-card {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 30rem;
   margin-bottom: 1rem;
}

.program-main-card__media,
.program-support-card__media {
   position: relative;
   overflow: hidden;
}

.program-main-card__media img,
.program-support-card__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.program-main-card__content,
.program-support-card__content {
   display: flex;
   flex-direction: column;
   gap: 0.85rem;
   padding: 1.5rem;
}

.program-main-card__content {
   justify-content: center;
}

.program-main-card__content h3 {
   font-size: clamp(2rem, 3vw, 2.8rem);
}

.program-main-card__content p,
.program-support-card__content p {
   color: var(--color-text-muted);
}

.program-support-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 1rem;
}

.program-card__tag {
   font-family: 'Cinzel', serif;
   font-size: 0.76rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--color-primary);
}

.program-card__play {
   position: absolute;
   inset: auto auto 1rem 1rem;
   display: grid;
   place-items: center;
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 999px;
   background: color-mix(in srgb, var(--color-heading) 70%, transparent);
   color: var(--color-secondary);
   box-shadow: var(--shadow-md);
}

.program-support-card {
   display: flex;
   flex-direction: column;
   min-height: 100%;
}

.program-support-card__media {
   aspect-ratio: 4 / 5;
}

.program-support-card__content h3 {
   font-size: 1.55rem;
}

.program-support-card--video {
   cursor: pointer;
}

.program-support-card--video .program-support-card__media::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, transparent 15%, color-mix(in srgb, var(--color-heading) 45%, transparent));
}

.program-points {
   display: grid;
   gap: 0.65rem;
}

.program-points li {
   display: flex;
   align-items: flex-start;
   gap: 0.65rem;
   color: var(--color-text);
}

.program-points li i {
   margin-top: 0.3rem;
   color: var(--color-primary);
}

.program-points--tight li {
   font-size: 0.96rem;
}

.program-reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 0.6s ease, transform 0.6s ease;
}

.program-reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
}

.program-video-modal {
   position: fixed;
   inset: 0;
   z-index: 1200;
   display: none;
}

.program-video-modal.is-open {
   display: block;
}

.program-video-modal__backdrop {
   position: absolute;
   inset: 0;
   background: color-mix(in srgb, var(--color-heading) 72%, transparent);
   backdrop-filter: blur(6px);
}

.program-video-modal__dialog {
   position: relative;
   z-index: 1;
   width: min(92vw, 900px);
   margin: 5vh auto 0;
   padding: 1.25rem;
   border: 1px solid var(--color-border);
   border-radius: 1.5rem;
   background: var(--color-card-bg);
   box-shadow: var(--shadow-lg);
}

.program-video-modal__close {
   position: absolute;
   top: 0.8rem;
   right: 0.8rem;
   display: grid;
   place-items: center;
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 999px;
   color: var(--color-text);
   background: color-mix(in srgb, var(--color-bg-alt) 88%, transparent);
}

.program-video-modal__dialog h3 {
   margin-bottom: 1rem;
   font-size: 2rem;
}

.program-video-modal video {
   width: 100%;
   aspect-ratio: 16 / 9;
   border-radius: 1rem;
   background: #000;
}

body.program-video-open {
   overflow: hidden;
}

@media (max-width: 1180px) {
   .programs-overview__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }

   .program-support-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 860px) {
   .programs-hero {
      padding-top: 7rem;
   }

   .programs-overview__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .programs-section-head h2,
   .program-band__heading h2 {
      white-space: normal;
   }

   .program-main-card {
      grid-template-columns: 1fr;
      min-height: auto;
   }
}

@media (max-width: 620px) {

   .programs-overview__grid,
   .program-support-grid {
      grid-template-columns: 1fr;
   }

   .programs-section-head h2,
   .program-band__heading h2 {
      font-size: 2rem;
   }

   .program-main-card__content h3,
   .program-support-card__content h3 {
      font-size: 1.45rem;
   }

   .program-video-modal__dialog {
      width: min(94vw, 900px);
      margin-top: 10vh;
      padding: 1rem;
   }
}