/*
Theme Name: Clinova
Theme URI: https://tanchev.net/themes/clinova-theme/
Author: tanchev.net
Author URI: https://tanchev.net/
Description: Warm, photograph-led block theme for dental practices, medical clinics and health centres. Built for dentists, doctors, physiotherapy, dermatology, chiropractic and veterinary websites, with patterns for treatments, team credentials, opening hours, insurance details, FAQ and appointment calls to action.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clinova
Tags: blog, one-column, block-patterns, block-styles, style-variations, full-site-editing, template-editing, wide-blocks, custom-logo, featured-images, editor-style, threaded-comments, translation-ready
*/

/*
Clinova WordPress Theme, Copyright (C) 2026 tanchev.net

Clinova is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.

Clinova is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

/*
 * Clinova keeps its design system in theme.json.
 * Only rules that theme.json cannot express live here.
 */

/* -------------------------------------------------- *
 * 1. Skip link — visible on keyboard focus
 * -------------------------------------------------- */

.skip-link.screen-reader-text {
	background-color: var( --wp--preset--color--base );
	border-radius: var( --wp--custom--radius--small );
	box-shadow: 0 0 0 2px var( --wp--preset--color--primary );
	color: var( --wp--preset--color--primary );
	display: block;
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	left: 6px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: -1000em;
	width: auto;
	z-index: 100000;
}

.skip-link.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	height: auto;
	left: 6px;
	top: 6px;
	width: auto;
	outline-offset: 0;
}

/* -------------------------------------------------- *
 * 2. Focus visibility on every interactive element
 * -------------------------------------------------- */

:where( a, button, input, select, textarea, summary, [tabindex] ):focus-visible {
	outline: var( --wp--custom--focus--width ) solid var( --wp--preset--color--primary );
	outline-offset: var( --wp--custom--focus--offset );
	text-decoration: none;
}

/* On dark sections the Primary outline would be invisible — flip it. */
.has-deep-background-color :where( a, button, input, summary ):focus-visible,
.has-primary-background-color :where( a, button, input, summary ):focus-visible,
.clinova-on-dark :where( a, button, input, summary ):focus-visible {
	outline-color: var( --wp--preset--color--base );
}

/* -------------------------------------------------- *
 * 3. Block styles registered in functions.php
 * -------------------------------------------------- */

/* Group: Soft card */
.wp-block-group.is-style-clinova-card {
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: var( --wp--custom--radius--large );
	padding: var( --wp--preset--spacing--40 );
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.wp-block-group.is-style-clinova-card:hover {
	box-shadow: var( --wp--preset--shadow--lifted );
	transform: translateY( -3px );
}

/* Group: Panel — flat tinted block with no hover motion */
.wp-block-group.is-style-clinova-panel {
	background-color: var( --wp--preset--color--surface );
	border-radius: var( --wp--custom--radius--large );
	padding: var( --wp--preset--spacing--40 );
}

/* List: Checklist */
.wp-block-list.is-style-clinova-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-clinova-check li {
	padding-left: 1.9rem;
	position: relative;
	margin-bottom: 0.6rem;
}

.wp-block-list.is-style-clinova-check li::before {
	border-bottom: 2px solid currentColor;
	border-left: 2px solid currentColor;
	color: var( --wp--preset--color--primary );
	content: "";
	height: 0.4em;
	left: 0.25rem;
	position: absolute;
	top: 0.42em;
	transform: rotate( -45deg );
	width: 0.75em;
}

.has-base-color .wp-block-list.is-style-clinova-check li::before,
.clinova-on-dark .wp-block-list.is-style-clinova-check li::before {
	color: var( --wp--preset--color--gold );
}

/* Heading / paragraph: Eyebrow — a small uppercase kicker above a section title */
.wp-block-heading.is-style-clinova-eyebrow,
p.is-style-clinova-eyebrow {
	color: var( --wp--preset--color--primary );
	font-family: var( --wp--preset--font-family--heading );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 700;
	letter-spacing: var( --wp--custom--letter-spacing--eyebrow );
	margin-bottom: 0.75rem;
	text-transform: uppercase;
}

/* Separator: Diamond rule — a centred rule with a rotated square */
.wp-block-separator.is-style-clinova-diamond {
	background: none;
	border: none;
	height: auto;
	max-width: 220px;
	position: relative;
	text-align: center;
}

.wp-block-separator.is-style-clinova-diamond::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: 1px;
	opacity: 0.35;
	width: 100%;
}

