/*
 * Lineup. Five portrait entry points hand-placed across five columns, with a
 * second row of portraits below them that dissolves into the footer.
 *
 * The offsets are transforms rather than margins on purpose: a transform does
 * not contribute to the grid's height, so the lower tiles hang past the end of
 * the section and get cut off by the dissolve. That overhang is the effect —
 * the lineup has to read as continuing beneath the fold, not as a row that
 * happens to end.
 */

.cobell-lineup {
	position: relative;
	overflow: hidden;
}

/* The masonry runs to the section's bottom edge and the footer takes over. */
.cobell-section.cobell-lineup {
	padding-bottom: 0;
}

.cobell-lineup__header {
	max-width: 48rem;
	margin-inline: auto;
	text-align: center;
}

.cobell-lineup__eyebrow {
	justify-content: center;
}

.cobell-lineup__heading {
	margin: 0;
	font-size: clamp( 2.25rem, 5vw, 4rem );
	line-height: 1;
	letter-spacing: -0.01em;
}

.cobell-lineup__intro {
	max-width: 36rem;
	margin-inline: auto;
	margin-top: 1.25rem;
	color: var( --cobell-body-color );
	font-size: var( --cobell-body-size );
}

/* Tiles -------------------------------------------------------------------- */

.cobell-lineup__list {
	display: grid;
	gap: 1.25rem;
	max-width: 80rem;
	margin: 5rem auto 0;
	padding: 0;
	list-style: none;
}

.cobell-lineup__column {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.cobell-lineup__card,
.cobell-lineup__understudy {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 1rem;
	/* Forest under the photograph so a slow load shows the tile's shape rather
	   than a cream hole in the composition. */
	background-color: var( --wp--preset--color--forest );
}

.cobell-lineup__card {
	height: 18rem;
	color: var( --wp--preset--color--cream );
	text-decoration: none;
	box-shadow: 0 4px 6px -1px rgba( 0, 0, 0, 0.1 ), 0 2px 4px -2px rgba( 0, 0, 0, 0.1 );
}

/*
 * theme.json's `elements.link` hover paints every anchor terracotta, and here
 * the whole card is the anchor — so hovering it recoloured the label, the cue
 * and the arrow, none of which declare a colour of their own. The rule above
 * ties with it on specificity and loses on order, global styles being enqueued
 * after the block's.
 *
 * Live's card changes exactly two things on hover: the photograph scales 1.03
 * and the arrow nudges 4px. Nothing recolours. Same trap and same fix as
 * card-grid's tile.
 *
 * Pinned on the anchor rather than on each part so a caption element added
 * later cannot pick the link colour up again.
 */
a.cobell-lineup__card:hover,
a.cobell-lineup__card:focus-visible {
	color: var( --wp--preset--color--cream );
}

.cobell-lineup__understudy {
	height: 15rem;
	box-shadow: 0 1px 2px 0 rgba( 0, 0, 0, 0.05 );
}

.cobell-lineup__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Faces sit in the upper part of these frames; a centred crop takes the
	   tops of heads off at this aspect. */
	object-position: top;
	transition: scale 700ms ease;
}

/*
 * The zoom is the `scale` property, not `transform: scale()`, and the image
 * carries `data-no-reveal` — both for the same reason.
 *
 * motion.css's section entrance matches `[class*="__image"]`, so it owned this
 * element's `transform` *and* its `transition` list. The hover rule below set
 * `transform` and lost to it outright, so the photograph never zoomed at all;
 * even winning that, the entrance's three-property transition replaces the one
 * declared here, so the zoom would have snapped rather than eased. Live drives
 * it with `scale` (Tailwind v4 compiles `scale-[1.03]` to the property, not to
 * `transform`) and does not fade these images in separately, so opting out of
 * the entrance matches it and removes the conflict rather than fighting it.
 */
.cobell-lineup__card:hover .cobell-lineup__image,
.cobell-lineup__card:focus-visible .cobell-lineup__image {
	scale: 1.03;
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-lineup__image {
		transition: none;
	}

	.cobell-lineup__card:hover .cobell-lineup__image,
	.cobell-lineup__card:focus-visible .cobell-lineup__image {
		scale: 1;
	}
}

/* A touch of shade at the head of the frame so a bright sky does not run into
   the section above it. */
