/*
Theme Name: Avada Child — Crago Performance Horses
Description: Custom child theme for Crago Performance Quarter Horses, Belle Fourche, SD.
Template: Avada
Version: 2.1.0
Text Domain: avada-child-crago
*/

/* ============================================================
   Palette tokens (mirror of Avada Options Colors so child CSS can
   reference them directly without depending on Avada's CSS vars).
   ============================================================ */

:root {
	--crago-bone:    #F4EDE0;
	--crago-ivory:   #FBF7EE;
	--crago-ink:     #1A1410;
	--crago-stone:   #3D3934;
	--crago-rust:    #8B3A1E;
	--crago-leather: #5C3520;
	--crago-oxblood: #5A1A1F;
	--crago-graphite:#2A2F3A;

	--crago-font-display: "Marcellus SC", "Trajan Pro", Georgia, serif;
	--crago-font-body:    "Inter", system-ui, sans-serif;
}

/* ============================================================
   Content centering for Avada wide layout.
   Pairs with Avada Options site_width: 100% (fluid).
   Above 1280px viewport: container caps and centers.
   Below: stays fluid.
   ============================================================ */

.layout-wide-mode .fusion-row {
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.layout-wide-mode .fusion-fullwidth .fusion-row,
.layout-wide-mode .fusion-no-medium-padding .fusion-row,
.layout-wide-mode .fusion-page-title-row,
.layout-wide-mode .fusion-builder-row-full,
.layout-wide-mode .fusion-footer-copyright-area > .fusion-row {
	max-width: none !important;
}

/* ============================================================
   #content full-width when there is no sidebar.
   ============================================================ */

body:not(.has-sidebar) #content,
.page-template-horse-php #content,
.page-template-sale_horse-php #content,
.page-template-broodmare-php #content {
	width: 100% !important;
	float: none !important;
}

/* ============================================================
   Contact Form 7 — cap form width for readability.
   A full-viewport-wide form looks like a survey, not a message.
   ============================================================ */