.wp-block-separator.is-style-clinova-diamond::after {
	background-color: var( --wp--preset--color--gold );
	content: "";
	height: 8px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate( -50%, -50% ) rotate( 45deg );
	width: 8px;
}

/* -------------------------------------------------- *
 * 4. Small refinements theme.json cannot reach
 * -------------------------------------------------- */

/*
 * Initials monogram used by the team pattern in place of a portrait, so the
 * pattern is useful before a practice has photographs of its staff.
 * Marked aria-hidden in the markup — the name follows it as real text.
 */
.clinova-monogram {
	align-items: center;
	background-color: var( --wp--preset--color--primary );
	border-radius: var( --wp--custom--radius--pill );
	color: var( --wp--preset--color--base );
	display: flex;
	flex: 0 0 auto;
	font-family: var( --wp--preset--font-family--heading );
	/* Fixed, not a fluid preset: the fluid `large` size grows wide enough that a
	   two-letter monogram of wide glyphs (MO, WM) wrapped and overflowed the disc. */
	font-size: 1.25rem;
	font-weight: 700;
	height: 64px;
	justify-content: center;
	letter-spacing: 0.03em;
	line-height: 1;
	/* Never let the initials wrap inside the fixed-width disc. */
	white-space: nowrap;
	width: 64px;
}

.clinova-monogram.is-small {
	font-size: 0.875rem;
	height: 40px;
	width: 40px;
}

/* Keep the mobile navigation overlay legible and comfortable. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding-top: var( --wp--preset--spacing--50 );
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var( --wp--preset--font-size--large );
}

/* Submenus open on keyboard focus as well as hover. */
.wp-block-navigation .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
	opacity: 1;
	visibility: visible;
}

/* Comment list indentation for threaded replies. */
.wp-block-comment-template .wp-block-comment-template {
	border-left: 2px solid var( --wp--preset--color--line );
	margin-left: 0;
	padding-left: var( --wp--preset--spacing--30 );
}

/*
 * Images inside patterns should never overflow their rounded frame. Covers are
 * deliberately excluded: a full-width photographic cover has to break out of
 * the constrained content measure, and clamping it leaves white gutters.
 */
.wp-block-image img {
	max-width: 100%;
}

/* -------------------------------------------------- *
 * 4b. Design vocabulary carried over from the source
 *     design: icon tiles, pills, glass stat cards.
 * -------------------------------------------------- */

.clinova-icon {
	display: block;
	flex: 0 0 auto;
}

/* Icon tile — the source uses a 48px rounded square tinted at ~9% of the
   icon colour, with the icon at 24px inside it. */
.clinova-icon-tile {
	align-items: center;
	/* Fallback for browsers without color-mix. */
	background-color: var( --wp--preset--color--mist );
	/* Tint derived from the icon colour, as the source does, so the tile stays
	   visible on every card tint and adapts to each style variation. */
	background-color: color-mix( in srgb, currentColor 14%, transparent );
	border-radius: 0.75rem;
	color: var( --wp--preset--color--primary );
	display: flex;
	height: 48px;
	justify-content: center;
	margin-bottom: 1rem;
	/* Constrained layout centres block children; keep tiles on the left. */
	margin-inline-end: auto;
	margin-inline-start: 0;
	width: 48px;
}

