/**
 * Stallion Directory styles.
 *
 * Colors are custom properties so they can be matched to the theme in one place.
 * The pedigree is a left-to-right tree built from nested lists; connector lines are
 * drawn with pseudo-elements, and the tree scrolls horizontally on narrow screens.
 */

.stallion-directory {
	--sd-border: #b41d15;
	--sd-muted: #6b645a;
	--sd-surface: #faf8f5;
	--sd-accent: #7a4a24;      /* Section headings, accordion marker. */
	--sd-sire: #2f5d8a;        /* Left border on sire (male) nodes. */
	--sd-dam: #9a3d5c;         /* Left border on dam (female) nodes. */
	--sd-line: #bdb5a8;        /* Pedigree connector lines. */
	--sd-radius: 6px;
	--sd-photo-size: 350px;    /* Square horse photo width on tablet and desktop. */

	max-width: 90rem;          /* 1440px at the default 16px font size. */
	margin: 0 auto;
	padding: 2rem 1rem 3rem;
}

.stallion-directory__header {
	margin-bottom: 2rem;
}

.stallion-directory__title {
    text-align: center;
}

.stallion-directory__notice {
	padding: 1rem;
	border: 1px solid var(--sd-border);
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
}

/* --------------------------------------------------------------------------
 * Stallion card
 * ------------------------------------------------------------------------ */

.stallion-directory__list {
	display: grid;
	gap: 2rem;
}

.stallion {
	border: 2px solid var(--sd-border);
	border-radius: var(--sd-radius);
	padding: 1.5rem;
	background: #fff;
	scroll-margin-top: 2rem;
}

.stallion__name {
	margin: 0 0 1.25rem;
	font-size: 1.6rem;
	line-height: 1.2;
}

/*
 * Photo, details, and owner contact share one grid. Horse Accomplishments and
 * Pedigree follow below as full-width accordions.
 *
 *  Phone (<768px)      Tablet (768–1199px)        Desktop (≥1200px)
 *  photo               photo    details           photo   details  contact
 *  details             photo    contact
 *  contact
 */
.stallion__body {
	display: grid;
	gap: 1.5rem;
	grid-template-areas:
		"photo"
		"details"
		"contact";
}

.stallion__photo   { grid-area: photo; }
.stallion__details { grid-area: details; }
.stallion__contact { grid-area: contact; }

@media (min-width: 768px) {
	.stallion__body {
		grid-template-columns: var(--sd-photo-size) 1fr;
		grid-template-areas:
			"photo   details"
			"photo   contact";
		align-items: start;
	}

	.stallion__body--no-photo {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "details contact";
	}
}

@media (min-width: 1200px) {
	.stallion__body {
		grid-template-columns: var(--sd-photo-size) 1fr 1fr;
		grid-template-areas: "photo details contact";
	}

	.stallion__body--no-photo {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: "details contact";
	}
}

.stallion__photo {
	margin: 0;
	max-width: var(--sd-photo-size);   /* Also caps the photo on phones. */
}

.stallion__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;      /* Square crop, centered, regardless of upload shape. */
	object-fit: cover;
	border-radius: var(--sd-radius);
}

.stallion__subheading {
	margin: 0 0 0.75rem;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sd-accent);
}

.stallion__contact {
	padding: 1rem;
	border-radius: var(--sd-radius);
	background: var(--sd-surface);
}

/* Label / value pairs in two columns. */
.stallion__facts {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) 1fr;
	gap: 0.4rem 1rem;
	margin: 0;
}

.stallion__facts dt {
	color: var(--sd-muted);
	font-size: 14px;
	font-weight: 600;
}

.stallion__facts dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* Keep phone numbers on one line. */
.stallion__facts a[href^="tel:"] {
	white-space: nowrap;
}

/* Owner contact: labeled member number, then an unlabeled address card. */
.stallion__member {
	margin-bottom: 0.9rem;
}

/* Tighter gap between the Owner Contact / Breeder Information headings and the first line below. */
.stallion__contact .stallion__subheading {
	margin-bottom: 0.35rem;
}

/* Breeder block: separated from the owner's details, same line rhythm as the address card. */
.stallion__breeder {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-top: 1.25rem;
	line-height: 1.4;
}

.stallion__breeder .stallion__subheading {
	margin-bottom: 0;          /* The flex gap already spaces the heading from the name. */
}

