/*
Theme Name: Eileen Projects
Description: Custom theme for project case studies, replacing Elementor Pro.
Version: 1.9
*/

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Color primitives */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-blue-600: #2577e8;
  --color-blue-400: #7eb7fc;
  --color-blue-200: #bedbff;
  --color-grey-100: #f9f9f9;
  --color-orange: #ff5f2e;
  --color-grey-600: #6b6b6b;
  --color-grey-300: #d9d9d9;

  /* Semantic colors */
  --color-text-primary: var(--color-black);
  --color-text-secondary: var(--color-grey-600);
  --color-border: var(--color-grey-300);
  --color-bg-page: var(--color-white);
  --color-bg-subtle: var(--color-grey-100);
  --color-accent-primary: var(--color-blue-600);
  --color-accent-light: var(--color-blue-400);
  --color-accent-tint: var(--color-blue-200);
  --color-accent-warm: var(--color-orange);

  /* Spacing */
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;

  /* Radius */
  --radius: 6px;
  --radius-card: 11.5px;

  /* Layout — Figma 12-column grid: 12 x 74px + 11 x 32px gutter = 1240 */
  --page-width: 1240px;    /* full content area */
  --content-width: 710px;  /* narrow text column (6 cols + gutters) */
  --aside-width: 252px;    /* Client / Region sidebar */
  --column-gap: 82px;      /* between text column and aside */
  --grid-gap: 24px;        /* between cards inside a component */
  --gutter: 32px;          /* Figma 12-column grid gutter */
  --grid-columns: 12;
  --grid-row-gap: 32px;    /* between card rows */

  /* Interaction states */
  --hover-opacity: 0.85;
  --active-opacity: 0.7;
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Hover/active surface tints (subtle background shifts on light UI) */
  --color-hover-tint: rgba(0, 0, 0, 0.04);
  --color-active-tint: rgba(0, 0, 0, 0.08);

  /* Focus ring — accessibility, keyboard navigation */
  --focus-ring-color: var(--color-blue-600);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Breakpoints (reference only — CSS vars can't be used in media queries,
     these document the values used throughout this file)
     --bp-mobile:  600px
     --bp-tablet:  900px
     --bp-desktop: 1200px  */

  /* Typography */
  --font-serif: 'Quattrocento', serif;
  --font-sans: 'Kufam', sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --text-title-1: clamp(3rem, 2.5385rem + 2.0513vw, 4rem);
  --text-title-2: clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem);
  --text-title-3: clamp(2.1rem, 1.9154rem + 0.8205vw, 2.5rem);
  --text-title-4: clamp(1.8rem, 1.7077rem + 0.4103vw, 2rem);
  --text-title-5: clamp(1.6rem, 1.5308rem + 0.3077vw, 1.75rem);
  --text-title-6: clamp(1.4rem, 1.3538rem + 0.2051vw, 1.5rem);
  --text-title-7: clamp(1.2rem, 1.1769rem + 0.1026vw, 1.25rem);
  --text-title-8: clamp(2.4rem, 2.1231rem + 1.2308vw, 3rem);
  --text-body: 1rem;
  --text-small: 0.85rem;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; max-width: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  margin: 0;
}
.wrap { max-width: var(--page-width); margin: 0 auto; padding: 0 var(--space-xl); width: 100%; }
img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); }
h1, h2, h3, p, li { overflow-wrap: break-word; }
a { color: var(--color-accent-warm); text-decoration: none; transition: opacity var(--transition-fast); }
a:hover { text-decoration: underline; }
a:active { opacity: var(--active-opacity); }

/* Accessible keyboard focus — applies to all interactive elements */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius);
}
figcaption, .caption { font-size: var(--text-small); color: var(--color-text-secondary); margin-top: var(--space-xs); }

/* ==========================================================================
   Typography utilities — apply the design-system scale to any element
   ========================================================================== */
