/* =============================================================
   CHE — Homepage hero grid  ·  [che_hero_grid]
   Four tiles, each a photo above a solid colour block. The text
   sits on the block rather than a fade, so it stays readable and
   the photos stay uncovered.

     1025px and up   three columns, the right one stacked
     768px–1024px    two by two
     up to 767px     Route Finder across the top, then one tall
                     tile beside two stacked tiles

   Selectors run two classes deep so they outrank the Elementor
   kit's rules for h2, a and img. Photos are styled through the
   img element, not a class: the site's WebP plugin wraps images
   in <picture> and moves their classes onto the wrapper.
   ============================================================= */

.che-hero {
	/* palette */
	--che-hero-block: #55754a;
	--che-hero-on-block: #fff;
	--che-hero-label-text: #33502c;

	/* geometry */
	--che-hero-gap: 20px;
	--che-hero-radius: 20px;
	--che-hero-pad: 22px;
	--che-hero-pad-b: 22px;
	--che-hero-photo-min: 150px;

	/* type */
	--che-hero-title: 28px;
	--che-hero-title-gap: 8px;
	--che-hero-text: 16px;

	/* button; half of its height overlaps the photo */
	--che-hero-cta-h: 46px;
	--che-hero-cta-gap: 14px;
	--che-hero-cta-pad: 22px;
	--che-hero-cta-size: 15px;
	--che-hero-cta-shadow: 0 2px 10px rgba(30, 45, 25, .22);

	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: minmax(0, 1fr) auto;
	column-gap: var(--che-hero-gap);
	width: 100%;
	/* Scales with the Elementor section it sits in: 640px tall at 1350px wide,
	   and taller when narrow columns make the text wrap. */
	aspect-ratio: 1350 / 640;
	font-family: "Montserrat", sans-serif;
}

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

/* ---------- stack (right column) ---------- */

.che-hero__stack {
	--che-hero-title: 24px;
	--che-hero-cta-gap: 12px;
	--che-hero-pad-b: 20px;

	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: var(--che-hero-gap);
	min-width: 0;
}

/* Sharing the free space between the tiles keeps both photos the same height
   when one heading wraps. */
.che-hero__stack .che-hero__tile {
	flex: 1 1 auto;
}

/* ---------- tile ---------- */

.che-hero__tile {
	position: relative;
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--che-hero-radius);
	background: var(--che-hero-block);
}

/* The two tall tiles share the grid's rows, so their blocks start at the same
   height even when only one heading wraps. */
@supports (grid-template-rows: subgrid) {
	.che-hero > .che-hero__tile {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
	}
}

/* ---------- photo ---------- */

.che-hero__tile--quiz {
	--che-hero-pos: 50% 45%;
	--che-hero-pos-m: 50% 14%;
}

.che-hero__tile--openday {
	--che-hero-pos: 50% 60%;
	--che-hero-pos-m: 50% 50%;
	--che-hero-zoom-m: 1.3;
	--che-hero-origin-m: 40% 62%;
}

.che-hero__tile--webinar {
	--che-hero-pos: 50% 10%;
	--che-hero-pos-m: 50% 12%;
}

.che-hero__tile--prescriber {
	--che-hero-pos: 50% 9%;
	--che-hero-pos-m: 50% 15%;
}

.che-hero--cta-photo .che-hero__tile--openday {
	--che-hero-pos: 50% 40%;
}

.che-hero--cta-photo .che-hero__tile--webinar {
	--che-hero-pos: 50% 0%;
}

.che-hero__photo {
	position: relative;
	flex: 1 1 auto;
	min-height: var(--che-hero-photo-min);
	overflow: hidden;
}

.che-hero .che-hero__photo img {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	object-fit: cover;
	object-position: var(--che-hero-pos, 50% 50%);
	transition: transform .5s ease;
}

/* ---------- label ---------- */

.che-hero .che-hero__label {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	height: 30px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	color: var(--che-hero-label-text);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}

/* ---------- colour block ---------- */