.stallion__breeder-name {
	font-weight: 700;
}

.stallion__contact-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-style: normal;
	line-height: 1.4;
}

.stallion__owner-name {
	font-weight: 700;
}

.stallion__contact-line {
	overflow-wrap: anywhere;
}

.stallion__accomplishments {
	margin-top: 0.75rem;
	max-width: 105ch;
}

.stallion__accomplishments > :first-child {
	margin-top: 0;
}

.stallion__accomplishments > :last-child {
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.stallion__facts {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.stallion__facts dd {
		margin-bottom: 0.6rem;
	}
}

/* --------------------------------------------------------------------------
 * Accordions (Horse Accomplishments, Pedigree)
 * ------------------------------------------------------------------------ */

.stallion__accordion {
	margin-top: 1.5rem;
	border-top: 1px solid var(--sd-border);
}

/* Stacked accordions sit closer together, divided by their top borders. */
.stallion__accordion + .stallion__accordion {
	margin-top: 1rem;
}

.stallion__accordion > summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0 0;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.stallion__accordion > summary::-webkit-details-marker {
	display: none;
}

/* Chevron that rotates when open. */
.stallion__accordion > summary::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-right: 2px solid var(--sd-accent);
	border-bottom: 2px solid var(--sd-accent);
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
}

.stallion__accordion[open] > summary::before {
	transform: rotate(45deg);
}

.stallion__accordion > summary:focus-visible {
	outline: 2px solid var(--sd-accent);
	outline-offset: 4px;
}

/* --------------------------------------------------------------------------
 * Pedigree tree
 *
 * Wide (pedigree area 700px+):  four generations left to right, sharing the full
 *                               width equally, joined by bracket connectors.
 * Narrow (under 700px):         an indented outline read top to bottom
 *                               (Stallion → Sire → Sire's Sire → SSS → …).
 *
 * The switch uses a container query, so it responds to the space the pedigree
 * actually has (theme width, sidebars) rather than the screen width.
 * ------------------------------------------------------------------------ */

.pedigree {
	--gap: 1.75rem;            /* Wide: space between generations (holds the connectors). */
	--indent: 1.25rem;         /* Narrow: indent per generation. */
	--node-mid: 1.5rem;        /* Narrow: distance from a node's top to its vertical center. */

	container: pedigree / inline-size;
	margin-top: 1rem;
	padding-bottom: 0.5rem;
	overflow-x: auto;          /* Only scrolls in very old browsers without container queries. */
}

.pedigree:focus-visible {
	outline: 2px solid var(--sd-accent);
	outline-offset: 2px;
}

.pedigree ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Column math assumes padding and borders are inside each box, whatever the theme sets. */
.pedigree *,
.pedigree *::before,
.pedigree *::after {
	box-sizing: border-box;
}

/* Fallback for browsers without container queries: scroll rather than squash. */
.pedigree__tree {
	min-width: 40rem;
}

/* ---------- Wide layout (default) ---------- */

/* Each item: its own node, then its parents in a column to the right. */
.pedigree__item {
	position: relative;
	display: flex;
	align-items: center;
}

.pedigree .pedigree__branch {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding-left: var(--gap);
}

/*
 * Fluid columns: every node gets the same width, (tree width - 3 gaps) / 4.
 * Each generation's node sits in a narrower container than the last, so the
 * percentage is computed against the space left for that generation.
 */
.pedigree__node {
	flex: 0 0 auto;
	min-width: 0;
}

.pedigree__item--gen1 > .pedigree__node { flex-basis: calc((100% - 3 * var(--gap)) / 4); }
.pedigree__item--gen2 > .pedigree__node { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
.pedigree__item--gen3 > .pedigree__node { flex-basis: calc((100% - var(--gap)) / 2); }
.pedigree__item--gen4 > .pedigree__node { flex-basis: 100%; }

/* Horizontal stub from a node to its parents' vertical connector. */
.pedigree__branch::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: calc(var(--gap) / 2);
	border-top: 1px solid var(--sd-line);
}

.pedigree__branch > .pedigree__item {
	padding: 0.3rem 0 0.3rem calc(var(--gap) / 2);
	margin-left: calc(var(--gap) / -2);
}

/* Horizontal line into each parent node. */
.pedigree__branch > .pedigree__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: calc(var(--gap) / 2);
	border-top: 1px solid var(--sd-line);
}