.text-title-1 { font-family: var(--font-serif); font-size: var(--text-title-1); font-weight: var(--weight-regular); }
.text-title-2 { font-family: var(--font-sans);  font-size: var(--text-title-2); font-weight: var(--weight-regular); }
.text-title-3 { font-family: var(--font-sans);  font-size: var(--text-title-3); font-weight: var(--weight-semibold); }
.text-title-4 { font-family: var(--font-sans);  font-size: var(--text-title-4); font-weight: var(--weight-regular); }
.text-title-5 { font-family: var(--font-sans);  font-size: var(--text-title-5); font-weight: var(--weight-semibold); }
.text-title-6 { font-family: var(--font-sans);  font-size: var(--text-title-6); font-weight: var(--weight-medium); }
.text-title-7 { font-family: var(--font-sans);  font-size: var(--text-title-7); font-weight: var(--weight-medium); }
.text-title-8 { font-family: var(--font-serif); font-size: var(--text-title-8); font-weight: var(--weight-medium); }
.text-body    { font-family: var(--font-sans);  font-size: var(--text-body); }
.text-small   { font-family: var(--font-sans);  font-size: var(--text-small); }

/* ==========================================================================
   Header / Footer
   ========================================================================== */
.site-header { padding: var(--space-l) 0; border-bottom: 1px solid var(--color-border); }
.site-footer { padding: var(--space-xxl) 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-body);
  padding: var(--space-m) var(--space-xl);
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), opacity var(--transition-fast);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — solid black, e.g. "Download CV" */
.btn--primary {
  background: var(--color-black);
  color: var(--color-white);
}
.btn--primary:hover { opacity: var(--hover-opacity); }
.btn--primary:active { opacity: var(--active-opacity); }

/* Secondary — white pill on a colored/gradient background, e.g. "Explore portfolio" */
.btn--secondary {
  background: var(--color-white);
  color: var(--color-text-primary);
  border-radius: 999px;
}
.btn--secondary:hover { background: var(--color-grey-100); }
.btn--secondary:active { background: var(--color-grey-300); }

/* Outline — for use on light backgrounds where a filled button is too heavy */
.btn--outline {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
.btn--outline:hover { background: var(--color-hover-tint); border-color: var(--color-text-secondary); }
.btn--outline:active { background: var(--color-active-tint); }

/* Warm — accent-colored, for calls to action tied to the orange brand accent */
.btn--warm {
  background: var(--color-accent-warm);
  color: var(--color-white);
}
.btn--warm:hover { opacity: var(--hover-opacity); }
.btn--warm:active { opacity: var(--active-opacity); }

.btn--small { padding: var(--space-s) var(--space-l); font-size: var(--text-small); }

/* ==========================================================================
   Portfolio archive
   ========================================================================== */
.portfolio-archive { padding: var(--space-xxxl) 0; text-align: center; }
.portfolio-archive__title {
  font-family: var(--font-serif);
  font-size: var(--text-title-1);
  font-weight: var(--weight-regular);
}
.portfolio-archive__intro {
  max-width: 700px;
  margin: 0 auto var(--space-xxxl);
  color: var(--color-text-secondary);
}
.portfolio-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xxxl) var(--space-xl);
  text-align: left;
}
.portfolio-card img { transition: opacity var(--transition-base); }
.portfolio-card:hover img { opacity: var(--hover-opacity); }
.portfolio-card h2 { font-size: var(--text-title-4); font-weight: var(--weight-regular); margin: var(--space-l) 0 var(--space-xs); }
.portfolio-card h2 a { color: var(--color-text-primary); transition: opacity var(--transition-fast); }
.portfolio-card h2 a:hover { text-decoration: none; opacity: var(--active-opacity); }
/* ==========================================================================
   Project page
   ========================================================================== */
.project { padding: var(--space-xxl) 0; }
.project__title {
  font-family: var(--font-serif);
  font-size: var(--text-title-1);
  font-weight: var(--weight-regular);
  margin-bottom: var(--space-l);
}
.project__meta {
  float: right;
  width: var(--aside-width);
  margin-left: var(--column-gap);
  margin-bottom: var(--space-xl);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
}
.project__meta span { display: block; margin-bottom: var(--space-l); }