.che-hero__block {
	position: relative;
	flex: none;
	padding: calc(var(--che-hero-cta-h) / 2 + var(--che-hero-cta-gap)) var(--che-hero-pad) var(--che-hero-pad-b);
	background: var(--che-hero-block);
	color: var(--che-hero-on-block);
}

.che-hero .che-hero__title {
	margin: 0 0 var(--che-hero-title-gap);
	padding: 0;
	color: var(--che-hero-on-block);
	font-family: inherit;
	font-size: var(--che-hero-title);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
}

.che-hero .che-hero__text {
	margin: 0;
	padding: 0;
	color: var(--che-hero-on-block);
	font-family: inherit;
	font-size: var(--che-hero-text);
	font-weight: 500;
	line-height: 1.4;
	text-wrap: balance;
}

.che-hero__text-short {
	display: none;
}

/* ---------- button ---------- */

.che-hero .che-hero__cta,
.che-hero .che-hero__cta:hover,
.che-hero .che-hero__cta:focus,
.che-hero .che-hero__cta:active,
.che-hero .che-hero__cta:visited {
	color: var(--che-hero-block);
	text-decoration: none;
}

.che-hero .che-hero__cta {
	position: absolute;
	top: calc(var(--che-hero-cta-h) / -2);
	left: var(--che-hero-pad);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: var(--che-hero-cta-h);
	padding: 0 var(--che-hero-cta-pad);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: var(--che-hero-cta-size);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	box-shadow: var(--che-hero-cta-shadow);
	transition: box-shadow .2s ease;
}

/* Stretches the link over the whole tile; the tile's overflow clips it. */
.che-hero .che-hero__cta::after {
	content: "";
	position: absolute;
	top: -100vmax;
	right: -100vmax;
	bottom: -100vmax;
	left: -100vmax;
}

/* A box-shadow, not an outline: an outline can wrap the stretched ::after and
   end up clipped out of sight. */
.che-hero .che-hero__cta:focus-visible {
	outline: 0;
	box-shadow: 0 0 0 3px #1d2b1a, 0 0 0 5px #fff;
}

.che-hero__arrow {
	display: block;
	flex: none;
	transition: transform .2s ease;
}

/* ---------- button on the photo: cta="photo" ---------- */

.che-hero--cta-photo .che-hero__block {
	padding: var(--che-hero-pad-b) var(--che-hero-pad);
}