.clinova-icon-tile.is-gold {
	background-color: var( --wp--preset--color--surface-warm );
	background-color: color-mix( in srgb, currentColor 16%, transparent );
	color: var( --wp--preset--color--accent );
}

.clinova-icon-tile.is-small {
	border-radius: 0.5rem;
	height: 40px;
	margin-bottom: 0.75rem;
	width: 40px;
}

/*
 * Circular logo mark beside the wordmark, echoing the source's round emblem.
 * Purely decorative and aria-hidden; a site that uploads a custom logo gets the
 * real thing from the Site Logo block sitting immediately before it.
 */
.clinova-logo-mark {
	align-items: center;
	background-color: var( --wp--preset--color--base );
	border-radius: 999px;
	box-shadow: 0 0 0 2px color-mix( in srgb, var( --wp--preset--color--base ) 35%, transparent );
	color: var( --wp--preset--color--primary );
	display: inline-flex;
	flex: 0 0 auto;
	height: 40px;
	justify-content: center;
	width: 40px;
}

/* A site that has uploaded its own logo does not need the stand-in mark. */
.wp-block-site-logo + .clinova-logo-mark {
	display: none;
}

/* Pill — rounded chip used above the hero headline. */
.clinova-pill {
	align-items: center;
	background-color: rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: 0.5rem;
	line-height: 1;
	margin: 0 0 1.5rem;
	padding: 0.5rem 1rem;
}

.clinova-pill .clinova-icon {
	color: var( --wp--preset--color--gold );
}

/* Star rating row inside the hero pill, as the source has it. */
.clinova-pill .clinova-stars {
	color: var( --wp--preset--color--gold );
	gap: 0.0625rem;
}

/* Inline check-marked badges under the hero paragraph. */
.clinova-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.clinova-badges li {
	align-items: center;
	color: rgba( 255, 255, 255, 0.92 );
	display: flex;
	font-size: 0.875rem;
	font-weight: 500;
	gap: 0.5rem;
}

.clinova-badges .clinova-icon {
	color: var( --wp--preset--color--gold );
}

/* Glass stats card sitting beside the hero copy. */
.clinova-stats {
	/* Deep enough that white and Blush text clear AA over the brightest region
	   of the hero photograph now that the veil lets the picture through.
	   Derived from the palette so every style variation gets its own tint. */
	background-color: rgba( 0, 0, 0, 0.36 );
	background-color: color-mix( in srgb, var( --wp--preset--color--deep ) 42%, transparent );
	border: 1px solid rgba( 255, 255, 255, 0.22 );
	border-radius: 1rem;
	margin-left: auto;
	max-width: 20rem;
	padding: 2rem;
}

.clinova-stat {
	text-align: center;
}

.clinova-stat + .clinova-stat {
	border-top: 1px solid rgba( 255, 255, 255, 0.18 );
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

.clinova-stat b {
	color: var( --wp--preset--color--tint );
	display: block;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 0.25rem;
}

.clinova-stat span {
	color: rgba( 255, 255, 255, 0.88 );
	font-size: 0.875rem;
	font-weight: 500;
}

/* Icon-marked list, used where the source marks items with a Lucide glyph. */
.clinova-icon-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.clinova-icon-list li {
	align-items: flex-start;
	color: var( --wp--preset--color--body );
	display: flex;
	font-size: 0.875rem;
	gap: 0.6rem;
	line-height: 1.6;
	margin-bottom: 0.6rem;
}

.clinova-icon-list .clinova-icon {
	color: var( --wp--preset--color--primary );
	margin-top: 0.2em;
}

/* Chevron marker on each FAQ question, rotating when the answer opens. */
.wp-block-details summary {
	align-items: center;
	display: flex;
	gap: 0.6rem;
}

.wp-block-details summary .clinova-icon {
	color: var( --wp--preset--color--primary );
	transition: transform 0.2s ease;
}

.wp-block-details[open] summary .clinova-icon {
	transform: rotate( 90deg );
}

@media ( prefers-reduced-motion: reduce ) {

	.wp-block-details summary .clinova-icon {
		transition: none;
	}
}

/* Icon + text row, used for contact details and opening hours. */
.clinova-row {
	align-items: flex-start;
	display: flex;
	gap: 0.875rem;
}

.clinova-row .clinova-icon {
	color: var( --wp--preset--color--primary );
	margin-top: 0.15rem;
}

.clinova-row strong {
	color: var( --wp--preset--color--ink );
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
}

.clinova-row small {
	color: var( --wp--preset--color--body );
	font-size: 0.8125rem;
	line-height: 1.5;
}

/* Button icons, drawn with a masked data URI so no request is made and the
   glyph inherits the button's text colour. */
.clinova-btn-arrow .wp-block-button__link::after,
.clinova-btn-phone .wp-block-button__link::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1em;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	vertical-align: -0.15em;
	width: 1em;
}

