/* ================= BOARDING HERO / UNCOVER ================= */

.boarding-intro {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #063765;
}

.boarding-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.boarding-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* CURVED BEAU SOLEIL OVERLAY */
.boarding-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #063765;
  transition: opacity 0.9s ease, visibility 0.9s ease;
}

/* BIG IMAGE CUTOUT */
.boarding-overlay::before {
  content: "";
  position: absolute;
  left: -6%;
  top: -10%;
  width: 78%;
  height: 86%;
  background: url("images/boarding.jpeg") center/cover no-repeat;
  border-bottom-right-radius: 55%;
  z-index: 1;
}

/* LOWER BLUE CURVE */
.boarding-overlay::after {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -26%;
  width: 78%;
  height: 55%;
  background: #063765;
  border-radius: 50%;
  z-index: 2;
}

.boarding-overlay.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.boarding-curve {
  display: none;
}

.boarding-text {
  position: absolute;
  right: 7%;
  top: 48%;
  transform: translateY(-50%);
  width: 42%;
  max-width: 620px;
  color: white;
  text-align: center;
  z-index: 5;
}

.boarding-text .tag {
  color: white;
  font-weight: 800;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.boarding-text h1 {
  font-size: 42px;
  line-height: 1.2;
  font-weight: 400;
  color: white;
  margin-bottom: 22px;
}

.boarding-text p {
  font-size: 16px;
  line-height: 1.7;
  font-weight: 600;
  color: white;
  margin-bottom: 28px;
}

/* MOBILE */
@media (max-width: 768px) {
  .boarding-overlay::before,
  .boarding-overlay::after {
    display: none;
  }

  .boarding-text {
    left: 50%;
    right: auto;
    top: 50%;
    width: 86%;
    transform: translate(-50%, -50%);
  }

  .boarding-text h1 {
    font-size: 30px;
  }

  .boarding-text p {
    font-size: 14px;
  }
}

/* Different cutout image for Co-Curricular page */
body.cocurricular-page .boarding-overlay::before {
  background: url("images/co-curricular.jpeg") center/cover no-repeat;
}

/* ================= BOARDING LIFE CONTENT ================= */

.boarding-life {
  background: url("images/boarding-life.jpg") center/cover no-repeat;
}
.boarding-life-page {
  padding: 90px 7%;
  background: #f7f7f7;
  color: #002f63;
}

.boarding-life-title {
  text-align: center;
  font-size: 46px;
  font-weight: 400;
  margin-bottom: 80px;
  color: #002f63;
}

.boarding-life-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.boarding-life-left h3 {
  font-size: 34px;
  line-height: 1.25;
  font-weight: 400;
  color: #002f63;
}

.boarding-life-main p {
  font-size: 17px;
  line-height: 1.8;
  color: #1f2d3d;
  margin-bottom: 22px;
}

.boarding-life-main .strong {
  font-weight: 700;
}

.boarding-life-main img {
  width: 100%;
  margin: 55px 0 75px;
  display: block;
}

.boarding-life-menu,
.houses-menu,
.wellbeing-menu {
  background: #003366;
  padding: 55px 35px;
  color: white;
  position: sticky;
  top: 110px;
}

.boarding-life-menu img,
.houses-menu img,
.wellbeing-menu img {
  width: 55px;
  display: block;
  margin: 0 auto 25px;
}

.boarding-life-menu h3,
.houses-menu h3,
.wellbeing-menu h3 {
  text-align: center;
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 30px;
}

.boarding-life-menu ul,
.houses-menu ul,
.wellbeing-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.boarding-life-menu li,
.houses-menu li,
.wellbeing-menu li {
  border-bottom: 1px solid rgba(255,255,255,0.35);
}

.boarding-life-menu a,
.houses-menu a,
.wellbeing-menu a {
  display: block;
  padding: 16px 0;
  color: white;
  text-decoration: none;
  font-weight: 600;
}

.boarding-life-menu a.active,
.boarding-life-menu a:hover,
.houses-menu a.active,
.houses-menu a:hover,
.wellbeing-menu a.active,
.wellbeing-menu a:hover {
  color: #ffd400;
}

.typical-day h2,
.weekend-section h2 {
  font-size: 36px;
  font-weight: 400;
  margin-bottom: 20px;
}

.typical-day h3 {
  font-size: 28px;
  font-weight: 400;
  margin: 25px 0 15px;
}

.day-row {
  display: flex;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid #ddd;
  background: white;
  font-size: 18px;
  font-weight: 700;
  color: #002f63;
}

.day-row span {
  font-size: 25px;
  font-weight: 300;
}

.boarding-life-quote {
  text-align: center;
  font-size: 32px;
  line-height: 1.3;
  color: #002f63;
  margin: 90px 0;
}

.weekend-section a {
  display: inline-block;
  margin-top: 20px;
  padding: 15px 35px;
  background: #008ed6;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ================= BOARDING HOUSES PAGE ================= */

.houses-hero,
.wellbeing-hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.houses-hero img,
.wellbeing-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.houses-hero::after,
.wellbeing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.houses-hero h1,
.wellbeing-hero h1 {
  position: absolute;
  bottom: 55px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 46px;
  font-weight: 400;
  z-index: 2;
  text-align: center;
  width: 90%;
}

.houses-page,
.wellbeing-page {
  padding: 90px 7% 70px;
  background: #f7f7f7;
  color: #002f63;
}

.houses-title,
.wellbeing-title {
  text-align: center;
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 80px;
}

.houses-layout,
.wellbeing-layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.houses-left h3,
.wellbeing-left h3 {
  font-size: 34px;
  line-height: 1.25;
  font-weight: 400;
}

.houses-left p {
  margin-top: 25px;
  font-weight: 700;
  letter-spacing: 1px;
}

.houses-main p,
.wellbeing-main p {
  font-size: 17px;
  line-height: 1.8;
  color: #1f2d3d;
  margin-bottom: 22px;
}

.houses-main .strong,
.wellbeing-main .strong {
  font-weight: 700;
}

.houses-slider {
  position: relative;
  margin: 35px 0;
}

.houses-slider img,
.wellbeing-main img {
  width: 100%;
  display: block;
}

.wellbeing-main img {
  margin: 50px 0;
}

.house-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #008ed6;
  color: white;
  border: 3px solid white;
  width: 55px;
  height: 55px;
  font-size: 32px;
  cursor: pointer;
}

.house-arrow.left {
  left: 35px;
}

.house-arrow.right {
  right: 35px;
}

.discover-title,
.wellbeing-main h2 {
  font-size: 36px;
  font-weight: 400;
  margin-top: 35px;
}

/* ================= HOUSE CARDS ================= */

.house-cards {
  display: grid;
  grid-template-columns: 2fr 0.75fr 0.75fr 0.75fr 0.75fr;
  gap: 22px;
  background: #f7f7f7;
  padding: 40px 7% 100px;
}

.house-card {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  background: white;
  min-height: 360px;
}

.house-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.house-card-text {
  padding: 55px 45px;
}

.house-card-text h2 {
  font-size: 32px;
  font-weight: 400;
  color: #002f63;
  margin-bottom: 25px;
}

.house-card-text p {
  font-size: 16px;
  line-height: 1.7;
  color: #1f2d3d;
}

.active-house {
  border-left: 8px solid #008ed6;
}

.house-small {
  position: relative;
  height: 360px;
  overflow: hidden;
}

.house-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(100%);
  transition: transform 0.7s ease;
}

