/*
 * EAM redesign: Access Levels (page 1535, /access-levels/). Rulebook P-19.
 * RS: clone:src/app/fellows-directory/election/page.tsx (light hero, text below it) and
 * RSC/shared/CardList.tsx layout "four-col" (4 per row, 16px gaps; 2 per row on tablets,
 * one per row on phones).
 *
 * Page layout only. The light hero, the breadcrumb, the indigo "Quick reference" HeroCard, the
 * card frames (eam-tier-card, with the ink "restricted" variant), the kicker labels, the buttons
 * and the CTA band come from the shared files (components.css, forms.css, base.css,
 * templates.css). Rows by uniqueID:
 *   1535_hero01-aa  hero (shared light hero; fact list -> indigo HeroCard)
 *   1535_grid01-aa  the 4 access levels (eam-tier-card text cards: kicker, H2, text, list)
 *   1535_cta01-aa   "Sign in or join EAM" (shared CTA band: Member Login + View Membership Options)
 *
 * The card titles are H2 since scripts/redesign/pages/01535-access-levels.mjs (D-19: the page
 * went H1 -> H3); components.css gives every card heading the RS card-title size, so the level
 * change does not show.
 */

/* 1. Rhythm ------------------------------------------------------------------------------- */

/* Both rows below the hero carry an explicit white background (.kt-row-has-bg), so base.css
 * cannot collapse their paddings: 48 + 48 = 96px between the cards and the CTA. One section
 * space (48px, 24px at <= 820px: the token switches by itself). */
body.eam-redesign .kb-row-layout-id1535_cta01-aa > .kt-row-column-wrap {
  padding-top: 0;
}

/* 2. Card grid: RS CardList "four-col" ------------------------------------------------------
 * Kadence prints this 2-column row as repeat(2, 1fr) with a 28px gutter (0,2,0) and collapses it
 * to one column below 768px. RS: 4 per row, 16px gaps; 2 per row below desktop (the shared card
 * grids switch at 1080, DESIGN-SYSTEM 6); one per row on phones (components.css also does that). */
body.eam-redesign .kb-row-layout-id1535_grid01-aa > .kt-row-column-wrap {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--rd-grid-gap);
  row-gap: var(--rd-grid-gap);
}

@media (max-width: 1080px) {
  body.eam-redesign .kb-row-layout-id1535_grid01-aa > .kt-row-column-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Card content starts at the top. Kadence prints `.kadence-column1535_cardNa-aa >
 * .kt-inside-inner-col { justify-content: center }` at <= 1024px (0,2,0), which floated the
 * shorter card of each 2-up row about 12px down from its neighbour. */
body.eam-redesign .kb-row-layout-id1535_grid01-aa .wp-block-kadence-column.eam-tier-card > .kt-inside-inner-col {
  justify-content: flex-start;
}

@media (max-width: 480px) {
  body.eam-redesign .kb-row-layout-id1535_grid01-aa > .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 3. Card text ------------------------------------------------------------------------------ */

/* The board's card paragraphs use Kadence palette4 (#2b2b2b, not remapped on purpose,
 * DESIGN-SYSTEM 9) through .has-theme-palette-4-color, which is !important. Repointing the preset
 * on this page's content turns them RS ink without !important (as on Summer Schools). */
body.eam-redesign.page-id-1535 .entry-content {
  --wp--preset--color--theme-palette-4: var(--rd-color-text);
}

/* Text, then the list one small step below (Kadence gives the text 24px under it). */
body.eam-redesign .kb-row-layout-id1535_grid01-aa .eam-tier-card p.wp-block-kadence-advancedheading[data-kb-block] {
  margin-bottom: var(--rd-space-s);
}

/* What each level includes: body text 16/24 (Kadence sets 14px; body text stays 16px, also on
 * phones), 12px between items, checks centred on the first line. The ink card keeps its white
 * text and checks from the block settings. */
body.eam-redesign .kb-row-layout-id1535_grid01-aa .eam-tier-card .wp-block-kadence-iconlist:not(.this-stops-third-party-issues) {
  margin-top: 0;
  margin-bottom: 0;
}

body.eam-redesign .kb-row-layout-id1535_grid01-aa .eam-tier-card .wp-block-kadence-iconlist ul.kt-svg-icon-list {
  grid-row-gap: var(--rd-space-xs);
  row-gap: var(--rd-space-xs);
}

body.eam-redesign .kb-row-layout-id1535_grid01-aa .eam-tier-card .wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap {
  align-items: flex-start;
  font-family: var(--rd-font);
  font-size: var(--rd-fs-body);
  line-height: var(--rd-lh-body);
  letter-spacing: var(--rd-ls-body);
}

/* The check box is one text line tall (16 x 1.5 = 24px) with the icon centred in it, so it sits
 * on the first line however the item wraps. */
body.eam-redesign .kb-row-layout-id1535_grid01-aa .eam-tier-card .wp-block-kadence-iconlist ul.kt-svg-icon-list .kt-svg-icon-list-item-wrap .kt-svg-icon-list-single {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: calc(var(--rd-fs-body) * var(--rd-lh-body));
  margin-top: 0;
}

/* 4. No lift: these cards are not links (same call as the Grant cards, components.css "Grant
 * cards are not links"). A card that moves under the pointer promises a click it cannot keep. */
body.eam-redesign .kb-row-layout-id1535_grid01-aa .wp-block-kadence-column.eam-tier-card:hover {
  transform: none;
}

body.eam-redesign .kb-row-layout-id1535_grid01-aa .wp-block-kadence-column.eam-tier-card:hover > .kt-inside-inner-col {
  box-shadow: var(--rd-shadow-card);
}