.cobell-lineup__scrim {
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 5rem;
	pointer-events: none;
	background-image: linear-gradient( to bottom, rgba( 0, 0, 0, 0.15 ), transparent );
}

/*
 * Glass caption. Feathered at the top so the panel dissolves into the
 * photograph rather than ending on a hard edge.
 *
 * The tint is 80%, not the reference's 55%. The reference asserts its panel
 * holds AA over any image; over a bright frame cream on 55% measures 3.09:1 and
 * fails. At 80% the worst case — a white frame behind it — is 7.15:1. Same
 * treatment and same reasoning as the hero portrait captions.
 */
.cobell-lineup__caption {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 0 1.25rem 1.5rem;
	background-color: rgba( 20, 32, 26, 0.8 );
	-webkit-backdrop-filter: blur( 24px );
	backdrop-filter: blur( 24px );
	-webkit-mask-image: linear-gradient( to top, black 55%, transparent 100% );
	mask-image: linear-gradient( to top, black 55%, transparent 100% );
	padding-top: 4rem;
}

/* Live steps this at the 768 breakpoint rather than running one size: the
   tiles are much narrower on a phone and an 18px label wraps in them. */
.cobell-lineup__label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.375;
}

@media ( min-width: 48rem ) {
	.cobell-lineup__label {
		font-size: 1.125rem;
	}
}

/*
 * Full-strength cream rather than the reference's 85%. The cue is 14px, so
 * normal-size text needing 4.5:1, and dimming it over an unknown photograph is
 * the one place there is no contrast headroom to spend.
 */