.wpcf7-form {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.wpcf7-form p {
	margin-bottom: 1.25rem;
}

.wpcf7-form label {
	display: block;
	font-family: var(--crago-font-body);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin-bottom: 0.4rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	max-width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--crago-rule, #E8DCC8);
	background: var(--crago-ivory, #FBF7EE);
	color: var(--crago-ink, #1A1410);
	font-family: var(--crago-font-body);
	font-size: 1rem;
	line-height: 1.4;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: var(--crago-rust, #8B3A1E);
	box-shadow: 0 0 0 2px rgba(139, 58, 30, 0.15);
}

.wpcf7-form textarea {
	min-height: 8rem;
}

.wpcf7-form .wpcf7-submit {
	display: inline-block;
	background: var(--crago-rust, #8B3A1E);
	color: var(--crago-bone, #F4EDE0);
	border: none;
	padding: 0.85rem 2rem;
	font-family: var(--crago-font-body);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s;
}

.wpcf7-form .wpcf7-submit:hover {
	background: var(--crago-leather, #5C3520);
}

/* ============================================================
   Logo wordmark — replaces legacy turquoise composite image
   (cragologo.png / cragoheader2.jpg). Pure-CSS wordmark using the
   palette serif. The original <img> stays in the DOM for screen
   readers and SEO, just visually hidden.
   ============================================================ */

.fusion-logo .fusion-standard-logo,
.fusion-logo .fusion-mobile-logo {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.fusion-logo a,
.fusion-logo .fusion-logo-link,
.fusion-header .fusion-logo a {
	display: inline-block !important;
	text-align: center;
	text-decoration: none !important;
	padding: 0.75rem 1rem;
	line-height: 1;
}

.fusion-logo a::before {
	content: "CRAGO";
	display: block;
	font-family: var(--crago-font-display);
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
	font-weight: 700;
	color: var(--crago-rust);
	letter-spacing: 0.06em;
	line-height: 1;
}

.fusion-logo a::after {
	content: "Chuck, Mary \00B7 Jade \00B7 Performance Horses";
	display: block;
	font-family: var(--crago-font-body);
	font-size: clamp(0.65rem, 0.9vw, 0.78rem);
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin-top: 0.55rem;
}

/* Hide Avada's logo on mobile too — the wordmark scales via clamp(). */
.fusion-logo .fusion-mobile-logo + a::before,
.fusion-logo .fusion-mobile-logo + a::after {
	/* placeholder for any mobile-specific overrides */
}

/* ============================================================
   Home page (post 32) — hero, intro, credibility marquee,
   three-up program cards, heritage strip.
   Built 2026-05-15 with HOME_BRIEF.md.
   ============================================================ */

/* --- Hero --- */
.crago-hero {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
	padding: 0 1rem;
	color: var(--crago-bone);
}
/* Override the column's inline rgba background so the overlay darkens enough
   for the cream text to read against varied photo tones. Tuned twice:
   0.35 was too light (text hard to read), 0.6 was too dark (whole hero muddy).
   0.45 with strong text-shadow below keeps the photo vivid + text legible. */
.crago-hero-col {
	background-color: rgba(26, 20, 16, 0.45) !important;
}
/* Specificity bump: Avada has body-scoped rules on .post-content h1 that set
   color via --h1_color (a darker palette token) and beat single-class selectors.
   Triple-target h1.crago-hero__title + !important to win cleanly. */
.crago-hero h1.crago-hero__title,
.post-content .crago-hero__title,
.crago-hero__title {
	font-family: var(--crago-font-display) !important;
	font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	line-height: 1.05 !important;
	margin: 0 0 1.25rem !important;
	color: #FFFFFF !important;
	/* Triple-stack for max contrast against varied photo tones:
	   tight edge halo (sharp definition) + near drop (separation from bg)
	   + wide soft glow (lifts text off mid-tones like horse coat / grass). */
	text-shadow:
		0 0 4px rgba(0, 0, 0, 0.95),
		0 2px 6px rgba(0, 0, 0, 0.85),
		0 8px 32px rgba(0, 0, 0, 0.7) !important;
}
.crago-hero p.crago-hero__sub,
.post-content .crago-hero__sub,
.crago-hero__sub {
	font-family: var(--crago-font-body) !important;
	font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
	font-weight: 400 !important;
	letter-spacing: 0.02em !important;
	line-height: 1.4 !important;
	margin: 0 0 2rem !important;
	color: #FFFFFF !important;
	text-shadow:
		0 0 3px rgba(0, 0, 0, 0.95),
		0 1px 4px rgba(0, 0, 0, 0.85),
		0 4px 20px rgba(0, 0, 0, 0.6) !important;
}
.crago-hero__cta {
	display: inline-block;
	background: var(--crago-rust);
	color: var(--crago-bone) !important;
	padding: 1rem 2.5rem;
	font-family: var(--crago-font-body);
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 1px solid var(--crago-rust);
	transition: background-color 0.2s, border-color 0.2s;
}
.crago-hero__cta:hover,
.crago-hero__cta:focus {
	background: transparent;
	border-color: var(--crago-bone);
}

/* --- Program intro --- */
.crago-intro {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	font-family: var(--crago-font-body);
	font-size: 1.075rem;
	line-height: 1.65;
	color: var(--crago-stone);
}
.crago-intro p + p {
	margin-top: 1rem;
}
.crago-intro__eyebrow {
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0 0 1.5rem;
}

/* --- Sale Horses futurity nominations section (wraps the grid) --- */
.crago-sale-nominations {
	background: var(--crago-ivory);
	padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
	margin-top: 2rem;
}
.crago-sale-nominations .crago-futurities-section {
	max-width: 1280px;
	margin: 0 auto;
}

/* --- Stallion nominations grid ---
   Static responsive grid. All 14 nominations visible at once for instant
   recognition. 7-wide on desktop = balanced two-row layout; auto-fit
   below 1024px so smaller screens redistribute without breakpoint math. */
.crago-futurities__label {
	text-align: center;
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0 0 2rem;
}
.crago-futurities__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 40px 28px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1rem;
	align-items: center;
	justify-items: center;
}
@media (min-width: 1024px) {
	.crago-futurities__grid {
		grid-template-columns: repeat(7, 1fr);
	}
}
.crago-futurities__item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 72px;
	width: 100%;
	max-width: 160px;
	transition: filter 0.2s ease, transform 0.2s ease;
}
.crago-futurities__item img {
	height: 72px;
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
}
.crago-futurities__item:hover {
	transform: translateY(-2px);
	filter: saturate(1.1);
}
.crago-futurities__plate {
	font-family: var(--crago-font-display);
	font-size: 1.2rem;
	letter-spacing: 0.08em;
	color: var(--crago-leather);
	text-align: center;
	white-space: nowrap;
	line-height: 1.2;
}

/* --- Three-up cards ---
   Avada renders the column as: outer .crago-card div (carries --awb-padding-*
   custom properties that nothing consumes in legacy layout), absolutely-positioned
   .fusion-column-inner-bg span (carries the bg color), and a content wrapper
   .fusion-column-wrapper. Without the rule below, the bg fills the column but the
   text inside .fusion-column-wrapper is flush against the bg edges. */
.crago-card {
	transition: transform 0.2s, box-shadow 0.2s;
}
.crago-card .fusion-column-wrapper,
.crago-card.fusion-builder-column .fusion-column-wrapper,
.fusion-builder-column.crago-card .fusion-column-wrapper.fusion-flex-column-wrapper-legacy {
	padding: 48px 56px !important;
	box-sizing: border-box !important;
}
.crago-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(26, 20, 16, 0.08);
}
.crago-card__title {
	font-family: var(--crago-font-display);
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--crago-ink);
	margin: 0 0 0.75rem;
}
.crago-card__body {
	font-family: var(--crago-font-body);
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--crago-stone);
	margin: 0 0 1.25rem;
}
.crago-card__cta {
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--crago-rust);
}

/* --- Heritage strip (dark band, cream text) --- */
.crago-heritage__inner {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
.crago-heritage__lead {
	font-family: var(--crago-font-body);
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--crago-bone);
	margin: 0;
}

/* ============================================================
   /horses (post 41) — Stallion roster, PC Bronsin legacy,
   Breeding info, Contact CTA strip.
   ============================================================ */

/* --- Stallion roster grid --- */
.crago-stallion-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.crago-stallion-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.crago-stallion-card {
	display: flex;
	flex-direction: column;
	background: var(--crago-bone);
	color: var(--crago-ink);
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
	position: relative; /* anchor point for the stretched-link ::after */
}
.crago-stallion-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(26, 20, 16, 0.12);
}
.crago-stallion-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--crago-stone);
}
.crago-stallion-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.crago-stallion-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--crago-leather), var(--crago-ink));
}
.crago-stallion-card__placeholder-mark {
	font-family: var(--crago-font-display);
	font-size: 1.6rem;
	letter-spacing: 0.06em;
	color: var(--crago-bone);
	text-align: center;
	padding: 0 1rem;
}
.crago-stallion-card__body {
	padding: 28px 32px 32px;
}
.crago-stallion-card__title {
	font-family: var(--crago-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--crago-ink);
	margin: 0 0 0.4rem;
}
.crago-stallion-card__meta {
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0 0 0.6rem;
}
.crago-stallion-card__lineage {
	font-family: var(--crago-font-body);
	font-size: 0.95rem;
	font-style: italic;
	color: var(--crago-stone);
	margin: 0 0 0.85rem;
	line-height: 1.4;
}
.crago-stallion-card__tagline {
	font-family: var(--crago-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--crago-stone);
	margin: 0 0 1.25rem;
}
.crago-stallion-card__cta {
	display: inline-block;
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--crago-rust) !important;
	text-decoration: none !important;
}
/* Stretched-link: ::after on the CTA covers the entire card so clicking
   anywhere on the card triggers the link. CTA must stay non-positioned so
   the ::after looks up the DOM and finds .crago-stallion-card (relative).
   inset:0 fills the entire card; transparent so card content stays visible. */