.che-hero__actions {
	position: absolute;
	top: 18px;
	right: 18px;
	left: 18px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.che-hero .che-hero__actions .che-hero__cta {
	position: relative;
	top: auto;
	left: auto;
}

.che-hero .che-hero__actions .che-hero__label {
	position: static;
}

/* ---------- hover ---------- */

@media (hover: hover) and (min-width: 768px) {
	.che-hero__tile:hover .che-hero__photo img {
		transform: scale(1.03);
	}

	.che-hero__tile:hover .che-hero__arrow {
		transform: translateX(3px);
	}

	.che-hero__tile:hover .che-hero__cta {
		box-shadow: 0 4px 16px rgba(30, 45, 25, .32);
	}
}

/* ---------- tablet ---------- */

@media (max-width: 1024px) {
	.che-hero {
		--che-hero-gap: 16px;
		--che-hero-title: 24px;
		--che-hero-photo-min: 26vw;

		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		row-gap: var(--che-hero-gap);
		aspect-ratio: auto;
	}

	.che-hero .che-hero__tile {
		grid-row: auto;
		display: flex;
	}

	.che-hero__stack {
		display: contents;
	}

	.che-hero .che-hero__photo img {
		object-position: var(--che-hero-pos-m, var(--che-hero-pos, 50% 50%));
	}
}

/* ---------- phone ---------- */

@media (max-width: 767px) {
	.che-hero {
		--che-hero-gap: 10px;
		--che-hero-radius: 16px;
		--che-hero-pad: 12px;
		--che-hero-pad-b: 11px;
		--che-hero-photo-min: 0px;

		--che-hero-title: clamp(15px, 4.1vw, 16px);
		--che-hero-title-gap: 3px;
		--che-hero-text: 13px;

		--che-hero-cta-h: 32px;
		--che-hero-cta-gap: 8px;
		--che-hero-cta-pad: 13px;
		--che-hero-cta-size: 13px;
		--che-hero-cta-shadow: 0 2px 8px rgba(30, 45, 25, .22);

		/* Sized so all four tiles fit on the first screen with the top of
		   the next section's heading showing beneath them. */
		--che-hero-photo-top: 50vw;
		--che-hero-photo-small: 23vw;
	}

	.che-hero--cta-photo {
		--che-hero-photo-top: 53vw;
		--che-hero-photo-small: 26.4vw;
	}

	.che-hero .che-hero__tile--quiz {
		--che-hero-pad: 14px;
		--che-hero-pad-b: 12px;
		--che-hero-title: clamp(18px, 5.1vw, 20px);

		grid-column: 1 / -1;
		grid-row: 1;
	}

	.che-hero .che-hero__tile--openday {
		grid-column: 1;
		grid-row: 2;
	}

	.che-hero .che-hero__stack {
		--che-hero-title: clamp(15px, 4.1vw, 16px);
		--che-hero-cta-gap: 8px;
		--che-hero-pad-b: 11px;

		grid-column: 2;
		grid-row: 2;
		display: flex;
	}

	.che-hero__tile--quiz .che-hero__photo {
		flex: none;
		height: var(--che-hero-photo-top);
	}

	.che-hero__stack .che-hero__photo {
		flex: none;
		height: var(--che-hero-photo-small);
	}

	.che-hero .che-hero__photo img {
		transform: scale(var(--che-hero-zoom-m, 1));
		transform-origin: var(--che-hero-origin-m, 50% 50%);
	}

	.che-hero .che-hero__text-full,
	.che-hero .che-hero__label,
	.che-hero .che-hero__arrow {
		display: none;
	}

	.che-hero .che-hero__text-short {
		display: inline;
	}

	.che-hero__actions {
		top: 8px;
		right: 8px;
		left: 8px;
	}

	.che-hero__tile--quiz .che-hero__actions {
		top: 10px;
		right: 10px;
		left: 10px;
	}
}

@media (max-width: 340px) {
	.che-hero {
		--che-hero-cta-pad: 10px;
		--che-hero-cta-size: 12px;
	}
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.che-hero .che-hero__photo img,
	.che-hero__arrow,
	.che-hero .che-hero__cta {
		transition: none;
	}
}

/* ---------- green block above the photo: [che_hero_grid_top] ----------
   The tiles share one grid so every green block ends on the same line, however
   the text wraps: a green row and a photo row for the Webinar tile, a gap, then
   the same again for Home Prescriber, with the two tall tiles spanning them all. */

.che-hero--green-top {
	--che-hero-title: 26px;

	container-type: inline-size;
	grid-template-rows: auto minmax(var(--che-hero-photo-min), 1fr) var(--che-hero-gap) auto minmax(var(--che-hero-photo-min), 1fr);
}

/* Sized from the grid's own width so the longest heading stays on one line and
   the green blocks stay level. */
.che-hero--green-top .che-hero__title {
	font-size: clamp(18px, 1.93cqw, 26px);
}

.che-hero--green-top .che-hero__stack {
	--che-hero-title: 26px;
	--che-hero-pad-b: 22px;

	display: contents;
}

.che-hero--green-top .che-hero__tile--quiz {
	grid-column: 1;
	grid-row: 1 / -1;
}

.che-hero--green-top .che-hero__tile--openday {
	grid-column: 2;
	grid-row: 1 / -1;
}

.che-hero--green-top .che-hero__tile--webinar {
	grid-column: 3;
	grid-row: 1 / 3;
}

.che-hero--green-top .che-hero__tile--prescriber {
	grid-column: 3;
	grid-row: 4 / 6;
}

@supports (grid-template-rows: subgrid) {
	.che-hero--green-top .che-hero__tile {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: subgrid;
	}
}

.che-hero--green-top .che-hero__block {
	position: static;
	grid-row: 1;
	order: -1;
	padding: 20px var(--che-hero-pad) 22px;
}

.che-hero--green-top .che-hero__photo {
	grid-row: 2 / -1;
}

/* The button and label sit on the photo, in line with the text above them. The
   block is static, so the button is placed against the tile, whose bottom-left
   corner is the photo's. The block is ordered first, so it paints before the
   photo: without the z-index the photo would cover the button. */
.che-hero.che-hero--green-top .che-hero__cta {
	top: auto;
	bottom: 18px;
	left: var(--che-hero-pad);
	z-index: 1;
}

.che-hero.che-hero--green-top .che-hero__label {
	top: 18px;
	left: var(--che-hero-pad);
}

@media (min-width: 1025px) and (max-width: 1300px) {
	.che-hero--green-top {
		--che-hero-photo-min: 140px;
	}
}

@media (max-width: 1024px) {
	.che-hero--green-top {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: auto minmax(26vw, auto) var(--che-hero-gap) auto minmax(26vw, auto);
		row-gap: 0;
		aspect-ratio: auto;
	}

	.che-hero--green-top .che-hero__title {
		font-size: 24px;
	}

	.che-hero.che-hero--green-top .che-hero__tile--quiz {
		grid-column: 1;
		grid-row: 1 / 3;
	}

	.che-hero.che-hero--green-top .che-hero__tile--openday {
		grid-column: 2;
		grid-row: 1 / 3;
	}

	.che-hero.che-hero--green-top .che-hero__tile--webinar {
		grid-column: 1;
		grid-row: 4 / 6;
	}

	.che-hero.che-hero--green-top .che-hero__tile--prescriber {
		grid-column: 2;
		grid-row: 4 / 6;
	}
}

@media (max-width: 767px) {
	.che-hero--green-top {
		--che-hero-title: clamp(15px, 4.1vw, 16px);

		/* Route Finder, then Open Day beside the two stacked tiles. */
		grid-template-rows: auto 50vw var(--che-hero-gap) auto 28vw var(--che-hero-gap) auto 28vw;
	}

	.che-hero--green-top .che-hero__title {
		font-size: var(--che-hero-title);
	}

	.che-hero--green-top .che-hero__stack {
		--che-hero-title: clamp(15px, 4.1vw, 16px);
		--che-hero-pad-b: 11px;

		display: contents;
	}

	.che-hero.che-hero--green-top .che-hero__tile--quiz {
		grid-column: 1 / -1;
		grid-row: 1 / 3;
	}

	.che-hero.che-hero--green-top .che-hero__tile--openday {
		grid-column: 1;
		grid-row: 4 / -1;
	}

	.che-hero.che-hero--green-top .che-hero__tile--webinar {
		grid-column: 2;
		grid-row: 4 / 6;
	}

	.che-hero.che-hero--green-top .che-hero__tile--prescriber {
		grid-column: 2;
		grid-row: 7 / -1;
	}

	.che-hero--green-top .che-hero__tile--quiz .che-hero__photo,
	.che-hero--green-top .che-hero__stack .che-hero__photo {
		height: auto;
	}

	.che-hero--green-top .che-hero__block {
		padding: 10px var(--che-hero-pad) var(--che-hero-pad-b);
	}

	.che-hero.che-hero--green-top .che-hero__cta {
		bottom: 8px;
	}
}

/* buttons="hide": the link stays, invisible, with its stretched ::after still
   covering the tile, so the whole tile clicks through and tracks as before. */

.che-hero.che-hero--no-buttons .che-hero__cta {
	display: block;
	width: 0;
	height: 0;
	margin: 0;
	padding: 0;
	background: none;
	font-size: 0;
	box-shadow: none;
}

.che-hero--no-buttons .che-hero__arrow {
	display: none;
}

.che-hero--no-buttons .che-hero__tile:has(.che-hero__cta:focus-visible) {
	outline: 3px solid #1d2b1a;
	outline-offset: 3px;
}