/* =========================================================================
 * Our Mission (page 274), rulebook P-03. Page layout only.
 * RS model: about-us/who-we-are/mission-priorities (SiteShell with no hero,
 * BlogSection): breadcrumb, H1 48/40 and a 24/1.2 lead on white, left
 * aligned on the content edge; then the three EAM statements as article
 * sections, a stat row and the closing CTA band.
 * Block structure: wordpress/pages/published/00274-our-mission and
 * local/live-pulls/00274-our-mission/content.wp.html. The uniqueIDs here are
 * the 274_ ones: the page patch (reprefixIds() in
 * scripts/redesign/pages/00274-our-mission.mjs) renames the IDs copied from
 * other posts (21373_, 21391_, 21295_, 21365_) to 274_<same suffix>, which
 * Kadence keeps; it re-rolled the foreign ones on every editor load.
 * eam-site-polish.css (Our Mission block) lists both old and new IDs.
 * Kadence prints its per-block CSS at (0,2,0) to (0,3,0); every rule here
 * is (0,3,1) or more. The one !important (section 5) undoes Kadence's own
 * !important text alignment; the WordPress colour classes that are
 * !important are repointed through their preset variable instead.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. Page head (row 274_d35843-37): no hero band (RS SiteShell noHero).
 * The breadcrumb starts 201px from the top (144px <= 820px), as RS:
 * --rd-no-hero-top minus the header height the content already clears.
 * ------------------------------------------------------------------------- */
body.eam-redesign .kb-row-layout-id274_d35843-37 > .kt-row-column-wrap {
  padding-top: calc(var(--rd-no-hero-top) - var(--rd-header-h));
  padding-bottom: 0;
}

/* The column holds the breadcrumb (injected by redesign-breadcrumbs.php),
 * then the kicker paragraph, then the H1. RS order is breadcrumb, H1, lead:
 * the kicker is shown as the lead under the H1 (P-03 map). Visual order
 * only; nothing in this column is focusable except the breadcrumb, which
 * stays first. */
body.eam-redesign .kadence-column274_c895e8-20 > .kt-inside-inner-col {
  display: flex;
  flex-direction: column;
}

body.eam-redesign .kadence-column274_c895e8-20 > .kt-inside-inner-col > .rd-breadcrumb {
  order: 0;
}

/* H1 (deferred item): Kadence "xl" preset rendered 40/44 centred in a
 * 960px box; RS H1 is 48/1.1 (40 <= 820px) on the left content edge. */
body.eam-redesign .kt-adv-heading274_d3fe76-11[data-kb-block] {
  order: 1;
  max-width: none;
  margin: 0 0 .46em;
  font-size: var(--rd-fs-h1);
  line-height: var(--rd-lh-h1);
  text-align: left;
  color: var(--rd-color-text);
}

/* Kicker "Empowering Social Science Research in Europe." as the RS lead:
 * 24/1.2 ink, BlogSection main column width (cols 1-7 of 10, 916px). */
body.eam-redesign .kt-adv-heading274_f88b5b-1c[data-kb-block] {
  order: 2;
  max-width: calc((var(--rd-container-inner) + var(--rd-grid-gap)) * .7 - var(--rd-grid-gap));
  margin: 0;
  font-size: var(--rd-fs-lead);
  font-weight: var(--rd-fw-regular);
  line-height: var(--rd-lh-lead);
  text-align: left;
  /* .has-theme-palette-5-color (grey) is !important and reads this preset:
   * repointed on the element, as components.css does for hero titles. */
  --wp--preset--color--theme-palette-5: var(--rd-color-text);
  color: var(--rd-color-text);
}

/* -------------------------------------------------------------------------
 * 2. Statements (row 274_cb2fca-52 with two inner rows): article
 * sections, photo and text side by side on the 12-column grid (photo 6
 * columns, text 5, one column of air between), no tint frame around the
 * photo, left-aligned text. One column at <= 820px, photo first.
 * ------------------------------------------------------------------------- */
body.eam-redesign :is(.kb-row-layout-id274_67beb5-62, .kb-row-layout-id274_66f02a-aa) > .kt-row-column-wrap {
  column-gap: calc(var(--rd-grid-col) + 2 * var(--rd-grid-gap));
  row-gap: var(--rd-space-base);
  padding: 0;
}