.crago-stallion-card__cta::after {
	content: '';
	position: absolute;
	inset: 0;
}
.crago-stallion-card__cta:hover {
	color: var(--crago-leather) !important;
}

/* --- PC Bronsin legacy band --- */
.crago-bronsin {
	max-width: 880px;
	margin: 0 auto;
	text-align: center;
}
.crago-bronsin__label {
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0 0 0.5rem;
}
.crago-bronsin__title {
	font-family: var(--crago-font-display);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--crago-ink);
	margin: 0 0 1rem;
}
.crago-bronsin__title a {
	color: var(--crago-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.crago-bronsin__title a:hover {
	border-bottom-color: var(--crago-rust);
}
.crago-bronsin__body {
	font-family: var(--crago-font-body);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--crago-stone);
	margin: 0;
}

/* --- Breeding info section --- */
.crago-breeding {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}
.crago-breeding__title {
	font-family: var(--crago-font-display);
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--crago-ink);
	margin: 0 0 1rem;
}
.crago-breeding__body {
	font-family: var(--crago-font-body);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--crago-stone);
	margin: 0 0 1.5rem;
}
.crago-breeding__cta-line {
	margin: 0;
}
.crago-breeding__cta {
	display: inline-block;
	font-family: var(--crago-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--crago-rust);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	text-decoration: none;
}

