/*
Theme Name: McDane
Theme URI: https://mcdanekennels.com
Author: McDane Kennel
Description: Custom block theme for McDane Kennel.
Version: 0.3.1
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: mcdane
*/

/* Most styling lives in theme.json. This file covers what theme.json cannot
   express: hover states, card composition, the pedigree table, and the small
   typographic details that make the pages feel considered. */

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */
/* Sticky has to sit on the template-part wrapper, not on our own group.
   A sticky element only travels within its parent's box, and the parent of
   .mcdane-header is the <header> element, which is exactly as tall as the
   header -- so it had nowhere to go. Its parent, .wp-site-blocks, is the
   full page, which is the scroll distance we actually want. */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 20;
}

/* The frosted background is painted by a PSEUDO-ELEMENT, not by this element.

   backdrop-filter (like transform and filter) makes an element a containing
   block for position:fixed descendants. The mobile menu overlay is exactly
   that -- core styles it position:fixed; inset:0; overflow:auto -- so with the
   filter on .mcdane-header itself the overlay resolved against the HEADER
   rather than the viewport. It came out one header-row tall with a scrollbar
   in it instead of covering the page, which reads as a broken menu.

   A pseudo-element has no descendants, so it can carry the filter without
   trapping anything. Do not move backdrop-filter back onto .mcdane-header. */
.mcdane-header {
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mcdane-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(12px);
}

.mcdane-header .wp-block-site-title a {
	display: inline-block;
	line-height: 1.1;
}

/* Horizontal lockup at roughly 3.2:1, so it sits on the nav's line without
   forcing a tall header. Sized by height; width follows the aspect ratio. */
.mcdane-logo {
	margin: 0;
	line-height: 0;
}

.mcdane-logo img {
	height: 88px;
	width: auto;
	display: block;
}

@media (max-width: 781px) {
	.mcdane-logo img {
		height: 58px;
	}

	/* Collapse the nav to the hamburger at the theme's own breakpoint.

	   Core's overlayMenu:"mobile" switches at 600px, which leaves 600-781px
	   showing all five top-level items inline next to the logo -- squeezed onto
	   one line, or wrapped into a stack that is worse than the overlay. 781px is
	   where the logo already shrinks and where the galleries and detail table
	   already reflow, so the header now changes shape at the same width as
	   everything else.

	   Both rules out-specify core's (.mcdane-nav adds a class), and style.css
	   loads after the block stylesheet either way. */
	.mcdane-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.mcdane-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Small caps nav, with a gold rule that grows in on hover. */
.mcdane-nav .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	padding-block: 0.4rem;
	position: relative;
}

.mcdane-nav .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background-color: var(--wp--preset--color--secondary);
	transition: right 0.25s ease;
}

.mcdane-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.mcdane-nav .wp-block-navigation-item__content:hover::after,
.mcdane-nav .current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
}

/* -------------------------------------------------------------------------
   Shared type details
   ---------------------------------------------------------------------- */

/* Small uppercase label above a heading. */
.mcdane-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.5rem;
}

/* A short gold rule used to close out section headings. */
.mcdane-rule::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 2px;
	margin-top: 1rem;
	background-color: var(--wp--preset--color--secondary);
}

.mcdane-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
   Photo gallery (the mcdane/dog-photos pattern, in a dog's or litter's content)

   The core Gallery already lays itself out; this only supplies the house
   vocabulary -- the same 3px radius as the cards and the single-dog portrait,
   and gaps from the spacing scale. Captions are styled globally in theme.json
   (muted, x-small) and need nothing here.

   Click-to-enlarge is not CSS: it is settings.blocks.core/image.lightbox in
   theme.json, which needs the gallery's linkTo to stay "none" -- a linked image
   opens the link instead of the lightbox.
   ---------------------------------------------------------------------- */
.mcdane-gallery {
	margin-top: var(--wp--preset--spacing--40);
	gap: var(--wp--preset--spacing--20);
}

.mcdane-gallery img {
	border-radius: 3px;
}

.mcdane-gallery figcaption {
	text-align: left;
}

@media (max-width: 781px) {
	.mcdane-gallery.columns-3 {
		--wp--style--unstable-gallery-gap: var(--wp--preset--spacing--20);
	}

	.mcdane-gallery.columns-3 .wp-block-image {
		width: calc(50% - var(--wp--preset--spacing--20) / 2);
	}
}

