/*
 * Home. Values: [m] audit/measure/home-1440 and -390; [spec] design-spec 3b, 5b, 7.
 * Slider band: white, full-bleed minus 10px each side, --cc-shadow; slider capped 1120x560 (A10).
 */

/* ---------- Slider band [m: band y10..570 at 1440, slider 1120x560, controls row 40] ---------- */
.home-hero { position: relative; padding: 10px 10px 0; }
.home-hero__band {
	position: absolute;
	top: 10px; left: 10px; right: 10px;
	height: min(560px, calc((100vw - 20px) / 2));
	background: var(--cc-white);
	box-shadow: var(--cc-shadow);
}
.home-hero__inner { position: relative; max-width: 1120px; margin-inline: auto; }

/* ---------- Slides: photo + real text panel (J14, design-spec 10) ----------
   >= 769: side by side in today's 2:1 box (capped 1120x560); every panel size is in container units (1cqi = 11.2px at
   1120) so the text sits where the baked-in text did. <= 768: stacked, photo 3:2 on top, panel below. */
.home-hero .canopy-rotator__viewport { aspect-ratio: 2 / 1; container-type: inline-size; }
.home-hero .canopy-rotator__track,
.home-hero .canopy-rotator__slide { height: 100%; }
.home-slide { position: relative; display: grid; grid-template-columns: 54.911% 45.089%; height: 100%; }
.home-slide__media { min-width: 0; overflow: hidden; }
.home-slide__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.home-slide__panel {
	min-width: 0;
	padding: 8.14cqi 3.571cqi 0 3.125cqi; /* spec 7.8cqi measured to the cap top; 8.14 lands the three baselines on the image's 163 / 243 / 314 at 1120 (10i) */
	background: var(--cc-teal-band); /* #238184 flat: white 4.62 (A3; 10d) */
	color: var(--cc-white);
}
.home-slide__title { margin: 0 0 3cqi; color: var(--cc-white); font-weight: 400; line-height: 1; }
.home-slide__top { display: block; font-family: var(--cc-font-head); font-size: 7.4cqi; font-weight: 700; line-height: 0.97; letter-spacing: 0; }
.home-slide__topic { display: block; font-family: var(--cc-font-ui); font-size: 8.214cqi; font-weight: 300; line-height: 0.88; }
/* Body right edge stops 8px left of the next arrow (16px inset + 32px button, both px, 10b): 100cqi - 56px - text start
   58.036cqi. That is exactly 37cqi (414px) at 1120 and narrower below, where the px arrows take a bigger share. */
.home-slide__body { max-width: calc(41.964cqi - 56px); margin: 0; color: var(--cc-white); font-family: var(--cc-font-ui); font-size: 2.143cqi; font-weight: 400; line-height: 1.625; }
/* Only when a slide link is set (10f): the heading is the link, stretched over the slide. */
.home-slide__link { color: var(--cc-white); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.home-slide__link:hover { color: var(--cc-white); }
.home-slide__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.home-slide__link:focus-visible { outline: 3px solid var(--cc-focus-on-dark); outline-offset: 2px; }

/* Overlay arrows: 32px #333 circles, white arrow, 16px from the edges, vertically centred. */
.home-hero .canopy-rotator__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	border-radius: 50%;
	background: var(--cc-nav);
	color: var(--cc-white);
}
.home-hero .canopy-rotator__prev { left: 16px; }
.home-hero .canopy-rotator__next { right: 16px; }

/* Dots, then the pause button at the right end of the dot row, centred under the slider. */
.home-hero .canopy-rotator__controls { justify-content: center; gap: 8px; height: 40px; color: var(--cc-nav); }

/* ---------- Registration block [m y996 = controls end + 20; section ends 10px later] ---------- */
.home-reg { padding: 20px 0 10px; }
.home-reg .canopy-reg { margin: 0; }