/* --- /horses hub — alternating image+text sections ---
   Three full-bleed rows, each with image on one side and copy on the other,
   alternating sides for rhythm. On mobile/tablet, both columns stack with
   image on top regardless of side via CSS order rules. */
.crago-section .fusion-builder-row {
	align-items: stretch;
}
.crago-section__image {
	width: 100%;
	height: 100%;
	min-height: 380px;
	overflow: hidden;
}
.crago-section__image img {
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
	display: block;
}
.crago-section__body {
	max-width: 520px;
	margin: 0 auto;
}
.crago-section__eyebrow {
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0 0 1rem;
}
.crago-section__title {
	font-family: var(--crago-font-display);
	font-size: clamp(1.75rem, 3vw, 2.4rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.15;
	color: var(--crago-ink);
	margin: 0 0 1.25rem;
}
.crago-section__copy {
	font-family: var(--crago-font-body);
	font-size: 1.05rem;
	line-height: 1.65;
	color: var(--crago-stone);
	margin: 0 0 1.75rem;
}
.crago-section__cta {
	display: inline-block;
	font-family: var(--crago-font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--crago-rust);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	text-decoration: none;
}

/* ============================================================
   /hunting (post 15) — species cards + dark-gradient hero.
   ============================================================ */

/* Hero variant: no photo, dark leather→ink gradient. */
.crago-hero-col--hunting {
	background: linear-gradient(135deg, var(--crago-leather) 0%, var(--crago-ink) 100%) !important;
}

.crago-species-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
	max-width: 1280px;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.crago-species-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}
.crago-species-card {
	display: flex;
	flex-direction: column;
	background: var(--crago-bone);
	color: var(--crago-ink);
	overflow: hidden;
}
.crago-species-card__image {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--crago-stone);
}
.crago-species-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.crago-species-card__image--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--crago-leather), var(--crago-ink));
}
.crago-species-card__placeholder-mark {
	font-family: var(--crago-font-display);
	font-size: 1.8rem;
	letter-spacing: 0.06em;
	color: var(--crago-bone);
	text-align: center;
	padding: 0 1rem;
}
.crago-species-card__body {
	padding: 28px 32px 32px;
}
.crago-species-card__name {
	font-family: var(--crago-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--crago-ink);
	margin: 0 0 0.4rem;
}
.crago-species-card__tagline {
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0 0 1rem;
}
.crago-species-card__copy {
	font-family: var(--crago-font-body);
	font-size: 0.98rem;
	line-height: 1.6;
	color: var(--crago-stone);
	margin: 0;
}

/* ============================================================
   /cattle (post 14) — essay layout + pull-quote.
   Single readable column for personal writing — cards/grids would
   feel transactional for storytelling content.
   ============================================================ */

.crago-essay {
	max-width: 680px;
	margin: 0 auto;
	font-family: var(--crago-font-body);
	font-size: 1.075rem;
	line-height: 1.75;
	color: var(--crago-stone);
}
.crago-essay p {
	margin: 0 0 1.25rem;
}
.crago-essay__lead {
	font-size: 1.2rem !important;
	line-height: 1.65 !important;
	color: var(--crago-ink) !important;
	margin-bottom: 1.5rem !important;
}
.crago-essay__subhead {
	font-family: var(--crago-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--crago-ink);
	margin: 2.5rem 0 0.75rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--crago-rule, #E8DCC8);
}

/* ============================================================
   /our-family — cream hero variant + profile-card sections.
   Designed around low-res / portrait source images: photo column
   capped so images never upscale beyond their native size.
   ============================================================ */

/* Hero variant — clean bone background, dark serif title. */
.crago-hero-col--family {
	background-color: var(--crago-bone) !important;
	background-image: none !important;
}
.crago-hero-col--family .crago-hero__title,
.crago-hero-col--family h1.crago-hero__title {
	color: var(--crago-ink) !important;
	text-shadow: none !important;
}
.crago-hero-col--family .crago-hero__sub,
.crago-hero-col--family p.crago-hero__sub {
	color: var(--crago-leather) !important;
	text-shadow: none !important;
}

