/* ============================================================
   Choose your Pathway - homepage (Page Sections layout
   "pathway_cards", brief 4.3; notes home-desktop 3.5 and
   home-mobile 3.5)
   Cream section: the shared section header ("View all courses" in
   the aside: right of the intro from 1024, under it below), then
   four discipline photo cards. Each card is ONE link - its
   "Explore ..." arrow link, stretched over the card. Text sits at
   the card bottom over the navy photo gradient.
   - Phones (< 768): one column of 317 x 344 cards at the 42px
     mobile card inset (left edge shared with the progression
     carousel; the cards stop growing at 390px on large phones), gap
     21.5. Title and link only - no description, as designed. Text
     inset 25, link line 27 above the card bottom, 17 between the
     title and link line boxes.
   - Tablet (768-1023): a 2 x 2 grid (gap 20) of 4:3 cards (337 x
     253 at 768, 366 x 274 at 834), shown in the revealed state at
     rest - strong overlay and description - because touch has no
     hover.
   - Desktop (>= 1024): four 304 x 320 cards across the 1280
     container (305 built), gap 20. With a hover-capable pointer the
     description is hidden at rest; hover and keyboard focus on the
     link reveal it, as drawn on the Winter card: the overlay
     strengthens over the whole card, the description opens under
     the title (which moves up 41px) and the link drops 6px. No
     movement under reduced motion (the reveal is instant).
     Touch-only screens of this width get the tablet's revealed
     state.
   Desktop text: inset 24; link line 22 above the bottom at rest,
   16 revealed; title to link 14 at rest = 3 above + 11 below the
   collapsed description (Koulen 24 on a 33.6 line, Poppins 16/24).
   The "Explore" arrow slides right on hover and keyboard focus
   (main.css arrow link); wherever there is no hover reveal it also
   turns Cream. The photo zooms in slowly on hover and keyboard focus
   at every width (not under reduced motion).
   ============================================================ */

/* Phones: one column at the 42px card inset (318 x 345 at 402), at
   most 390px wide, left-aligned on large phones. */
.pathway-cards__list {
	display: grid;
	grid-template-columns: minmax(0, 390px);
	gap: 21.5px;
	margin: 0;
	padding: 0 calc(var(--inset-card-mobile) - var(--gutter));
	list-style: none;
}

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

/* Photo layer and text share the one grid cell: z-index 0 and 1 (grid
   items stack without being positioned), so the text body is not a
   containing block and the stretched link's ::after spans the whole
   card (position: relative here). isolation keeps those layers inside
   the card. */
.pathway-card {
	position: relative;
	isolation: isolate;
	display: grid;
	aspect-ratio: 317 / 344;
	border-radius: var(--radius-md);
}

/* Photo + overlays. Named __bg, not __media: it is the card's
   background, so the tablet media guard in main.css must not cap it.
   Navy base (shows only without a photo), the photo, then the resting
   gradient (::before) and the strong one (::after), which cross-fade
   for the reveal. The navy stops 1px inside the edge (content-box
   clip; the photo and overlays fill the padding box): reaching the
   rounded edge it would darken the anti-aliased corner pixels into a
   dark rim on light photos. */
.pathway-card__bg {
	position: relative;
	z-index: 0;
	grid-area: 1 / 1;
	overflow: hidden;
	padding: 1px;
	border-radius: inherit;
	background-color: var(--color-surface-dark);
	background-clip: content-box;
}

.pathway-card__bg::before,
.pathway-card__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pathway-card__bg::before {
	background: var(--overlay-card-photo);
}

.pathway-card__bg::after {
	background: var(--overlay-card-photo-strong);
	opacity: 0;
}

/* Cover, sized by height (as the split card does): in the portrait
   desktop and phone boxes the image box is as wide as the drawn
   photo (about 304px at 320 tall, wider than the 214-270px cards at
   1024-1279), so WordPress's lazy sizes="auto" picks a source for
   the width actually drawn; min-width and object-fit cover the 4:3
   tablet boxes. A photo's focus point (--focus-x / --focus-y, from
   inc/image-focus.php) positions it, as object-position would;
   centred without one. */
.pathway-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%)));
	transition: transform var(--transition-zoom);
}

/* The photo zooms in slowly (Miles 2026-10-05): on hover where the
   pointer can hover, and on keyboard focus; the card itself never
   moves, and nothing zooms under reduced motion. Scaled after the
   centring translate, so the zoom stays centred. */