@media (max-width: 480px) {
	.mcdane-gallery.columns-3 .wp-block-image {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
   Breed sections (the mcdane/dog-groups block)

   One section per breed on /dogs/ and the role archives. The heading carries
   the spacing rather than the block, so a single-breed page does not open with
   a gap; render.php never emits a section with an empty grid, so there is no
   empty state to style around.
   ---------------------------------------------------------------------- */
.mcdane-dog-groups {
	margin-top: var(--wp--preset--spacing--60);
	margin-bottom: var(--wp--preset--spacing--70);
}

.mcdane-breed-group + .mcdane-breed-group {
	margin-top: var(--wp--preset--spacing--60);
}

.mcdane-breed-group > h2 {
	margin-bottom: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* -------------------------------------------------------------------------
   Cards (dog + litter query loops)
   ---------------------------------------------------------------------- */
.mcdane-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mcdane-card:hover {
	transform: translateY(-3px);
	border-color: #d5c6b2;
	box-shadow: 0 14px 34px -18px rgba(28, 25, 23, 0.45);
}

/* The block layout engine spaces siblings with margin-block-start; inside a
   card the image must sit flush against the body, so reset it here. */
.mcdane-card > * {
	margin-block: 0;
}

.mcdane-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.mcdane-card .wp-block-post-featured-image img {
	width: 100%;
	display: block;
	transition: transform 0.5s ease;
}

.mcdane-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

/* Everything below the image sits in one padded stack. */
.mcdane-card__body {
	padding: 1.5rem 1.5rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex-grow: 1;
}

.mcdane-card__body > * {
	margin-block: 0;
}

.mcdane-card .wp-block-post-title {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.mcdane-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.mcdane-card .wp-block-post-excerpt__excerpt {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Dog label + flags (the mcdane/dog-label block)

   The label -- "Adult Girl" -- reads like the small caps line core/post-terms
   used to put here. The flags are the dog's roles, Available and Retired. On a
   card they are lifted out of the body and over the top corner of the photo as
   a banner; .mcdane-card is the positioning context. On the dog's own page the
   block carries .mcdane-chips and everything is a pill in a row instead.
   ---------------------------------------------------------------------- */
.mcdane-card {
	position: relative;
}

.mcdane-dog-label__text {
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.mcdane-dog-flags {
	display: contents;
}

.mcdane-dog-label a.mcdane-dog-flag {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.mcdane-dog-label a.mcdane-dog-flag--available {
	background-color: var(--wp--preset--color--primary);
}

.mcdane-dog-label a.mcdane-dog-flag--retired {
	background-color: var(--wp--preset--color--muted);
}

.mcdane-dog-label a.mcdane-dog-flag:hover {
	background-color: var(--wp--preset--color--primary-deep);
}

.mcdane-card .mcdane-dog-flags {
	position: absolute;
	top: 1rem;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
}

.mcdane-card .mcdane-dog-flag {
	border-radius: 0 2px 2px 0;
	box-shadow: 0 6px 16px -8px rgba(28, 25, 23, 0.6);
}

/* Placeholder for posts with no featured image yet, so grids stay even. */
.mcdane-card .wp-block-post-featured-image:empty::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	background: linear-gradient(160deg, var(--wp--preset--color--surface-deep), var(--wp--preset--color--line));
}

/* -------------------------------------------------------------------------
   Hero (front page featured litter)
   ---------------------------------------------------------------------- */
.mcdane-hero {
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.mcdane-hero .wp-block-post-featured-image {
	margin: 0;
}

.mcdane-hero .wp-block-post-featured-image img {
	border-radius: 3px;
}

.mcdane-hero__title {
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.05;
	margin-block: 0.5rem 1rem;
}

/* Read More reads as the hero's call to action, so give it button weight
   without the filled-button heaviness. */
.mcdane-more,
.wp-block-read-more {
	display: inline-block;
	margin-top: 1.5rem;
	padding: 0.85rem 1.75rem;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mcdane-more:hover,
.wp-block-read-more:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
   Search
   ---------------------------------------------------------------------- */
.wp-block-search__input {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 2px;
	padding: 0.75rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-search__input:focus {
	outline: 2px solid var(--wp--preset--color--secondary);
	outline-offset: 1px;
}

/* -------------------------------------------------------------------------
   Status / meta chips
   ---------------------------------------------------------------------- */
.mcdane-chip,
.mcdane-chips a,
.mcdane-chips .mcdane-dog-label__text {
	display: inline-block;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface-deep);
	color: var(--wp--preset--color--primary-deep);
}

/* core/post-terms renders its terms as inline links inside one wrapper, so the
   chip look has to be applied to the links rather than to the block. Set the
   block's separator to a space in the template, or the commas show up between
   the pills. */
.mcdane-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.mcdane-chips a:hover {
	background-color: var(--wp--preset--color--line);
	text-decoration: none;
}

/* The location on a testimonial is optional. The block is always rendered --
   a binding cannot be made conditional -- so hide the empty pill rather than
   leaving a bare coloured lozenge sitting next to the name. */
.mcdane-chip:empty {
	display: none;
}

/* On sand, a sand chip is invisible. Flip it to the card colour there. */
.has-surface-deep-background-color .mcdane-quote .mcdane-chip {
	background-color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
   Testimonial quotes

   Used by archive-testimonial.html, single-testimonial.html, and the homepage
   band. Deliberately not core/quote: these are whole cards with attribution,
   not a quotation inside a flow of prose.
   ---------------------------------------------------------------------- */
.mcdane-quote {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 2rem 2rem 1.75rem;
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 3px;
	position: relative;
}

.mcdane-quote > * {
	margin-block: 0;
}

/* The gold rule and the hanging quote mark, matching .mcdane-rule's vocabulary. */
.mcdane-quote::before {
	content: "\201C";
	position: absolute;
	top: 0.35rem;
	left: 1.25rem;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 4rem;
	line-height: 1;
	color: var(--wp--preset--color--secondary);
	pointer-events: none;
}

.mcdane-quote .mcdane-quote__text,
.mcdane-quote .wp-block-post-content {
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	flex-grow: 1;
}

.mcdane-quote .wp-block-post-excerpt__excerpt {
	margin: 0;
}

/* Attribution: name and location on one line, pushed to the bottom of the card
   so a short quote and a long one still line their names up in a grid. */
.mcdane-quote__by {
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 2px solid var(--wp--preset--color--secondary);
}

.mcdane-quote .wp-block-post-title {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.3;
	margin: 0;
}

.mcdane-quote .wp-block-post-title a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* The single: one quote reading as the page, not as a card in a grid. */
.mcdane-quote.is-style-single {
	border: 0;
	background: transparent;
	padding: 0 0 0 3.5rem;
}

.mcdane-quote.is-style-single::before {
	top: -0.75rem;
	left: 0;
	font-size: 5rem;
}

/* -------------------------------------------------------------------------
   Single-post facts

   A block BINDING always renders its block -- there is no way to express "omit
   this when the field is empty" in the markup. So the empty case is handled
   here instead.
   ---------------------------------------------------------------------- */
.mcdane-health:has(.mcdane-fact a[href=""]) {
	display: none;
}

/* -------------------------------------------------------------------------
   Pedigree / details table
   ---------------------------------------------------------------------- */
.mcdane-details {
	margin: 2.5rem 0;
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
}

.mcdane-details th,
.mcdane-details td {
	padding: 0.85rem 1rem 0.85rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	vertical-align: top;
	text-align: left;
}

.mcdane-details th {
	width: 11rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

.mcdane-details tr:last-child th,
.mcdane-details tr:last-child td {
	border-bottom: 0;
}

@media (max-width: 600px) {
	.mcdane-details th,
	.mcdane-details td {
		display: block;
		width: auto;
		white-space: normal;
	}

	.mcdane-details th {
		border-bottom: 0;
		padding-bottom: 0.15rem;
	}
}

/* -------------------------------------------------------------------------
   Single post layout
   ---------------------------------------------------------------------- */
.mcdane-single-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-bottom: var(--wp--preset--spacing--40);
}

.mcdane-single-header .wp-block-post-title {
	margin-block: 0.35rem 0.75rem;
}

/* -------------------------------------------------------------------------
   Photo hero (the mcdane/photo-hero block, in place of the featured image)

   The slideshow is a scroll-snap track, not a scripted carousel: the arrows and
   thumbnails are anchors to slide ids, so it works with JavaScript off and
   view.js only smooths the movement. Everything here therefore has to hold up
   without that script.

   The aspect ratio and the fit arrive as --mcdane-hero-ratio and
   --mcdane-hero-fit, set inline from the block's attributes, so a template can
   ask for a different shape, or for matting instead of cropping, without a PHP
   change.

   The fit defaults to "cover" -- slides are cropped to the frame. Matting them
   ("contain") was tried and rejected: at 21/9 hardly any photo is that shape,
   so nearly every slide sat in heavy Ink bars. The mat colour is kept for
   whoever sets contain on a taller frame, where the answer flips.
   ---------------------------------------------------------------------- */
/* No margin of its own: it sits in a column beside the title on
   single-litter.html, where a top margin would drop it below the heading it is
   supposed to line up with. The template owns the spacing. */
.mcdane-photo-hero {
	--mcdane-hero-ratio: 21/9;
	--mcdane-hero-fit: cover;
	/* Transparent, so a matted photo sits on whatever the page is rather than
	   in a slab. Ink was tried first and read as heavier than the photo it was
	   framing. Still a variable: a hero on a busy ground may want a real mat,
	   and it costs nothing to leave the hook in. */
	--mcdane-hero-mat: transparent;
}

.mcdane-photo-hero__stage {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	border-radius: 3px;
	/* The thumbnails are the scrollbar here. */
	scrollbar-width: none;
}

.mcdane-photo-hero__stage::-webkit-scrollbar {
	display: none;
}

.mcdane-photo-hero__slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: center;
}

/* The slides are real core/image blocks, so their own margins have to go. */
.mcdane-photo-hero .wp-block-image {
	margin: 0;
}

.mcdane-photo-hero img {
	display: block;
	width: 100%;
	aspect-ratio: var(--mcdane-hero-ratio);
	object-fit: var(--mcdane-hero-fit);
	/* Only ever visible when a template asks for contain -- cover fills the
	   frame. Transparent by default; see --mcdane-hero-mat above. */
	background-color: var(--mcdane-hero-mat);
	border-radius: 3px;
}

/* A caption sits over the foot of its own slide, not under the whole stage,
   which would shift every slide as the taller one scrolled past. */
.mcdane-photo-hero__slide figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 2.5rem 1.25rem 0.85rem;
	background-image: var(--wp--preset--gradient--image-veil);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: left;
}

.mcdane-photo-hero__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.82);
	color: var(--wp--preset--color--contrast);
	opacity: 0;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

.mcdane-photo-hero__nav--prev {
	left: var(--wp--preset--spacing--20);
}

.mcdane-photo-hero__nav--next {
	right: var(--wp--preset--spacing--20);
}

.mcdane-photo-hero:hover .mcdane-photo-hero__nav,
.mcdane-photo-hero__nav:focus-visible {
	opacity: 1;
}

.mcdane-photo-hero__nav:hover {
	background-color: var(--wp--preset--color--base);
}

/* Touch has no hover to reveal them with. */
@media (hover: none) {
	.mcdane-photo-hero__nav {
		opacity: 1;
	}
}

.mcdane-photo-hero__thumbs {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--20);
	overflow-x: auto;
	scrollbar-width: thin;
}

.mcdane-photo-hero__thumb {
	flex: 0 0 auto;
	line-height: 0;
	border-radius: 3px;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.2s ease, opacity 0.2s ease;
	opacity: 0.55;
}

/* Thumbnails always crop, whatever the stage does. At this size a matted
   thumbnail is mostly mat, and a row of ragged little frames reads as a
   mistake; cropped ones line up. */
.mcdane-photo-hero__thumb img {
	width: 5.5rem;
	height: 3.5rem;
	object-fit: cover;
	background-color: transparent;
	border-radius: 3px;
	aspect-ratio: auto;
}

.mcdane-photo-hero__thumb:hover,
.mcdane-photo-hero__thumb:focus-visible {
	opacity: 1;
}

.mcdane-photo-hero__thumb.is-current {
	opacity: 1;
	outline-color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
   Litter puppies (the mcdane/litter-puppies block, on single-litter.html)

   One section per puppy: name, description, then a strip of photos that
   scrolls sideways. The strip is a native scroller, so it swipes and has a
   scrollbar with no script at all; view.js only reveals the two arrows.

   Photos keep their own shape. They share a HEIGHT, not a frame, so nothing is
   cropped or matted and the lightbox -- which rebuilds the displayed shape --
   opens the whole photograph.
   ---------------------------------------------------------------------- */
.mcdane-litter-puppies {
	padding-bottom: var(--wp--preset--spacing--60);
}

.mcdane-puppy {
	margin-top: var(--wp--preset--spacing--50);
	/* These are link targets -- the details table and a puppy's old /dogs/ URL
	   both point here -- and the header is sticky. */
	scroll-margin-top: 7rem;
}

.mcdane-puppy + .mcdane-puppy {
	padding-top: var(--wp--preset--spacing--50);
	border-top: 1px solid var(--wp--preset--color--line);
}

.mcdane-puppy__name {
	margin: 0;
}

.mcdane-puppy__bio {
	max-width: 46rem;
	margin-top: var(--wp--preset--spacing--20);
}

/* A group that held only the gallery is left behind as an empty box. */
.mcdane-puppy__bio > :empty {
	display: none;
}

.mcdane-puppy__photos {
	position: relative;
	margin-top: var(--wp--preset--spacing--30);
}

.mcdane-puppy__strip {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding-bottom: 0.5rem;
}

.mcdane-puppy__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

/* The photos are real core/image blocks, so their own margins have to go. */
.mcdane-puppy__strip .wp-block-image {
	position: relative;
	margin: 0;
}

.mcdane-puppy__strip .wp-block-image img {
	display: block;
	width: auto;
	max-width: none;
	height: clamp(11rem, 24vw, 17rem);
	border-radius: 3px;
}

/* Over the foot of its own photo, as in the hero: a caption underneath would
   make the captioned photos taller than their neighbours. */
.mcdane-puppy__strip figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 2rem 0.85rem 0.6rem;
	background-image: var(--wp--preset--gradient--image-veil);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-small);
	text-align: left;
	border-radius: 0 0 3px 3px;
}

.mcdane-puppy__nav {
	position: absolute;
	top: calc(50% - 0.25rem);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.88);
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 1px 4px rgba(28, 25, 23, 0.25);
	cursor: pointer;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* display:flex above would otherwise defeat the attribute. */
.mcdane-puppy__nav[hidden] {
	display: none;
}

.mcdane-puppy__nav--prev {
	left: var(--wp--preset--spacing--20);
}

.mcdane-puppy__nav--next {
	right: var(--wp--preset--spacing--20);
}

.mcdane-puppy__nav:hover {
	background-color: var(--wp--preset--color--base);
}

/* At either end of the strip there is nothing further that way. */
.mcdane-puppy__nav:disabled {
	opacity: 0;
	pointer-events: none;
}

/* On a phone the strip becomes a slider: one photo at a time, swiped, each
   stopping in the middle. Still the same native scroller -- only the slide
   width and the snapping change, so it needs no more script than the strip.

   Every slide is the same size, so the slider does not change height between
   a portrait and a landscape photo. The photo sits whole inside it, at its own
   shape: the figure shrinks to fit the image, which keeps the caption on the
   photo and gives the lightbox the real shape to enlarge. The slide is a
   little narrower than the strip so the next photo shows at the edge. */
@media (max-width: 600px) {
	.mcdane-puppy__strip {
		gap: var(--wp--preset--spacing--20);
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		padding-bottom: 0;
	}

	.mcdane-puppy__strip::-webkit-scrollbar {
		display: none;
	}

	.mcdane-puppy__slide {
		flex: 0 0 88%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20rem;
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}

	.mcdane-puppy__strip .wp-block-image {
		max-width: 100%;
		max-height: 100%;
	}

	.mcdane-puppy__strip .wp-block-image img {
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 20rem;
	}

	.mcdane-puppy__nav {
		top: 50%;
	}
}

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
.mcdane-footer {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

.mcdane-footer h2,
.mcdane-footer h3,
.mcdane-footer h4 {
	color: var(--wp--preset--color--base);
}

.mcdane-footer a {
	color: var(--wp--preset--color--surface-deep);
}

.mcdane-footer a:hover {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.mcdane-footer .mcdane-footer__fine {
	font-size: var(--wp--preset--font-size--x-small);
	color: #a9a09a;
	border-top: 1px solid rgba(250, 246, 240, 0.14);
	padding-top: var(--wp--preset--spacing--30);
}

/* -------------------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------------- */
.wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

.wp-block-query-pagination .page-numbers.current {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
   Motion
   ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mcdane-card,
	.mcdane-card .wp-block-post-featured-image img,
	.mcdane-nav .wp-block-navigation-item__content::after {
		transition: none;
	}

	.mcdane-card:hover {
		transform: none;
	}

	.mcdane-card:hover .wp-block-post-featured-image img {
		transform: none;
	}

	/* view.js already drops to an instant scroll; this covers the anchor
	   fallback, where the browser is doing the scrolling. */
	.mcdane-photo-hero__stage {
		scroll-behavior: auto;
	}

	.mcdane-photo-hero__nav,
	.mcdane-photo-hero__thumb,
	.mcdane-puppy__nav {
		transition: none;
	}
}