/* Everything sits in the 710px column (7 of 12 grid columns), which leaves
   room for the Client/Region sidebar alongside. Hero and Goal/Outcome are
   the two exceptions: they span the full 1240px content width. */
.module,
.project__title { max-width: var(--content-width); }

.module--hero,
.module--goal-outcome { max-width: 100%; }

/* Grid modules clear the floated sidebar so they use the full column */
.module--kpi-grid,
.module--image-grid,
.module--challenge-cards,
.module--hero { clear: right; }
.project__meta strong { display: block; color: var(--color-text-primary); font-weight: var(--weight-medium); }

.module { margin: var(--space-xxl) 0; }

/* Icons */
.icon svg { width: 24px; height: 24px; color: var(--color-accent-primary); }
.icon--warm svg { color: var(--color-accent-warm); }

/* Eyebrow tag */
.eyebrow-tag {
  display: inline-block;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  padding: var(--space-xs) var(--space-m);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  margin-bottom: var(--space-m);
}

/* Text section — 16px between every element */
.module--text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);            /* 16px */
}
.module--text-section .eyebrow-tag { margin-bottom: 0; }
.text-section__heading { margin: 0; }
.text-section__body { margin: 0; }
.text-section__body > p:first-child { margin-top: 0; }
.text-section__body > p:last-child { margin-bottom: 0; }

/* Stat callout */
.module--stat-callout {
  background: var(--color-accent-primary);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: var(--space-xl);
}
.module--stat-callout .stat-number { font-family: var(--font-serif); font-size: var(--text-title-2); }
.module--stat-callout .stat-label { font-size: var(--text-body); }

/* Goal / Outcome */
.module--goal-outcome {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  clear: right;
  width: 100%;
}
.goal-outcome__heading { margin: 0 0 var(--space-s); }
.goal-outcome__body { font-size: var(--text-body); }
.goal-outcome__body p:first-child { margin-top: 0; }

/* Challenge cards */
.module--challenge-cards { display: block; }


/* Cards share the row evenly, however many there are */
.challenge-cards__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--grid-gap);
}
.challenge-card {
  border: 1px solid var(--challenge-border, var(--color-accent-primary));
  color: var(--challenge-color, var(--color-text-primary));
  border-radius: var(--radius-card);
  padding: var(--space-xl);
  min-height: 154px;
  /* Icon sits above the text, per the design */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
}
.challenge-card .icon svg {
  width: 20px; height: 20px;
  color: var(--challenge-icon, var(--color-accent-primary));
  flex-shrink: 0;
}
.challenge-card p { margin: 0; font-size: var(--text-body); }

/* Stat trio / KPI grid */
.module--stat-trio, .module--kpi-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
  gap: var(--grid-row-gap) var(--grid-gap);
}
.module--kpi-grid.has-2-columns { grid-template-columns: repeat(2, 1fr); }
.module--kpi-grid.has-3-columns { grid-template-columns: repeat(3, 1fr); }
.stat-trio-item, .kpi-card {
  /* Colours come from the grid, so one setting styles every card */
  background: var(--kpi-bg, var(--color-accent-tint));
  color: var(--kpi-color, var(--color-accent-primary));
  border-radius: var(--radius);
  padding: var(--space-xl);
  min-height: var(--kpi-height, 289px);
  display: flex;
  flex-direction: column;
}
.kpi-card .description { margin-top: auto; }

/* Card height presets (measured from the Figma exports) */
.module--kpi-grid.is-tall   { --kpi-height: 289px; }
.module--kpi-grid.is-medium { --kpi-height: 200px; }
.module--kpi-grid.is-short  { --kpi-height: 150px; }

/* Shorter cards get tighter padding so the text still fits */
.module--kpi-grid.is-short .kpi-card { padding: var(--space-l); }
.kpi-card .value {
  font-family: var(--font-serif);   /* Quattrocento */
  font-size: var(--text-title-3);
  font-weight: var(--weight-regular);
  color: inherit;
  line-height: 1.1;
}
.kpi-card .title {
  font-size: var(--text-title-7);
  font-weight: var(--weight-regular);
  color: inherit;
  margin: var(--space-m) 0 0;
}
.kpi-card .description {
  font-size: var(--text-small);
  color: inherit;
}
.kpi-card .icon svg { width: 28px; height: 28px; color: currentColor; }