@media (prefers-reduced-motion: no-preference) {
	.pathway-card:has(.pathway-card__link:focus-visible) .pathway-card__img {
		transform: translateX(calc(-1 * var(--focus-x, 50%))) scale(var(--image-zoom));
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pathway-card:hover .pathway-card__img {
		transform: translateX(calc(-1 * var(--focus-x, 50%))) scale(var(--image-zoom));
	}
}

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

.pathway-card__body {
	z-index: 1;
	grid-area: 1 / 1;
	align-self: end;
	min-width: 0;
	padding: 0 25px 27px;
}

.pathway-card__title {
	color: var(--color-heading-on-dark);
	font-size: var(--fs-card-title-lg);
	line-height: var(--lh-card-title);
}

/* Phones: no description, as designed. */
.pathway-card__reveal {
	display: none;
}

/* pretty: no one-word last lines ("... mountain / skills") on the
   in-between widths; the drawn 1440 lines are unchanged. */
.pathway-card__description {
	color: var(--color-text-on-photo);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	text-wrap: pretty;
}

/* Block-level so its margin sets the gap under the title. */
.pathway-card__link {
	display: flex;
	width: fit-content;
	margin-top: 17px;
	color: var(--color-accent);
}

/* The focus ring goes round the whole card (the link's stretched
   ::after), Dark Orange on the Cream section. */
.pathway-card__link:focus-visible {
	outline: none;
}

/* The arrow is already Light Orange at rest, so hover and focus turn it
   Cream (as the services chevron does): the cue that stays when reduced
   motion stops the slide. Desktops with a hover pointer show the reveal
   instead and keep the designed orange (reset below). */
.pathway-card__link:hover .icon,
.pathway-card__link:focus-visible .icon {
	color: var(--color-text-on-dark);
}

.pathway-card__link:focus-visible::after {
	border-radius: var(--radius-md);
	outline: 2px solid var(--color-focus-light);
	outline-offset: 3px;
}

/* ============================================================
   Tablet: 2 x 2 grid, revealed state at rest
   ============================================================ */

@media (min-width: 768px) {
	.pathway-cards__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gap-grid);
		padding: 0;
	}

	/* Shallower than the desktop card, so the grid stays compact at
	   the top of the range (448 x 336 at 1023); the revealed text
	   (up to about 160px) still leaves the photo showing above it. */
	.pathway-card {
		aspect-ratio: 4 / 3;
	}

	.pathway-card__bg::before {
		opacity: 0;
	}

	.pathway-card__bg::after {
		opacity: 1;
	}

	.pathway-card__body {
		padding: 0 24px 16px;
	}

	/* A one-row grid, so the desktop reveal can animate the row from
	   0fr to 1fr (an animatable "height: auto"). */
	.pathway-card__reveal {
		display: grid;
		grid-template-rows: 1fr;
		margin-top: 3px;
	}

	.pathway-card__description {
		min-height: 0;
		overflow: hidden;
	}

	.pathway-card__link {
		margin-top: 11px;
	}
}

/* ============================================================
   Desktop: four across; hover / focus reveal
   ============================================================ */

@media (min-width: 1024px) {
	.pathway-cards__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.pathway-card {
		aspect-ratio: auto;
		height: 320px;
	}

	/* Long labels ("Explore Leadership") stay on one line on the
	   narrowest desktop cards (214px at 1024). */
	.pathway-card__link {
		white-space: nowrap;
	}
}

/* Pointer that can hover: the resting design (description hidden),
   revealed while the card is hovered or its link has keyboard focus
   (:focus-visible, so a mouse click does not leave it open; inside :is()
   so an engine without :has() still reveals on hover). */
@media (min-width: 1024px) and (hover: hover) {
	.pathway-card__bg::before {
		opacity: 1;
	}

	.pathway-card__bg::after {
		opacity: 0;
	}

	.pathway-card__body {
		padding-bottom: 22px;
	}

	/* Collapsed: the row closes to 0, so title and link sit 3 + 11 =
	   14px apart. The text stays in the accessibility tree. */
	.pathway-card__reveal {
		grid-template-rows: 0fr;
		opacity: 0;
	}

	.pathway-card:is(:hover, :has(.pathway-card__link:focus-visible)) .pathway-card__bg::before {
		opacity: 0;
	}

	.pathway-card:is(:hover, :has(.pathway-card__link:focus-visible)) .pathway-card__bg::after {
		opacity: 1;
	}

	/* The link drops 6px (22 -> 16) as the description opens. */
	.pathway-card:is(:hover, :has(.pathway-card__link:focus-visible)) .pathway-card__body {
		padding-bottom: 16px;
	}

	.pathway-card:is(:hover, :has(.pathway-card__link:focus-visible)) .pathway-card__reveal {
		grid-template-rows: 1fr;
		opacity: 1;
	}

	/* The reveal is the cue here: the arrow keeps the designed orange. */
	.pathway-card__link:hover .icon,
	.pathway-card__link:focus-visible .icon {
		color: inherit;
	}

	/* Engines without :has() that read @supports selector() (Firefox
	   69-120, Safari 14.1-15.3) reveal on :focus-within instead, so
	   keyboard focus still opens the card (a mouse click also leaves it
	   open there; the photo zooms on hover only). */
	@supports not selector(:has(*)) {
		.pathway-card:focus-within .pathway-card__bg::before {
			opacity: 0;
		}

		.pathway-card:focus-within .pathway-card__bg::after {
			opacity: 1;
		}

		.pathway-card:focus-within .pathway-card__body {
			padding-bottom: 16px;
		}

		.pathway-card:focus-within .pathway-card__reveal {
			grid-template-rows: 1fr;
			opacity: 1;
		}
	}
}

/* The reveal animates only when motion is welcome; otherwise every
   change above is instant. */
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
	.pathway-card__bg::before,
	.pathway-card__bg::after {
		transition: opacity var(--transition);
	}

	.pathway-card__body {
		transition: padding-bottom var(--transition);
	}

	.pathway-card__reveal {
		transition: grid-template-rows var(--transition), opacity var(--transition);
	}
}