/* ════════════════════════════════════════════════════════════
   PARENTS.CSS — Parent Testimonials Page
   Requires: variables.css, common.css loaded first.
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   HERO — Navy bg + watermark badge + stars rating
   ════════════════════════════════════════════════════════════ */
#parents-hero {
  position:   relative;
  background: var(--navy);
  padding:    140px 64px 90px;
  overflow:   hidden;
  isolation:  isolate;
  text-align: center;
}

#parents-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url('../images/inner-page-bg.png') center / contain no-repeat;
  opacity:    0.08;
  z-index:    -1;
}

.ph-content {
  max-width: 880px;
  margin:    0 auto;
  z-index: 1;
  position: inherit;
}

#parents-hero .section-label {
  justify-content: center;
}

.ph-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight:    900;
  line-height:    1.1;
  color:          var(--white);
  margin:         14px 0 18px;
  letter-spacing: -0.01em;
}

.ph-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  font-weight: 400;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  max-width:   600px;
  margin:      0 auto 28px;
}

.ph-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--sun);
  color:           var(--navy);
  font-family:     'Inter', sans-serif;
  font-weight:     800;
  font-size:       14px;
  padding:         14px 30px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.3s var(--ease-bounce);
  margin-bottom:   24px;
}
.ph-cta:hover {
  background: var(--white);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}

.ph-rating {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             6px;
}

.ph-stars {
  display:    inline-flex;
  gap:        4px;
  color:      #FFD700;
  font-size:  18px;
  letter-spacing: 2px;
}

.ph-rating-text {
  font-family: 'Inter', sans-serif;
  font-size:   12.5px;
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}


/* ════════════════════════════════════════════════════════════
   FEATURED TESTIMONIAL — Voices from Our Community
   ════════════════════════════════════════════════════════════ */
#parents-featured {
  background: var(--white);
  padding:    90px 64px 80px;
}

.pf-head {
  text-align:    center;
  margin-bottom: 50px;
}

.pf-head .section-label {
  justify-content: center;
}

.pf-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--navy);
  margin:         10px 0 0;
  line-height:    1.1;
  letter-spacing: -0.01em;
}

.pf-card {
  display:               grid;
  grid-template-columns: 1fr 1.3fr;
  gap:                   0;
  background:            var(--navy);
  border-radius:         22px;
  overflow:              hidden;
  max-width:             1100px;
  margin:                0 auto;
  box-shadow:            0 20px 60px rgba(15, 27, 61, 0.18);
}

.pf-card-img {
  min-height: 320px;
}
.pf-card-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.pf-card-body {
  padding:         40px 44px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

.pf-stars {
  color:     #FFD700;
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 18px;
}

.pf-quote {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 500;
  line-height: 1.55;
  color:       rgba(255, 255, 255, 0.92);
  margin:      0 0 26px;
}

.pf-author {
  display:     flex;
  align-items: center;
  gap:         14px;
}

.pf-author-avatar {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--sun);
  color:           var(--navy);
  font-family:     'Inter', sans-serif;
  font-weight:     900;
  font-size:       16px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.pf-author-name {
  font-family: var(--font-heading);
  font-size:   15px;
  font-weight: 800;
  color:       var(--white);
  line-height: 1.2;
}

.pf-author-meta {
  font-family: 'Inter', sans-serif;
  font-size:   12px;
  color:       var(--sun);
  margin-top:  3px;
}


/* ════════════════════════════════════════════════════════════
   TESTIMONIAL GRID — 6 cards (2 rows × 3 cols) + pagination
   ════════════════════════════════════════════════════════════ */
#parents-grid {
  background: var(--white);
  padding:    20px 64px 90px;
}

.pg-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  max-width:             1240px;
  margin:                0 auto;
}

.pg-card {
  background:    #FFF1EB;          /* default pastel — overridden per-card */
  border-radius: 18px;
  padding:       20px 22px 24px;
  display:       flex;
  flex-direction: column;
  transition:    transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.pg-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 27, 61, 0.1);
}