/* Vertical connector joining the two parents: lower half on the first, upper half on the last. */
.pedigree__branch > .pedigree__item::after {
	content: "";
	position: absolute;
	left: 0;
	border-left: 1px solid var(--sd-line);
}

.pedigree__branch > .pedigree__item:first-child::after {
	top: 50%;
	bottom: 0;
}

.pedigree__branch > .pedigree__item:last-child::after {
	top: 0;
	bottom: 50%;
}

/* ---------- Narrow layout: indented outline ---------- */

@container pedigree (max-width: 699px) {
	.pedigree__tree {
		min-width: 0;
	}

	.pedigree__item {
		display: block;
	}

	/* Each generation is indented; its connector runs down from under the parent node. */
	.pedigree .pedigree__branch {
		display: block;
		margin-left: calc(var(--indent) / 2);
		padding-left: 0;
	}

	.pedigree__branch::before {
		display: none;
	}

	.pedigree__branch > .pedigree__item {
		margin-left: 0;
		padding: 0.4rem 0 0 var(--indent);
	}

	/* Tick from the vertical line into the node's center. */
	.pedigree__branch > .pedigree__item::before {
		top: calc(0.4rem + var(--node-mid));
		width: calc(var(--indent) - 0.25rem);
	}

	/* Vertical line: full height between siblings, stopping at the last sibling's tick. */
	.pedigree__branch > .pedigree__item:first-child::after {
		top: 0;
		bottom: 0;
	}

	.pedigree__branch > .pedigree__item:last-child::after {
		top: 0;
		bottom: auto;
		height: calc(0.4rem + var(--node-mid));
	}
}

/* ---------- Nodes ---------- */

.pedigree__node {
	padding: 0.45rem 0.65rem;
	border: 1px solid var(--sd-border);
	border-left-width: 4px;
	border-radius: 4px;
	background: #fff;
	line-height: 1.25;
}

.pedigree__node--subject {
	border-left-color: var(--sd-accent);
	background: var(--sd-surface);
	font-weight: 700;
}

.pedigree__node--sire {
	border-left-color: var(--sd-sire);
}

.pedigree__node--dam {
	border-left-color: var(--sd-dam);
}

.pedigree__role {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--sd-muted);
}

.pedigree__name {
	display: block;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.pedigree__name--unknown {
	font-weight: 400;
	font-style: italic;
	color: var(--sd-muted);
}

/* --------------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------------ */

.stallion-directory__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2.5rem;
}

.stallion-directory__pagination .page-numbers {
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--sd-border);
	border-radius: 4px;
	text-decoration: none;
}

.stallion-directory__pagination .current {
	background: var(--sd-accent);
	border-color: var(--sd-accent);
	color: #fff;
}

/* --------------------------------------------------------------------------
 * Photo lightbox (enlarged view on click)
 * ------------------------------------------------------------------------ */

.stallion__photo-link {
	display: block;
	border-radius: var(--sd-radius);
	cursor: zoom-in;
}

.stallion__photo-link img {
	transition: filter 0.2s ease;
}

.stallion__photo-link:hover img {
	filter: brightness(0.92);
}

.stallion__photo-link:focus-visible {
	outline: 3px solid var(--sd-accent);
	outline-offset: 3px;
}

/* Native <dialog>: transparent box, dark backdrop, image sized to fit the screen. */
.stallion-lightbox {
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.stallion-lightbox::backdrop {
	background: rgb(20 16 12 / 0.88);
}

.stallion-lightbox__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.stallion-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: calc(92vh - 3rem);   /* Leaves room for the caption. */
	border-radius: var(--sd-radius);
	background: #2a2622;             /* Visible frame while the large image loads. */
}

.stallion-lightbox__caption {
	color: #fff;
	font-weight: 600;
	text-align: center;
}

/* Close button pinned to the screen corner, large enough to tap. */
.stallion-lightbox__close {
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 0.92);
	color: #222;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.stallion-lightbox__close:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Stop the page behind from scrolling while the photo is open. */
body:has(.stallion-lightbox[open]) {
	overflow: hidden;
}

@media print {
	/* Keep each stallion on one page where possible. */
	.stallion-lightbox { display: none; }
	.stallion { break-inside: avoid; }
	.stallion__accordion > summary::before { display: none; }
}