.house-small.show img {
  transform: translateY(0);
}

.house-small button {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff5a00;
  color: white;
  border: 3px solid white;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 30px;
  cursor: pointer;
  z-index: 5;
}

#houseRoomImage {
  transition: opacity 0.3s ease;
}

.wellbeing-quote {
  text-align: center;
  font-size: 32px;
  margin-top: 80px;
}

/* ================= MOBILE / TABLET ================= */

@media (max-width: 1000px) {
  .boarding-life-layout,
  .houses-layout,
  .wellbeing-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .boarding-life-menu,
  .houses-menu,
  .wellbeing-menu {
    position: static;
    width: 100%;
  }

  .boarding-life-title,
  .houses-title,
  .wellbeing-title {
    font-size: 36px;
    line-height: 1.15;
  }

  .boarding-life-left h3,
  .houses-left h3,
  .wellbeing-left h3 {
    font-size: 28px;
    line-height: 1.2;
  }

  .house-cards {
    grid-template-columns: 1fr;
    padding: 30px 7% 80px;
    gap: 30px;
  }

  .house-card {
    grid-template-columns: 1fr;
  }

  .house-card img {
    height: 320px;
  }
}

@media (max-width: 600px) {
  .boarding-intro,
  .houses-hero,
  .wellbeing-hero {
    height: 70vh;
  }

  .boarding-text h1 {
    font-size: 30px;
  }

  .boarding-text p {
    font-size: 14px;
  }

  .boarding-life-page,
  .houses-page,
  .wellbeing-page {
    padding: 60px 22px;
  }

  .boarding-life-title,
  .houses-title,
  .wellbeing-title {
    font-size: 30px;
    margin-bottom: 45px;
  }

  .houses-hero h1,
  .wellbeing-hero h1 {
    font-size: 32px;
    bottom: 40px;
  }

  .boarding-life-main p,
  .houses-main p,
  .wellbeing-main p {
    font-size: 15px;
    line-height: 1.7;
  }

  .typical-day h2,
  .weekend-section h2,
  .discover-title {
    font-size: 28px;
  }

  .day-row {
    font-size: 15px;
    padding: 12px 14px;
  }

  .boarding-life-quote,
  .wellbeing-quote {
    font-size: 24px;
    margin: 55px 0;
  }

  .house-arrow {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .house-arrow.left {
    left: 15px;
  }

  .house-arrow.right {
    right: 15px;
  }

  .house-card-text {
    padding: 35px 24px;
  }

  .house-small {
    height: 300px;
  }
}

.boarding-notice {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
}

.boarding-notice-box {
  background: white;
  max-width: 550px;
  width: 90%;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
  position: relative;
}

.boarding-notice-box h2 {
  color: #002b5c;
  margin-bottom: 20px;
}

.boarding-notice-box p {
  line-height: 1.8;
  margin-bottom: 15px;
}

.boarding-notice-box button {
  background: #7a1c2e;
  color: white;
  border: none;
  padding: 12px 28px;
  border-radius: 30px;
  cursor: pointer;
}

.boarding-close {
  position: absolute;
  top: 12px;
  right: 18px;
  font-size: 30px;
  cursor: pointer;
}