/* ==========================================================================
   Front Page Template Styles
   ========================================================================== */

/* ------------------------------------------------------------------
   Hero Section — split layout
   Desktop: image column (left 55%) + coloured panel (right 45%)
   Mobile:  image stacked above the panel
   ------------------------------------------------------------------ */

/* ── Panel colour custom properties — one per slide variant ──────── */
.ac-hero__slide--navy    { --ac-hero-panel-color: var(--ac-color-primary); }
.ac-hero__slide--magenta { --ac-hero-panel-color: var(--ac-color-secondary); }
/* #0081C9 instead of #0099cc — white text: 6.25:1 (AA ✓), yellow button boundary: 3.60:1 (non-text AA ✓) */
.ac-hero__slide--blue    { --ac-hero-panel-color: var(--ac-color-blue-dark); } /* #006BA8 — 4.8:1 contrast with rgba(255,255,255,.88) vs 3.6:1 for #0081C9 */

.ac-hero {
	position:   relative;
	width:      100%;
	overflow:   hidden;
	background: var(--ac-color-primary);  /* solid fallback during load */
}

/* Swiper fills the hero width; height is driven by the slide grid */
.ac-hero .swiper,
.ac-hero .swiper-container {
	display:  block;
	width:    100%;
	margin:   0;     /* override Swiper's default margin: auto */
	overflow: hidden;
}

/* Each slide: two-column CSS Grid */
.ac-hero .swiper-slide {
	display:               grid;
	grid-template-columns: 55fr 45fr;
	min-height:            clamp( 380px, 48vw, 580px );
}

/* ── Media column (left) ─────────────────────────────────────────── */
.ac-hero__media {
	position: relative;
	overflow: hidden;
}

.ac-hero__img {
	position:        absolute;
	inset:           0;
	width:           100%;
	height:          100%;
	object-fit:      cover;
	object-position: center;
	display:         block;
}

/* Colour-matched gradient: fades the right edge of the image into the panel */
.ac-hero__media::after {
	content:        '';
	position:       absolute;
	inset:          0;
	background:     linear-gradient(
						to right,
						transparent                55%,
						var(--ac-hero-panel-color) 100%
					);
	pointer-events: none;
	z-index:        1;
}

/* ── Content panel (right) ───────────────────────────────────────── */
.ac-hero__panel {
	position:        relative;
	background:      var(--ac-hero-panel-color);
	display:         flex;
	flex-direction:  column;
	justify-content: center;
	gap:             var(--ac-space-5);
	padding:         var(--ac-space-10) var(--ac-space-10);
	color:           var(--ac-color-white);
	/* Top-right corner reserved for the pause button (position: absolute) */
}

/* ── Headline ────────────────────────────────────────────────────── */
.ac-hero__headline {
	font-size:   var(--ac-font-size-3xl);
	font-weight: var(--ac-font-weight-bold);
	line-height: var(--ac-line-height-tight);
	color:       var(--ac-color-white);
	margin:      0;
	max-width:   22ch;
}

/* ── Subheading ──────────────────────────────────────────────────── */
.ac-hero__subheading {
	font-size:          var(--ac-font-size-base);
	color:              rgba(255, 255, 255, 0.88);
	margin:             0;
	max-width:          42ch;
	line-height:        var(--ac-line-height-normal);
	display:            -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* ── CTA button group ────────────────────────────────────────────── */
.ac-hero__cta-group {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-4);
	flex-wrap:   wrap;
}

/* Hero CTA — yellow on all panel colours; navy text for contrast */
.ac-btn--hero-cta {
	background:  var(--ac-color-yellow);
	color:       var(--ac-color-primary);
	border:      2px solid transparent;
	font-weight: var(--ac-font-weight-semibold);
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-btn--hero-cta:hover,
.ac-btn--hero-cta:focus-visible {
	background-color: var(--ac-color-yellow-dark);
}

.ac-btn--hero-cta:focus-visible {
	outline:        3px solid var(--ac-color-white);
	outline-offset: 2px;
}

/* ── Metadata row (date + tag) ───────────────────────────────────── */
.ac-hero__meta {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-3);
	flex-wrap:   wrap;
	font-size:   var(--ac-font-size-sm);
	color:       rgba(255, 255, 255, 0.72);
}

.ac-hero__meta-item {
	display:     inline-flex;
	align-items: center;
	gap:         var(--ac-space-2);
}

.ac-hero__meta-sep {
	opacity: 0.4;
}

/* ── Pause button ────────────────────────────────────────────────── */
/* Anchored top-right of the panel; sits on solid colour so contrast
   is always guaranteed regardless of the underlying image */
.ac-hero__controls {
	position: absolute;
	top:      var(--ac-space-5);
	right:    var(--ac-space-5);
	z-index:  var(--z-above, 10);
	display:  flex;
	gap:      var(--ac-space-3);
}

.ac-hero__pause-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	background:      rgba(255, 255, 255, 0.15);
	border:          2px solid rgba(255, 255, 255, 0.45);
	border-radius:   var(--ac-radius-pill);
	color:           var(--ac-color-white);
	font-size:       0.95rem;
	cursor:          pointer;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-hero__pause-btn:hover,
.ac-hero__pause-btn:focus-visible {
	background-color: rgba(255, 255, 255, 0.3);
	border-color:     var(--ac-color-white);
}

.ac-hero__pause-btn:focus-visible {
	outline:        3px solid var(--ac-color-white);
	outline-offset: 2px;
}

