/* ==========================================================================
   Mount Hebe — Pathway Page Sections
   ========================================================================== */

/* --- Hero (Section 1) — anchor the cover image to the bottom --- */
.mh-pw-hero .mh-hero__image,
.mh-pw-hero .mh-hero__video {
  object-position: bottom;
}

/* --- Landscape Section (Section 3) --- */
.mh-pw-landscape {
  padding: clamp(4rem, 3.91vw, 10rem) 0;
  background: var(--mh-white);
}

.mh-pw-landscape__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  margin: 0 auto clamp(4rem, 3.91vw, 10rem);
}

.mh-pw-landscape__image-wrap {
  border-radius: clamp(4px, 0.31vw, 8px);
  overflow: hidden;
  max-width: 86%;
  margin: 0 auto;
}

.mh-pw-landscape__image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}


/* --- Masked Image + Badge Section (Section 4) --- */
.mh-pw-masked {
  background: var(--mh-white);
  padding: 0 clamp(2rem, 2.73vw, 7rem);
}

.mh-pw-masked__inner {
  max-width: 100%;
  margin: 0 auto;
}

.mh-pw-masked__image-wrap {
  position: relative;
  border-radius: clamp(20px, 2.19vw, 56px);
  overflow: hidden;
}

.mh-pw-masked__image-wrap > img {
  width: 100%;
  height: auto;
  display: block;
}

.mh-pw-masked__badge {
  position: absolute;
  right: clamp(1.5rem, 2.34vw, 6rem);
  bottom: clamp(1.5rem, 2.34vw, 6rem);
  width: clamp(100px, 8.63vw, 221px);
}

.mh-pw-masked__badge img {
  width: 100%;
  height: auto;
  display: block;
}


/* --- Dual Image Section (Section 6) --- */
.mh-pw-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--mh-white);
}

.mh-pw-dual__item {
  overflow: hidden;
  aspect-ratio: 1280 / 860;
}

.mh-pw-dual__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .mh-pw-dual {
    grid-template-columns: 1fr;
  }
}


/* --- Connectivity Table (Section 5) --- */
.mh-pw-connectivity {
  padding: clamp(4rem, 3.91vw, 10rem) var(--mh-pad-x) 0;
}

.mh-pw-connectivity__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(1rem, 1.5vw, 4rem);
  text-align: center;
}

.mh-pw-connectivity__col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Column header — same treatment as the education table head:
   "less than" prefix + big number + unit, horizontal & bottom-aligned. */
.mh-pw-connectivity__head {
  font-family: var(--mh-ff-heading);
  color: var(--mh-gold);
  letter-spacing: var(--mh-ls-ui);
  line-height: 1;
  white-space: nowrap;
  margin-bottom: clamp(1.5rem, 1.5vw, 4rem);
}

.mh-pw-connectivity__minutes {
  font-size: var(--mh-fs-h4);
  font-variant-numeric: proportional-nums lining-nums;
  line-height: 1;
}

.mh-pw-connectivity__pre,
.mh-pw-connectivity__label,
.mh-pw-connectivity__mark {
  font-size: var(--mh-fs-ui);
}

.mh-pw-connectivity__label {
  margin-left: 0.15em;
}

.mh-pw-connectivity__dests {
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 1.5vw, 4rem);
}

.mh-pw-connectivity__dest {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mh-pw-connectivity__dest-name {
  font-family: var(--mh-ff-body);
  font-size: var(--mh-fs-body);
  color: var(--mh-dark-gray);
  line-height: var(--mh-lh-body);
}

.mh-pw-connectivity__dest-note {
  font-family: var(--mh-ff-body);
  font-size: var(--mh-fs-ui-small);
  color: var(--mh-medium-gray);
  line-height: var(--mh-lh-ui);
}

.mh-pw-connectivity__dest-note sup {
  font-size: 0.7em;
}

/* Separator line between destination groups */
.mh-pw-connectivity__dest + .mh-pw-connectivity__dest::before {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background: var(--mh-medium-gray);
  margin: 0 auto clamp(1rem, 1vw, 2.5rem);
}

@media (max-width: 991px) {
  .mh-pw-connectivity__grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: clamp(3rem, 4vw, 6rem);
  }
}

@media (max-width: 575px) {
  .mh-pw-connectivity__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* --- Education Section (Section 7) --- */
.mh-pw-education {
  padding: clamp(6rem, 4.69vw, 12rem) 0;
  background: var(--mh-white);
}

.mh-pw-education__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 80%;
  margin: 0 auto clamp(4rem, 3.91vw, 10rem);
}

