/* ============================================================
   ATB Hero — frontend
   Layout variables are injected inline per block:
   --atb-container, --atb-top-h, --atb-side-w, --atb-gap
   ============================================================ */

.atb-hero {
	--atb-container: 1400px;
	--atb-top-h: 120px;
	--atb-side-w: 200px;
	--atb-gap: 20px;
	/* Calendar + region glyphs used by card meta (masked, inherit text colour). */
	--atb-cal-icon: url( "https://allthingsbusiness.co.uk/wp-content/uploads/2024/11/calendar-white.png" );
	--atb-region-icon: url( "https://allthingsbusiness.co.uk/wp-content/uploads/2024/11/region-white.png" );
	max-width: var( --atb-container );
	margin-inline: auto;
	box-sizing: border-box;
}

.atb-hero *,
.atb-hero *::before,
.atb-hero *::after {
	box-sizing: border-box;
}

/* ---- Top zone : full container width, adjustable height ---- */
.atb-hero__top {
	width: 100%;
	height: var( --atb-top-h );
	margin-bottom: var( --atb-gap );
	overflow: hidden;
	border-radius: 8px;
}

.atb-hero__top:empty {
	display: none;
}

/* ============================================================
   Body layout — three regimes (mobile-first base = Regime B/mid):

   B. DEFAULT (≤ 1880px): feature card FULL WIDTH on top; the other 3 cards in a
      row beneath; the two ads flank that 3-card row. Tall ads overflow downward
      out of the 3-card row without stretching it.
   A. Wide desktop (≥ 1881px): loop fills the container, ads move OUT into the page
      gutters; feature card is half-left with the 3 cards stacked to its right.
   C. Mobile (≤ 980px): loop stacks to one column; ads sit side by side in fixed
      500px boxes below.

   No `display: contents` — its cascade interaction with later base rules is
   brittle. Instead .atb-hero__feature, .atb-hero__cards and the two .atb-hero__side
   ads are all DIRECT children of .atb-hero__body, placed via grid-template-areas.
   ============================================================ */
.atb-hero__body {
	position: relative;
	display: grid;
	grid-template-columns: var( --atb-side-w ) minmax( 0, 1fr ) var( --atb-side-w );
	grid-template-areas:
		"feature feature feature"
		"ad-left cards   ad-right";
	gap: var( --atb-gap );
	align-items: stretch;
}

.atb-hero__feature     { grid-area: feature; display: flex; min-width: 0; }
.atb-hero__cards       { grid-area: cards; min-width: 0; }
.atb-hero__side--left  { grid-area: ad-left; }
.atb-hero__side--right { grid-area: ad-right; }

/* Side ad columns stretch to match the cards row height; content is clipped so
   tall images never bleed into sections below. */
.atb-hero__side {
	position: relative;
	width: 100%;
	max-width: var( --atb-side-w );
	overflow: hidden;
	border-radius: 8px;
	align-self: stretch;
}

.atb-hero__side > .atb-hero__creative,
.atb-hero__side > .atb-hero__placeholder,
.atb-hero__side > .atb-hero__slider {
	display: block;
	width: 100%;
	height: 100%;
}

/* Side ad images: fill the column height, crop to fit. */
.atb-hero__side .atb-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

/* ---- Loop : feature full-width on top, 3 cards in a row beneath (default) ---- */
.atb-hero__feature .atb-hero__card {
	width: 100%;
}

/* Feature full-width banner: image on top, short aspect so it doesn't dominate. */
.atb-hero__feature .atb-hero__card-media {
	width: 100%;
	aspect-ratio: 21 / 9;
}

/* The 3 remaining cards: stacked full-width rows, image left, filling ad height. */
.atb-hero__cards {
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: 1fr;
	gap: var( --atb-gap );
	align-self: stretch;
	height: 100%;
}

.atb-hero__cards .atb-hero__card {
	height: 100%;
}

.atb-hero__cards .atb-hero__card-link {
	flex-direction: row;
	align-items: stretch;
}

.atb-hero__cards .atb-hero__card-media {
	width: 40%;
	min-height: 100%;
	aspect-ratio: auto;
	flex-shrink: 0;
}

/* ---- Regime A : wide desktop (≥ 1881px) — ads in gutters, feature half-left ----
   Feature and the 3-card column share one row (two halves); the ads are pulled
   out into the page gutters. */