/* ── Navigation arrows ───────────────────────────────────────────── */
/*
 * White circle + magenta arrow (default):
 *   - white bg is visible against every panel colour (navy / magenta / blue)
 *     AND against any hero photo — no camouflage risk.
 *   - magenta icon on white = 6.9 : 1 contrast (WCAG AA ✓, AAA for graphics).
 *
 * Magenta fill + white arrow (hover / focus):
 *   - inverts to brand colour so the interactive state is unambiguous.
 *   - white icon on magenta = 6.9 : 1 ✓.
 *   - dual-ring focus indicator (magenta inner + white outer) is legible
 *     against every slide colour without needing slide-specific overrides.
 */
.ac-hero .swiper-button-prev,
.ac-hero .swiper-button-next {
	top:          50%;
	margin-top:   -28px;   /* half of 56px */
	width:        56px;
	height:       56px;
	background:   #ffffff;
	border:       2px solid #ffffff;
	border-radius: var(--ac-radius-pill);
	color:        var(--ac-color-secondary);   /* magenta arrow */
	cursor:       pointer;
	box-shadow:   0 2px 8px rgba(0, 0, 0, 0.25);
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		color            var(--ac-duration-short) var(--ac-ease-standard),
		box-shadow       var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-hero .swiper-button-prev { left:  var(--ac-space-5); }
.ac-hero .swiper-button-next { right: var(--ac-space-5); }

.ac-hero .swiper-button-prev:hover,
.ac-hero .swiper-button-next:hover {
	background-color: var(--ac-color-secondary);
	border-color:     var(--ac-color-secondary);
	color:            #ffffff;
	box-shadow:       0 4px 16px rgba(0, 0, 0, 0.30);
}

.ac-hero .swiper-button-prev::after,
.ac-hero .swiper-button-next::after {
	font-size:   1rem;
	font-weight: 700;
}

/* Focus ring: magenta inner halo + white outer halo — legible on any bg */
.ac-hero .swiper-button-prev:focus-visible,
.ac-hero .swiper-button-next:focus-visible {
	outline:      none;
	background-color: var(--ac-color-secondary);
	border-color:     var(--ac-color-secondary);
	color:            #ffffff;
	box-shadow:
		0 0 0 3px var(--ac-color-secondary),
		0 0 0 6px rgba(255, 255, 255, 0.85);
}

/* ── Pagination dots ─────────────────────────────────────────────── */
/* Frosted pill, bottom-left — sits over the image column */
.ac-hero .swiper-pagination,
.ac-hero .swiper-pagination-horizontal {
	bottom:    var(--ac-space-6) !important;
	top:       auto !important;
	left:      var(--ac-space-6) !important;
	right:     auto !important;
	width:     auto !important;
	transform: none !important;
	display:   inline-flex !important;
	align-items: center;
	gap:       0;
	padding:   6px 10px;
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(14px) saturate(180%);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	border:    1px solid rgba(255, 255, 255, 0.30);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255,255,255,0.25);
	border-radius: var(--ac-radius-pill);
	z-index:   5;
}

/* Inactive bullet — semi-transparent white dot */
.ac-hero .swiper-pagination-bullet {
	background:      rgba(255, 255, 255, 0.60);
	background-clip: content-box; /* visual dot stays 10×10; padding area is transparent */
	opacity:         1;
	width:           10px;
	height:          10px;
	border:          none;
	border-radius:   50%;
	/* padding expands tap target to 24×24px (10 + 7 + 7); margin compensates so
	   visual dot spacing is unchanged (was 0 4px, subtract 7px padding = -3px) */
	padding:         7px;
	margin:          0 -3px !important;
	flex-shrink:     0;
	transition:
		width            var(--ac-duration-short) var(--ac-ease-standard),
		border-radius    var(--ac-duration-short) var(--ac-ease-standard),
		background-color var(--ac-duration-short) var(--ac-ease-standard);
}

/* Active bullet — magenta capsule (shape + colour both change = accessible) */
.ac-hero .swiper-pagination-bullet-active {
	background:    var(--ac-color-secondary);
	width:         26px;
	border-radius: var(--ac-radius-pill);
}

/* ------------------------------------------------------------------
   Mobile hero — single-column stacked layout
   (image on top, panel below)
   ------------------------------------------------------------------ */
@media (max-width: 56.25em) {

	/* Stack to single column */
	.ac-hero .swiper-slide {
		grid-template-columns: 1fr;
		grid-template-rows:    auto auto;
		min-height:            0;
	}

	/* Image: fixed responsive height */
	.ac-hero__media {
		height: clamp( 220px, 56vw, 340px );
	}

	/* Gradient fades the bottom of the image into the panel below */
	.ac-hero__media::after {
		background: linear-gradient(
			to bottom,
			transparent                55%,
			var(--ac-hero-panel-color) 100%
		);
	}

	/* Panel: tighter padding, flush top (gradient handles the bleed) */
	.ac-hero__panel {
		padding:         var(--ac-space-8) var(--ac-space-6) var(--ac-space-10);
		gap:             var(--ac-space-4);
		justify-content: flex-start;
	}

	.ac-hero__headline {
		font-size: var(--ac-font-size-2xl);
		max-width: 100%;
	}

	.ac-hero__subheading {
		font-size:          var(--ac-font-size-sm);
		-webkit-line-clamp: 3;
	}

	/* Pagination: centred below the image */
	.ac-hero .swiper-pagination,
	.ac-hero .swiper-pagination-horizontal {
		bottom:    var(--ac-space-3) !important;
		left:      50% !important;
		transform: translateX(-50%) !important;
	}

	/* Arrows: vertically centred within the image strip */
	.ac-hero .swiper-button-prev,
	.ac-hero .swiper-button-next {
		top:        calc( clamp(220px, 56vw, 340px) / 2 );
		margin-top: -22px;   /* half of 44px */
		width:      44px;
		height:     44px;
	}

	.ac-hero .swiper-button-prev { left:  var(--ac-space-3); }
	.ac-hero .swiper-button-next { right: var(--ac-space-3); }

	/* Pause button: top-right of the panel area on mobile */
	.ac-hero__controls {
		/* The panel starts after the image; position relative to panel top */
		top:   calc( clamp(220px, 56vw, 340px) + var(--ac-space-3) );
		right: var(--ac-space-4);
	}

	.ac-hero__pause-btn {
		width:     44px;
		height:    44px;
		font-size: 0.875rem;
	}
}