.mh-pw-education__image-wrap {
  border-radius: clamp(4px, 0.31vw, 8px);
  overflow: hidden;
  max-width: 83%;
  margin: 0 auto;
}

.mh-pw-education__image-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Education Table (matrix: category rows x driving-time tiers) --- */
.mh-pw-edu-table {
  padding: 0 var(--mh-pad-x);
}

/* Header + category rows share the same column template so they align. */
.mh-pw-edu-table__header,
.mh-pw-edu-table__row {
  display: grid;
  grid-template-columns: var(--edu-cols, minmax(9rem, 0.8fr) 1fr);
  align-items: start;
}

.mh-pw-edu-table__header {
  margin-bottom: clamp(1.5rem, 1.5vw, 4rem);
}

.mh-pw-edu-table__row {
  margin-bottom: clamp(3rem, 3vw, 8rem);
}
.mh-pw-edu-table__row:last-child {
  margin-bottom: 0;
}

/* Header row: axis label + tier time-headers, gold underline across. */
.mh-pw-edu-table__axis,
.mh-pw-edu-table__head {
  align-self: end;
  padding-bottom: clamp(0.8rem, 0.8vw, 2rem);
  border-bottom: 1px solid var(--mh-gold-line);
}
.mh-pw-edu-table__axis {
  font-family: var(--mh-ff-body);
  font-size: var(--mh-fs-ui);
  color: var(--mh-medium-gray);
}
.mh-pw-edu-table__head {
  font-family: var(--mh-ff-heading);
  letter-spacing: var(--mh-ls-ui);
  color: var(--mh-gold);
  line-height: 1;
  white-space: nowrap;
  padding-left: 20px;
}
/* Big driving-time digit, with the words ("under" / "mins") raised to the top. */
.mh-pw-edu-table__head-num {
  font-size: var(--mh-fs-h4);
  font-variant-numeric: proportional-nums lining-nums;
  line-height: 1;
}
.mh-pw-edu-table__head-word,
.mh-pw-edu-table__head-mark {
  font-size: var(--mh-fs-ui);
  /* vertical-align: top; */
}
.mh-pw-edu-table__head-mark {
  margin-left: 0.15em;
}

/* Left column: category label. */
.mh-pw-edu-table__cat {
  font-family: var(--mh-ff-body);
  font-size: var(--mh-fs-body);
  color: var(--mh-dark-gray);
  line-height: var(--mh-lh-body);
}
.mh-pw-edu-table__cell {
  padding-left: 20px;
}
/* Cell: list of school names; a wide tier flows into two sub-columns. */
.mh-pw-edu-table__cell--wide {
  columns: 2;
  column-gap: clamp(1.5rem, 2vw, 4rem);
}
.mh-pw-edu-table__school {
  font-family: var(--mh-ff-body);
  font-size: var(--mh-fs-ui);
  color: var(--mh-dark-gray);
  line-height: var(--mh-lh-body);
  break-inside: avoid;
  margin-bottom: clamp(1.2rem, 1.4vw, 3rem);
}
.mh-pw-edu-table__school:last-child {
  margin-bottom: 0;
}

/* Portrait / narrow: stack tiers vertically; each cell shows its time header. */
@media (max-width: 767px) {
  .mh-pw-edu-table__header {
    display: none;
  }
  .mh-pw-edu-table__row {
    display: block;
    margin-bottom: clamp(3rem, 6vw, 5rem);
  }
  .mh-pw-edu-table__cat {
    font-size: var(--mh-fs-body);
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
  }
  .mh-pw-edu-table__cell {
    margin-bottom: clamp(2rem, 5vw, 4rem);
  }
  .mh-pw-edu-table__cell:last-child {
    margin-bottom: 0;
  }
  .mh-pw-edu-table__cell {
    padding-left: 0;
  }
  .mh-pw-edu-table__cell--wide {
    columns: 1;
  }
  .mh-pw-edu-table__cell--empty {
    display: none;
  }
  .mh-pw-edu-table__cell:not(.mh-pw-edu-table__cell--empty)[data-head]::before {
    content: attr(data-head);
    display: block;
    font-family: var(--mh-ff-heading);
    font-size: var(--mh-fs-ui);
    letter-spacing: var(--mh-ls-ui);
    color: var(--mh-gold);
    padding-bottom: clamp(0.8rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--mh-gold-line);
    margin-bottom: clamp(1.2rem, 3vw, 2rem);
  }
}