/*
 * Homepage (page 5) section styling. Enqueued only on the front page by
 * eam_core_enqueue_home_css().
 *
 * Isabel (2026-09-29): "It would be good if the different sections were
 * visually more differentiated." The page content stays plain Kadence rows;
 * this file gives each section its own surface and one shared vertical
 * rhythm:
 *
 *   hero (dark image)  ->  About (white)  ->  Impact (indigo band)
 *   -> Key Benefits (white)  ->  Recent Activities (tinted)  ->  footer (ink)
 *
 * Rows are targeted by their Kadence uniqueIDs, so editing the text inside
 * them never affects the styling.
 */

body.page-id-5 {
  --eam-home-section-y: clamp(3.5rem, 7vw, 6.25rem);
  --eam-home-tint: #f1f2f8;
  --eam-home-line: rgba(29, 29, 29, .12);
}

/* ---------- Shared rhythm ---------- */

body.page-id-5 :is(
  .kb-row-layout-id5_704967-cb,
  .kb-row-layout-id5_1e7053-0a,
  .kb-row-layout-id5_61ff65-f6,
  .kb-row-layout-id5_15f781-58
) > .kt-row-column-wrap {
  padding-top: var(--eam-home-section-y);
  padding-bottom: var(--eam-home-section-y);
}

body.page-id-5 .wp-block-kadence-image img {
  border-radius: 10px;
}

/* ---------- About (white) ---------- */

body.page-id-5 .kb-row-layout-id5_704967-cb {
  background: var(--global-palette9, #fff);
}

/* ---------- Impact: indigo band ---------- */

body.page-id-5 .kb-row-layout-id5_1e7053-0a {
  background: var(--global-palette1, #5a64ad);
  color: var(--global-palette9, #fff);
}

body.page-id-5 .kb-row-layout-id5_1e7053-0a h2 {
  color: var(--global-palette9, #fff);
}

body.page-id-5 .kb-row-layout-id5_1e7053-0a p {
  color: rgba(255, 255, 255, .86);
}

body.page-id-5 .kb-row-layout-id5_1e7053-0a .kb-count-up-number {
  color: var(--global-palette9, #fff);
}

body.page-id-5 .kb-row-layout-id5_1e7053-0a .kb-count-up-title {
  /* .92 keeps the 14-16px labels above 4.5:1 on the indigo band. */
  color: rgba(255, 255, 255, .92);
  letter-spacing: .01em;
}

/* Same bell-curve signature as the page heroes, behind the figures. */
body.page-id-5 .kb-row-layout-id5_1e7053-0a {
  isolation: isolate;
}

body.page-id-5 .kb-row-layout-id5_1e7053-0a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  height: 62%;
  background: url("../img/eam-bell-curve.svg") no-repeat center bottom / 100% 100%;
  opacity: .14;
  pointer-events: none;
}

body.page-id-5 .kb-row-layout-id5_1e7053-0a > .kt-row-column-wrap {
  position: relative;
  z-index: 1;
}

/* Wider than the screen on phones so the curve keeps its bell shape. */
@media (max-width: 767px) {
  body.page-id-5 .kb-row-layout-id5_1e7053-0a::after {
    background-size: 180% 100%;
  }
}

/* Thin rules between the three figures. */
@media (min-width: 768px) {
  body.page-id-5 .kb-row-layout-id5_848afa-97 .wp-block-kadence-column + .wp-block-kadence-column {
    border-left: 1px solid rgba(255, 255, 255, .24);
  }
}

/* ---------- Key Benefits & Activities (white) ---------- */

body.page-id-5 .kb-row-layout-id5_61ff65-f6 {
  background: var(--global-palette9, #fff);
}

/* The group photo here is the same one used in About; show it as a wide
 * strip so it frames the section instead of filling the screen. */
@media (min-width: 768px) {
  body.page-id-5 .kb-image5_27e57c-8b .kb-is-ratio-image {
    padding-bottom: 36%;
  }

  body.page-id-5 .kb-image5_27e57c-8b img {
    object-position: 50% 62%;
  }
}

body.page-id-5 .kb-row-layout-id5_61ff65-f6 h2 {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Each benefit sits on its own hairline, like entries in a list. */
/* :is(h3, h4): the redesign patch makes these H3 (D-19); the H4 size is kept
 * so the look is the same with the redesign switched off. */
body.page-id-5 .kb-row-layout-id5_45d4b4-67 :is(h3, h4) {
  font-size: 1.625rem;
  margin-top: 1.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--eam-home-line);
}

body.page-id-5 .kb-row-layout-id5_45d4b4-67 .kt-inside-inner-col > :is(h3, h4):first-child {
  margin-top: .5rem;
}

body.page-id-5 .kb-row-layout-id5_45d4b4-67 p.wp-block-kadence-advancedheading {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--global-palette4, #2b2b2b);
}

/* ---------- Recent Activities (tinted) ---------- */

body.page-id-5 .kb-row-layout-id5_15f781-58 {
  background: var(--eam-home-tint);
}

/* A plain core List block that editors maintain in the WordPress editor:
 * each item is a bold title, a line break, then one sentence. */
body.page-id-5 .kadence-column5_310038-e5 ul.wp-block-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 4vw, 3.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

body.page-id-5 .kadence-column5_310038-e5 ul.wp-block-list > li {
  margin: 0;
  padding: 1.35rem 0 1.4rem;
  border-top: 1px solid rgba(29, 29, 29, .14);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--global-palette4, #2b2b2b);
}

body.page-id-5 .kadence-column5_310038-e5 ul.wp-block-list > li strong {
  font-family: var(--global-heading-font-family, Georgia, serif);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--global-palette3, #1d1d1d);
}

@media (max-width: 767px) {
  body.page-id-5 .kb-row-layout-id5_45d4b4-67 :is(h3, h4) {
    font-size: 1.2rem;
  }

  body.page-id-5 .kadence-column5_310038-e5 ul.wp-block-list {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Heading and "Discover More" stack on phones; give them air. */
  body.page-id-5 .kadence-column5_84074d-a7 > .kt-inside-inner-col {
    gap: 1rem;
  }
}

/* ---------- Newsletter row ---------- */

/* The newsletter row (#subscribe) currently has no content, which left a
 * strip of photo above the footer. Hide it while both columns are empty;
 * it reappears as soon as anything is added to it in the editor. */
body.page-id-5 .kb-row-layout-id5_e3cbeb-0c:not(:has(.kt-inside-inner-col > *)) {
  display: none;
}