/* =========================================================
   HERO (image behind content) — Figma sizes
   - Height: 665px
   - 60px whitespace beneath
   - H1: 56px / 600 + underline
   - Copy: 20px / 600
   - Links: 40px tall / 16px / 600
========================================================= */
.layout-container .ie-hero2 {
  position: relative;
  min-height: 665px;
  margin-bottom: 60px;
  padding: 0;
  overflow: hidden;
  background: #2f5064;
  color: #fff;

  display: flex;
  align-items: center;
}

/* Background */
.layout-container .ie-hero2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.layout-container .ie-hero2__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layout-container .ie-hero2__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  //background: rgba(47, 80, 100, 0.65);
}

/* Foreground container */
.layout-container .ie-hero2__inner {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0;
}

/* If you keep a two-column hero later, you can re-enable this:
@media (min-width: 900px) {
  .layout-container .ie-hero2__inner { display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; }
}
*/

.layout-container .ie-hero2__title {
  margin: 0 0 12px;
  font-weight: 600;
  font-size: 56px;
  line-height: 1.1;

  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}
.layout-container .ie-hero2__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.55);
}

.layout-container .ie-hero2__text {
  font-weight: 600;
  font-size: 20px;
  line-height: 1.55;
  max-width: 60ch;
}

/* Actions wrapper */
.layout-container .ie-hero2__actions {
  margin-top: 18px;
}

/* field_links sometimes renders div>div>a */
.layout-container .ie-hero2__actions > div {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.layout-container .ie-hero2__actions > div > div { margin: 0; }

/* If the formatter ever outputs ul/li, handle that too */
.layout-container .ie-hero2__actions ul {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.layout-container .ie-hero2__actions li { margin: 0; }

/* Buttons */
.layout-container .ie-hero2__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 40px;
  padding: 0 18px;

  border-radius: 2px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;

  background: #f2c14b;
  color: #414141;
}

/* =========================================================
   2-UP ELIGIBILITY — Figma sizes
   - Panels: 380px tall
   - H2: 36px / 600 with underline matching text width
   - Copy: 18px
   - CTA button: 55px tall / 24px
   - CTA overlaps bottom by half its height
   - 150px whitespace after
========================================================= */
.layout-container .ie-elig {
  background: #fff;
  margin-bottom: 150px;
}

.layout-container .ie-elig__grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .layout-container .ie-elig__grid { grid-template-columns: 1fr 1fr; }
}

