/* =========================================================
   FRIENDS OF THE GLEN COVE YOUTH BOARD
   PROGRAMS PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.programs-page-hero {
  min-height: 610px;

  display: flex;
  align-items: center;

  background:
    linear-gradient(
      90deg,
      rgba(8, 35, 63, 0.86) 0%,
      rgba(8, 35, 63, 0.72) 30%,
      rgba(22, 61, 118, 0.42) 54%,
      rgba(22, 61, 118, 0.14) 78%,
      rgba(22, 61, 118, 0.03) 100%
    ),
    url("../images/programs-hero.jpg");

  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}


.programs-page-hero-content {
  width: min(92%, var(--container));
  max-width: var(--container);

  margin: 0 auto;

  text-align: left;
}


.programs-page-hero-content > * {
  max-width: 650px;
}


.programs-page-hero .eyebrow {
  color: var(--gold);
}


.programs-page-hero h1 {
  margin: 0 0 24px;

  color: #fff;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(3.3rem, 6vw, 5.8rem);

  line-height: 0.98;
}


.programs-hero-description {
  color: rgba(255, 255, 255, 0.92);

  font-size: 1.12rem;

  line-height: 1.7;
}



/* =========================================================
   INTRO
========================================================= */

.programs-intro-section {
  background: #fff;
}


.programs-intro-layout {
  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  gap: 70px;

  align-items: center;
}


.programs-intro-layout h2,
.program-registration-layout h2 {

  margin-bottom: 18px;

  color: var(--navy-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(2.1rem, 4vw, 3.2rem);

  line-height: 1.12;
}


.programs-intro-layout p:not(.section-label) {
  margin-bottom: 16px;

  color: #5c6670;
}


.programs-intro-layout .large-copy {
  color: var(--navy-dark);
}


.programs-intro-card {
  padding: 44px;

  border-radius: 24px;

  background:
    linear-gradient(
      145deg,
      var(--gold-light),
      #fff
    );

  border: 1px solid rgba(213, 174, 99, 0.48);
}


.programs-intro-card span {
  display: block;

  margin-bottom: 8px;

  color: var(--blue);

  font-size: .75rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .13em;
}


.programs-intro-card strong {
  display: block;

  margin-bottom: 13px;

  color: var(--navy-dark);

  font-family: Georgia, serif;

  font-size: 2.2rem;
}


.programs-intro-card p {
  color: #5c6670;
}



/* =========================================================
   PROGRAM GRID
========================================================= */

.programs-grid-section {
  padding: 95px 0;

  background: var(--cream);
}


.program-modal-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 26px;
}


.program-modal-card {
  display: flex;

  flex-direction: column;

  overflow: hidden;

  background: #fff;

  border-radius: 22px;

  box-shadow:
    0 14px 35px rgba(8, 35, 63, 0.09);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.program-modal-card:hover {
  transform: translateY(-6px);

  box-shadow:
    0 22px 45px rgba(8, 35, 63, 0.14);
}


.program-modal-image {
  position: relative;

  height: 235px;

  overflow: hidden;
}


.program-modal-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: transform .4s ease;
}


.program-modal-card:hover .program-modal-image img {
  transform: scale(1.04);
}


.program-modal-icon-card {
  position: relative;

  height: 235px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--blue)
    );
}


.registration-icon {
  background:
    linear-gradient(
      135deg,
      var(--gold-dark),
      var(--gold)
    );
}


.large-program-icon {
  color: white;

  font-size: 4.5rem;
}


.program-category {
  position: absolute;

  left: 18px;
  bottom: 17px;

  padding: 7px 12px;

  background: rgba(8, 35, 63, 0.91);

  color: #fff;

  border-radius: 30px;

  font-size: .72rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .08em;
}


.program-modal-card-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 28px;
}


.program-modal-card-content h3 {
  margin-bottom: 10px;

  color: var(--navy-dark);

  font-family: Georgia, serif;

  font-size: 1.65rem;
}


.program-modal-card-content > p:not(.mini-label) {
  margin-bottom: 24px;

  color: #606a74;

  line-height: 1.65;
}


.program-learn-button {
  margin-top: auto;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border: 0;

  background: transparent;

  color: var(--blue);

  font: inherit;

  font-weight: 800;

  cursor: pointer;

  text-align: left;
}


.program-learn-button span {
  font-size: 1.3rem;

  transition: transform .2s ease;
}


.program-learn-button:hover span {
  transform: translateX(5px);
}



/* =========================================================
   FRIENDS SECTION
========================================================= */

.programs-friends-section {
  padding: 90px 0;

  background:
    linear-gradient(
      135deg,
      var(--navy-dark),
      var(--navy)
    );
}


.programs-friends-layout {
  display: grid;

  grid-template-columns: 1.25fr .75fr;

  gap: 60px;

  align-items: center;
}


