/***** E H U   S t a c k i n g   C a r d s ***********************************************/

.ehu-stacking-cards {
	width: 100%;
	/* Slight negative top margin lifts the section closer to whatever precedes it. The 6rem
	   foot the pinned version needed is gone with it - there is no dead scroll to pad out now
	   that the cards sit in normal flow. */
	margin: -1rem 0 0;
	/* Padding, not a bottom margin. This section is the last child of the block wrapper, so a
	   margin here would collapse out of it and then merge with the next block's top margin,
	   rendering as whichever is LARGER. A grid `gap` never collapses, so the two could not be
	   relied on to match. Padding doesn't collapse either, which makes them comparable. */
	padding-bottom: 3rem;
}

/* Intro heading/text above the list. Plain document flow: nothing pins any more, so there is
   no reserved height to maintain and no opaque background needed to mask cards passing behind
   it. The wrapper is kept only because the PHP renders it. */
.ehu-stacking-cards__intro-wrap {
	margin: 0 0 2rem;
}
.ehu-stacking-cards__intro {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 1rem;
	box-sizing: border-box;
	text-align: center;
}
.ehu-stacking-cards__title {
	font-family: var(--ehu-font-family-primary);
	font-weight: var(--ehu-font-weight-bold);
	font-size: var(--ehu-font-size-hero);
	color: var(--ehu-color-black);
	margin: 0 0 0.5rem;
}
.ehu-stacking-cards__intro-text {
	color: var(--ehu-color-black);
	margin: 0;
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Below the 1025px desktop breakpoint the title/intro-text gap looks cramped (the large
   desktop 0.5rem above is fine); give it more breathing room on tablet/mobile. */
@media (max-width: 1024px) {
	.ehu-stacking-cards__title {
		margin-bottom: 1.25rem;
	}
}

/* List: a plain vertical stack. Cards no longer pin or overlap - they scroll past normally,
   and the only scroll-driven effect is the focus scale on .ehu-stacking-cards__card below,
   applied by ehu-stacking-cards.js to whichever card is nearest the middle of the viewport.
   Nothing here relies on position:fixed or position:sticky, so the theme's overflow:hidden on
   <main> and on .entry-content .alignwide/.alignfull is no longer a constraint. */
.ehu-stacking-cards__list {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.ehu-stacking-cards__card-wrap {
	position: relative;
	/* Side padding is the room a card needs at its widest. Two things claim it: the focus
	   scale, which at 1.03 grows a 70rem card by ~19px per side, and the offset border block,
	   which reaches a further ~18.5px to the left (the transform scales the shadow too). That
	   is ~37.5px, so 1.5rem (27px) was not enough once the border landed. */
	padding: 0 2.5rem;
	box-sizing: border-box;
}

/* Mobile: cards sit just inside the content column - 0.75rem in from each edge, a touch
   narrower than the Pillar Accordion's items - and lose the desktop-sized inner padding so
   the copy has room. The wrap's larger side padding above exists for the focus scale and the
   offset border block; the smaller inset here still absorbs most of that. The list gap is
   wider than on desktop: the offset border block hangs 18px below each card, so it needs the
   extra room to read as space rather than as the next card's shadow. */
@media (max-width: 766px) {
	.ehu-stacking-cards__card-wrap {
		padding: 0 0.75rem;
	}
	.ehu-stacking-cards__card {
		padding: 1.5rem;
	}
	.ehu-stacking-cards__list {
		gap: 3.5rem;
	}
}

/* Two-column layout, opt-in per block via the Layout select. Only from 1025px up: below that a
   half-width card leaves the copy column too narrow to read, so it stays a single column and the
   list's own flex rules above continue to apply.

   Cards keep their column direction here rather than picking up the side-by-side row layout the
   full-width breakpoint uses - at half width there isn't room for copy and image abreast.

   Everything here is also dialled down from the single-column figures: two cards abreast want to
   read as a pair of compact tiles, not as two full-size cards squeezed together. Padding, inner
   gap and image cap all come in, and the grid gap goes out. */
@media (min-width: 1025px) {
	/* One value drives both the gap between the tiles and the space below the last row, so they
	   cannot drift apart if the gap is retuned later. */
	.ehu-stacking-cards--grid {
		--ehu-sc-grid-gap: 5rem;
		padding-bottom: var(--ehu-sc-grid-gap);
	}
	.ehu-stacking-cards--grid .ehu-stacking-cards__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch; /* every card in a row takes the row height, so pairs sit level */
		gap: var(--ehu-sc-grid-gap);
	}
	/* The wrap is the grid item, so it is what gets stretched; a column flex box passes that
	   height on to the card, which grows to fill it. Content stays vertically centred inside
	   via the card's own justify-content. */
	.ehu-stacking-cards--grid .ehu-stacking-cards__card-wrap {
		display: flex;
		flex-direction: column;
	}
	.ehu-stacking-cards--grid .ehu-stacking-cards__card {
		flex: 1 1 auto;
	}
	.ehu-stacking-cards--grid .ehu-stacking-cards__card {
		flex-direction: column;
		align-items: stretch;
		padding: 1.75rem;  /* was 2.5rem */
		gap: 1.25rem;      /* was 1.5rem */
	}
	/* The single-column card allows a 26rem image at this breakpoint; at half the width that is
	   far too tall relative to the card, so cap it much lower. */
	.ehu-stacking-cards--grid .ehu-stacking-cards__card-image {
		max-height: 14rem;
	}
}

/* Three columns, opt-in per block via the Layout select. Everything above already applies (the
   renderer gives this layout both classes); only the column count changes, and only from 1280px
   up - between 1025px and there a third of the row is too narrow for the copy, so it stays as
   two columns. Padding, gap and the image cap come in again for the narrower tile. */
@media (min-width: 1280px) {
	.ehu-stacking-cards--grid-3 {
		--ehu-sc-grid-gap: 2rem;
	}
	/* Give the cards more of their column than the two-column layout does: at a third of the
	   row the wrap's 2.5rem side padding is a large share of each tile. 1.5rem (27px) still
	   clears what that padding is for - the offset border block reaching ~18px left, plus the
	   focus scale, which is only ~6px per side at this card width. */
	.ehu-stacking-cards--grid-3 .ehu-stacking-cards__card-wrap {
		padding: 0 1.5rem;
	}
	.ehu-stacking-cards--grid-3 .ehu-stacking-cards__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ehu-stacking-cards--grid-3 .ehu-stacking-cards__card {
		padding: 1.5rem;
		gap: 1rem;
	}
	.ehu-stacking-cards--grid-3 .ehu-stacking-cards__card-image {
		max-height: 11rem;
	}
}

/* Cards sit one below the other in normal document flow - no pinning, no overlap, no fixed
   positioning. Nothing is clipped or internally scrollable: every card in a block is levelled
   to the tallest one by a min-height that ehu-stacking-cards.js sets, and can still grow past
   it if its own content needs to. */
.ehu-stacking-cards__card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 70rem;
	margin: 0 auto;
	box-sizing: border-box;
	border-radius: 0rem;
	padding: 2.5rem;
	transform: scale(1);
	transform-origin: center;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
	display: flex;
	flex-direction: column;
	justify-content: center; /* vertically centres content+image as a group - column layout (mobile) main axis is vertical */
	gap: 1.5rem;
}
/* The card nearest the middle of the viewport, set by ehu-stacking-cards.js. Kept small on
   purpose - enough to lift the card off the list, not enough to reflow anything around it,
   since a transform doesn't affect layout. The raised z-index keeps its grown edges above its
   neighbours rather than tucking under them. */
