/***** E H U   P i l l a r   A c c o r d i o n *******************************************/

.ehu-pillar-accordion {
	width: 100%;
	margin: 0 0 1rem;
}

.ehu-pillar-accordion__list {
	display: flex;
	align-items: stretch;
	width: 100%;
	gap: 0.5rem;
	min-height: 24rem;
}

.ehu-pillar-accordion__intro {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	/* Spacing kept in step with .ehu-stacking-cards__intro: 1rem of padding around the box and
	   2rem clear beneath it, so the heading/intro pair reads identically in both blocks. That
	   block splits the two across __intro and __intro-wrap; there is no wrapper here, so both
	   sit on this element and the totals match. */
	margin: 0 auto 2rem;
	padding: 1rem;
	box-sizing: border-box;
	text-align: center;
}
.ehu-pillar-accordion__intro-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-pillar-accordion__intro-text {
	color: var(--ehu-color-black);
	margin: 0;
	padding: 1.5rem 0 0;
}
/* Below the 1025px desktop breakpoint the title/intro-text gap looks cramped (the 0.5rem above
   is fine on large screens); give it more breathing room. Mirrors the identical rule on
   .ehu-stacking-cards__title. */
@media (max-width: 1024px) {
	.ehu-pillar-accordion__intro-title {
		margin-bottom: 1.25rem;
	}
}

/* Every item shares the non-active 50% of the row equally (flex-grow) - the active item
   overrides this to a fixed 50% basis. Animating flex-grow/flex-basis (rather than width)
   keeps the layout responsive with no JS width maths. */
.ehu-pillar-accordion__item {
	position: relative;
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.5rem 1rem;
	box-sizing: border-box;
	overflow: hidden;
	cursor: pointer;
	transition: flex-grow 0.6s ease, flex-basis 0.6s ease;
}
.ehu-pillar-accordion__item.is-active {
	flex: 0 0 60%;
	align-items: center;
	text-align: center;
	/* Top-aligned, not centred: the title sits at the head of the panel and the expanded
	   colour section below it absorbs the rest of the height (see __item-expanded).
	   1.5rem top matches both the gap below the title (__item-expanded's margin-top) and the
	   collapsed title's own `top`, so the title sits evenly and holds its vertical position
	   as the pillar opens rather than dropping. */
	justify-content: flex-start;
	padding: 1.5rem 2.5rem;
}
.ehu-pillar-accordion__item:focus-visible {
	outline: 0.25rem solid var(--ehu-colors-outline-yellow);
	outline-offset: -0.25rem;
}

/* Pillar number, rendered before the title text. Deliberately inside the <h3> so it rotates
   with the title in a closed pillar's vertical-rl flow and reads in sequence with it, rather
   than sitting at right angles the way an arrow in there would.

   margin-inline-end, not margin-right: the inline axis runs top-to-bottom in a closed title, so
   the logical property puts the gap BELOW the number there and to its right on the open pillar
   and on mobile. Both are inline-axis margins, which do apply to an inline element. */
.ehu-pillar-accordion__item-number {
	/* No font-weight of its own: inheriting from .ehu-pillar-accordion__item-title keeps the
	   number matched to the title, and keeps them matched if that weight is ever retuned. */
	margin-inline-end: 0.5rem;
}
/* Punctuation as generated content rather than in the markup, so the number itself stays a bare
   integer. Sits inside the span, so the margin above still falls after the full stop. */
.ehu-pillar-accordion__item-number::after {
	content: ".";
}

.ehu-pillar-accordion__item-title {
	font-family: var(--ehu-font-family-primary);
	font-weight: var(--ehu-font-weight-semibold);
	margin: 0;
	width: 100%;
}

/* Collapsed panels are too narrow for a horizontal title, so it rotates on its side, kept to
   one line and anchored to the top of the panel - the active panel's title stays in normal
   flow at the top (rule above), this only applies once .is-active is removed. writing-mode
   (rather than transform:rotate) is used so `top` reflects the text's actual visual top edge
   - a rotate() transform pivots around the text's own (unrotated) centre, which would need
   extra offset maths to still land flush with the top once a long title swells the box. */
