/* =================================================================
   THE FAMILY BULLIES — STUD DOGS (archive + single)
   A new chapter built on the shared design system (app.css). Reuses the
   tokens, media treatment, icons, glass and motion — but every layout here
   is unique to this page and never repeats a homepage composition.
   ================================================================= */

/* ---------------------------------------------------- Chapter hero */
/* Editorial, single-column and bottom-anchored — deliberately unlike the
   homepage's two-column glass-card hero. */
.studhero{position:relative;min-height:82svh;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden}
.studhero__media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#000}
.studhero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;
	transform:scale(1.08);will-change:transform;animation:studpan 30s ease-in-out infinite alternate}
@keyframes studpan{
	0%{transform:scale(1.08) translate3d(0,0,0)}
	100%{transform:scale(1.14) translate3d(-2.2%,-1.4%,0)}
}
.studhero__grade{position:absolute;inset:0;z-index:1;pointer-events:none;
	background:
		radial-gradient(80% 60% at 20% 90%,rgba(13,74,120,.30),transparent 60%),
		linear-gradient(0deg,rgba(4,5,7,.94) 4%,rgba(4,5,7,.30) 46%,rgba(4,5,7,.55) 100%)}
.studhero__inner{position:relative;z-index:2;width:100%;max-width:1360px;margin-inline:auto;
	padding:0 var(--gutter) clamp(3rem,7vw,5.5rem)}
.studhero__eyebrow{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.2em;
	text-transform:uppercase;color:var(--text-2)}
.studhero__title{font-family:var(--font-display);font-weight:400;line-height:.94;letter-spacing:-.03em;
	font-size:clamp(2.9rem,7.5vw,6.2rem);color:#fff;margin-top:1rem;max-width:16ch;
	text-shadow:0 2px 30px rgba(0,0,0,.35)}
.studhero__lead{margin-top:1.5rem;max-width:44ch;color:var(--text-2);font-size:clamp(1.02rem,1.3vw,1.18rem);
	line-height:1.7;text-shadow:0 1px 14px rgba(0,0,0,.5)}
/* Metadata strip — a thin credentials line unique to this page (not the
   homepage trust grid). */
.studhero__meta{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.4rem;
	padding-top:1.5rem;border-top:1px solid var(--border-strong)}
.studhero__meta span{display:inline-flex;align-items:center;gap:.5rem;color:var(--text-2);
	font-size:.9rem;font-weight:500}
.studhero__meta .msi{font-size:1.15rem;color:var(--accent);opacity:.9}
.studhero__meta i{width:4px;height:4px;border-radius:50%;background:var(--border-strong)}

/* ------------------------------------------- Meet the studs (index) */
/* A numbered editorial index: large portrait beside a story column,
   alternating sides. Reuses .media hover treatment; new composition. */
