/* ════════════════════════════════════════════════════════════
   FACILITIES.CSS — Facilities Page
   Requires: variables.css, common.css loaded first.
   ════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════
   HERO — Navy bg with subtle badge watermark + Book a Visit CTA
   ════════════════════════════════════════════════════════════ */
#facilities-hero {
  position:   relative;
  background: var(--navy);
  padding:    140px 64px 90px;
  overflow:   hidden;
  isolation:  isolate;
  text-align: center;
}

/* Watermark badge — large Oxford logo, low opacity, behind text */
#facilities-hero::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url('../images/inner-page-bg.png') center / contain no-repeat;
  opacity:    0.08;
  z-index:    -1;
}

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

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

.fh-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 22px;
  letter-spacing: -0.01em;
}

.fh-tagline {
  font-family: var(--font-display);
  font-style:  italic;
  font-size:   18px;
  color:       var(--sun);
  margin:      0 0 18px;
}

.fh-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:   680px;
  margin:      0 auto 32px;
}

.fh-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);
}
.fh-cta:hover {
  background: var(--white);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}


/* ════════════════════════════════════════════════════════════
   INTRO GRID — "Every Experience Thoughtfully Designed"
   6 cards on cream bg, 3-column grid
   ════════════════════════════════════════════════════════════ */
#facilities-intro {
  background: var(--white);
  padding:    90px 64px 100px;
}

.fi-head {
  text-align:    center;
  margin-bottom: 56px;
}

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

.fi-title {
  font-family:    var(--font-display);
  font-size:      clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight:    900;
  color:          var(--navy);
  margin:         10px 0 14px;
  line-height:    1.1;
  letter-spacing: -0.01em;
}

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

.fi-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   30px 26px;
  max-width:             1180px;
  margin:                0 auto;
}

.fi-card {
  background:    var(--cream);
  border-radius: 16px;
  padding:       18px 18px 26px;
  transition:    transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}
.fi-card:hover {
  transform:  translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 27, 61, 0.1);
}

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

.fi-card h3 {
  font-family:   var(--font-display);
  font-size:     1.25rem;
  font-weight:   900;
  color:         var(--navy);
  margin:        0 0 10px;
  line-height:   1.2;
}

.fi-card p {
  font-family: 'Inter', sans-serif;
  font-size:   13.5px;
  line-height: 1.65;
  color:       var(--text-soft);
  margin:      0;
}


/* ════════════════════════════════════════════════════════════
   DETAIL SECTIONS — 6 zigzag blocks alternating bg & side
   ════════════════════════════════════════════════════════════ */
.fac-detail {
  padding: 100px 64px;
}

/* Background variants */
.fac-detail--white { background: var(--white); }
.fac-detail--navy  { background: var(--navy); }
.fac-detail--light { background: #F4F6FB; }

.fd-container {
  display:               grid;
  grid-template-columns: 45fr 55fr;
  grid-template-areas:   "image content";
  gap:                   72px;
  max-width:             1240px;
  margin:                0 auto;
  align-items:           center;
}

.fd-image-col   { grid-area: image; }
.fd-content-col { grid-area: content; }

/* Content-right modifier — flip visual order, image stays in its column */
.fac-detail--content-left .fd-container {
  grid-template-columns: 55fr 45fr;
  grid-template-areas:   "content image";
}


/* ── Image card with sun-yellow frame ── */
.fd-image {
  position:      relative;
  border-radius: 18px;
  overflow:      hidden;
  border:        4px solid var(--sun);
  box-shadow:    0 25px 60px rgba(15, 27, 61, 0.2);
}
.fd-image img {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: 4 / 3;
  object-fit:   cover;
}


/* ── Content column ── */
.fd-content-col {
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.fac-detail .section-label {
  margin-bottom: 0;
}

.fd-title {
  font-family:    var(--font-display);
  font-size:      clamp(2rem, 3.6vw, 3rem);
  font-weight:    900;
  line-height:    1.1;
  margin:         6px 0 8px;
  letter-spacing: -0.01em;
}

.fd-subhead {
  font-family: 'Inter', sans-serif;
  font-size:   16px;
  font-weight: 700;
  color:       var(--coral);
  line-height: 1.5;
  margin:      0;
}

.fd-body {
  font-family: 'Inter', sans-serif;
  font-size:   14.5px;
  font-weight: 400;
  line-height: 1.75;
  margin:      4px 0 0;
}

.fd-list {
  list-style:     none;
  padding:        0;
  margin:         10px 0 0;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.fd-list li {
  font-family:  'Inter', sans-serif;
  font-size:    14px;
  font-weight:  400;
  line-height:  1.55;
  padding-left: 22px;
  position:     relative;
}

.fd-list li::before {
  content:       '';
  position:      absolute;
  left:          0;
  top:           7px;
  width:         7px;
  height:        7px;
  background:    var(--coral);
  border-radius: 50%;
}


/* ── Theme overrides for each bg variant ── */
.fac-detail--white .fd-title,
.fac-detail--light .fd-title { color: var(--navy); }
.fac-detail--navy  .fd-title { color: var(--white); }

.fac-detail--white .fd-body,
.fac-detail--light .fd-body { color: var(--text-soft); }
.fac-detail--navy  .fd-body { color: rgba(255, 255, 255, 0.72); }

.fac-detail--white .fd-list li,
.fac-detail--light .fd-list li { color: var(--text-soft); }
.fac-detail--navy  .fd-list li { color: rgba(255, 255, 255, 0.78); }

/* On navy bg, soften the subhead from coral to sun-yellow for contrast */
.fac-detail--navy .fd-subhead { color: var(--sun); }


/* ════════════════════════════════════════════════════════════
   ENROLL CTA  —  Navy section before footer
   ════════════════════════════════════════════════════════════ */
#facilities-enroll {
  background: var(--navy);
  padding:    90px 64px 110px;
  text-align: center;
}

.fe-content {
  max-width: 720px;
  margin:    0 auto;
}

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

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

.fe-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:   560px;
  margin:      0 auto 28px;
}

.fe-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:         15px 32px;
  border-radius:   50px;
  text-decoration: none;
  transition:      all 0.3s var(--ease-bounce);
}
.fe-cta:hover {
  background: var(--white);
  transform:  translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  #facilities-hero   { padding: 130px 32px 70px; }
  #facilities-intro  { padding: 70px 32px 80px; }
  .fi-grid           { grid-template-columns: repeat(2, 1fr); }

  .fac-detail        { padding: 80px 32px; }
  .fd-container,
  .fac-detail--content-left .fd-container {
    display:        flex;
    flex-direction: column;
    gap:            32px;
  }

  #facilities-enroll { padding: 80px 32px 90px; }
}

@media (max-width: 768px) {
  #facilities-hero   { padding: 110px 24px 60px; }
  .fh-tagline        { font-size: 16px; }

  #facilities-intro  { padding: 60px 18px 70px; }
  .fi-grid           { grid-template-columns: 1fr; gap: 22px; max-width: 420px; margin: 0 auto; }
  .fi-head           { margin-bottom: 40px; }

  .fac-detail        { padding: 60px 24px; }

  #facilities-enroll { padding: 70px 24px 80px; }
}