.clinova-btn-arrow .wp-block-button__link::after {
	margin-left: 0.5rem;
	mask-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>' );
}

.clinova-btn-phone .wp-block-button__link::before {
	margin-right: 0.5rem;
	mask-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>' );
}

/* Contact detail cards — white cards on the tinted section, as in the source. */
.clinova-contact-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat( auto-fit, minmax( 14rem, 1fr ) );
}

.clinova-contact-card {
	background-color: var( --wp--preset--color--base );
	border: 1px solid var( --wp--preset--color--line );
	border-radius: 16px;
	padding: 1.25rem;
}

.clinova-contact-label {
	color: var( --wp--preset--color--body );
	display: block;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-bottom: 0.35rem;
	text-transform: uppercase;
}

.clinova-contact-card strong {
	color: var( --wp--preset--color--ink );
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.45;
}

.clinova-contact-card small {
	color: var( --wp--preset--color--body );
	display: block;
	font-size: 0.75rem;
	line-height: 1.55;
	margin-top: 0.35rem;
}

/* Two-up grid of icon-led supporting points in the about section. */
.clinova-quality-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
}

.clinova-quality h3 {
	color: var( --wp--preset--color--ink );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 0.25rem;
}

.clinova-quality p {
	color: var( --wp--preset--color--body );
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0;
}

/* Hero body copy is capped at the source's max-w-lg measure. */
.clinova-measure {
	max-width: 32rem;
}

/* The source sets text-balance on its hero and section headlines. */
.clinova-hero h1,
.clinova-hero .wp-block-heading {
	text-wrap: balance;
}

/* Phone link in the header. Template parts are HTML, so the glyph comes from a
   masked data URI rather than the PHP icon helper. */
.clinova-phone-link a::before {
	background-color: currentColor;
	content: "";
	display: inline-block;
	height: 1em;
	margin-right: 0.5rem;
	mask-image: url( 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384"/></svg>' );
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	vertical-align: -0.15em;
	width: 1em;
}

/* The header sits on the same deep field as the hero so the two merge, the way
   the source's transparent header sits over its hero image. */
.clinova-header .wp-block-site-title a {
	color: var( --wp--preset--color--base );
	text-decoration: none;
}

.clinova-header .wp-block-site-title a:hover,
.clinova-header .wp-block-site-title a:focus {
	color: var( --wp--preset--color--gold );
}

.clinova-header .wp-block-site-tagline {
	color: rgba( 255, 255, 255, 0.65 );
}

.clinova-header .wp-block-navigation a {
	color: rgba( 255, 255, 255, 0.9 );
	text-decoration: none;
}

.clinova-header .wp-block-navigation a:hover,
.clinova-header .wp-block-navigation a:focus {
	color: #fff;
	text-decoration: underline;
}

.clinova-header .wp-block-site-logo img {
	border-radius: 999px;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, 0.35 );
}