/* ---------- Latest News [m y1053, 581 tall, columns blue, wave 113 white] ---------- */
.home-news__panel { position: relative; background: var(--cc-panel-blue); }
.home-news__wave {
	position: absolute;
	top: 0; left: 0;
	z-index: 1;
	width: 100%;
	height: 113px;
	fill: var(--cc-white);
	pointer-events: none;
}
.home-news__col { background: var(--cc-panel-blue); }
.home-news__col--list { padding: 10px 10px; }
.home-news__spacer { height: 70px; } /* 50 spacer + 20 widget gap */

/* h2 for the outline (the page H1 comes first), h3 look: 30px, 20px below 768. */
.home-news__heading {
	margin: 26px;
	padding: 0 0 8px;
	font-size: var(--cc-fs-h3);
	line-height: 1;
}
.home-news__list { margin: 46px 0 0 26px; padding: 0 0 0 24px; }
.home-news__list li { font-family: var(--cc-font-body); font-size: 15px; line-height: 25px; }
.home-news__list a { color: var(--cc-green-on-blue); }
.home-news__list a:hover { color: var(--cc-black); }
.home-news__date { display: block; color: var(--cc-text-on-blue); }
.home-news__btn { margin: 66px 0 26px 26px; }

/* Measured top offset of the video: 121px (Elementor widget margin), 1px below. */
.home-news__col--video { padding: 10px 0 0; }
.home-news__col--video .canopy-video { margin: 121px 0 1px; }

/* ---------- Spacer [m 43 tall = 10 + 23 + 10] ---------- */
.home-spacer { padding: 10px 0; }
.home-spacer__gap { height: 23px; }

/* Below 768 the blue panel runs edge to edge and the columns stack with no gap [m home-390]. */
@media (max-width: 767px) {
	.home-news .canopy-container { padding-inline: 0; }
	.home-news__panel { row-gap: 0; }
	.home-news__heading { color: var(--cc-green-on-blue); }
	.home-news__list { padding-left: 15px; }
	.home-news__list li { font-size: 14px; line-height: 22.5px; }
	.home-news__col--video { padding-inline: 10px; }
}

/* B10-1: the old site switched to phone type at <= 768px (Astra 4.7.3 inline responsive CSS: html 85.5%,
   h1 30 / h2 25 / h3 20), while columns stacked only at <= 767. These are this file's <= 767 type rules, repeated so
   768 gets them too; 769+ stays desktop, 390 is unchanged. Source: audit/measure/live-tablet-breakpoint.txt */
@media (max-width: 768px) {
	.home-news__list li { font-size: 14px; line-height: 22.5px; }
}

/* J14 stacked layout, <= 768 (design-spec 10c/10e): photo 3:2 on top, panel below; every slide as tall as the
   tallest (the track is one grid cell), so the teal never stops short and nothing jumps during the fade. */
@media (max-width: 768px) {
	.home-hero__band { display: none; }
	.home-hero .canopy-rotator__viewport { aspect-ratio: auto; box-shadow: var(--cc-shadow); }
	.home-hero .canopy-rotator__track,
	.home-hero .canopy-rotator__slide { height: auto; }
	.home-slide { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100%; }
	.home-slide__img { height: auto; aspect-ratio: 3 / 2; object-position: 50% var(--cc-slide-focus, 50%); }
	.home-hero .canopy-rotator__arrow { top: calc(100cqi / 3); }
	.home-slide__panel { padding: 32px 28px 36px; }
	.home-slide__title { margin-bottom: 20px; }
	.home-slide__top { font-size: clamp(40px, 23.5px + 4.233vw, 56px); }
	.home-slide__topic { font-size: clamp(42px, 25.5px + 4.233vw, 58px); }
	.home-slide__body { max-width: none; font-size: clamp(16px, 13.94px + 0.529vw, 18px); }
}
@media (max-width: 480px) {
	.home-slide__panel { padding: 24px 20px 28px; }
	.home-slide__title { margin-bottom: 16px; }
	.home-slide__top { font-size: 40px; }
	.home-slide__topic { font-size: 42px; }
	.home-slide__body { font-size: 16px; }
}
/* Reduced motion (10h): slides swap instantly; nothing in the panel animates in any mode. */
@media (prefers-reduced-motion: reduce) {
	.home-hero .canopy-rotator__slide,
	.home-slide,
	.home-slide * { transition: none !important; animation: none !important; }
}