.studindex{padding-block:clamp(3.5rem,8vw,7rem)}
.studindex__head{max-width:52rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.studrow{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center;
	padding-block:clamp(2.5rem,5vw,4.5rem);border-top:1px solid var(--border)}
.studrow:first-of-type{border-top:0}
.studrow--reverse .studrow__media{order:2}
.studrow__media{aspect-ratio:4/3;border-radius:22px}
.studrow__index{font-family:var(--font-display);font-weight:400;font-size:.9rem;letter-spacing:.14em;
	color:var(--accent)}
.studrow__name{font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;line-height:1;
	font-size:clamp(2.1rem,4.4vw,3.4rem);color:#fff;margin-top:.9rem}
.studrow__char{margin-top:1.2rem;color:var(--text-2);font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.7;max-width:40ch}
/* Trait chips — reuse the icon system, quiet outline pills */
.studrow__traits{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.6rem}
.trait-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;border-radius:999px;
	border:1px solid var(--border-strong);color:var(--text-2);font-size:.82rem;font-weight:500}
.trait-chip .msi{font-size:1rem;color:var(--accent)}
.studrow__link{margin-top:1.8rem}

/* ------------------------------------------ Health / testing chapter */
/* Light architectural cutout for contrast — plain-language testing rows. */
.studhealth{padding-block:clamp(4rem,8vw,7rem)}
.studhealth__grid{margin-top:clamp(2.2rem,4vw,3.4rem);display:grid;grid-template-columns:repeat(3,1fr);
	gap:clamp(1.4rem,2.5vw,2.4rem)}
.htest{padding:1.8rem 1.7rem;border-radius:18px;background:rgba(255,255,255,.5);
	border:1px solid var(--light-border)}
.htest__icon{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
	background:#fff;border:1px solid var(--light-border);color:var(--bronze)}
.htest__icon .msi{font-size:24px}
.htest h3{font-family:var(--font-display);font-weight:500;font-size:1.14rem;margin-top:1.1rem;color:var(--light-ink)}
.htest p{margin-top:.55rem;color:var(--light-ink-2);font-size:.95rem;line-height:1.6}

/* ----------------------------------------- Breeding philosophy panel */
.studphil{padding-block:clamp(4rem,9vw,7.5rem)}
.studphil__inner{max-width:60rem}
.studphil__quote{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;
	font-size:clamp(1.7rem,3.4vw,2.8rem);line-height:1.3;color:#fff}
.studphil__quote em{font-style:normal;color:var(--accent)}
.studphil__by{margin-top:1.8rem;color:var(--text-2)}

/* --------------------------------------------------- Inquiry CTA */
/* A bordered inquiry panel — distinct from the homepage's centered final CTA. */
.studcta{padding-bottom:clamp(4rem,9vw,7rem)}
.studcta__panel{position:relative;overflow:hidden;border-radius:clamp(22px,3vw,32px);
	border:1px solid var(--border-strong);padding:clamp(2.4rem,5vw,4.2rem);
	display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(2rem,4vw,4rem);align-items:center;
	background:linear-gradient(160deg,var(--elevated),var(--surface))}
.studcta__panel::before{content:"";position:absolute;inset:0;pointer-events:none;
	background:radial-gradient(70% 120% at 88% 10%,rgba(32,185,255,.16),transparent 60%)}
.studcta__title{position:relative;font-family:var(--font-display);font-weight:500;letter-spacing:-.025em;
	line-height:1.06;font-size:clamp(2rem,4vw,3.1rem);color:#fff;max-width:16ch}
.studcta__sub{position:relative;margin-top:1rem;color:var(--text-2);font-size:1.05rem;line-height:1.6;max-width:42ch}
.studcta__actions{position:relative;display:flex;flex-direction:column;gap:.9rem;align-items:stretch}
.studcta__actions .btn{justify-content:center}

/* ------------------------------------------------------ Responsive */
@media (max-width:900px){
	.studhealth__grid{grid-template-columns:1fr 1fr}
	.studcta__panel{grid-template-columns:1fr;gap:1.8rem}
}
@media (max-width:760px){
	.studhero{min-height:74svh}
	.studrow{grid-template-columns:1fr;gap:1.6rem}
	.studrow--reverse .studrow__media{order:0}
	.studrow__media{aspect-ratio:16/11}
	.studhealth__grid{grid-template-columns:1fr}
	.studcta__actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
	.studhero__media img{animation:none;transform:scale(1.08)}
}

/* ================================================================
   SINGLE STUD — his own page (step 3). Base styling so the single
   view is coherent the moment a stud is opened; expanded in that step.
   ================================================================ */
.studsingle-hero{position:relative;min-height:70svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.studsingle-hero__media{position:absolute;inset:0;z-index:0;background:#000;overflow:hidden}
.studsingle-hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 36%;transform:scale(1.06);
	animation:studpan 28s ease-in-out infinite alternate}
.studsingle-hero__grade{position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(0deg,rgba(4,5,7,.94) 4%,rgba(4,5,7,.25) 50%,rgba(4,5,7,.5) 100%)}
.studsingle-hero__inner{position:relative;z-index:2;width:100%;max-width:1200px;margin-inline:auto;
	padding:0 var(--gutter) clamp(2.5rem,6vw,4.5rem)}
.studsingle-hero__name{font-family:var(--font-display);font-weight:400;letter-spacing:-.03em;line-height:.95;
	font-size:clamp(2.8rem,7vw,5.6rem);color:#fff}
.studsingle-hero__meta{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;color:var(--text-2);font-size:.92rem}
.studsingle-body{padding-block:clamp(3.5rem,7vw,6rem)}
.studsingle-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.studsingle-story{color:var(--text-2);font-size:1.08rem;line-height:1.8}
.studsingle-story p{margin-bottom:1.1rem}
.studsingle-facts{border:1px solid var(--border);border-radius:18px;padding:1.6rem 1.7rem;
	background:linear-gradient(180deg,var(--card),var(--surface));position:sticky;top:96px}
.studsingle-facts h3{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.studsingle-facts dl{display:grid;gap:.9rem}
.studsingle-facts .row{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.9rem;
	border-bottom:1px solid var(--border)}
.studsingle-facts .row:last-child{border-bottom:0;padding-bottom:0}
.studsingle-facts dt{color:var(--muted);font-size:.9rem}
.studsingle-facts dd{color:#fff;font-weight:500;font-size:.95rem;text-align:right}
@media (max-width:860px){
	.studsingle-grid{grid-template-columns:1fr}
	.studsingle-facts{position:static}
}