.ehu-stacking-cards__card.is-focused {
	transform: scale(1.03);
	z-index: 2;
}
@media (min-width: 1025px) {
	.ehu-stacking-cards__card {
		flex-direction: row;
		align-items: center; /* vertically centres content+image as a group - row layout (desktop) cross axis is vertical */
		gap: 2.5rem;
	}
}

.ehu-stacking-cards__card-content {
	flex: 1 1 40%;
}
.ehu-stacking-cards__card-content--align-left {
	text-align: left;
}
.ehu-stacking-cards__card-content--align-center {
	text-align: center;
  margin-top: 1rem;
}
.ehu-stacking-cards__card-content--align-right {
	text-align: right;
}

/* Icon - the EHU Icons block's hero square, reused verbatim: .ehu-icons__hero sizes and
   colours it and .ehu-icons__svg does the offset, both from ehu-icons/assets/ehu-icons.css,
   which register_assets() enqueues alongside this block's own stylesheet. This rule adds only
   what the card needs on top, and sets no property .ehu-icons__hero also sets, so the load
   order between the two stylesheets doesn't matter.

   inline-block (not block) so the card-content align-left/center/right variants above, which
   work via text-align, also position the icon itself. The bottom margin clears the SVG's
   deliberate overhang below the square - it is anchored at top:46% and is 78% as wide, so
   roughly 2rem of it hangs past the foot and would otherwise sit on the card title. */
.ehu-stacking-cards__card-icon {
	display: inline-block;
	margin: 0 0 3rem;
}

.ehu-stacking-cards__card-title {
	font-family: var(--ehu-font-family-primary);
	font-weight: var(--ehu-font-weight-bold);
	margin: 0 0 1rem;
	/* A single long word at this size can be wider than a narrow card; let it break rather
	   than run out of the card. hyphens keeps the break tidy where the browser has a dictionary. */
	overflow-wrap: anywhere;
	hyphens: auto;
}
.ehu-stacking-cards__card-description {
	margin: 0 0 1.5rem;
	padding: 0;
	/* The theme's base p{color:#000} (resources/css/base/_typography.scss) directly targets
	   every <p>, which otherwise beats inheriting the card's colour - h3 titles aren't
	   targeted by any such rule so they inherit correctly by default, but this <p> needs an
	   explicit override back to inherit (a card-text-colour selection still wins over this,
	   since that's applied as an inline style directly on the element). */
	color: inherit;
}
.ehu-stacking-cards__card-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: var(--ehu-font-weight-semibold);
	text-decoration: underline;
	color: inherit;
}
.ehu-stacking-cards__card-link:hover,
.ehu-stacking-cards__card-link:focus {
	text-decoration: none;
}
.ehu-stacking-cards__card-link:focus {
	outline: 0.25rem solid var(--ehu-colors-outline-yellow);
}