/* Shorter cards don't need the description pushed to the bottom */
.module--kpi-grid.is-short .kpi-card .description,
.module--kpi-grid.is-medium .kpi-card .description { margin-top: var(--space-xs); }

/* Callout — coloured bar, icon left, text right, both vertically centred */
.module--callout {
  display: flex;
  gap: var(--space-l);
  align-items: center;              /* centres icon and text on the bar */
  background: var(--color-accent-tint);
  border-radius: var(--radius);
  padding: var(--space-l) var(--space-xl);
  max-width: var(--content-width);
  margin: var(--space-m) 0;
}
.module--callout .icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.module--callout .icon svg {
  width: 20px; height: 20px;
  color: var(--callout-icon, var(--color-accent-primary));
  display: block;
}
.callout__text {
  font-size: var(--text-body);
  color: inherit;
}
.callout__text p { margin: 0; }
.callout__text p + p { margin-top: var(--space-s); }

/* Image block */
.module--image-block img { width: 100%; }

/* ==========================================================================
   Image Block — layout presets (dimensions from the Figma SVG exports)
   Heights are fixed; images fill their box with object-fit: cover.
   ========================================================================== */
.module--image-grid {
  display: grid;
  max-width: var(--content-width);   /* 710px, never wider */
  width: 100%;
}
/* Children must fill their grid cell, including empty editor placeholders */
.module--image-grid .wp-block-image,
.module--image-grid figure { width: 100%; }

/* Each core/image renders as <figure><img><figcaption>. The figure is the
   grid cell; the img takes the fixed height, the caption sits below it. */
