/* ============================================================
   Split card - homepage brief 4.6 (Mountain Leadership) and 4.7
   (Meet Sam); notes home-desktop 3.8-3.9 and home-mobile 3.8-3.9.
   Page Sections layout "split_card", two variants:
   - --image-left: White section, photo left, Cream text panel;
   - --image-right: Cream section, White text panel, photo right.
   A 1px Border Warm card, radius 24, shared by the photo and the text
   panel. The card is not a link - only the arrow link is.
   - Phones (< 768): one column, the photo first at the designed
     377 x 434 ratio (at most 560px tall, so large phones and small
     tablets in portrait do not get a giant photo), then the text 25px
     in from the card edge; 76px from the photo to the eyebrow and
     77px from the link's baseline to the card bottom on both cards
     (the Mountain Leadership values; brief 12 normalises Meet Sam's
     51 and ML's 17).
   - Tablet (768-1023): side by side, photo 5 : text 7 (mirrored for
     --image-right) so the text column is 339px at 768 rather than
     282; panel padding 32px at 768 (34 at 834); the photo fills its
     part at the panel's height.
   - Desktop (>= 1024): 50/50, 1280 x 569 at 1440 (the card keeps
     that ratio and only grows when the text needs more room), panel
     padding 41 -> 55px, text column up to 507px, content vertically
     centred.
   Without a photo (--no-media) the text panel takes the whole card,
   its 507px column centred from 768.
   Inner rhythm (line boxes, measured on both artboards): eyebrow to
   H2 15; H2 is Koulen 36/40 at every width (not the 48px section
   size); H2 to text 16 on phones, 19 from 1024 (caps to text 31 /
   33 as drawn); text to checklist 24; checklist rows 12 apart (the
   desktop 36px pitch); checklist or text to the link 24 (the design
   has 23 / 24 on desktop, 17.5 / 24 on phones: one value).
   Checklist: a Light Orange tick centred in a 24px Cream circle (the
   circle is invisible on the Cream panel, as drawn), text 12px after.
   ============================================================ */

/* ---------- Card ---------- */

.split-card__card {
	display: grid;
	border: var(--border-hairline) solid var(--color-border);
	border-radius: var(--radius-xl);
	background-color: var(--color-surface-warm);
}

.split-card--image-right .split-card__card {
	background-color: var(--color-surface);
}

/* ---------- Photo ---------- */

/* Phones: on top, rounded to sit inside the card's border. Past 560px
   tall (wide phones, small tablets) the box keeps its width and the
   cover crop trims the photo's top and bottom instead (the explicit
   width stops the height cap narrowing the box through the ratio). */
.split-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 377 / 434;
	max-height: 560px;
	overflow: hidden;
	border-radius: calc(var(--radius-xl) - var(--border-hairline)) calc(var(--radius-xl) - var(--border-hairline)) 0 0;
}

/* Cover, sized by height: in the portrait boxes (phones, tablet) the
   image box is as wide as the drawn image, so WordPress's lazy
   sizes="auto" picks a source for the width actually drawn, not the
   narrower crop; min-width and object-fit cover the landscape boxes.
   A photo's focus point (--focus-x / --focus-y, inc/image-focus.php)
   positions it, as object-position would; centred without one. */
.split-card__img {
	position: absolute;
	top: 0;
	left: var(--focus-x, 50%);
	width: auto;
	min-width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	object-position: var(--focus-x, 50%) var(--focus-y, 50%);
	transform: translateX(calc(-1 * var(--focus-x, 50%)));
}

/* ---------- Text panel ---------- */

.split-card__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 76px 24px 70px; /* 25 / 71 from the card's outer edge */
}

/* The shared section header, re-spaced for the card. */
.split-card__header {
	margin-bottom: 0;
}

.split-card__header .section-header__title {
	margin-top: 15px;
	font-size: var(--fs-h3-static);
	line-height: 1.111; /* 36/40 at every width */
}