/* ------------------------------------------------------------------
   Audience Section
   ------------------------------------------------------------------ */
.ac-audience {
	padding-block: var(--ac-space-5);
	background:    var(--ac-color-surface);
}

/* Remove the old floating-card wrapper treatment */
.ac-audience > .ac-container {
	background: transparent;
}

/* "Where do" / "?" — inherit the section text colour */
.ac-audience__heading-plain {
	color: inherit;
}

/* Accent word(s) — brand magenta */
.ac-audience__heading-accent {
	color: var(--ac-color-secondary);
}

/* ── Audience grid ────────────────────────────────────────────────── */
.ac-audience__grid {
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--ac-space-4);
	margin-top:            var(--ac-space-6);
}

/* ── Each card: horizontal row — icon · label · arrow ───────────── */
.ac-audience-card {
	display:          flex;
	flex-direction:   row;
	align-items:      center;
	gap:              var(--ac-space-4);
	padding:          var(--ac-space-4) var(--ac-space-5);
	background-color: var(--ac-color-white);
	border:           1px solid var(--ac-color-border);
	border-radius:    var(--ac-radius-lg);
	text-decoration:  none;
	color:            var(--ac-color-text);
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard),
		box-shadow       var(--ac-duration-short) var(--ac-ease-standard),
		color            var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-audience-card:hover,
.ac-audience-card:focus-visible {
	background-color: var(--ac-color-primary);
	border-color:     var(--ac-color-primary);
	color:            var(--ac-color-white);
	box-shadow:       var(--ac-shadow-md);
}

.ac-audience-card:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

/* ── Icon circle ────────────────────────────────────────────────── */
.ac-audience-card__icon-wrap {
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	width:           48px;
	height:          48px;
	border-radius:   50%;
	background:      var(--ac-audience-colour, var(--ac-color-primary));
	color:           var(--ac-color-white);
	font-size:       1.25rem;
	transition:      background-color var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-audience-card:hover .ac-audience-card__icon-wrap,
.ac-audience-card:focus-visible .ac-audience-card__icon-wrap {
	background: rgba(255, 255, 255, 0.2);
}

/* ── Label ──────────────────────────────────────────────────────── */
.ac-audience-card__title {
	flex:          1;
	min-width:     0;           /* allow flex shrink below natural content width */
	font-size:     var(--ac-font-size-base);
	font-weight:   var(--ac-font-weight-semibold);
	color:         inherit;
	margin:        0;
	line-height:   var(--ac-line-height-tight);
	overflow-wrap: break-word;  /* prevent long words escaping the card */
}

/* Description — visually hidden; keeps content for screen readers */
.ac-audience-card__desc {
	position: absolute;
	width:    1px;
	height:   1px;
	overflow: hidden;
	clip:     rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* ── Chevron ────────────────────────────────────────────────────── */
.ac-audience-card__cta {
	display:    flex;
	flex-shrink: 0;
	color:      var(--ac-color-text-muted);
	font-size:  0.85rem;
	transition: color var(--ac-duration-short) var(--ac-ease-standard);
}

/* Hide the inner button — the whole card is the interactive element */
.ac-audience-card__cta .ac-btn {
	display:    inline-flex;
	background: none;
	border:     none;
	color:      inherit;
	padding:    0;
	pointer-events: none;
}

.ac-audience-card:hover .ac-audience-card__cta,
.ac-audience-card:focus-visible .ac-audience-card__cta {
	color: rgba(255, 255, 255, 0.8);
}

/* ── Tablet — 2 columns ─────────────────────────────────────────── */
@media (max-width: 72em) {
	.ac-audience__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Mobile — 2 compact columns (640px → 480px) ──────────────────── */
@media (max-width: 40em) {
	.ac-audience {
		padding-block: var(--ac-space-4);
	}

	.ac-audience__grid {
		grid-template-columns: repeat(2, 1fr);
		gap:                   var(--ac-space-3);
	}

	/* Tighten the card on small screens */
	.ac-audience-card {
		padding: var(--ac-space-3) var(--ac-space-3);
		gap:     var(--ac-space-2);
	}

	.ac-audience-card__icon-wrap {
		width:     36px;
		height:    36px;
		font-size: 0.875rem;
	}

	/* Reduce font on small 2-column cards */
	.ac-audience-card__title {
		font-size: var(--ac-font-size-sm);
	}

	/* Drop chevron to free space on narrow 2-column cards */
	.ac-audience-card__cta {
		display: none;
	}
}

/* ── Small phones — single column (≤ 480px) ──────────────────────── */
@media (max-width: 30em) {
	.ac-audience__grid {
		grid-template-columns: 1fr;
		gap:                   var(--ac-space-2);
	}

	/* Restore comfortable full-width card layout */
	.ac-audience-card {
		padding: var(--ac-space-3) var(--ac-space-4);
		gap:     var(--ac-space-3);
	}

	.ac-audience-card__title {
		font-size: var(--ac-font-size-base);
	}

	.ac-audience-card__icon-wrap {
		width:     40px;
		height:    40px;
		font-size: 1rem;
	}

	/* Show chevron again — plenty of room at full width */
	.ac-audience-card__cta {
		display: flex;
	}
}

/* ------------------------------------------------------------------
   Information Section
   ------------------------------------------------------------------ */
.ac-information {
	padding-block: var(--ac-section-gap);
	background:    var(--ac-color-surface);
}

.ac-information__inner {
	display:     flex;
	gap:         var(--ac-space-16);
	align-items: center;
}

.ac-information__inner--valign-center { align-items: center; }
.ac-information__inner--valign-top    { align-items: flex-start; }
.ac-information__inner--valign-bottom { align-items: flex-end; }

.ac-information__inner--image-left {
	flex-direction: row-reverse;
}

.ac-information__text {
	flex: 1;
}

.ac-information__heading {
	font-size:   var(--ac-font-size-2xl);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-primary);
	margin:      0 0 var(--ac-space-6);
}

.ac-information__body {
	font-size:   var(--ac-font-size-base);
	color:       var(--ac-color-text);
	line-height: var(--ac-line-height-loose);
	margin-bottom: var(--ac-space-8);
}

.ac-information__body p:last-child {
	margin-bottom: 0;
}

.ac-information__cta-group {
	display:     flex;
	flex-wrap:   wrap;
	gap:         var(--ac-space-3);
	align-items: center;
}

/* Prevent long button labels (e.g. full address) from overflowing on mobile */
.ac-information__cta-group .ac-btn {
	max-width:      100%;
	white-space:    normal;
	text-align:     center;
	word-break:     break-word;
	overflow-wrap:  break-word;
}

.ac-information__image {
	flex:          0 0 42%;
	border-radius: var(--ac-radius-xl);
	overflow:      hidden;
	box-shadow:    var(--ac-shadow-md);
}

.ac-information__image img {
	width:       100%;
	height:      100%;
	object-fit:  cover;
	display:     block;
}

@media (max-width: 56.25em) {
	.ac-information__inner,
	.ac-information__inner--image-left {
		flex-direction: column;
	}

	.ac-information__image {
		flex: none;
		width: 100%;
		max-height: 300px;
	}

	.ac-information__heading {
		font-size: var(--ac-font-size-2xl);
	}
}

/* ------------------------------------------------------------------
   Video Intro Section
   ------------------------------------------------------------------ */
.ac-video-intro {
	position:   relative;
	min-height: 70vh;
	display:    flex;
	align-items: center;
	justify-content: center;
	overflow:   hidden;
}

.ac-video-intro__bg {
	position:            absolute;
	inset:               0;
	background-size:     cover;
	background-position: center;
	background-repeat:   no-repeat;
	transform:           scale(1.04);
	transition:          transform var(--ac-duration-long) var(--ac-ease-standard);
}

.ac-video-intro:hover .ac-video-intro__bg {
	transform: scale(1);
}

.ac-video-intro__overlay {
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		to bottom,
		rgba(0, 47, 134, 0.55) 0%,
		rgba(0, 0, 0, 0.60) 100%
	);
}

.ac-video-intro__content {
	position:        relative;
	z-index:         var(--z-above);
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             var(--ac-space-8);
	text-align:      center;
	padding:         var(--ac-space-16) var(--ac-space-6);
}

/* Text above play button */
.ac-video-intro__text {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--ac-space-3);
}