/* Panel */
.layout-container .ie-elig__panel {
  position: relative;
  overflow: visible;

  min-height: 380px;
  padding: 44px 36px 56px; /* bottom space for overlap */
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.layout-container .ie-elig__panel--student { background: #fbf3e2; }
.layout-container .ie-elig__panel--mentor { background: #e9edf2; }

@media (max-width: 899px) {
  .layout-container .ie-elig__panel { padding: 34px 18px 56px; }
}

/* Heading (Drupal outputs inner div inside h2) */
.layout-container .ie-elig__title {
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
}

/* Make underline match TEXT width (underline the inner div) */
.layout-container .ie-elig__title > div {
  display: inline-block;
  position: relative;
  padding-bottom: 18px;
}
.layout-container .ie-elig__title > div::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: rgba(47, 80, 100, 0.4);
}

.layout-container .ie-elig__text {
  max-width: 520px;
  margin: 0 auto 12px;
  font-size: 18px;
  line-height: 1.55;
}

/* CTA overlaps bottom by half its height */
.layout-container .ie-elig__cta {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  margin: 0;
}

.layout-container .ie-elig__cta a.ie-btn,
.layout-container .ie-elig__cta .ie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 55px;
  padding: 0 28px;

  font-size: 24px;
  font-weight: 600;

  border-radius: 2px;
  text-decoration: none;
}

/* Button colours (reused) */
.layout-container .ie-btn--yellow { background: #f2c14b; color: #1b1b1b; }
.layout-container .ie-btn--blue { background: #3ea6c3; color: #0b1b22; }

/* =========================================================
   TIMELINE — Figma sizes
   - Section container: light grey
   - H2: 42px / 600 with underline matching text width
   - Intro: 18px, width 818px, 32px clearance below
   - Cells: 93px tall
   - Small gap between rows
   - 22px between table and CTA
   - Label: 19px
   - Date: 24px
========================================================= */
.layout-container .ie-timeline {
  background: #eef2f5;
  padding: 60px 18px;
}

.layout-container .ie-timeline__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center; /* centres the inline-block heading */
}

.layout-container .ie-title-underline {
  margin: 0;
  font-size: 42px;
  font-weight: 600;

  position: relative;
  display: inline-block;
  padding-bottom: 18px;
}
.layout-container .ie-title-underline::after {
  content: "";
  position: absolute;
  left: 0;       /* not 50% */
  bottom: 0;
  width: 100%;   /* full text width */
  height: 2px;
  background: rgba(47, 80, 100, 0.4);
}

.layout-container .ie-timeline__intro {
  max-width: 818px;
  margin: 0 auto 32px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.55;

  text-align: left; /* intro left, while heading remains centred */
}

/* Table */
.layout-container .ie-timeline__table {
  max-width: 520px;
  margin: 0 auto 22px; /* 22px before CTA */
  display: grid;
  gap: 10px;           /* small gap between rows */
}

.layout-container .ie-timeline__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 93px;
  gap: 0;
}

.layout-container .ie-timeline__label,
.layout-container .ie-timeline__date {
  min-height: 93px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 2px;
}

.layout-container .ie-timeline__label {
  background: #d7edf3;
  font-size: 19px;
  font-weight: 600;
}

.layout-container .ie-timeline__date {
  background: #fff;
  font-size: 24px;
  font-weight: 600;
  border-left: 0; /* we use row gaps now */
}

/* CTA */
.layout-container .ie-btnwrap a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 44px;
  padding: 0 18px;

  background: #3ea6c3;
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
}

/* =========================================================
   Sensible mobile adaptations (no mobile Figma)
========================================================= */
@media (max-width: 1024px) {
  .layout-container .ie-hero2 { min-height: 560px; }
  .layout-container .ie-elig__panel { min-height: 340px; }
}

@media (max-width: 768px) {
  .layout-container .ie-hero2 { min-height: 460px; margin-bottom: 40px; }
  .layout-container .ie-hero2__title { font-size: clamp(32px, 7vw, 44px); }
  .layout-container .ie-hero2__text { font-size: 18px; }

  .layout-container .ie-hero2__actions a {
    min-height: 44px;
    font-size: 16px;
    padding: 0 16px;
  }

  .layout-container .ie-elig { margin-bottom: 90px; }
  .layout-container .ie-elig__panel { min-height: 320px; }
  .layout-container .ie-elig__title { font-size: 28px; }
  .layout-container .ie-elig__text { font-size: 16px; }

  .layout-container .ie-elig__cta a.ie-btn,
  .layout-container .ie-elig__cta .ie-btn {
    min-height: 52px;
    font-size: 20px;
    padding: 0 22px;
  }

  .layout-container .ie-title-underline { font-size: 32px; }
  .layout-container .ie-timeline__label { font-size: 16px; }
  .layout-container .ie-timeline__date { font-size: 18px; }
}

@media (max-width: 420px) {
  .layout-container .ie-hero2__title { font-size: 30px; }
  .layout-container .ie-hero2__text { font-size: 16px; }

  .layout-container .ie-timeline__row { grid-template-columns: 1fr; }
  .layout-container .ie-timeline__date {
    border-top: 1px solid rgba(0,0,0,0.06);
  }
}

/* Apply buttons: exact Figma size */
.layout-container .ie-btn,
.layout-container .ie-elig__cta .ie-btn,
.layout-container .ie-hero2__actions a {
  width: auto;
  min-height: 55px;
  padding: 0 28px;          /* horizontal padding still OK */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Only the 2-up eligibility CTAs are fixed-width */
.layout-container .ie-elig__cta .ie-btn {
  width: 235px;
  min-height: 55px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Gap between text and arrow */
.layout-container .ie-btn span[aria-hidden="true"] {
  margin-left: 20px;
  display: inline-block;
}