@media ( min-width: 1881px ) {
	.atb-hero__body {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "feature cards";
		align-items: stretch;
	}

	/* Ads: parked absolutely in the gutters beside the body. */
	.atb-hero__side {
		position: absolute;
		top: 0;
		bottom: 0;
		width: var( --atb-side-w );
		max-width: none;
		height: auto;
		min-height: var( --atb-side-w );
		align-self: auto;
	}

	.atb-hero__side--left {
		left: 0;
		transform: translateX( calc( -100% - var( --atb-gap ) ) );
	}

	.atb-hero__side--right {
		left: auto;
		right: 0;
		transform: translateX( calc( 100% + var( --atb-gap ) ) );
	}

	/* Ad content fills the absolute side (which now spans body height). */
	.atb-hero__side > .atb-hero__creative,
	.atb-hero__side > .atb-hero__placeholder,
	.atb-hero__side > .atb-hero__slider {
		position: static;
		height: 100%;
	}

	/* Feature fills the left half (image on top, 16:9). */
	.atb-hero__feature .atb-hero__card-media {
		aspect-ratio: 16 / 9;
	}

	/* The 3 cards stack in the right half as thin horizontal cards (image left). */
	.atb-hero__cards {
		grid-template-columns: 1fr;
		grid-auto-rows: 1fr;
	}

	.atb-hero__cards .atb-hero__card-link {
		flex-direction: row;
		align-items: stretch;
	}

	.atb-hero__cards .atb-hero__card-media {
		width: 40%;
		min-height: 100%;
		aspect-ratio: auto;
	}
}

/* Sliders have absolutely-positioned slides (no intrinsic width/height), so they
   can't auto-size to the image — keep them at the configured side dimensions. */
.atb-hero__side > .atb-hero__slider {
	width: 100%;
	max-width: var( --atb-side-w );
}

.atb-hero__top > .atb-hero__creative,
.atb-hero__top > .atb-hero__slider {
	height: 100%;
}

/* ---- Creative (single image / slide) ---- */
.atb-hero__creative {
	display: block;
	height: 100%;
	line-height: 0;
}

.atb-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.atb-hero__placeholder {
	width: 100%;
	height: 100%;
	min-height: 80px;
	background: #eef1f3;
	border-radius: 8px;
}

/* ---- Slider ---- */
.atb-hero__slider {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.atb-hero__slides {
	position: relative;
	height: 100%;
}

.atb-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
	pointer-events: none;
}

.atb-hero__slide.is-active {
	opacity: 1;
	pointer-events: auto;
	position: relative;
}

.atb-hero__dots {
	position: absolute;
	bottom: 8px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
	z-index: 3;
}

.atb-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	padding: 0;
	background: rgba( 255, 255, 255, 0.6 );
	cursor: pointer;
	transition: background 0.2s, transform 0.2s;
}

.atb-hero__dot.is-active {
	background: #fff;
	transform: scale( 1.25 );
}

.atb-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.4 );
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.2s, background 0.2s;
}

.atb-hero__slider:hover .atb-hero__nav {
	opacity: 1;
}

.atb-hero__nav:hover {
	background: rgba( 0, 0, 0, 0.7 );
}

.atb-hero__nav--prev { left: 8px; }
.atb-hero__nav--next { right: 8px; }

/* ---- Card visual styling (shared across all regimes) ---- */
.atb-hero__card {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: #1a93b8;
	color: #fff;
	display: flex;
}

/* Default card link = column (image on top). Regime A and Regime C override the
   3 non-feature cards to a thin horizontal layout where needed. */
.atb-hero__card-link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	height: 100%;
	width: 100%;
}

.atb-hero__card-media {
	flex-shrink: 0;
	overflow: hidden;
	background: #d4d7d9;
	width: 100%;
	aspect-ratio: 16 / 9;
}

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

.atb-hero__card-body {
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
}

.atb-hero__card-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	font-size: 12px;
	opacity: 0.85;
}