/* Star row used in testimonial cards. */
.clinova-stars {
	color: var( --wp--preset--color--gold );
	display: flex;
	gap: 0.125rem;
}

.clinova-stars .clinova-icon {
	fill: currentColor;
}

/* Centred rating row above the testimonial cards, as the source has. */
.clinova-stars.is-centred {
	justify-content: center;
	margin-bottom: 0.25rem;
}

/* Oversized quotation mark at the top of a testimonial card. */
.clinova-quote {
	color: var( --wp--preset--color--primary );
	opacity: 0.22;
}

/* -------------------------------------------------- *
 * 4c. Photography — frames, floating cards and the photo grid.
 *     The source design is photograph-led: a full-bleed hero image under a
 *     directional veil, a portrait in a rounded card with an overlapping
 *     caption badge, a small floating clinic tile, and a masonry-ish grid.
 * -------------------------------------------------- */

/*
 * The source's navbar is transparent and sits directly on the hero photograph.
 * Where a page opens with the photo hero, take the header out of the flow and
 * lay it over the cover, so no band of page background appears between them.
 * Every other template keeps the header as a solid band in normal flow.
 */
.wp-site-blocks:has( > main > .clinova-hero:first-child ) {
	position: relative;
}

.wp-site-blocks:has( > main > .clinova-hero:first-child ) > header.wp-block-template-part {
	inset-block-start: 0;
	inset-inline: 0;
	position: absolute;
	z-index: 5;
}

.wp-site-blocks:has( > main > .clinova-hero:first-child ) > main {
	margin-block-start: 0;
}

/* Preset background classes are !important, so this has to be too. */
.wp-site-blocks:has( > main > .clinova-hero:first-child ) > header .clinova-header {
	background-color: transparent !important;
}

/*
 * A short scrim under the transparent header keeps the navigation legible over
 * the bright parts of a photograph without darkening the whole hero.
 */
.clinova-hero > .wp-block-cover__background::after {
	background-image: linear-gradient( 180deg, rgba( 0, 0, 0, 0.35 ) 0%, rgba( 0, 0, 0, 0 ) 100% );
	content: "";
	height: 9rem;
	inset-block-start: 0;
	inset-inline: 0;
	position: absolute;
}

/* Rounded, shadowed frame that a photograph and its overlays sit inside. */
.clinova-photo-frame {
	margin-inline: auto;
	/* The source caps its portrait at Tailwind's max-w-md. */
	max-width: 28rem;
	position: relative;
}

.clinova-photo-frame.is-wide {
	max-width: none;
}

.clinova-photo-frame .wp-block-image {
	margin-bottom: 0;
}

.clinova-photo-frame .wp-block-image img {
	border-radius: 20px;
	box-shadow: var( --wp--preset--shadow--lifted );
	display: block;
	width: 100%;
}

/*
 * Caption badge overlapping the foot of the portrait, as the source does.
 * Deep at 88% keeps white text well clear of AA over any photograph beneath.
 */
.clinova-photo-badge {
	background-color: rgba( 0, 0, 0, 0.8 );
	background-color: color-mix( in srgb, var( --wp--preset--color--deep ) 88%, transparent );
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	border-radius: 12px;
	bottom: 1.25rem;
	inset-inline: 1.25rem;
	padding: 0.875rem 1rem;
	position: absolute;
}

.clinova-photo-badge strong {
	color: #fff;
	display: block;
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
}

.clinova-photo-badge span {
	color: rgba( 255, 255, 255, 0.85 );
	display: block;
	font-size: 0.8125rem;
	margin-top: 0.15rem;
}

/* Small photograph floating over the edge of the main one. */
.clinova-photo-float {
	border: 4px solid var( --wp--preset--color--base );
	border-radius: 12px;
	box-shadow: var( --wp--preset--shadow--lifted );
	display: none;
	inset-inline-end: -2rem;
	overflow: hidden;
	position: absolute;
	top: 3rem;
	width: 12rem;
}