.split-card__header .section-header__intro {
	margin-top: 16px;
}

/* ---------- Checklist ---------- */

.split-card__list {
	display: grid;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

/* The tick is centred on the whole item, as drawn on phones (items
   wrap to two lines there; one line on desktop). */
.split-card__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.split-card__check {
	display: grid;
	flex: none;
	place-items: center;
	width: var(--icon-check);
	height: var(--icon-check);
	border-radius: 50%;
	background-color: var(--color-surface-warm);
	color: var(--color-accent);
}

/* 13 x 10 of ink. The design draws a taller calligraphic tick (12 x 13);
   this is the theme's icon-set tick until a matching glyph exists. */
.split-card__check .icon {
	width: 16px;
	height: 16px;
}

/* ---------- Link ---------- */

/* Block-level so the gap above is exact (inline-flex would add a strut). */
.split-card__link {
	display: flex;
	width: fit-content;
	margin-top: 24px;
	color: var(--color-link);
}

.split-card__link:focus-visible {
	outline-color: var(--color-focus-light);
}

/* Hover and focus: the arrow turns Dark Orange (and slides right, main.css
   arrow-link rule); the label stays Navy and is not underlined. */
.split-card__link:hover .icon,
.split-card__link:focus-visible .icon {
	color: var(--color-arrow-hover-on-light);
}

/* ---------- No photo: the text panel takes the whole card ---------- */

.split-card--no-media .split-card__body {
	padding-top: 56px;
}

/* ============================================================
   Tablet and up: photo and panel side by side
   ============================================================ */

@media (min-width: 768px) {
	/* Photo 5 : text 7 on tablets (50/50 from 1024). */
	.split-card__card {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.split-card--image-right .split-card__card {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	.split-card--no-media .split-card__card {
		grid-template-columns: minmax(0, 1fr);
	}

	/* main.css caps every __media wrapper at 640px with auto side
	   margins between 768 and 1023. This photo fills its part of the
	   card instead (an auto margin would also collapse it to nothing,
	   as its only content is the absolutely positioned image), so the
	   guard is reset here. The photo takes the row's height, so the
	   phone height cap goes too. */
	.split-card__media {
		max-width: none;
		max-height: none;
		margin-inline: 0;
		aspect-ratio: auto;
		border-radius: calc(var(--radius-xl) - var(--border-hairline)) 0 0 calc(var(--radius-xl) - var(--border-hairline));
	}

	.split-card--image-right .split-card__media {
		grid-column: 2;
		grid-row: 1;
		border-radius: 0 calc(var(--radius-xl) - var(--border-hairline)) calc(var(--radius-xl) - var(--border-hairline)) 0;
	}

	/* 32px at 768, 55px at 1440 (inside the border; 56 from the card
	   edge as drawn). */
	.split-card__body,
	.split-card--no-media .split-card__body {
		padding: clamp(32px, 5.71px + 3.4226vw, 55px);
	}

	/* No photo: the designed text column, centred in the card. */
	.split-card--no-media .split-card__content {
		width: 100%;
		max-width: 507px;
		margin-inline: auto;
	}
}

/* ============================================================
   Desktop
   ============================================================ */

@media (min-width: 1024px) {
	/* 50/50, 1280 x 569 at 1440. A box with an aspect ratio still grows
	   to fit its content (no overflow is set), so longer text makes the
	   card taller instead of spilling out. */
	.split-card__card,
	.split-card--image-right .split-card__card {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		aspect-ratio: 1280 / 569;
	}

	.split-card--no-media .split-card__card {
		grid-template-columns: minmax(0, 1fr);
		aspect-ratio: auto;
	}

	/* The designed text column (about 505 of ink): 507 reproduces the
	   drawn line breaks of both cards with Poppins as served. */
	.split-card__content {
		max-width: 507px;
	}

	.split-card__header .section-header__intro {
		margin-top: 19px;
	}
}