.programs-friends-section h2 {
  margin-bottom: 18px;

  color: #fff;

  font-family: Georgia, serif;

  font-size: clamp(2.1rem, 4vw, 3.2rem);
}


.programs-friends-section p:not(.section-label) {
  margin-bottom: 15px;

  color: rgba(255, 255, 255, .8);
}


.programs-friends-actions {
  display: flex;

  flex-direction: column;

  gap: 14px;
}



/* =========================================================
   REGISTRATION
========================================================= */

.program-registration-section {
  background: #fff;
}


.program-registration-layout {
  display: grid;

  grid-template-columns: 1.15fr .85fr;

  gap: 70px;

  align-items: center;
}


.program-registration-layout > div:first-child p:not(.section-label) {
  margin-bottom: 15px;

  color: #5f6973;
}


.registration-preview-card {
  padding: 38px;

  background: var(--gold-light);

  border-radius: 22px;
}


.registration-preview-card > span {
  display: block;

  margin-bottom: 7px;

  color: var(--blue);

  font-size: .74rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .1em;
}


.registration-preview-card strong {
  display: block;

  margin-bottom: 10px;

  color: var(--navy-dark);

  font-family: Georgia, serif;

  font-size: 1.55rem;
}


.registration-preview-card p {
  margin-bottom: 10px;

  color: #5d6670;
}


.registration-preview-card > a {
  display: inline-block;

  margin-bottom: 22px;

  color: var(--blue);

  font-weight: 800;
}



/* =========================================================
   MODAL WINDOW
========================================================= */

.program-modal {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: none;

  align-items: center;
  justify-content: center;

  padding: 30px;
}


.program-modal.is-open {
  display: flex;
}


.program-modal-backdrop {
  position: absolute;

  inset: 0;

  background: rgba(2, 19, 35, .79);

  backdrop-filter: blur(5px);
}


.program-modal-dialog {
  position: relative;

  z-index: 2;

  width: min(850px, 100%);

  max-height: 90vh;

  overflow-y: auto;

  background: #fff;

  border-radius: 24px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, .35);
}


.modal-small {
  width: min(680px, 100%);
}


.program-modal-close {
  position: absolute;

  z-index: 10;

  top: 15px;
  right: 15px;

  width: 43px;
  height: 43px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;

  border-radius: 50%;

  background: rgba(8, 35, 63, .92);

  color: #fff;

  font-size: 1.8rem;

  cursor: pointer;
}


.modal-header-image {
  height: 300px;

  overflow: hidden;
}


.modal-header-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.program-modal-body {
  padding: 43px;
}


.no-modal-image {
  padding-top: 65px;
}


.program-modal-body h2 {
  margin-bottom: 18px;

  color: var(--navy-dark);

  font-family: Georgia, serif;

  font-size: clamp(2rem, 4vw, 3rem);
}


.program-modal-body h3 {
  margin: 25px 0 9px;

  color: var(--navy-dark);

  font-family: Georgia, serif;

  font-size: 1.4rem;
}


.modal-intro {
  margin-bottom: 28px;

  color: #4f5d68;

  font-size: 1.08rem;

  line-height: 1.7;
}


.program-modal-body p {
  color: #5d6872;

  line-height: 1.7;
}


.program-modal-body ul {
  margin: 15px 0 0;

  padding-left: 22px;

  color: #5d6872;
}


.program-modal-body li {
  margin-bottom: 7px;
}


.modal-feature-box {
  margin: 20px 0;

  padding: 23px;

  background: var(--cream);

  border-left: 4px solid var(--gold);

  border-radius: 12px;
}


.modal-feature-box h3 {
  margin-top: 0;
}


.modal-highlight-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 15px;

  margin: 25px 0;
}


.modal-highlight-grid > div {
  padding: 20px;

  background: var(--blue-light);

  border-radius: 13px;
}


.modal-highlight-grid span {
  display: block;

  margin-bottom: 5px;

  color: var(--blue);

  font-size: .7rem;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: .09em;
}


.modal-highlight-grid strong {
  color: var(--navy-dark);
}


.modal-contact-box {
  margin-top: 30px;

  padding: 23px;

  display: flex;

  flex-direction: column;

  gap: 6px;

  background: var(--navy-dark);

  border-radius: 15px;
}


.modal-contact-box strong {
  color: #fff;
}


.modal-contact-box span {
  color: rgba(255,255,255,.75);
}


.modal-contact-box a {
  color: var(--gold-light);

  font-weight: 800;
}


.program-current-note {
  margin-top: 25px;

  padding-top: 18px;

  border-top: 1px solid #ddd;

  font-size: .87rem;

  font-style: italic;
}



/* =========================================================
   COMMUNITY EVENT LIST
========================================================= */