.module--image-grid figure {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.module--image-grid img {
  width: 100%;
  height: var(--img-height, 420px);
  object-fit: cover;
  border-radius: var(--radius);
  display: block;
}
.module--image-grid figcaption {
  font-size: var(--text-small);
  font-style: italic;
  color: var(--color-text-secondary);
  margin-top: var(--space-m);
}

/* 1. Full width, tall — 710 x 420 */
.module--image-grid.is-full-tall  { --img-height: 420px; grid-template-columns: 710px; }

/* 2. Full width, short — 710 x 320 */
.module--image-grid.is-full-short { --img-height: 320px; grid-template-columns: 710px; }

/* 3. Two columns, wide + narrow — 399 + 287, gap 24, height 500 */
.module--image-grid.is-wide-narrow {
  --img-height: 500px;
  grid-template-columns: 399px 287px;
  gap: 24px;
}

/* 4. Half width — 343 x 500, left aligned, single image */
.module--image-grid.is-half {
  --img-height: 500px;
  grid-template-columns: 343px;
  justify-content: start;
}

/* 5. Two columns, equal — 336.5 each, gap 37, height 320 */
.module--image-grid.is-equal {
  --img-height: 320px;
  grid-template-columns: 336.5px 336.5px;
  gap: 37px;
}

/* Mobile: heights relax so tall images don't dominate small screens */
@media (max-width: 600px) {
  .module--image-grid { grid-template-columns: 1fr !important; gap: var(--space-l) !important; }
  .module--image-grid img { height: auto; max-height: var(--img-height); }
  .module--image-grid.is-half { grid-template-columns: 1fr; }
}

/* Image grid */


/* ==========================================================================
   Responsive — all breakpoints consolidated here
   Approach: mobile-first fallbacks applied via max-width queries, since the
   base layout above is written desktop-first.
   Breakpoints: 900px (tablet), 600px (mobile)
   ========================================================================== */

/* --- Tablet and below (≤900px) --- */
@media (max-width: 1100px) {
  /* Sidebar stops floating; content takes full width */
  .project__meta {
    float: none;
    width: 100%;
    margin-left: 0;
    display: flex;
    gap: var(--space-xxl);
  }
  .module, .project__title { max-width: 100%; }
  .module--hero { grid-template-columns: 1.4fr 1fr; }
}

@media (max-width: 900px) {
  .wrap { padding: 0 var(--space-xl); }

  /* 3-column grids drop to 2 */
  .module--stat-trio,
  .module--kpi-grid { grid-template-columns: repeat(2, 1fr); }

  /* Image grids respect their column setting but cap at 2 */
  .module--image-grid { grid-template-columns: repeat(min(var(--columns, 2), 2), 1fr); }

  .portfolio-archive__grid { gap: var(--space-xxl) var(--space-l); }
}

/* --- Mobile (≤600px) --- */
@media (max-width: 600px) {
  .wrap { padding: 0 var(--space-l); }

  /* Everything collapses to a single column */
  .module--stat-trio,
  .module--kpi-grid,
  .module--image-grid,
  .module--goal-outcome,
  .module--challenge-cards,
  .portfolio-archive__grid { grid-template-columns: 1fr; }

  /* Meta row stacks instead of sitting in a wide flex row */
  .project__meta {
    flex-direction: column;
    gap: var(--space-m);
  }

  /* Tighter vertical rhythm on small screens */
  .module { margin: var(--space-xl) 0; }
  .project { padding: var(--space-xl) 0; }
  .portfolio-archive { padding: var(--space-xxl) 0; }

  /* Full-width buttons read better on mobile */
  .btn { display: block; width: 100%; text-align: center; }
  .btn--small { display: inline-block; width: auto; }

  /* Scale back the largest type — 4rem is too big for a phone */
  .project__title,
  .portfolio-archive__title { font-size: clamp(2rem, 8vw, 2.5rem); }
  .module--stat-callout .stat-number { font-size: 2rem; }
  .kpi-card .value { font-size: 1.75rem; }

  /* Cards need less padding at narrow widths */
  .kpi-card, .stat-trio-item, .challenge-card { padding: var(--space-m); }
  .module--stat-callout { padding: var(--space-l); }
}

/* ==========================================================================
   Accessibility — respect reduced-motion preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .btn:active { transform: none; }
}

/* ==========================================================================
   Block editor only — keeps modules legible while editing
   ========================================================================== */
.editor-styles-wrapper .eileen-editor-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-l);
  background: var(--color-bg-subtle);
}
.editor-styles-wrapper .module--stat-callout .stat-number,
.editor-styles-wrapper .module--stat-callout .stat-label { color: var(--color-white); }
.editor-styles-wrapper .module { outline: 1px dashed var(--color-border); outline-offset: var(--space-s); }

/* ==========================================================================
   Hero — main image left, stat card + side card stacked right
   NOTE: proportions here are approximated from the Figma screenshot.
   Send Dev Mode values to make these exact.
   ========================================================================== */
.module--hero {
  display: grid;
  grid-template-columns: 399fr 287fr;
  gap: var(--space-l);            /* 16px */
  align-items: stretch;
  width: 100%;
}
.module--hero img { width: 100%; height: 100%; object-fit: cover; }
.hero__main { min-height: 320px; }
.hero__main img { border-radius: var(--radius); }
.hero__placeholder {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 320px;
  background: var(--color-bg-subtle);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
.hero__side { display: grid; grid-template-rows: auto 1fr; gap: var(--space-l); } /* 16px */
.hero__stat {
  border-radius: var(--radius);
  padding: var(--space-l);
}
.hero__stat-number { font-family: var(--font-serif); font-size: var(--text-title-4); line-height: 1.1; }
.hero__stat-title { font-size: var(--text-title-7); margin-bottom: var(--space-xs); }
.hero__stat-text { font-size: var(--text-small); opacity: 0.9; }
.hero__card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-l);            /* 16px */
  min-height: 120px;
}
.hero__card-img { border-radius: var(--radius); overflow: hidden; }
.hero__card-img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.hero__card-body {
  border-radius: var(--radius);
  padding: var(--space-m);
  display: flex; flex-direction: column; justify-content: space-between;
}
.hero__card-body .icon svg { color: currentColor; }

