/* ==========================================================
   Student Life page
   Loads after style.css and reuses its colour and type tokens
   ========================================================== */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  min-height: min(62vh, 560px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--forest);
  color: #fff;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* The hostel sits low in the photo, with a lot of sky above it.
     These three lines pin the bottom of the photo to the bottom of the
     hero and zoom in towards it, so the building fills the frame.

     scale()  = how close. Raise to 1.4 / 1.6 to come in further,
                lower to 1.1 to pull back.
     50% 100% = zoom anchored to the bottom edge. */
  object-position: 50% 100%;
  transform: scale(1.25);
  transform-origin: 50% 100%;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 19, 17, .85) 0%, rgba(20, 19, 17, .3) 60%, rgba(20, 19, 17, .15) 100%);
}

/* A wide photo above a column of text (used in the Meals column) */
.sl-wide-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 24px;
  background: #E9E3D8;
}

/* ---------- Photo placeholders ----------
   Shown only until a real photo exists. A missing image file falls back
   to this striped box instead of a broken-image icon. */
.photo-slot {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  border: 1.5px dashed var(--line);
  border-radius: 4px;
  background: repeating-linear-gradient(45deg, #FAF8F4 0 12px, #F1ECE1 12px 24px);
}

.photo-slot.wide {
  aspect-ratio: 16 / 9;
  margin-bottom: 24px;
}

.hero-slot {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  align-content: start;
  padding-top: 28px;
  color: #8E9A91;
  background: repeating-linear-gradient(45deg, #1E3A2F 0 14px, #24473A 14px 28px);
}

.sl-photo.tall .photo-slot {
  aspect-ratio: 3 / 4;
}

.page-hero-text {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(40px, 7vw, 80px);
}

.page-hero h1 {
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 700;
  margin-bottom: 10px;
}

.page-hero-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 28px);
  color: #EBDDBF;
  margin: 0;
}

.crumb {
  font-size: 14px;
  color: #CFC6B4;
  margin-bottom: 14px;
}

.crumb a {
  color: var(--gold);
  text-decoration: none;
}

.crumb a:hover {
  color: #fff;
}

@media (min-width: 1200px) {

  /* On wide screens, shape the hero instead of using screen height,
     so the photo is barely cropped. */
  .page-hero {
    min-height: 0;
    aspect-ratio: 21 / 9;
    max-height: 720px;
  }
}

/* ---------- Intro ---------- */
.sl-intro {
  padding-block: var(--space) 0;
  max-width: 820px;
  text-align: center;
  margin-inline: auto;
}

.sl-intro h2 {
  font-size: clamp(34px, 4.4vw, 54px);
}

.sl-intro .lead {
  color: var(--gold-deep);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 26px);
}

/* ---------- Boarding houses: photo beside text ---------- */
.sl-block {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
  padding-block: var(--space);
}

.sl-block+.sl-block {
  padding-top: 0;
}

.sl-block.reverse .sl-photo {
  order: 2;
}

.sl-photo {
  margin: 0;
  position: relative;
}

.sl-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Which part survives the crop. 50% 35% keeps faces and the upper
     half; lower the number to keep more of the top, raise it for more
     of the bottom. */
  object-position: 50% 35%;
  border-radius: 4px;
  background: #E9E3D8;
}

.sl-photo.tall img {
  aspect-ratio: 1 / 1;
}

/* Put class="sl-photo whole" on a figure to show the entire photo with
   nothing cropped. The column may then be a different height to its text. */
.sl-photo.whole img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

.sl-text p {
  color: var(--muted);
}

.sl-text .pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  color: var(--gold-deep);
  margin-bottom: 24px;
}

/* ---------- Balanced week ---------- */
.sl-rhythm {
  background: var(--forest);
  color: #EFE7D6;
  padding-block: var(--space);
}

.sl-rhythm h2 {
  color: #fff;
  margin-bottom: 40px;
}

.rhythm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}

.rhythm-list li {
  border-top: 2px solid var(--gold);
  padding-top: 18px;
}

.rhythm-list h3 {
  font-size: 24px;
  color: #fff;
  margin-bottom: 8px;
}

.rhythm-list p {
  font-size: 15px;
  color: #C9C0AC;
  margin: 0;
}

/* ---------- Meals + phone calls ---------- */
.sl-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 6vw, 80px);
  padding-block: var(--space);
  align-items: start;
}

.sl-pair article {
  border-top: 2px solid var(--gold);
  padding-top: 24px;
}

.sl-pair p {
  color: var(--muted);
}

.note {
  margin-top: 28px;
  padding: 20px 24px;
  background: #F1ECE1;
  border-radius: 4px;
}

.note h3 {
  font-size: 22px;
  margin-bottom: 6px;
}

.note p {
  margin: 0;
  color: var(--ink);
}


.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

.btn-ghost {
  background: transparent;
  color: #F4E9D2;
}

.btn-ghost:hover {
  background: var(--gold);
  color: var(--ink);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .rhythm-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {

  .sl-pair,
  .sl-block {
    grid-template-columns: 1fr;
  }

  .sl-block.reverse .sl-photo {
    order: 0;
  }

  .sl-photo.tall .photo-slot,
  .sl-photo.tall img {
    aspect-ratio: 4 / 3;
  }

  .sl-photo.whole img {
    aspect-ratio: auto;
  }
}

@media (max-width: 560px) {
  .rhythm-list {
    grid-template-columns: 1fr 1fr;
  }
}