/* Per-card pastel backgrounds — repeat in HTML order */
.pg-card:nth-child(6n+1) { background: #FFEFE6; }   /* peach */
.pg-card:nth-child(6n+2) { background: #E8EEFB; }   /* soft blue */
.pg-card:nth-child(6n+3) { background: #E8F6EC; }   /* mint */
.pg-card:nth-child(6n+4) { background: #F2E6F5; }   /* lavender */
.pg-card:nth-child(6n+5) { background: #FFF6D9; }   /* butter */
.pg-card:nth-child(6n+6) { background: #E6F3F6; }   /* sky */

.pg-card-img {
  aspect-ratio:  4 / 3;
  border-radius: 12px;
  overflow:      hidden;
  margin-bottom: 16px;
}
.pg-card-img img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.pg-card:hover .pg-card-img img { transform: scale(1.04); }

.pg-stars {
  color:     #FFD700;
  font-size: 14px;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}

.pg-quote {
  font-family: 'Inter', sans-serif;
  font-style:  italic;
  font-size:   13.5px;
  line-height: 1.65;
  color:       var(--navy);
  margin:      0 0 18px;
  flex:        1;
}

.pg-author {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.pg-author-avatar {
  width:           36px;
  height:          36px;
  border-radius:   50%;
  color:           var(--white);
  font-family:     'Inter', sans-serif;
  font-weight:     800;
  font-size:       13px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* Avatar colors cycle to match card pastels */
.pg-card:nth-child(6n+1) .pg-author-avatar { background: #E25822; }   /* coral */
.pg-card:nth-child(6n+2) .pg-author-avatar { background: var(--navy); }
.pg-card:nth-child(6n+3) .pg-author-avatar { background: #2EAD60; }   /* green */
.pg-card:nth-child(6n+4) .pg-author-avatar { background: #8A5BB8; }   /* purple */
.pg-card:nth-child(6n+5) .pg-author-avatar { background: #E0A82E; }   /* amber */
.pg-card:nth-child(6n+6) .pg-author-avatar { background: #2E8FAD; }   /* teal */

.pg-author-name {
  font-family: 'Inter', sans-serif;
  font-size:   13px;
  font-weight: 800;
  color:       var(--navy);
  line-height: 1.2;
}

.pg-author-meta {
  font-family: 'Inter', sans-serif;
  font-size:   11.5px;
  color:       rgba(15, 27, 61, 0.6);
  margin-top:  2px;
}


/* ── Pagination ── */
.pg-pagination {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             8px;
  margin-top:      50px;
}

.pg-pagination a,
.pg-pagination span {
  font-family:     'Inter', sans-serif;
  font-weight:     600;
  font-size:       13.5px;
  color:           var(--navy);
  text-decoration: none;
  padding:         8px 14px;
  border-radius:   8px;
  transition:      all 0.2s ease;
  min-width:       38px;
  text-align:      center;
}
.pg-pagination a:hover    { background: #F4F6FB; }
.pg-pagination .is-active { background: var(--navy); color: var(--sun); }
.pg-pagination .is-disabled { color: #BFC5D2; cursor: default; }


/* ════════════════════════════════════════════════════════════
   GALLERY — "A Day in the Life at Oxford"
   Masonry-style mosaic with lightbox on click
   ════════════════════════════════════════════════════════════ */
#parents-gallery {
  background: #F4F6FB;
  padding:    90px 64px 100px;
}

.gal-head {
  text-align:    center;
  margin-bottom: 44px;
}

.gal-head .section-label {
  justify-content: center;
}

.gal-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--navy);
  margin:         10px 0 12px;
  line-height:    1.1;
  letter-spacing: -0.01em;
}

.gal-sub {
  font-family: 'Inter', sans-serif;
  font-size:   14.5px;
  line-height: 1.7;
  color:       var(--text-soft);
  margin:      0 auto;
  max-width:   540px;
}

/* Mosaic — CSS grid with explicit row/col spans for visual interest */
.gal-mosaic {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows:        140px;
  gap:                   16px;
  max-width:             1240px;
  margin:                0 auto;
}

.gal-cell {
  position:      relative;
  border-radius: 14px;
  overflow:      hidden;
  cursor:        pointer;
  background:    var(--navy);
}
.gal-cell img {
  display:    block;
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.gal-cell:hover img { transform: scale(1.05); }

/* Hover label */
.gal-cell::after {
  content:    attr(data-label);
  position:   absolute;
  left:       0;
  right:      0;
  bottom:     0;
  padding:    16px 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size:   13px;
  color:       var(--white);
  background:  linear-gradient(to top, rgba(15,27,61,0.8) 0%, rgba(15,27,61,0) 100%);
  opacity:     0;
  transition:  opacity 0.3s ease;
}
.gal-cell:hover::after { opacity: 1; }

/* Mosaic spans — 7 cells across 2 rows */
.gal-cell:nth-child(1) { grid-column: span 3; grid-row: span 2; }   /* big left */
.gal-cell:nth-child(2) { grid-column: span 3; grid-row: span 1; }
.gal-cell:nth-child(3) { grid-column: span 2; grid-row: span 1; }
.gal-cell:nth-child(4) { grid-column: span 2; grid-row: span 1; }
.gal-cell:nth-child(5) { grid-column: span 2; grid-row: span 1; }
.gal-cell:nth-child(6) { grid-column: span 2; grid-row: span 1; }
.gal-cell:nth-child(7) { grid-column: span 4; grid-row: span 1; }


/* ── Lightbox ── */
.lightbox {
  position:        fixed;
  inset:           0;
  background:      rgba(15, 27, 61, 0.92);
  z-index:         5000;
  display:         none;
  align-items:     center;
  justify-content: center;
  padding:         60px 40px;
  backdrop-filter: blur(6px);
}
.lightbox.is-open { display: flex; }

.lightbox-stage {
  position: relative;
  max-width:  1000px;
  max-height: 80vh;
  width:    100%;
}

.lightbox-img {
  display:       block;
  max-width:     100%;
  max-height:    80vh;
  margin:        0 auto;
  border-radius: 14px;
  box-shadow:    0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size:   14px;
  color:       var(--white);
  text-align:  center;
  margin-top:  18px;
  letter-spacing: 0.04em;
}

/* Close + arrow controls */
.lightbox-close,
.lightbox-arrow {
  position:        absolute;
  background:      rgba(255, 255, 255, 0.12);
  border:          1px solid rgba(255, 255, 255, 0.2);
  color:           var(--white);
  width:           44px;
  height:          44px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  font-size:       20px;
  font-weight:     600;
  line-height:     1;
  transition:      all 0.25s var(--ease-bounce);
  backdrop-filter: blur(4px);
}
.lightbox-close:hover,
.lightbox-arrow:hover {
  background: var(--sun);
  color:      var(--navy);
  transform:  scale(1.08);
}

.lightbox-close { top: -56px; right: 0; }
.lightbox-arrow--prev { left:  -64px; top: 50%; transform: translateY(-50%); }
.lightbox-arrow--next { right: -64px; top: 50%; transform: translateY(-50%); }


/* ════════════════════════════════════════════════════════════
   WHY OXFORD — Why Parents Choose Us (navy bg, 6 stat tiles)
   ════════════════════════════════════════════════════════════ */
#parents-why {
  background: var(--navy);
  padding:    90px 64px 100px;
}

.pw-head {
  text-align:    center;
  margin-bottom: 50px;
}

.pw-head .section-label {
  justify-content: center;
  color:           var(--sun);
}
.pw-head .section-label::before,
.pw-head .section-label::after {
  background: var(--sun);
}

.pw-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--white);
  margin:         10px 0 14px;
  line-height:    1.1;
  letter-spacing: -0.01em;
}

.pw-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.72);
  max-width:   560px;
  margin:      0 auto;
}

.pw-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   22px;
  max-width:             1200px;
  margin:                0 auto;
}

.pw-tile {
  background:    rgba(255, 255, 255, 0.04);
  border:        1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding:       26px 26px 24px;
  transition:    transform 0.35s var(--ease-out),
                 background 0.3s ease,
                 border-color 0.3s ease;
}
.pw-tile:hover {
  background:   rgba(245, 200, 0, 0.08);
  border-color: var(--sun);
  transform:    translateY(-6px);
}

.pw-tile-icon {
  width:           42px;
  height:          42px;
  border-radius:   10px;
  background:      rgba(255, 255, 255, 0.06);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       18px;
  margin-bottom:   14px;
}

.pw-tile h3 {
  font-family: var(--font-display);
  font-size:   1.2rem;
  font-weight: 900;
  color:       var(--white);
  margin:      0 0 8px;
  line-height: 1.2;
}

.pw-tile p {
  font-family: 'Inter', sans-serif;
  font-size:   13px;
  line-height: 1.6;
  color:       rgba(255, 255, 255, 0.62);
  margin:      0;
}


/* ════════════════════════════════════════════════════════════
   ENROLL CTA — collage + content on white bg
   ════════════════════════════════════════════════════════════ */
#parents-enroll {
  background: var(--white);
  padding:    90px 64px 100px;
}

.pe-grid {
  display:               grid;
  grid-template-columns: 1fr 1.1fr;
  gap:                   64px;
  max-width:             1180px;
  margin:                0 auto;
  align-items:           center;
}


.pe-collage          { display: flex; flex-direction: column; gap: 12px; }
.pe-collage-main     { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.pe-collage-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pe-collage-row      { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pe-collage-row > div { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; }
.pe-collage-row img  { width: 100%; height: 100%; object-fit: cover; display: block; }


.pe-content .section-label {
  color: var(--coral);
}

.pe-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    900;
  color:          var(--navy);
  line-height:    1.1;
  margin:         12px 0 16px;
  letter-spacing: -0.01em;
}

.pe-sub {
  font-family: 'Inter', sans-serif;
  font-size:   15px;
  line-height: 1.7;
  color:       var(--text-soft);
  max-width:   480px;
  margin:      0 0 24px;
}

.pe-cta {
  display:         inline-flex;
  align-items:     center;
  gap:             10px;
  background:      var(--sun);
  color:           var(--navy);
  font-family:     'Inter', sans-serif;
  font-weight:     800;
  font-size:       14px;
  padding:         14px 30px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.3s var(--ease-bounce);
}
.pe-cta:hover {
  background: var(--navy);
  color:      var(--sun);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(15, 27, 61, 0.18);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #parents-hero       { padding: 130px 32px 70px; }

  #parents-featured   { padding: 70px 32px 70px; }
  .pf-card            { grid-template-columns: 1fr; }
  .pf-card-img        { min-height: 240px; }
  .pf-card-body       { padding: 32px 30px; }

  #parents-grid       { padding: 10px 32px 80px; }
  .pg-grid            { grid-template-columns: repeat(2, 1fr); }

  #parents-gallery    { padding: 70px 32px 80px; }
  .gal-mosaic         { grid-auto-rows: 120px; }

  .lightbox           { padding: 50px 24px; }
  .lightbox-arrow--prev { left: 10px; }
  .lightbox-arrow--next { right: 10px; }
  .lightbox-close     { top: -52px; }

  #parents-why        { padding: 70px 32px 80px; }
  .pw-grid            { grid-template-columns: repeat(2, 1fr); }

  #parents-enroll     { padding: 70px 32px 80px; }
  .pe-grid            { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  #parents-hero       { padding: 110px 24px 60px; }

  #parents-featured   { padding: 60px 18px 60px; }
  .pf-card-body       { padding: 26px 22px; }

  #parents-grid       { padding: 0 18px 70px; }
  .pg-grid            { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .pg-pagination a,
  .pg-pagination span { padding: 8px 10px; min-width: 32px; font-size: 13px; }

  #parents-gallery    { padding: 60px 18px 70px; }
  .gal-mosaic         {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows:        100px;
    gap:                   10px;
  }
  /* Reset spans on mobile so layout stays predictable */
  .gal-cell:nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .gal-cell:nth-child(n+2) { grid-column: span 1; grid-row: span 1; }

  #parents-why        { padding: 60px 18px 70px; }
  .pw-grid            { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }

  #parents-enroll     { padding: 60px 18px 70px; }
}