body.eam-redesign .kb-row-layout-id274_67beb5-62 > .kt-row-column-wrap {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

body.eam-redesign .kb-row-layout-id274_66f02a-aa > .kt-row-column-wrap {
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  margin-top: var(--rd-space-xl);
}

/* Photo columns: the editor's tint panel (palette7, padding, radius 24) is
 * dropped; the photo keeps its 4:3 crop and sits on the grid like RS
 * article images (square corners come from base.css). */
body.eam-redesign :is(.kadence-column274_640d4a-6b, .kadence-column274_8d5f29-3a) > .kt-inside-inner-col {
  padding: 0;
  background: none;
  box-shadow: none;
}

body.eam-redesign :is(.kb-image274_468c2c-b7, .kb-image274_2d969a-2c) {
  margin: 0;
}

/* Statement headings: H2 in RS listing size 32/1.2 (24 <= 820px). The
 * blocks set line-height 1em (deferred item: line-heights). */
body.eam-redesign :is(.kt-adv-heading274_8eb169-07, .kt-adv-heading274_d89e06-aa)[data-kb-block] {
  margin: 0 0 var(--rd-space-s);
  font-size: var(--rd-fs-h3);
  line-height: var(--rd-lh-h3);
  text-align: left;
  color: var(--rd-color-text);
}

body.eam-redesign :is(.kt-adv-heading274_c6fe8c-6b, .kt-adv-heading274_9df85d-19)[data-kb-block] {
  max-width: var(--rd-measure);
  margin: 0;
  font-size: var(--rd-fs-large);
  line-height: var(--rd-lh-body);
  text-align: left;
  color: var(--rd-color-text);
}

/* -------------------------------------------------------------------------
 * 3. "Recognizing EAM's ..." tint band (row 274_d8f8bf-d0): left-aligned
 * section header (S-09) and the RS stat row (D-16, components.css section
 * 8): three stats side by side at every width, number in H1 type in
 * indigo, label 16/24 at 70% ink, hairlines above and below, no boxes.
 * ------------------------------------------------------------------------- */
body.eam-redesign .kt-adv-heading274_4d618c-17[data-kb-block] {
  max-width: calc((var(--rd-container-inner) + var(--rd-grid-gap)) * .7 - var(--rd-grid-gap));
  margin: 0 0 var(--rd-space-s);
  font-size: var(--rd-fs-h2);
  line-height: var(--rd-lh-h2);
  text-align: left;
}

body.eam-redesign .kt-adv-heading274_6c8c24-65[data-kb-block] {
  max-width: var(--rd-measure);
  margin: 0;
  font-size: var(--rd-fs-large);
  line-height: var(--rd-lh-body);
  text-align: left;
}

body.eam-redesign .kb-row-layout-id274_9ad385-f8 {
  margin-top: var(--rd-space-l);
}

body.eam-redesign .kb-row-layout-id274_9ad385-f8 > .kt-row-column-wrap {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rd-grid-gap);
  padding: var(--rd-space-base) 0;
  border-top: var(--rd-border-width) solid var(--rd-border-on-tint);
  border-bottom: var(--rd-border-width) solid var(--rd-border-on-tint);
}

body.eam-redesign :is(.kadence-column274_5d8fde-42, .kadence-column274_b08db1-5c, .kadence-column274_897333-ba) > .kt-inside-inner-col {
  padding: 0;
  background: none;
  box-shadow: none;
}

body.eam-redesign :is(.kt-adv-heading274_165c58-6b, .kt-adv-heading274_afbcb4-85, .kt-adv-heading274_2985d8-0f)[data-kb-block] {
  margin: 0;
  font-size: var(--rd-fs-h1);
  font-weight: var(--rd-fw-semibold);
  font-style: normal;
  line-height: var(--rd-lh-h1);
  letter-spacing: var(--rd-ls-heading);
  text-align: left;
  --wp--preset--color--theme-palette-3: var(--rd-color-primary); /* .has-theme-palette-3-color is !important */
  color: var(--rd-color-primary);
}

body.eam-redesign :is(.kt-adv-heading274_a0b069-51, .kt-adv-heading274_796efa-e7, .kt-adv-heading274_523d74-21)[data-kb-block] {
  margin: var(--rd-space-2xs) 0 0;
  font-size: var(--rd-fs-body);
  font-weight: var(--rd-fw-regular);
  font-style: normal;
  line-height: var(--rd-lh-body);
  letter-spacing: var(--rd-ls-body);
  text-align: left;
  --wp--preset--color--theme-palette-4: var(--rd-color-text-70); /* .has-theme-palette-4-color is !important */
  color: var(--rd-color-text-70);
}

/* -------------------------------------------------------------------------
 * 4. "Join EAM Today" (row 274_b77e6f-66): the block-page CTA band
 * (components.css section 13, rows named _cta01-): square indigo panel,
 * content from the left, white button (forms.css), no fixed height.
 * Last row: 60px (40 <= 820px) above the footer, as base.css gives plain
 * last rows.
 * ------------------------------------------------------------------------- */
body.eam-redesign .kb-row-layout-id274_b77e6f-66 > .kt-row-column-wrap {
  padding-bottom: var(--rd-space-xl);
}

body.eam-redesign .kadence-column274_86a0fc-b5 > .kt-inside-inner-col {
  align-items: flex-start;
  min-height: 0;
  height: auto;
  padding: var(--rd-space-l) var(--rd-space-m);
  text-align: left;
}

body.eam-redesign .kt-adv-heading274_e3cb4d-ce[data-kb-block] {
  margin: 0 0 var(--rd-space-xs);
  font-size: var(--rd-fs-h3);
  line-height: var(--rd-lh-h3);
  text-align: left;
  color: var(--rd-color-on-primary);
}