.cobell-lineup__cue {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	/* Live's `text-sm` sets 20px leading with the 14px; ours was inheriting the
	   body's 1.6 and running 22.4px. */
	line-height: 1.25rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.cobell-lineup__arrow {
	transition: transform 150ms ease;
}

.cobell-lineup__card:hover .cobell-lineup__arrow,
.cobell-lineup__card:focus-visible .cobell-lineup__arrow {
	transform: translateX( 0.25rem );
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-lineup__arrow {
		transition: none;
	}

	.cobell-lineup__card:hover .cobell-lineup__arrow,
	.cobell-lineup__card:focus-visible .cobell-lineup__arrow {
		transform: none;
	}
}

.cobell-lineup__card:focus-visible {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: 3px;
}

.cobell-lineup__understudy {
	display: none;
}

/* ── The narrow register ──
 *
 * Below `md` the reference does not stack the masonry, it replaces it: a ruled
 * list of uppercase entry points, then a decorative strip of portraits, with the
 * grid itself `hidden md:grid`. Reproduced 2026-08-06 on request; this block
 * used to stack the five cards, which ran 1870px against live's 852 at 390 and
 * was the largest single mobile difference on the site.
 *
 * `min-height: 56px` on the row is live's, and it is also the only thing keeping
 * these targets over the 44px WCAG 2.5.8 asks for — the label itself is 12.8px
 * on a 16px line box, so the padding is load-bearing rather than decorative.
 */
/*
 * Full-bleed, the same escape the marquee below makes and for the same reason:
 * this nav is a child of the section, which carries the page gutter.
 *
 * It is not decoration here — the row's rules run edge to edge on live, and the
 * 48px the gutter takes off comes out of the label's measure. Inside the gutter
 * the labels had 294px to live's 342, so three of the five wrapped to a second
 * line where live wraps one, and the list stood 37px tall with every row's own
 * height already correct. A measure difference reads as a padding difference.
 */
.cobell-lineup__quicklinks {
	width: 100vw;
	margin-top: 3rem;
	margin-inline: calc( -1 * var( --wp--custom--gutter ) );
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
	border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}

.cobell-lineup__quicklist {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cobell-lineup__quicklist > li + li {
	border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}

/*
 * `border-box`, and it is the whole of this row's height.
 *
 * Every value here is the reference's — `min-h-[56px] px-6 py-4 text-[0.8rem]`
 * — but the theme has no global box-sizing reset, so `min-height` sized the
 * content alone and the 2rem of padding was added outside it: 88px rows against
 * live's 56, five of them, and the section stood 152 tall at 390 while matching
 * live exactly at 768 where this list is not rendered at all.
 *
 * Fifth instance of the phantom-padding trap on this build; the /support tile
 * and the Origin card were the others. It reads as a spacing bug in a rule
 * whose spacing is already correct.
 */
.cobell-lineup__quicklink {
	display: flex;
	box-sizing: border-box;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 56px;
	padding: 1rem 1.5rem;
	color: var( --wp--preset--color--forest );
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 300ms ease;
}

.cobell-lineup__quicklink:hover,
.cobell-lineup__quicklink:focus-visible {
	color: var( --wp--preset--color--clay );
}

/* Inset rather than offset: an outline outside a full-bleed ruled row is clipped
   by the section's own edge on the left and right. */
.cobell-lineup__quicklink:focus-visible {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: -2px;
}

.cobell-lineup__quicklink-label {
	position: relative;
}

/* The rule grows from the left on hover, which is the reference's affordance.
   Drawn on a pseudo-element so it does not affect the row's height. */
.cobell-lineup__quicklink-label::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.25rem;
	height: 1px;
	background-color: var( --wp--preset--color--clay );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform 300ms ease;
}

.cobell-lineup__quicklink:hover .cobell-lineup__quicklink-label::after,
.cobell-lineup__quicklink:focus-visible .cobell-lineup__quicklink-label::after {
	transform: scaleX( 1 );
}

.cobell-lineup__quicklink-arrow {
	flex: none;
	color: var( --wp--preset--color--clay );
	transition: transform 300ms ease;
}

.cobell-lineup__quicklink:hover .cobell-lineup__quicklink-arrow,
.cobell-lineup__quicklink:focus-visible .cobell-lineup__quicklink-arrow {
	transform: translateX( 0.25rem );
}

@media ( prefers-reduced-motion: reduce ) {
	.cobell-lineup__quicklink,
	.cobell-lineup__quicklink-label::after,
	.cobell-lineup__quicklink-arrow {
		transition: none;
	}
}

/*
 * The strip. `w-[40vw]` tiles and a 2rem run-out, full-bleed — it is a child of
 * the section, which carries the page gutter, so the bleed is undone here rather
 * than by restructuring the block. `100vw` over `100%` because the section's own
 * padding is what is being escaped.
 */
.cobell-lineup__marquee {
	width: 100vw;
	margin-top: 2rem;
	margin-inline: calc( -1 * var( --wp--custom--gutter ) );
}

.cobell-lineup__marquee-tile {
	width: 40vw;
}

/* Both narrow-register parts stop at `md`, where the masonry takes over. The
   three queries are complements of one another and have to stay in step. */
@media ( min-width: 48rem ) {
	.cobell-lineup__quicklinks,
	.cobell-lineup__marquee {
		display: none;
	}
}

@media ( max-width: 47.9375rem ) {
	.cobell-lineup__nav {
		display: none;
	}
}

/* Masonry ------------------------------------------------------------------ */

@media ( min-width: 48rem ) {
	.cobell-lineup__list {
		grid-template-columns: repeat( 5, minmax( 0, 1fr ) );
		align-items: start;
	}

	.cobell-lineup__card {
		height: 21rem;
	}

	.cobell-lineup__understudy {
		display: block;
		height: 18rem;
	}

	/* Hand-placed, not generated. These five offsets are the reference's own
	   and there is no rule behind them — they are composed against the faces
	   in the photographs. */
	.cobell-lineup__column--1 {
		transform: translateY( 5rem );
	}

	.cobell-lineup__column--2 {
		transform: translateY( -1.5rem );
	}

	.cobell-lineup__column--3 {
		transform: translateY( 3rem );
	}

	.cobell-lineup__column--4 {
		transform: translateY( -3.5rem );
	}

	.cobell-lineup__column--5 {
		transform: translateY( 4rem );
	}
}

/*
 * The dissolve into the footer. Teal, not cream — the footer is teal and the
 * masonry has to disappear into it rather than back into its own surface.
 * Only present where the overhanging tiles exist to be cut off.
 */
.cobell-lineup__dissolve {
	display: none;
}

@media ( min-width: 48rem ) {
	.cobell-lineup__dissolve {
		display: block;
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		z-index: 1;
		height: 28rem;
		pointer-events: none;
		background-image: linear-gradient(
			to bottom,
			rgba( 0, 95, 97, 0 ) 0%,
			rgba( 0, 95, 97, 0 ) 40%,
			rgba( 0, 95, 97, 0.75 ) 80%,
			rgba( 0, 95, 97, 1 ) 100%
		);
	}
}