/* ==========================================================================
   IMAGE BANNER — full-width photo, centred highlight title + CTA overlaid.
   Ported 1:1 from the live "image" component (root font-size 10px → rem parity):
   .image / .image__body / .image__image / .image__content / .image__title--*
   ========================================================================== */

section.image-banner {
	position: relative;
	padding: 3rem 0;
	overflow: hidden;
}
section.image-banner.image-banner--height-large {
	padding: 5rem 0;
}

/* Body drives the section height; the photo absolutely fills the section. */
.image-banner__body {
	display: flex;
	height: 100%;
}
.image-banner--height-small .image-banner__body {
	max-height: 40svh;
	min-height: 20rem;
}
.image-banner--height-medium .image-banner__body {
	max-height: 60svh;
	min-height: 35rem;
}
.image-banner--height-large .image-banner__body {
	height: 100svh;
}

.image-banner__image {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}
.image-banner__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-banner__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.image-banner__overlay--light { background: rgba(255, 255, 255, 0.35); }
.image-banner__overlay--dark  { background: rgba(0, 0, 0, 0.35); }

.image-banner__content {
	display: flex;
	position: relative;
	width: 100%;
	z-index: 2;
}
.image-banner__content--top    { align-items: flex-start; }
.image-banner__content--middle { align-items: center; }
.image-banner__content--bottom { align-items: flex-end; }
.image-banner__content-inner { flex: 1 1 0%; }

.image-banner__title {
	margin: 0;
	text-align: center;
	text-wrap: balance;
	z-index: 1;
	font-size: 4rem;
	line-height: 1.13;
	font-weight: 700;
}
@media (max-width: 47.99em) {
	.image-banner__title { font-size: 2.8rem; }
}

/* Highlight strip behind each wrapped line (box-shadow extends ±0.5em). */
.image-banner__title span {
	color: #282829;
}
.image-banner__title--white span      { background-color: #fff;    box-shadow: 0.5em 0 0 #fff,    -0.5em 0 0 #fff; }
.image-banner__title--grey span       { background-color: #f1f1f3; box-shadow: 0.5em 0 0 #f1f1f3, -0.5em 0 0 #f1f1f3; }
.image-banner__title--green span      { background-color: #01b483; box-shadow: 0.5em 0 0 #01b483, -0.5em 0 0 #01b483; }
.image-banner__title--pink span       { background-color: #fcbbe0; box-shadow: 0.5em 0 0 #fcbbe0, -0.5em 0 0 #fcbbe0; }
.image-banner__title--peach span      { background-color: #f8a087; box-shadow: 0.5em 0 0 #f8a087, -0.5em 0 0 #f8a087; }
.image-banner__title--blue-light span { background-color: #a4dbde; box-shadow: 0.5em 0 0 #a4dbde, -0.5em 0 0 #a4dbde; }

.image-banner__cta {
	margin-top: 2rem;
	text-align: center;
}

/* CTA (Userback #8068951, Jason 2026-07-29: "CTA button should be orange").
   The fill colour comes from the block's own button_color field (inline
   --c-btn-color, currently color-p #ff6e33) — no hardcoded override, so the
   ACF colour picker keeps working and the ring follows the fill automatically.

   HOVER (James, 2026-07-29): the orange sweep recedes to a WHITE background
   with the SAME orange border. --c-btn-ring is untouched by hover, so the ring
   stays the fill colour; dark label keeps AA contrast on the white fill. */
.image-banner__cta .c-btn--primary {
	--c-btn-text: var(--color-n-black, #282829);
	--c-btn-bg-hover: var(--color-n-white, #fff);
	--c-btn-text-hover: var(--color-n-black, #282829);
}