/* Icon card switched off: the side image fills the whole column */
.hero__card--image-only { grid-template-columns: 1fr; }
.hero__card--image-only .hero__card-img { width: 100%; }
.hero__placeholder--sm { min-height: 0; height: 100%; font-size: 11px; }
.hero__card-label { font-size: var(--text-title-7); }

@media (max-width: 600px) {
  .module--hero { grid-template-columns: 1fr; }
  .hero__side { grid-template-rows: auto auto; }
}

/* ==========================================================================
   Editor: InnerBlocks inserts wrapper divs between the grid container and
   its children, so the grid must be re-applied to the inner layout element.
   ========================================================================== */
.editor-styles-wrapper .module--kpi-grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .module--kpi-grid .block-editor-block-list__layout {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
  gap: var(--grid-row-gap) var(--grid-gap);
}
/* Image Block in the editor: the inner layout element is the real grid,
   so each preset's columns must be re-applied to it with the same pixel
   values used on the front end. */
.editor-styles-wrapper .module--image-grid { max-width: var(--content-width); }
.editor-styles-wrapper .module--image-grid .block-editor-block-list__layout {
  display: grid;
  width: 100%;
}
.editor-styles-wrapper .module--image-grid.is-full-tall .block-editor-block-list__layout,
.editor-styles-wrapper .module--image-grid.is-full-short .block-editor-block-list__layout { grid-template-columns: 710px; }
.editor-styles-wrapper .module--image-grid.is-wide-narrow .block-editor-block-list__layout { grid-template-columns: 399px 287px; gap: 24px; }
.editor-styles-wrapper .module--image-grid.is-half .block-editor-block-list__layout { grid-template-columns: 343px; justify-content: start; }
.editor-styles-wrapper .module--image-grid.is-equal .block-editor-block-list__layout { grid-template-columns: 336.5px 336.5px; gap: 37px; }

/* Fixed heights apply in the editor too, including empty placeholders */
.editor-styles-wrapper .module--image-grid img { height: var(--img-height, 420px); object-fit: cover; }
.editor-styles-wrapper .module--image-grid .wp-block-image,
.editor-styles-wrapper .module--image-grid figure { margin: 0; width: 100%; }
.editor-styles-wrapper .module--image-grid .components-placeholder {
  min-height: var(--img-height, 420px);
  height: var(--img-height, 420px);
  width: 100%;
  border-radius: var(--radius);
}
.editor-styles-wrapper .challenge-cards__grid .block-editor-block-list__layout {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--grid-gap);
}

/* Keep card children from collapsing inside the editor's wrappers */
.editor-styles-wrapper .kpi-card,
.editor-styles-wrapper .challenge-card { height: 100%; }

/* The editor's block appender shouldn't occupy a grid cell awkwardly */
.editor-styles-wrapper .module--kpi-grid .block-list-appender,
.editor-styles-wrapper .module--image-grid .block-list-appender,
.editor-styles-wrapper .module--challenge-cards .block-list-appender {
  grid-column: 1 / -1;
}



/* Hero spans the full content width in the editor too */
.editor-styles-wrapper .module--hero { max-width: 100%; }

/* Text section keeps its 16px rhythm in the editor too */
.editor-styles-wrapper .module--text-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
}
.editor-styles-wrapper .module--text-section > * { margin: 0; }

/* KPI heights and colours apply in the editor as well */
.editor-styles-wrapper .module--kpi-grid.is-tall   { --kpi-height: 289px; }
.editor-styles-wrapper .module--kpi-grid.is-medium { --kpi-height: 200px; }
.editor-styles-wrapper .module--kpi-grid.is-short  { --kpi-height: 150px; }
.editor-styles-wrapper .module--kpi-grid.is-short .kpi-card { padding: var(--space-l); }

/* Callout stays centred in the editor too */
.editor-styles-wrapper .module--callout { align-items: center; }
.editor-styles-wrapper .module--callout .callout__text { margin: 0; }