.ac-video-intro__title {
	font-size:   var(--ac-font-size-3xl);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-white);
	margin:      0;
	line-height: var(--ac-line-height-tight);
	max-width:   20ch;
}

.ac-video-intro__subtitle {
	font-size:   var(--ac-font-size-lg);
	color:       rgba(255, 255, 255, 0.82);
	margin:      0;
	max-width:   48ch;
	line-height: var(--ac-line-height-normal);
}

/* Play button */
.ac-video-intro__play-btn {
	position:        relative;
	width:           88px;
	height:          88px;
	border-radius:   var(--ac-radius-pill);
	background:      rgba(255, 255, 255, 0.15);
	border:          2px solid rgba(255, 255, 255, 0.70);
	color:           var(--ac-color-white);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	transition:
		background   var(--ac-duration-short) var(--ac-ease-standard),
		border-color var(--ac-duration-short) var(--ac-ease-standard),
		transform    var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-video-intro__play-btn:hover,
.ac-video-intro__play-btn:focus-visible {
	background:   var(--ac-color-secondary);
	border-color: var(--ac-color-secondary);
	transform:    scale(1.08);
	outline:      none;
}

.ac-video-intro__play-btn:focus-visible {
	outline:        3px solid var(--ac-color-white);
	outline-offset: 4px;
}

.ac-video-intro__play-icon {
	font-size:   1.75rem;
	margin-left: 4px; /* optical center for play triangle */
}

/* Pulsing ring */
.ac-video-intro__play-ring {
	position:      absolute;
	inset:         -10px;
	border-radius: var(--ac-radius-pill);
	border:        2px solid rgba(255, 255, 255, 0.35);
	animation:     ac-ring-pulse 2s ease-out infinite;
}

@keyframes ac-ring-pulse {
	0%   { transform: scale(1);    opacity: 0.8; }
	100% { transform: scale(1.45); opacity: 0;   }
}

/* ---- Dialog / video popup ---- */
.ac-video-dialog {
	padding:       0;
	border:        none;
	background:    #000;
	border-radius: var(--ac-radius-lg);
	width:         min(90vw, 960px);
	max-height:    90vh;
	overflow:      hidden;
	box-shadow:    var(--ac-shadow-lg);
}

.ac-video-dialog::backdrop {
	background: rgba(0, 0, 0, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ac-video-dialog__close {
	position:        absolute;
	top:             var(--ac-space-3);
	right:           var(--ac-space-3);
	z-index:         1;
	width:           40px;
	height:          40px;
	border-radius:   var(--ac-radius-pill);
	background:      rgba(255, 255, 255, 0.15);
	border:          1px solid rgba(255, 255, 255, 0.30);
	color:           var(--ac-color-white);
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       1rem;
	transition:      background var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-video-dialog__close:hover,
.ac-video-dialog__close:focus-visible {
	background: var(--ac-color-secondary);
	outline:    none;
}

.ac-video-dialog__close:focus-visible {
	outline:        2px solid var(--ac-color-white);
	outline-offset: 2px;
}

.ac-video-dialog__embed {
	position:    relative;
	width:       100%;
	padding-top: 56.25%; /* 16:9 */
}

.ac-video-dialog__embed iframe,
.ac-video-dialog__embed video {
	position: absolute;
	inset:    0;
	width:    100%;
	height:   100%;
	border:   none;
	display:  block;
}

/* Mobile */
@media (max-width: 40em) {
	.ac-video-intro__title {
		font-size: var(--ac-font-size-2xl);
	}

	.ac-video-intro__play-btn {
		width:  72px;
		height: 72px;
	}

	.ac-video-intro__play-icon {
		font-size: 1.375rem;
	}
}

/* Reduced motion — no pulse, no bg scale */
@media (prefers-reduced-motion: reduce) {
	.ac-video-intro__play-ring {
		animation: none;
	}

	.ac-video-intro__bg,
	.ac-video-intro__play-btn {
		transition: none;
	}
}

/* ------------------------------------------------------------------
   Program Categories — horizontal pill cards
   Each card: solid coloured icon block left | title + desc | arrow
   ------------------------------------------------------------------ */
.ac-program-categories {
	padding-block: var(--ac-space-5);
	background:    var(--ac-color-surface);
}

/* "View all" link — now rendered below the grid */
.ac-program-categories__view-all {
	display:         flex;
	justify-content: center;
	margin-top:      var(--ac-space-8);
	margin-bottom:   0;
}

/* ---- Card grid — 4 cols, wraps naturally for any count ---- */
.ac-program-categories__grid {
	list-style:            none;
	margin:                0;
	padding:               0;
	display:               grid;
	grid-template-columns: repeat(4, 1fr);
	gap:                   var(--ac-space-4);
}

/* ---- Individual card ---- */
.ac-program-category-card {
	--ac-cat-color: var(--ac-color-primary);
	/* Make the <li> a flex column so the inner <a> can fill it with flex:1 */
	display:        flex;
	flex-direction: column;
}

/* Full-card link — horizontal flex row, fills the <li> height */
.ac-program-category-card__link {
	display:         flex;
	flex-direction:  row;
	align-items:     center;
	gap:             0;
	text-decoration: none;
	color:           inherit;
	background:      var(--ac-color-white);
	border-radius:   var(--ac-radius-lg);
	box-shadow:      var(--ac-shadow-sm);
	border:          1px solid var(--ac-color-border);
	overflow:        hidden;
	flex:            1;       /* fill the flex <li> — this is what gives equal heights */
	cursor:          pointer;
	transition:
		box-shadow       var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard),
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		transform        var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-program-category-card__link:hover,
.ac-program-category-card__link:focus-visible {
	box-shadow:       var(--ac-shadow-md);
	border-color:     var(--ac-color-primary);
	background-color: var(--ac-color-primary);
	transform:        translateY(-3px);
	outline:          none;
}

.ac-program-category-card__link:hover .ac-program-category-card__name,
.ac-program-category-card__link:focus-visible .ac-program-category-card__name {
	color: var(--ac-color-white);
}

.ac-program-category-card__link:hover .ac-program-category-card__desc,
.ac-program-category-card__link:focus-visible .ac-program-category-card__desc {
	color: var(--ac-color-white);
}

.ac-program-category-card__link:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

/* Left coloured icon block */
.ac-program-category-card__icon-block {
	flex-shrink:     0;
	width:           68px;
	align-self:      stretch;   /* fills full card height */
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      var(--ac-cat-color);
	color:           var(--ac-color-white);
	font-size:       1.5rem;
	position:        relative;
	overflow:        hidden;
	transition:      background var(--ac-duration-short) var(--ac-ease-standard);
}

/* Subtle shine sweep on hover */
.ac-program-category-card__icon-block::after {
	content:    '';
	position:   absolute;
	inset:      0;
	background: linear-gradient(
		160deg,
		transparent 35%,
		rgba(255, 255, 255, 0.2) 50%,
		transparent 65%
	);
	transform:  translateX(-100%);
	transition: transform var(--ac-duration-long) var(--ac-ease-standard);
}

.ac-program-category-card__link:hover .ac-program-category-card__icon-block::after {
	transform: translateX(200%);
}

/* Text block */
.ac-program-category-card__body {
	display:        flex;
	flex-direction: column;
	justify-content: center;
	gap:            var(--ac-space-1);
	padding:        var(--ac-space-4) var(--ac-space-4);
	flex-grow:      1;
	min-width:      0;
}

.ac-program-category-card__name {
	font-size:   var(--ac-font-size-sm);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-text);
	line-height: var(--ac-line-height-tight);
	transition:  color var(--ac-duration-short) var(--ac-ease-standard);
}


.ac-program-category-card__desc {
	font-size:          var(--ac-font-size-xs);
	color:              var(--ac-color-text-muted);
	line-height:        var(--ac-line-height-normal);
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

/* Arrow removed — whole card is the link */
.ac-program-category-card__arrow {
	display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ac-program-category-card__link,
	.ac-program-category-card__icon-block::after,
	.ac-program-category-card__arrow {
		transition: none;
	}
}

/* ---- 2-column tablet ---- */
@media (max-width: 72em) {
	.ac-program-categories__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- 1-column mobile ---- */
@media (max-width: 40em) {
	.ac-program-categories__grid {
		grid-template-columns: 1fr;
		gap:                   var(--ac-space-3);
	}
}

/* ------------------------------------------------------------------
   Icon-top variant — stacked card (icon above title)
   Grid uses more columns so cards are naturally narrower/taller.
   ------------------------------------------------------------------ */
.ac-program-categories__grid--icon-top {
	grid-template-columns: repeat(4, 1fr);
	align-items:           stretch;
}

/* Stacked flex layout */
.ac-program-category-card--icon-top .ac-program-category-card__link {
	flex-direction:  column;
	align-items:     flex-start;
	padding:         var(--ac-space-5);
	gap:             0;
}

/* Compact square icon block at top */
.ac-program-category-card--icon-top .ac-program-category-card__icon-block {
	width:         52px;
	height:        52px;
	align-self:    auto;    /* not stretch — fixed square */
	border-radius: var(--ac-radius-md);
	font-size:     1.25rem;
	margin-bottom: var(--ac-space-4);
	flex-shrink:   0;
}

/* Body takes remaining height */
.ac-program-category-card--icon-top .ac-program-category-card__body {
	padding:         0;
	justify-content: flex-start;
}

/* Allow full description (no 2-line clamp in top layout) */
.ac-program-category-card--icon-top .ac-program-category-card__desc {
	-webkit-line-clamp: unset;
	overflow:           visible;
	display:            block;
}

/* No arrow in stacked layout */
.ac-program-category-card--icon-top .ac-program-category-card__arrow {
	display: none;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 72em) {
	.ac-program-categories__grid--icon-top {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 40em) {
	.ac-program-categories__grid--icon-top {
		grid-template-columns: 1fr;
	}
}


/* ==========================================================================
   Items Section — unified slider / grid / image-cards component
   Wrapper-only styles; display-mode styles come from the shared component
   classes (.ac-program-categories__grid, .ac-wif-*, .ac-featured-programs__grid)
   ========================================================================== */

.ac-items {
	padding-block: var(--ac-space-5);
	background:    var(--ac-color-surface);
}

/* Inside a resource content column: no outer section chrome */
.ac-items--in-resource {
	background: transparent;
}

/* "View All" button row — rendered below the list/grid */
.ac-items__view-all {
	display:         flex;
	justify-content: center;
	margin-top:      var(--ac-space-8);
	margin-bottom:   0;
}

/* ==========================================================================
   Items (Slider) — Swiper chip/card carousel
   Shared across front-page AND resource pages, so lives here (globally loaded)
   ========================================================================== */

.ac-wif-swiper {
	overflow:       visible;
	padding-bottom: var(--ac-space-6);
}

/* Equal-height slides */
.ac-wif-swiper .swiper-wrapper {
	align-items: stretch;
}

.ac-wif-swiper .swiper-slide {
	height: auto;
}

/* ---- Base card: horizontal (icon left) layout ---- */
.ac-wif-card {
	display:         flex;
	flex-direction:  row;
	align-items:     flex-start;
	gap:             var(--ac-space-3);
	padding:         var(--ac-space-3) var(--ac-space-4);
	background:      var(--ac-color-white);
	border:          1px solid var(--ac-color-border);
	border-radius:   var(--ac-radius-xl);
	white-space:     normal;
	cursor:          default;
	text-decoration: none;
	color:           inherit;
	height:          100%;
	box-sizing:      border-box;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard, ease),
		border-color     var(--ac-duration-short) var(--ac-ease-standard, ease);
}

/* ---- Stacked card: icon on top ---- */
.ac-wif-card--icon-top {
	flex-direction:  column;
	align-items:     flex-start;
	padding:         var(--ac-space-5) var(--ac-space-4);
}

.ac-wif-card--icon-top .ac-wif-card__icon {
	width:     44px;
	height:    44px;
	font-size: 1rem;
	margin-bottom: var(--ac-space-1);
}

/* Linked card */
a.ac-wif-card,
.ac-wif-card--link {
	cursor: pointer;
}

a.ac-wif-card:hover,
a.ac-wif-card:focus-visible,
.ac-wif-card--link:hover,
.ac-wif-card--link:focus-visible {
	background-color: color-mix( in srgb, var(--ac-color-primary) 8%, white );
	border-color:     var(--ac-color-primary);
	outline:          none;
}

a.ac-wif-card:focus-visible,
.ac-wif-card--link:focus-visible {
	outline:        2px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

/* ---- Icon circle ---- */
.ac-wif-card__icon {
	width:           36px;
	height:          36px;
	border-radius:   50%;
	background:      var(--ac-color-primary);
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
	color:           var(--ac-color-white);
	font-size:       0.85rem;
	transition:      background var(--ac-duration-short) var(--ac-ease-standard, ease);
}

.ac-wif-card:hover .ac-wif-card__icon {
	background: var(--ac-color-secondary);
}

/* ---- Text block ---- */
.ac-wif-card__text {
	display:        flex;
	flex-direction: column;
	gap:            2px;
	min-width:      0;
}

/* ---- Label ---- */
.ac-wif-card__label {
	font-size:   var(--ac-font-size-sm);
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-primary);
	line-height: var(--ac-line-height-tight);
	margin:      0;
	white-space: normal;
}

/* ---- Description ---- */
.ac-wif-card__desc {
	font-size:   var(--ac-font-size-xs);
	color:       var(--ac-color-text-muted);
	line-height: var(--ac-line-height-normal);
	margin:      0;
	white-space: normal;
}

/* ---- Nav arrows ---- */
.ac-wif-prev,
.ac-wif-next {
	width:         36px;
	height:        36px;
	background:    var(--ac-color-secondary);
	color:         var(--ac-color-white);
	border:        none;
	border-radius: var(--ac-radius-sm);
	cursor:        pointer;
	transition:    background-color var(--ac-duration-short) var(--ac-ease-standard, ease);
}

.ac-wif-prev::after,
.ac-wif-next::after {
	font-size:   0.75rem;
	font-weight: 900;
}

.ac-wif-prev:hover,
.ac-wif-next:hover,
.ac-wif-prev:focus-visible,
.ac-wif-next:focus-visible {
	background-color: var(--ac-color-secondary-dark);
}

.ac-wif-prev:focus-visible,
.ac-wif-next:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 3px;
}

/* ---- Pagination dots ---- */
.ac-wif-pagination .swiper-pagination-bullet {
	background:      var(--ac-color-border);
	background-clip: content-box; /* visual dot stays 8×8; padding area is transparent */
	opacity:         1;
	width:           8px;
	height:          8px;
	/* padding expands tap target to 24×24px (8 + 8 + 8); negative margin preserves visual spacing */
	padding:         8px;
	margin:          0 -4px !important;
}

.ac-wif-pagination .swiper-pagination-bullet-active {
	background: var(--ac-color-secondary);
}

/* ==========================================================================
   Items (Post Cards) — image + title + excerpt + CTA grid
   Shared across front-page AND resource pages (globally loaded here).
   ========================================================================== */

.ac-related__grid {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	grid-template-columns: repeat( 4, 1fr );
	gap:        var(--ac-space-5);
}

@media ( max-width: 56.25em ) {   /* ≤ 900px */
	.ac-related__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 36em ) {      /* ≤ 576px */
	.ac-related__grid {
		grid-template-columns: 1fr;
	}
}

.ac-related-card {
	display:         flex;
	flex-direction:  column;
	background:      var(--ac-color-white);
	border:          2px solid var(--ac-color-primary);
	border-radius:   var(--ac-radius-lg);
	overflow:        hidden;
	text-decoration: none;
	color:           var(--ac-color-text);
	height:          100%;
	box-sizing:      border-box;
	transition:
		box-shadow   var(--ac-duration-short) var(--ac-ease-standard, ease),
		border-color var(--ac-duration-short) var(--ac-ease-standard, ease);
}

a.ac-related-card:hover,
a.ac-related-card:focus-visible {
	box-shadow:   0 8px 24px rgba( 1, 21, 96, 0.12 );
	border-color: var(--ac-color-primary);
	outline:      none;
}

a.ac-related-card:focus-visible {
	outline:        2px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

.ac-related-card__thumb {
	aspect-ratio: 16 / 9;
	overflow:     hidden;
	background:   var(--ac-color-surface);
	flex-shrink:  0;
}

.ac-related-card__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
	transition: transform var(--ac-duration-base, 250ms) var(--ac-ease-standard, ease);
}

a.ac-related-card:hover .ac-related-card__thumb img {
	transform: scale( 1.04 );
}

.ac-related-card__body {
	display:        flex;
	flex-direction: column;
	gap:            var(--ac-space-2);
	padding:        var(--ac-space-4) var(--ac-space-5) var(--ac-space-5);
	flex:           1;
}

.ac-related-card__title {
	font-size:   var(--ac-font-size-base);
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-primary);
	margin:      0;
	line-height: var(--ac-line-height-tight);
}

.ac-related-card__excerpt {
	font-size:         var(--ac-font-size-sm);
	color:             var(--ac-color-text-muted);
	line-height:       var(--ac-line-height-normal);
	margin:            0;
	display:           -webkit-box;
	-webkit-line-clamp: 10;
	-webkit-box-orient: vertical;
	overflow:          hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	.ac-related-card,
	.ac-related-card__thumb img {
		transition: none;
	}
}

/* ==========================================================================
   Upcoming Events Section
   ========================================================================== */

.ac-events {
	padding-block: var(--ac-space-5);
	background:    var(--ac-color-white);
}

/* Inside a resource content column: no outer section chrome */
.ac-events--in-resource {
	background: transparent;
}

/* mobile footer button hidden on desktop — kept for legacy compat */
.ac-events__footer {
	display: none;
}

/* ── Event list ── */
.ac-events__list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    flex;
	flex-direction: column;
	gap:        var(--ac-space-3);
}

/* ── Individual card ── */
.ac-event-card__inner {
	display:         flex;
	align-items:     stretch;   /* children fill the full card height */
	gap:             0;
	padding:         0;          /* padding lives inside __body & __arrow */
	min-height:      80px;
	background:      var(--ac-color-white);
	border:          1px solid var(--ac-color-border);
	border-radius:   var(--ac-radius-xl);
	overflow:        hidden;     /* clips image & date badge to rounded corners */
	/* Default shadow provides visual depth cue that the card is interactive
	   (WCAG 1.4.11: card border alone fails 3:1 on the surface background) */
	box-shadow:      var(--ac-shadow-sm);
	text-decoration: none;
	color:           var(--ac-color-text);
	transition:
		box-shadow   var(--ac-duration-short) var(--ac-ease-standard),
		border-color var(--ac-duration-short) var(--ac-ease-standard),
		transform    var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-event-card__inner:hover,
.ac-event-card__inner:focus-visible {
	box-shadow:   var(--ac-shadow-lg);
	border-color: var(--ac-color-secondary);
	transform:    translateY(-2px);
	outline:      none;
}

.ac-event-card__inner:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

/* Honour reduced-motion: keep state changes but skip movement */
@media (prefers-reduced-motion: reduce) {
	.ac-event-card__inner {
		transition: box-shadow var(--ac-duration-short) var(--ac-ease-standard),
		            border-color var(--ac-duration-short) var(--ac-ease-standard);
	}

	.ac-event-card__inner:hover,
	.ac-event-card__inner:focus-visible {
		transform: none;
	}

	.ac-event-card__arrow {
		transition: color var(--ac-duration-short) var(--ac-ease-standard);
	}

	.ac-event-card__inner:hover .ac-event-card__arrow,
	.ac-event-card__inner:focus-visible .ac-event-card__arrow {
		transform: none;
	}
}

/* Cancelled card: muted and strikethrough title */
.ac-event-card--cancelled .ac-event-card__inner {
	opacity: 0.6;
}

.ac-event-card--cancelled .ac-event-card__title {
	text-decoration: line-through;
}

/* ── Date column — municity-style large numbers, transparent bg ──
   Fixed width keeps ALL cards uniform regardless of single vs multi-day. */
.ac-event-card__date {
	flex-shrink:     0;
	width:           170px;    /* uniform across single & multi-day */
	display:         flex;
	flex-direction:  row;
	align-items:     center;
	justify-content: center;
	gap:             var(--ac-space-2);
	padding:         var(--ac-space-4) var(--ac-space-3);
	background:      transparent;
	border-right:    none;     /* no divider — open airy layout like municity */
	color:           var(--ac-color-text);
	line-height:     1;
}

/* Each date "block" — number stacked above month label */
.ac-event-card__date-block {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--ac-space-1);
}

.ac-event-card__day {
	font-size:   3.25rem;
	font-weight: var(--ac-font-weight-bold);
	font-family: var(--ac-font-family);
	line-height: 1;
	color:       var(--ac-color-text);   /* near-black, just like municity */
}

.ac-event-card__month {
	font-size:      var(--ac-font-size-xs);
	font-weight:    var(--ac-font-weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color:          var(--ac-color-text-muted);
}

/* Dash separator for multi-day events */
.ac-event-card__date-dash {
	font-size:   2rem;
	font-weight: var(--ac-font-weight-normal);
	color:       var(--ac-color-text-muted);
	line-height: 1;
	align-self:  center;
	margin-bottom: 1.2rem; /* nudge up to optically align with number tops */
}

/* ── Thumbnail — fixed height so all cards are the same size ── */
.ac-event-card__thumb {
	flex-shrink: 0;
	width:       50%;
	height:      200px;
	overflow:    hidden;
}

.ac-event-card__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

/* ── Body ── */
.ac-event-card__body {
	flex:    1;
	min-width: 0;
	display:        flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--ac-space-4) var(--ac-space-5);
}

.ac-event-card__cancelled-badge {
	display:        inline-block;
	padding:        2px var(--ac-space-2);
	border-radius:  var(--ac-radius-pill);
	background:     rgba(220, 38, 38, 0.12);
	color:          #dc2626;
	font-size:      var(--ac-font-size-xs);
	font-weight:    var(--ac-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom:  var(--ac-space-1);
}

/* Event type badges */
.ac-event-card__types {
	display:   flex;
	gap:       var(--ac-space-2);
	flex-wrap: wrap;
	margin-bottom: var(--ac-space-1);
}

.ac-event-card__type-badge {
	display:        inline-block;
	padding:        3px var(--ac-space-3);
	border-radius:  var(--ac-radius-pill);
	background:     var(--ac-color-secondary);   /* solid — matches dark mode */
	border:         none;
	color:          #ffffff;                     /* white on #A50064 = 7.2:1 ✅ */
	font-size:      var(--ac-font-size-xs);
	font-weight:    var(--ac-font-weight-semibold);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	white-space:    nowrap;
	overflow:       hidden;
	max-width:      100%;
	text-overflow:  ellipsis;
}

.ac-event-card__title {
	font-size:   var(--ac-font-size-md);
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-primary);
	margin:      0 0 var(--ac-space-2);
	line-height: var(--ac-line-height-tight);
	/* Clamp to 2 lines */
	display:           -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
}

.ac-event-card__datetime,
.ac-event-card__location {
	display:     flex;
	align-items: flex-start;
	gap:         var(--ac-space-2);
	font-size:   var(--ac-font-size-sm);
	color:       var(--ac-color-text-muted);
	margin:      0 0 var(--ac-space-1);
	line-height: var(--ac-line-height-normal);
}

.ac-event-card__datetime i,
.ac-event-card__location i {
	color:      var(--ac-color-secondary);
	margin-top: 2px;
	flex-shrink: 0;
}

/* ── Arrow indicator ── */
.ac-event-card__arrow {
	flex-shrink: 0;
	color:       var(--ac-color-text-muted);
	font-size:   0.75rem;
	padding:     0 var(--ac-space-4);
	display:     flex;
	align-items: center;
	transition:  transform var(--ac-duration-short) var(--ac-ease-standard),
	             color     var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-event-card__inner:hover .ac-event-card__arrow,
.ac-event-card__inner:focus-visible .ac-event-card__arrow {
	color:     var(--ac-color-secondary);
	transform: translateX(4px);
}

/* ── Responsive ── */
@media (max-width: 56.25em) {

	/* ── Mobile: true stacked layout ──
	   Image fills top, body (with title + datetime + location) fills bottom.
	   The date column is hidden — date info is already in __datetime text.  */
	.ac-event-card__inner {
		flex-direction: column;
		flex-wrap:      nowrap;
		align-items:    stretch;
		min-height:     unset;
	}

	/* Image: full width, fixed height at top */
	.ac-event-card__thumb {
		display:     block;
		width:       100%;
		height:      200px;
		flex-shrink: 0;
	}

	/* Date column: hidden — date already appears as text in __datetime */
	.ac-event-card__date {
		display: none;
	}

	/* Body: full width, normal vertical padding */
	.ac-event-card__body {
		justify-content: flex-start;
		padding:         var(--ac-space-4) var(--ac-space-5);
	}

	/* Title: slightly larger on mobile since it's the first text element */
	.ac-event-card__title {
		font-size: var(--ac-font-size-lg);
	}

	/* Arrow: horizontal row at the end (or hide if too tight) */
	.ac-event-card__arrow {
		display: none;
	}
}

@media (max-width: 36em) {
	.ac-event-card__thumb {
		height: 160px;
	}
}