.event-program-list {
  display: grid;

  gap: 12px;

  margin-top: 25px;
}


.event-program-list > div {
  padding: 18px 20px;

  display: flex;

  flex-direction: column;

  background: var(--cream);

  border-radius: 12px;
}


.event-program-list strong {
  margin-bottom: 5px;

  color: var(--navy-dark);
}


.event-program-list span {
  color: #626b74;
}



/* =========================================================
   REGISTRATION MODAL
========================================================= */

.registration-heading {
  margin-top: 35px !important;

  padding-bottom: 10px;

  border-bottom: 2px solid var(--gold);
}


.registration-contact-list {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 13px;

  margin-top: 18px;
}


.registration-contact-list > div {
  padding: 18px;

  display: flex;
  flex-direction: column;

  background: var(--cream);

  border-radius: 12px;
}


.registration-contact-list strong {
  color: var(--navy-dark);
}


.registration-contact-list span {
  margin: 3px 0 8px;

  color: #65707a;

  font-size: .86rem;
}


.registration-contact-list a {
  color: var(--blue);

  font-size: .9rem;

  font-weight: 700;

  word-break: break-word;
}


.program-location-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;

  margin-top: 18px;
}


.program-location-card {
  padding: 20px;

  background: var(--blue-light);

  border-radius: 13px;
}


.program-location-card strong {
  display: block;

  margin-bottom: 9px;

  color: var(--navy-dark);
}


.program-location-card p {
  margin-bottom: 9px;

  font-size: .9rem;
}


.program-location-card a {
  color: var(--blue);

  font-weight: 800;
}



/* =========================================================
   BODY LOCK
========================================================= */

body.modal-open {
  overflow: hidden;
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1000px) {
.programs-trip-layout {
  grid-template-columns: 1fr;
}
  .program-modal-grid {
    grid-template-columns: repeat(2, 1fr);
  }


  .programs-intro-layout,
  .programs-friends-layout,
  .program-registration-layout {

    grid-template-columns: 1fr;

  }


  .program-location-grid {
    grid-template-columns: 1fr;
  }

}



@media (max-width: 700px) {

    /* MODAL PHOTO GALLERIES */
.programs-trip-photo-grid,
.program-modal-gallery {
  grid-template-columns: 1fr;
}

.programs-trip-photo-grid img {
  height: 320px;
}

.program-modal-gallery img {
  height: auto;
}
  .programs-page-hero {
    min-height: 590px;

    background-position: 58% center;
  }


  .programs-page-hero-content {
    width: 92%;
  }


  .programs-page-hero h1 {
    font-size: clamp(3rem, 13vw, 4.5rem);
  }


  .program-modal-grid {
    grid-template-columns: 1fr;
  }


  .program-modal-image,
  .program-modal-icon-card {

    height: 220px;

  }


  .program-modal {
    padding: 12px;
  }


  .program-modal-dialog {
    max-height: 94vh;

    border-radius: 18px;
  }


  .modal-header-image {
    height: 220px;
  }


  .program-modal-body {
    padding: 29px 22px;
  }


  .no-modal-image {
    padding-top: 65px;
  }


  .modal-highlight-grid,
  .registration-contact-list {

    grid-template-columns: 1fr;

  }


  .programs-intro-card,
  .registration-preview-card {

    padding: 29px;

  }

}
/* =========================================================
   TRIPS / ENRICHMENT FEATURE
========================================================= */

.programs-trip-feature {
  background: #fff;
}


.programs-trip-layout {
  display: grid;

  grid-template-columns: .9fr 1.1fr;

  gap: 65px;

  align-items: center;
}


.programs-trip-layout h2 {
  margin-bottom: 18px;

  color: var(--navy-dark);

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(2.1rem, 4vw, 3.2rem);

  line-height: 1.12;
}


.programs-trip-layout p:not(.section-label) {
  margin-bottom: 16px;

  color: #5c6670;
}


.programs-trip-layout .large-copy {
  color: var(--navy-dark);
}


.programs-trip-photo-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;
}


.programs-trip-photo-grid img {
  width: 100%;
  height: 390px;

  object-fit: cover;

  border-radius: 18px;

  box-shadow:
    0 14px 35px rgba(8, 35, 63, .1);
}


.programs-trip-photo-grid img:first-child {
  object-position: center center;
}


.programs-trip-photo-grid img:last-child {
  object-position: center center;
}



/* =========================================================
   MODAL PHOTO GALLERIES
========================================================= */

.program-modal-gallery {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 13px;

  margin-top: 28px;
}


.program-modal-gallery img {
  width: 100%;
  height: 260px;

  object-fit: cover;

  border-radius: 14px;
}


.photo-credit-note {
  margin-top: 10px;

  color: #7a8289 !important;

  font-size: .78rem;

  font-style: italic;
}