.clinova-photo-float img {
	aspect-ratio: 4 / 3;
	display: block;
	/* Without this the width/height attributes give the image a definite height
	   and the aspect-ratio above is ignored entirely. */
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* White card floating over the corner of a hero photograph. */
.clinova-float-card {
	background-color: var( --wp--preset--color--base );
	border-radius: 14px;
	bottom: -1.25rem;
	box-shadow: var( --wp--preset--shadow--lifted );
	inset-inline-start: -1.25rem;
	max-width: 15rem;
	padding: 1rem 1.125rem;
	position: absolute;
}

.clinova-float-card .clinova-row {
	margin-bottom: 0;
}

/*
 * Below the two-column breakpoint there is no edge left to overlap, so the
 * cards drop into the flow beneath the photograph rather than disappearing.
 */
@media ( max-width: 781px ) {

	.clinova-float-card {
		inset: auto;
		margin-top: 1rem;
		max-width: none;
		position: static;
	}
}

@media ( min-width: 782px ) {

	.clinova-photo-float {
		display: block;
	}
}

/*
 * Photo grid. The first tile is taller and spans both rows, matching the
 * source's featured-first arrangement; the remaining four fill a 3x2 grid.
 */
.clinova-photo-grid > .wp-block-image {
	margin: 0;
}

.clinova-photo-grid > .wp-block-image img {
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	display: block;
	/* See the note on .clinova-photo-float img — the width/height attributes
	   would otherwise make the height definite and cancel the aspect ratio. */
	height: auto;
	object-fit: cover;
	width: 100%;
}

.clinova-photo-grid > .wp-block-image:first-child {
	grid-row: span 2;
	height: 100%;
}

.clinova-photo-grid > .wp-block-image:first-child img {
	aspect-ratio: auto;
	height: 100%;
}

/* Two columns on narrow screens, as the source does below its sm breakpoint. */
@media ( max-width: 599px ) {

	.clinova-photo-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) ) !important;
	}
}

/* Round avatar beside a testimonial attribution. */
.clinova-avatar img {
	border-radius: 999px;
	height: 40px;
	object-fit: cover;
	width: 40px;
}

.clinova-avatar {
	flex: 0 0 auto;
	margin: 0;
}

/* -------------------------------------------------- *
 * 5. Motion preferences
 * -------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {

	.wp-block-group.is-style-clinova-card,
	.wp-block-group.is-style-clinova-card:hover {
		transform: none;
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * Remove core's root-level block gap entirely.
 *
 * Core applies `:where(.wp-site-blocks) > * { margin-block-start: 1.25rem }`.
 * Every band in this theme carries its own padding, so that gap only ever shows
 * as a strip of page background — under the header, and above the footer where
 * it cuts a white line beneath the closing call to action.
 * -------------------------------------------------------------------------- */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* --------------------------------------------------------------------------
 * Section stack: full-bleed bands butt directly against each other.
 *
 * Core spaces layout children with `.wp-container-…-is-layout-flow > *`, a class
 * selector — so a bare `main > *` loses on specificity. Match the section element
 * types instead (0,1,1) and win on source order.
 *
 * Deliberately NOT done with blockGap on <main>: that sets an inherited custom
 * property, which also collapsed the spacing INSIDE each section (headings ended
 * up flush against their paragraphs). Sections touch; their contents keep rhythm.
 * -------------------------------------------------------------------------- */
main > .wp-block-group,
main > .wp-block-cover,
main > .wp-block-query,
main > .wp-block-columns,
main > .wp-block-post-content,
main > .wp-block-group > .wp-block-post-content,
.wp-block-post-content > .wp-block-group,
.wp-block-post-content > .wp-block-cover,
.wp-block-post-content > .wp-block-query,
.wp-block-post-content > .wp-block-columns {
	margin-block-start: 0;
	margin-block-end: 0;
}