.atb-hero__card-date {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* Inline calendar glyph (no icon font dependency). */
.atb-hero__card-cal {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var( --atb-cal-icon ) center / contain no-repeat;
	mask: var( --atb-cal-icon ) center / contain no-repeat;
}

.atb-hero__card-region {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 600;
}

/* Inline region (pin) glyph, mirrors the calendar glyph treatment. */
.atb-hero__card-region::before {
	content: "";
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var( --atb-region-icon ) center / contain no-repeat;
	mask: var( --atb-region-icon ) center / contain no-repeat;
}

.atb-hero__card-title {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
	font-weight: 700;
}

.atb-hero__card--feature .atb-hero__card-title {
	font-size: 20px;
}

.atb-hero__card-excerpt {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.92;
}

/* Category pill — pushed to the bottom of the card body. */
.atb-hero__card-footer {
	margin-top: auto;
	padding-top: 10px;
}

.atb-hero__card-tag {
	display: inline-block;
	padding: 4px 14px;
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
}

.atb-hero__empty {
	padding: 40px;
	text-align: center;
	color: #6b7280;
}

/* ---- Regime C : mobile (≤ 980px) ---- */
@media ( max-width: 980px ) {
	/*
	 * Under 981px: feature card spans full width on top; side ads flank the
	 * cards column in the same row, contained to cards height.
	 */
	.atb-hero__body {
		position: static; /* reset desktop absolute/relative positioning */
		display: grid;
		grid-template-columns: var( --atb-side-w ) minmax( 0, 1fr ) var( --atb-side-w );
		grid-template-areas:
			"feature  feature  feature"
			"ad-left  cards    ad-right";
		column-gap: 10px;
		row-gap: var( --atb-gap );
		padding-inline: 0;
		align-items: start;
	}

	.atb-hero__feature { grid-area: feature; }
	.atb-hero__cards   { grid-area: cards; }

	/* Cards stack in a single column on mobile. */
	.atb-hero__cards {
		display: grid;
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: var( --atb-gap );
	}

	/* Side ads flank the cards column; stretch to the cards height and clip. */
	.atb-hero__side {
		position: static;
		top: auto;
		transform: none;
		width: 100%;
		max-width: var( --atb-side-w );
		height: auto;
		min-height: 0;
		overflow: hidden;
		border-radius: 8px;
		align-self: stretch;
	}

	.atb-hero__side > .atb-hero__creative,
	.atb-hero__side > .atb-hero__slider,
	.atb-hero__side > .atb-hero__placeholder {
		width: 100%;
		height: 100%;
		border-radius: 8px;
	}

	.atb-hero__side .atb-hero__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.atb-hero__side--left  { grid-area: ad-left; }
	.atb-hero__side--right { grid-area: ad-right; }

	/* Feature card: image on top, larger image + title. */
	.atb-hero__card--feature .atb-hero__card-media {
		width: 100%;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.atb-hero__card--feature .atb-hero__card-title {
		font-size: 22px;
	}

	/* Non-feature cards: thin horizontal cards (image left, content right). */
	.atb-hero__card:not( .atb-hero__card--feature ) .atb-hero__card-link {
		flex-direction: row;
		align-items: stretch;
	}

	.atb-hero__card:not( .atb-hero__card--feature ) .atb-hero__card-media {
		width: 38%;
		max-width: 150px;
		min-height: 100%;
		aspect-ratio: auto;
		align-self: stretch;
	}

	.atb-hero__card:not( .atb-hero__card--feature ) .atb-hero__card-body {
		padding: 12px 14px;
		gap: 5px;
		justify-content: center;
	}

	.atb-hero__card:not( .atb-hero__card--feature ) .atb-hero__card-title {
		font-size: 14px;
	}
	.atb-hero__card{
		min-height: 150px;
	}
}

/* ---- Regime D : small mobile (≤ 800px) — cards full width, ads below ---- */
@media ( max-width: 800px ) {
	.atb-hero__body {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"feature  feature"
			"cards    cards"
			"ad-left  ad-right";
		align-items: start;
	}

	/* Cards take full width, reset height stretching from default regime. */
	.atb-hero__cards {
		grid-auto-rows: auto;
		height: auto;
		align-self: auto;
	}

	.atb-hero__cards .atb-hero__card {
		height: auto;
	}

	/* Ads sit side by side below the cards, each capped at 500px tall. */
	.atb-hero__side {
		width: 100%;
		max-width: 100%;
		max-height: 500px;
		align-self: auto;
		display: flex;
		justify-content: center;
	}

	.atb-hero__side > .atb-hero__creative,
	.atb-hero__side > .atb-hero__slider,
	.atb-hero__side > .atb-hero__placeholder {
		height: 500px;
		max-height: 500px;
		width: auto;
	}

	.atb-hero__side .atb-hero__img {
		width: auto;
		height: 100%;
		object-fit: contain;
	}
}