/*
 * petpartners/species-links
 *
 * Two doors, and the block has no idea there are two — the taxonomy decides.
 * The grid is written so one, two or four species all land somewhere sensible.
 *
 * Brown fields with white type. This is the one place on the home page where
 * the brand colour takes a whole surface, which is what makes the choice read
 * as a fork in the path rather than as two more links.
 */

.wp-block-petpartners-species-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--sm );
}

.wp-block-petpartners-species-links__door {
	display: flex;
	align-items: flex-end;
	position: relative;
	overflow: hidden;
	/*
	 * Tall enough to read as a surface rather than as a button. It is a floor,
	 * not a fixed height: the grid's default item-stretch is what keeps the
	 * two doors the same height, so a door with the full eyebrow/heading/
	 * note/CTA stack can grow past it and the plain-name door next to it
	 * stretches to match, instead of the four-line door clipping.
	 */
	min-height: 14rem;
	padding: var( --wp--preset--spacing--md );
	border-radius: var( --wp--preset--border-radius--lg );
	background-color: var( --wp--preset--color--brown );
	color: var( --wp--preset--color--white );
	text-decoration: none;
}

/*
 * The photo fills the surface the flat brown filled before it; the brown
 * stays as the background-color, showing for the instant before the image
 * decodes and under a transparent WebP, same role a placeholder colour plays
 * anywhere else on the site.
 */
.wp-block-petpartners-species-links__banner {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;

	/*
	 * Right-biased rather than centred. The source photos are supplied with
	 * the animal off-centre toward the right and open space on the left for
	 * the name (CLAUDE.md section 6 note on this block) — at the narrow end
	 * of the door's fluid width, a centred crop pulls the window left and
	 * cuts the subject.
	 */
	object-position: 80% center;
}

/*
 * The name sits on a photo now, not a flat field, so its own contrast has to
 * be built rather than inherited from the brown background. A scrim, not a
 * darkened image: the photo stays true everywhere but the strip of it behind
 * the text. color-mix keeps this a token per CLAUDE.md section 5 — the token
 * itself fades to transparent, nothing here is a hardcoded colour.
 */
.wp-block-petpartners-species-links__door.has-banner::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		color-mix( in srgb, var( --wp--preset--color--brown ) 85%, transparent ) 0%,
		transparent 65%
	);
}

/*
 * Cormorant at display-md, comfortably past the 30px floor below which its
 * thin strokes disappear (CLAUDE.md section 5.5).
 */
.wp-block-petpartners-species-links__name {
	position: relative;
	z-index: 1;
	font-family: var( --wp--preset--font-family--serif-display );
	font-size: var( --wp--preset--font-size--display-md );
	font-weight: 600;
	line-height: var( --wp--custom--typography--display-md--line-height );
	letter-spacing: var( --wp--custom--typography--display-md--letter-spacing );
}

/*
 * Specificity, not source order: `.petpartners-on-brown a:hover` in
 * site-chrome.css (ADR-058) sets `color: inherit` at (0,2,1) — one class,
 * one element, one pseudo-class — to keep every other on-brown link off
 * purple-hover. `.wp-block-petpartners-species-links__door:hover` alone is
 * (0,2,0) and loses that comparison regardless of which stylesheet loads
 * second, so the door silently inherited text-gray on hover instead of
 * staying white. Qualifying with the wrapper's own `.petpartners-on-brown`
 * class (the block's root, render.php) makes this (0,3,0), which beats
 * (0,2,1) on the class count alone before the element tier is ever compared.
 */
.petpartners-on-brown .wp-block-petpartners-species-links__door:hover,
.petpartners-on-brown .wp-block-petpartners-species-links__door:focus-visible {
	color: var( --wp--preset--color--white );
}

.wp-block-petpartners-species-links__door:hover .wp-block-petpartners-species-links__name,
.wp-block-petpartners-species-links__door:focus-visible .wp-block-petpartners-species-links__name {
	text-decoration: underline;
	text-underline-offset: 0.12em;
}

/*
 * The richer door — eyebrow, headline, note and CTA line — for a species the
 * client has written copy for (today just "dog", PETPARTNERS_SPECIES_DOOR_COPY
 * in scripts/setup-catalog.php). A species without an entry there keeps the
 * single `__name` line above; the two never render together.
 */
.wp-block-petpartners-species-links__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--xs );
}

.wp-block-petpartners-species-links__eyebrow {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--label );
	font-weight: 600;
	line-height: var( --wp--custom--typography--label--line-height );
	letter-spacing: var( --wp--custom--typography--label--letter-spacing );
	text-transform: uppercase;
}

.wp-block-petpartners-species-links__heading {
	font-family: var( --wp--preset--font-family--serif-display );
	font-size: var( --wp--preset--font-size--display-md );
	font-weight: 600;
	line-height: var( --wp--custom--typography--display-md--line-height );
	letter-spacing: var( --wp--custom--typography--display-md--letter-spacing );
}

.wp-block-petpartners-species-links__note {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--sm );
	line-height: var( --wp--custom--typography--sm--line-height );
}

.wp-block-petpartners-species-links__cta {
	font-family: var( --wp--preset--font-family--sans );
	font-size: var( --wp--preset--font-size--sm );
	font-weight: 600;
	line-height: var( --wp--custom--typography--sm--line-height );
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.wp-block-petpartners-species-links__door:hover .wp-block-petpartners-species-links__cta,
.wp-block-petpartners-species-links__door:focus-visible .wp-block-petpartners-species-links__cta {
	text-decoration-thickness: 2px;
}

@media ( min-width: 600px ) {
	.wp-block-petpartners-species-links {
		grid-template-columns: repeat( 2, 1fr );
		gap: var( --wp--preset--spacing--md );
	}
}