body.eam-redesign .kt-adv-heading274_55e45c-14[data-kb-block] {
  max-width: var(--rd-measure);
  margin: 0 0 var(--rd-space-base);
  font-size: var(--rd-fs-large);
  line-height: var(--rd-lh-body);
  text-align: left;
  color: var(--rd-color-on-primary);
}

body.eam-redesign .kb-btns274_032119-f9.wp-block-kadence-advancedbtn {
  justify-content: flex-start;
}

/* -------------------------------------------------------------------------
 * 5. Below desktop and phones.
 * ------------------------------------------------------------------------- */

/* Undo Kadence's own !important: the blocks' tabletAlign / mobileAlign
 * attributes (live-pull content.wp.html lines 21, 25, 33, 37, 51, 55) print "text-align: center !important" at max-width 1024px / 767px
 * in kadence_blocks_css-inline-css. RS text is left-aligned at every width. */
body.eam-redesign :is(.kt-adv-heading274_8eb169-07, .kt-adv-heading274_d89e06-aa, .kt-adv-heading274_c6fe8c-6b, .kt-adv-heading274_9df85d-19, .kt-adv-heading274_4d618c-17, .kt-adv-heading274_6c8c24-65)[data-kb-block] {
  text-align: left !important;
}

@media (max-width: 1080px) {
  body.eam-redesign :is(.kb-row-layout-id274_67beb5-62, .kb-row-layout-id274_66f02a-aa) > .kt-row-column-wrap {
    column-gap: var(--rd-space-l);
  }
}

/* RS md: one column. Kadence would keep two columns down to 767px. */
@media (max-width: 820px) {
  /* Rows sized by content: Kadence's equal-height columns
   * (.kt-inner-column-height-full) would stretch the text to the photo's
   * height once the columns stack. */
  body.eam-redesign :is(.kb-row-layout-id274_67beb5-62, .kb-row-layout-id274_66f02a-aa) > .kt-row-column-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
  }

  body.eam-redesign .kb-row-layout-id274_66f02a-aa > .kt-row-column-wrap {
    margin-top: var(--rd-space-l);
  }

  /* Same 40px above, between and below the stacked statements (the 24px
   * section rhythm is too tight next to full-width photos). */
  body.eam-redesign .kb-row-layout-id274_cb2fca-52 > .kt-row-column-wrap {
    padding-top: var(--rd-space-l);
    padding-bottom: var(--rd-space-l);
  }

  /* Stacked photos use the RS 16:9 image well instead of the block's 4:3,
   * so a photo does not fill the whole tablet screen. Same image, crop only. */
  body.eam-redesign :is(.kb-image274_468c2c-b7, .kb-image274_2d969a-2c) .kb-is-ratio-image {
    padding-bottom: 56.25%;
  }

  /* Photo above its text in both statements (the second one is text first
   * on desktop). */
  body.eam-redesign .kb-row-layout-id274_66f02a-aa > .kt-row-column-wrap > .kadence-column274_8d5f29-3a {
    order: -1;
  }

  /* Same 40/32px panel padding as the other CTA bands at every width
   * (components.css section 13, _cta01- columns). */
  body.eam-redesign .kadence-column274_86a0fc-b5 > .kt-inside-inner-col {
    padding: var(--rd-space-l) var(--rd-space-m);
  }
}

@media (max-width: 480px) {
  body.eam-redesign .kadence-column274_86a0fc-b5 > .kt-inside-inner-col {
    align-items: stretch;
  }

  body.eam-redesign .kb-btns274_032119-f9.wp-block-kadence-advancedbtn {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  body.eam-redesign .kb-btns274_032119-f9.wp-block-kadence-advancedbtn > .kb-button {
    width: 100%;
  }
}

/* Narrow phones (360px and below): three 40px figures no longer fit their
 * ~100px columns and "2004" broke into "200 / 4". Keep the three across,
 * figures in H2 type and never broken mid-number. */
@media (max-width: 374px) {
  body.eam-redesign :is(.kt-adv-heading274_165c58-6b, .kt-adv-heading274_afbcb4-85, .kt-adv-heading274_2985d8-0f)[data-kb-block] {
    font-size: var(--rd-fs-h2);
    line-height: var(--rd-lh-h2);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* CTA band button: white with an ink label, like every other CTA band's
 * first button (forms.css, <page>_cta06-* rule). */
body.eam-redesign.page-id-274 main .wp-block-kadence-advancedbtn .kb-button.kt-button.kb-btn274_2ce8eb-28,
body.eam-redesign.page-id-274 main .wp-block-kadence-advancedbtn .kb-button.kt-button.kb-btn274_2ce8eb-28:is(:hover, :focus) {
  border: var(--rd-btn-border) solid var(--rd-white);
  background: var(--rd-white);
  color: var(--rd-ink);
}