/*
 * EAM redesign: Executive Committee (page 308, /executive-committee/). Rulebook P-05.
 *
 * Owner: page track "executive-committee". Loaded by includes/redesign.php on this page only,
 * after the shared files, while the redesign switch is on.
 *
 * RS model: clone:src/app/fellows-directory/page.tsx without its filter bar and pagination:
 * light hero (breadcrumb + H1), a short text section, then a four-column grid of person cards
 * (RSC/shared/CardList.tsx "four-col": 4 per row, 2 per row <= 820px, 1 per row <= 480px;
 * RSC/shared/Card.tsx PersonCard: square portrait well, 16px text padding, name 24/1.3,
 * 18px <= 820px).
 *
 * Markup (board content, not changed here):
 *   308_hero01-aa      hero row with the H1 (added by scripts/redesign/pages/00308-executive-committee.mjs)
 *   308_e67b67-c9      governance row: H2 308_6b5ad5-4e + paragraph 308_2342d1-0a + the card grid
 *   308_28acf9-6b      card grid ("Items (Desktop)", 3 columns in Kadence, hidden on phones by
 *                      its block setting and shown again by eam-site-polish.css:480)
 *     > column         one card per member, holding a nested 2-column row:
 *       > first column   portrait (Kadence background image on .kt-inside-inner-col)
 *       > last column    name (H3 after the patch, H5 before), role, "Learn More" button
 * Cards are styled from the grid's uniqueID with structural selectors, so a card the board adds
 * by copying an existing one gets the same look. Older rules met here: eam-site-polish.css:411-488
 * (0,6,1) and the Kadence per-block CSS (0,2,0) to (0,3,0).
 */

/* =========================================================================
 * 1. Hero: the light band from components.css, sized for a title-only hero.
 * ========================================================================= */

/* Interim guard until page-title.php strips Element 747 on this page (it does
 * so for the other block pages): once the content has its own H1, the title
 * banner would show a second "Executive Committee" band above it.
 * !important undoes eam-site-polish.css:407-409 (display: block !important). */
body.eam-redesign.page-id-308:has(.entry-content .eam-page-hero__title) .kb-row-layout-wrap.kb-row-layout-id747_441210-26 {
  display: none !important;
}

/* Only a breadcrumb and the H1 live in this band: like every block hero it
 * is its content plus 80px top and bottom (components.css), with the text at
 * the top, so the breadcrumb lines up with the other pages (y=224 at 1440). */
body.eam-redesign.page-id-308 .kb-row-layout-wrap.kb-row-layout-id308_hero01-aa:has(.eam-page-hero__title) > .kt-row-column-wrap {
  align-content: start;
  min-height: 0;
}

/* =========================================================================
 * 2. Governance text (RS BlogSection: text on the article measure).
 * ========================================================================= */

body.eam-redesign.page-id-308 .wp-block-kadence-advancedheading.kt-adv-heading308_2342d1-0a[data-kb-block] {
  max-width: var(--rd-measure);
  margin-bottom: var(--rd-space-l);
}

/* =========================================================================
 * 3. Committee grid (RS CardList four-col).
 * ========================================================================= */

/* The shared person card (components.css, --rd-person-* values), applied
 * here by uniqueID; same rules as pages/about.css section 6a. */
body.eam-redesign.page-id-308 .kb-row-layout-wrap.kb-row-layout-id308_28acf9-6b > .kt-row-column-wrap {
  display: grid;
  grid-template-columns: repeat(var(--rd-person-columns), minmax(0, 1fr));
  gap: var(--rd-person-gap);
  padding: 0;
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b > .kt-row-column-wrap > .wp-block-kadence-column {
  min-width: 0;
}

/* The card (undoes the old divider line and fixed heights, eam-site-polish.css:420-488). */
body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col,
body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b > .kt-row-column-wrap > .wp-block-kadence-column:hover > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: var(--rd-border-width) solid var(--rd-border-light);
  border-radius: var(--rd-radius);
  background: var(--rd-color-surface);
  box-shadow: var(--rd-shadow-card);
  transition: transform var(--rd-dur-slow) var(--rd-ease-out-cubic), box-shadow var(--rd-dur-slow) var(--rd-ease-out-cubic);
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b > .kt-row-column-wrap > .wp-block-kadence-column:hover > .kt-inside-inner-col {
  box-shadow: var(--rd-shadow-card-hover);
  transform: var(--rd-lift);
}

/* The nested row inside each card: portrait on top, text below. */
body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap {
  flex: 1 1 auto;
  height: auto;
  margin: 0;
  border: 0;
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0;
  height: 100%;
  padding: 0;
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column {
  width: 100%;
  min-width: 0;
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column:first-child {
  overflow: hidden;
  background-color: var(--rd-color-surface-muted);
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: var(--rd-person-portrait-ratio);
  border-radius: var(--rd-radius);
  background-size: cover;
  background-position: var(--rd-person-portrait-position);
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column:last-child {
  display: flex;
  flex-direction: column;
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 0;
  padding: var(--rd-person-text-padding);
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap .wp-block-kadence-advancedheading:is(h3, h4, h5)[data-kb-block] {
  margin: 0 0 calc(var(--rd-space-2xs) * 2);
  font-family: var(--rd-font);
  font-size: var(--rd-person-name-size);
  font-weight: var(--rd-fw-semibold);
  line-height: var(--rd-person-name-lh);
  letter-spacing: var(--rd-ls-heading);
  color: var(--rd-color-text);
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap p.wp-block-kadence-advancedheading[data-kb-block] {
  margin: 0 0 var(--rd-space-base);
  font-size: var(--rd-person-role-size);
  line-height: var(--rd-lh-body);
  letter-spacing: var(--rd-ls-body);
  color: var(--rd-color-text-70);
}

body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap .wp-block-kadence-advancedbtn {
  margin-top: auto;
}

/* Phone: one compact card per row, portrait left at least 140px tall, text right. */
@media (max-width: 480px) {
  body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap {
    grid-template-columns: var(--rd-person-phone-portrait) minmax(0, 1fr);
    grid-template-rows: auto;
  }

  body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column:first-child > .kt-inside-inner-col {
    height: 100%;
    min-height: 140px;
    aspect-ratio: auto;
  }

  body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap > .kt-row-column-wrap > .wp-block-kadence-column:last-child > .kt-inside-inner-col {
    padding: var(--rd-person-phone-text-padding);
  }

  body.eam-redesign.page-id-308 .kb-row-layout-id308_28acf9-6b .kb-row-layout-wrap p.wp-block-kadence-advancedheading[data-kb-block] {
    margin-bottom: var(--rd-space-xs);
  }
}

/* Tablet and phone: hero height from its content (as components.css does for
 * every hero <= 820px). Cards: 2 per row, 1 on phones (--rd-person-columns). */
@media (max-width: 820px) {
  body.eam-redesign.page-id-308 .kb-row-layout-wrap.kb-row-layout-id308_hero01-aa:has(.eam-page-hero__title) > .kt-row-column-wrap {
    min-height: 0;
  }
}