.ehu-pillar-accordion__item:not(.is-active) .ehu-pillar-accordion__item-title {
	position: absolute;
	top: 1.5rem;
	left: 50%;
	width: auto;
	white-space: nowrap;
	font-size: var(--ehu-font-size-xl);
	writing-mode: vertical-rl;
	transform: translateX(-50%);
}

/* Expanded-only colour section, wrapping the copy + CTA (see the PHP). Its background is an
   inline style per pillar, so the closed pillar's own colour stays behind the title while this
   paints everything revealed beneath it.

   Collapsed to zero height rather than merely faded, so a closed pillar shows no stray band.
   The reveal is opacity-only: height cannot animate to `auto`, and the fade already lands
   inside the item's own 0.6s flex-grow width animation, so nothing reads as a pop. */
.ehu-pillar-accordion__item-expanded {
	width: 100%;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	opacity: 0;
	box-sizing: border-box;
	transition: opacity 0.4s ease;
}
.ehu-pillar-accordion__item.is-active .ehu-pillar-accordion__item-expanded {
	/* Full-bleed to the pillar's edges: align-self:stretch sizes the box to the item's content
	   box MINUS its margins, so the negative side margins widen it by the item's own 2.5rem
	   padding on each side; -3rem does the same at the foot. flex:1 absorbs whatever height is
	   left under the title, and the item's own overflow:hidden clips the bleed to the pillar.

	   width:auto is load-bearing: stretch only applies when the cross size is auto, so the base
	   rule's width:100% would pin this to the content-box width and the negative margins would
	   just shift the box left instead of widening it. */
	width: auto;
	align-self: stretch;
	flex: 1 1 auto;
	margin: 1.5rem -2.5rem -1.5rem;
	padding: 1.5rem 2.5rem;
	/* Centre the copy and CTA in that full width - horizontally (align-items, plus text-align
	   for the copy's own lines) and vertically (justify-content). align-items also keeps the
	   inline-flex CTA shrink-to-fit rather than stretching it edge to edge. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	height: auto;
	overflow: visible;
	opacity: 1;
	transition-delay: 0.2s;
}

/* Copy + CTA share a body wrapper so an optional image can sit beside them as a sibling.
   With no image the section stays the single centred column it always was and the body just
   fills it. */
.ehu-pillar-accordion__item-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

/* With an image the section becomes a row and the two split 40/60 in the copy's favour. These
   selectors carry the same specificity as the .is-active rule above, so they rely on coming
   after it in source order. The body is allowed to shrink (flex-shrink 1) so the gap comes out
   of its share and the image keeps an exact 40%. Side-by-side copy reads better ranged left
   than centred, so the centring is unwound here.

   align-items:stretch (not centre) is what lets the media column run the full height of the
   section; the body stretches too but centres its own contents, so the copy still sits
   vertically centred against the image. */
.ehu-pillar-accordion__item.is-active .ehu-pillar-accordion__item-expanded--has-image {
	flex-direction: row;
	align-items: stretch;
	gap: 1.5rem;
	text-align: left;
}
/* Media bleeds out of the section's padding on three sides so the image is flush with the top,
   bottom and outer edge of the pillar - the section's own padding is 1.5rem 2.5rem, and these
   margins cancel exactly that much. Only the inner edge (facing the copy) keeps its inset.
   Negative margins don't change the box's own width, so the 40% flex-basis is untouched; they
   only shift it outward and hand the reclaimed space to the body.

   display:flex means the <img> stretches to the media's height as a flex item, without relying
   on a percentage height resolving against a flex-sized parent. */
.ehu-pillar-accordion__item-expanded--has-image .ehu-pillar-accordion__item-media {
	flex: 0 0 40%;
	display: flex;
	overflow: hidden;
}
.ehu-pillar-accordion__item-expanded--image-left .ehu-pillar-accordion__item-media {
	margin: -1.5rem 0 -1.5rem -2.5rem;
}
.ehu-pillar-accordion__item-expanded--image-right .ehu-pillar-accordion__item-media {
	margin: -1.5rem -2.5rem -1.5rem 0;
}
.ehu-pillar-accordion__item-expanded--has-image .ehu-pillar-accordion__item-body {
	flex: 1 1 60%;
	width: auto;
	min-width: 0; /* let it shrink instead of overflowing on a long unbroken word */
	align-items: flex-start;
}
/* Image on the right: identical 40/60, order flipped. */
.ehu-pillar-accordion__item.is-active .ehu-pillar-accordion__item-expanded--image-right {
	flex-direction: row-reverse;
}
/* No max-height: the image fills whatever height the pillar gives the section, cropping via
   object-fit rather than letter-boxing. */
.ehu-pillar-accordion__item-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Copy only reads sensibly once a panel has (mostly) reached its 50% active width, so it
   stays hidden on collapsed panels and fades in as the panel expands. */
.ehu-pillar-accordion__item-copy {
	margin: 0;
	color: inherit;
	opacity: 0;
	max-height: 0;
	transition: opacity 0.4s ease, max-height 0.4s ease;
}
.ehu-pillar-accordion__item.is-active .ehu-pillar-accordion__item-copy {
	opacity: 1;
	max-height: 20rem;
	transition-delay: 0.2s;
}

/* CTA colour is applied as an inline `color` (see PHP) rather than a repeated set of
   background-paired modifier classes - `border`/`color` both read from currentColor, so one
   inline colour value is enough without needing a second contrast-paired palette. Hidden via
   visibility (not just opacity) on collapsed panels so it drops out of the tab order - see
   also the tabindex toggle in ehu-pillar-accordion.js. */
.ehu-pillar-accordion__item-cta {
	display: inline-flex;
	align-items: center;
	margin-top: 1.5rem;
	padding: 0.65rem 1.5rem;
	/* Fallback only. The CTA colour select drives both of these as an inline style (see
	   $cta_style in the PHP), and neither may carry !important - an important declaration in a
	   stylesheet outranks a normal inline style, which is exactly why the colour select used to
	   have no effect. */
	background-color: var(--ehu-color-marigold);
	color: var(--ehu-color-primary);
	border: 0;
	border-radius: 0;
	font-weight: var(--ehu-font-weight-semibold);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	max-height: 0;
	transition: opacity 0.4s ease, max-height 0.4s ease, visibility 0s linear 0.4s;
}
.ehu-pillar-accordion__item-cta:hover,
.ehu-pillar-accordion__item-cta:focus {
	text-decoration: underline;
}
.ehu-pillar-accordion__item-cta:focus-visible {
	outline: 0.25rem solid var(--ehu-colors-outline-yellow);
	outline-offset: 0.125rem;
}
.ehu-pillar-accordion__item.is-active .ehu-pillar-accordion__item-cta {
	opacity: 1;
	visibility: visible;
	max-height: 5rem;
	transition: opacity 0.4s ease 0.3s, max-height 0.4s ease 0.3s, visibility 0s linear;
}

/* Colour variants - full brand palette (matches ehu-stacking-cards' card-colour choices) -
   the pillar-text-colour selection (inline style, see PHP) overrides the default text colour
   set here per pillar. */
.ehu-pillar-accordion__item--white {
	background-color: var(--ehu-color-white);
	color: var(--ehu-color-primary);
}
.ehu-pillar-accordion__item--black {
	background-color: var(--ehu-color-black);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--black-10 {
	background-color: var(--ehu-color-black-10);
	color: var(--ehu-color-black);
}
.ehu-pillar-accordion__item--black-30 {
	background-color: var(--ehu-color-black-30);
	color: var(--ehu-color-black);
}
.ehu-pillar-accordion__item--black-60 {
	background-color: var(--ehu-color-black-60);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--heritage-purple {
	background-color: var(--ehu-color-primary);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--violet {
	background-color: var(--ehu-color-violet);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--heliotrope {
	background-color: var(--ehu-color-heliotrope);
	color: var(--ehu-color-primary);
}
.ehu-pillar-accordion__item--marine-blue {
	background-color: var(--ehu-color-marine-blue);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--iris-blue {
	background-color: var(--ehu-color-iris-blue);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--sky-blue {
	background-color: var(--ehu-color-sky-blue);
	color: var(--ehu-color-primary);
}
.ehu-pillar-accordion__item--grass-green {
	background-color: var(--ehu-color-grass-green);
	color: var(--ehu-color-primary);
}
.ehu-pillar-accordion__item--fern-green {
	background-color: var(--ehu-color-fern-green);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--forest-green {
	background-color: var(--ehu-color-forest-green);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--marigold {
	background-color: var(--ehu-color-marigold);
	color: var(--ehu-color-primary);
}
.ehu-pillar-accordion__item--maple-red {
	background-color: var(--ehu-color-maple-red);
	color: var(--ehu-color-white);
}
.ehu-pillar-accordion__item--maroon {
	background-color: var(--ehu-color-maroon);
	color: var(--ehu-color-white);
}

/* Mobile: the horizontal row of narrow pillars (with sideways-rotated titles) is too cramped
   on a phone, so switch to a conventional vertical accordion - full-width bars stacked top to
   bottom; tapping one expands its copy + CTA directly below its title (the copy/CTA reveal
   already keys off .is-active, so no JS change is needed). */
@media (max-width: 766px) {
	.ehu-pillar-accordion__list {
		flex-direction: column;
		min-height: 0;
		gap: 0.5rem;
	}
	/* Each pillar becomes a full-width, auto-height bar - drop the flex-grow/basis width
	   animation and the active item's 60% width. */
	.ehu-pillar-accordion__item,
	.ehu-pillar-accordion__item.is-active {
		flex: 0 0 auto;
		width: 100%;
		align-items: flex-start;
		text-align: left;
		padding: 0.75rem 1.25rem;
	}
	/* The active item's padding is 1rem 1.25rem here, not 3rem 2.5rem, so the expanded
	   section's full-bleed margins have to be re-stated to match. */
	.ehu-pillar-accordion__item.is-active .ehu-pillar-accordion__item-expanded {
		/* Left-aligned here, mirroring the item's own align-items/text-align at this
		   breakpoint - the mobile bars read as a conventional accordion, so centring only the
		   revealed copy would sit oddly under a left-aligned title. The full-bleed background
		   still applies; only the alignment differs. */
		align-items: flex-start;
		text-align: left;
		margin: 0.75rem -1.25rem -0.75rem;
		padding: 1rem 1.25rem;
	}
	/* Too narrow for a 40/60 row here, so the image stacks above the copy at full width. */
	.ehu-pillar-accordion__item.is-active .ehu-pillar-accordion__item-expanded--has-image,
	.ehu-pillar-accordion__item.is-active .ehu-pillar-accordion__item-expanded--image-right {
		flex-direction: column;
		gap: 1rem;
	}
	.ehu-pillar-accordion__item-expanded--has-image .ehu-pillar-accordion__item-media,
	.ehu-pillar-accordion__item-expanded--has-image .ehu-pillar-accordion__item-body {
		flex: 0 0 auto;
		width: 100%;
	}
	/* Stacked, so it bleeds to both sides of the bar and to the top; the mobile section's
	   padding is 1rem 1.25rem, which is what these cancel. */
	.ehu-pillar-accordion__item-expanded--image-left .ehu-pillar-accordion__item-media,
	.ehu-pillar-accordion__item-expanded--image-right .ehu-pillar-accordion__item-media {
		/* align-self overrides the section's align-items:flex-start at this breakpoint -
		   without it, width:auto would shrink-to-fit instead of filling the bar. */
		align-self: stretch;
		width: auto;
		margin: -1rem -1.25rem 0;
	}
	/* Natural ratio rather than a stretched height - there is no row height to fill here. */
	.ehu-pillar-accordion__item-expanded--has-image .ehu-pillar-accordion__item-image {
		height: auto;
		max-height: 14rem;
	}
	/* Unwind the collapsed title from vertical-rotated back to a normal horizontal header. */
	.ehu-pillar-accordion__item:not(.is-active) .ehu-pillar-accordion__item-title {
		position: static;
		transform: none;
		writing-mode: horizontal-tb;
		width: 100%;
		white-space: normal;
		font-size: var(--ehu-font-size-lg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ehu-pillar-accordion__item,
	.ehu-pillar-accordion__item-expanded,
	.ehu-pillar-accordion__item-copy,
	.ehu-pillar-accordion__item-cta {
		transition: none !important;
	}
}
/*----------------------------------------------------------------------------------*/