/* Mary's intro — Chuck & Mary photo alongside her voice text */
.crago-family-intro {
	display: grid;
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
	padding: 2rem 0;
}
.crago-family-intro__photo {
	width: 100%;
}
.crago-family-intro__photo img {
	width: 100%;
	max-width: 320px;
	height: auto;
	display: block;
}
.crago-family-intro__body {
	font-family: var(--crago-font-body);
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--crago-stone);
}
.crago-family-intro__body p {
	margin: 0 0 1rem;
}
@media (max-width: 720px) {
	.crago-family-intro {
		grid-template-columns: 1fr;
		gap: 1.5rem;
		text-align: center;
	}
	.crago-family-intro__photo {
		max-width: 280px;
		margin: 0 auto;
	}
	.crago-family-intro__body {
		text-align: left;
	}
}

/* Family branch profile-card sections — photo cap, no crop, alternating */
.crago-family-section {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
	align-items: center;
	max-width: 1080px;
	margin: 0 auto;
	padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}
.crago-family-section--reverse {
	grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
}
.crago-family-section--reverse .crago-family-section__photo {
	order: 2;
}
.crago-family-section--reverse .crago-family-section__body {
	order: 1;
}
.crago-family-section__photo {
	width: 100%;
}
.crago-family-section__photo img {
	width: 100%;
	max-width: 360px;
	height: auto;
	display: block;
	/* Width:100% inside a 360px-max column = sharp downscale for big sources,
	   and at most a few % upscale for tiny ones (Courtney's 318px → 360 is
	   13%, barely perceptible). No object-fit, no crop. */
}
.crago-family-section__body {
	min-width: 0;
}
@media (max-width: 720px) {
	.crago-family-section,
	.crago-family-section--reverse {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.crago-family-section--reverse .crago-family-section__photo,
	.crago-family-section--reverse .crago-family-section__body {
		order: initial;
	}
	.crago-family-section__photo {
		max-width: 320px;
		margin: 0 auto;
	}
	.crago-family-section__body {
		text-align: left;
	}
}

/* --- /our-family roots band (heritage + show history) --- */
.crago-roots {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.crago-roots__eyebrow {
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0 0 0.75rem;
}
.crago-roots__title {
	font-family: var(--crago-font-display);
	font-size: clamp(2rem, 3.5vw, 2.6rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--crago-ink);
	margin: 0 0 1.5rem;
}
.crago-roots__subhead {
	font-family: var(--crago-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--crago-ink);
	margin: 2.5rem 0 1rem;
}
.crago-roots__body {
	font-family: var(--crago-font-body);
	font-size: 1.05rem;
	line-height: 1.7;
	color: var(--crago-stone);
	margin: 0 0 1rem;
	text-align: left;
}

/* --- Pull quote (cattle page closing) --- */
.crago-pullquote {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.crago-pullquote__body {
	font-family: var(--crago-font-display);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 400;
	font-style: italic;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--crago-ink);
	margin: 0 0 1.5rem;
}
.crago-pullquote__signoff {
	font-family: var(--crago-font-body);
	font-size: 1.1rem;
	line-height: 1.55;
	color: var(--crago-stone);
	margin: 0 0 1.25rem;
}
.crago-pullquote__attrib {
	font-family: var(--crago-font-body);
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0;
}

/* --- Contact CTA strip (dark band, single phone line) --- */
.crago-contact-strip__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
	color: var(--crago-bone);
}
.crago-contact-strip__label {
	font-family: var(--crago-font-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--crago-leather);
	margin: 0 0 0.8rem;
	filter: brightness(1.6);
}
.crago-contact-strip__phone {
	font-family: var(--crago-font-display);
	font-size: clamp(2rem, 4.5vw, 3.25rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	margin: 0 0 0.3rem;
}
.crago-contact-strip__phone a {
	color: var(--crago-bone);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s;
}
.crago-contact-strip__phone a:hover {
	border-bottom-color: var(--crago-bone);
}
.crago-contact-strip__name {
	font-family: var(--crago-font-body);
	font-size: 0.92rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--crago-bone);
	margin: 0;
}