.ehu-stacking-cards__card-image-wrap {
	flex: 1 1 60%;
	border-radius: 0.375rem;
	overflow: hidden;
}
.ehu-stacking-cards__card-image {
	width: 100%;
	height: 100%;
	max-height: 20rem;
	object-fit: cover;
	display: block;
}
@media (min-width: 1025px) {
	.ehu-stacking-cards__card-image {
		max-height: 26rem;
	}
}

/* Colour variants - full brand palette (matches the border/icon/title+description colour
   choices), each paired with a readable default text colour - individual icon/title/
   description colour selections (inline style, see PHP) override this per element. */
.ehu-stacking-cards__card--white {
	background-color: var(--ehu-color-white);
	color: var(--ehu-color-primary);
}
.ehu-stacking-cards__card--black {
	background-color: var(--ehu-color-black);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--black-10 {
	background-color: var(--ehu-color-black-10);
	color: var(--ehu-color-black);
}
.ehu-stacking-cards__card--black-30 {
	background-color: var(--ehu-color-black-30);
	color: var(--ehu-color-black);
}
.ehu-stacking-cards__card--black-60 {
	background-color: var(--ehu-color-black-60);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--heritage-purple {
	background-color: var(--ehu-color-primary);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--violet {
	background-color: var(--ehu-color-violet);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--heliotrope {
	background-color: var(--ehu-color-heliotrope);
	color: var(--ehu-color-primary);
}
.ehu-stacking-cards__card--marine-blue {
	background-color: var(--ehu-color-marine-blue);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--iris-blue {
	background-color: var(--ehu-color-iris-blue);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--sky-blue {
	background-color: var(--ehu-color-sky-blue);
	color: var(--ehu-color-primary);
}
.ehu-stacking-cards__card--grass-green {
	background-color: var(--ehu-color-grass-green);
	color: var(--ehu-color-primary);
}
.ehu-stacking-cards__card--fern-green {
	background-color: var(--ehu-color-fern-green);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--forest-green {
	background-color: var(--ehu-color-forest-green);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--marigold {
	background-color: var(--ehu-color-marigold);
	color: var(--ehu-color-primary);
}
.ehu-stacking-cards__card--maple-red {
	background-color: var(--ehu-color-maple-red);
	color: var(--ehu-color-white);
}
.ehu-stacking-cards__card--maroon {
	background-color: var(--ehu-color-maroon);
	color: var(--ehu-color-white);
}

/* Reduced motion: the scale IS the whole effect here, so drop it rather than just its
   transition. ehu-stacking-cards.js still sets is-focused; it simply renders no differently. */
@media (prefers-reduced-motion: reduce) {
	.ehu-stacking-cards__card,
	.ehu-stacking-cards__card.is-focused {
		transform: none !important;
		transition: none !important;
	}
}
/*----------------------------------------------------------------------------------*/

/* --- Font sizes (via the Intro text size / Card description size selects) --- */
/* One class per step of the EHU type scale; no class means the copy inherits as before. The
   slugs come from font_size_map() in ehu-stacking-cards.php. */
.ehu-stacking-cards__intro-text--font-xs,        .ehu-stacking-cards__card-description--font-xs        { font-size: var(--ehu-font-size-xs); }
.ehu-stacking-cards__intro-text--font-sm,        .ehu-stacking-cards__card-description--font-sm        { font-size: var(--ehu-font-size-sm); }
.ehu-stacking-cards__intro-text--font-base,      .ehu-stacking-cards__card-description--font-base      { font-size: var(--ehu-font-size-base); }
.ehu-stacking-cards__intro-text--font-lg,        .ehu-stacking-cards__card-description--font-lg        { font-size: var(--ehu-font-size-lg); }
.ehu-stacking-cards__intro-text--font-xl,        .ehu-stacking-cards__card-description--font-xl        { font-size: var(--ehu-font-size-xl); }
.ehu-stacking-cards__intro-text--font-xxl,       .ehu-stacking-cards__card-description--font-xxl       { font-size: var(--ehu-font-size-xxl); }
.ehu-stacking-cards__intro-text--font-xxxl,      .ehu-stacking-cards__card-description--font-xxxl      { font-size: var(--ehu-font-size-xxxl); }
.ehu-stacking-cards__intro-text--font-xxxxl,     .ehu-stacking-cards__card-description--font-xxxxl     { font-size: var(--ehu-font-size-xxxxl); }
.ehu-stacking-cards__intro-text--font-hero,      .ehu-stacking-cards__card-description--font-hero      { font-size: var(--ehu-font-size-hero); }
.ehu-stacking-cards__intro-text--font-hero-plus, .ehu-stacking-cards__card-description--font-hero-plus { font-size: var(--ehu-font-size-hero-plus); }