/* ==========================================================================
   Primal Sports 2027 — inner pages (page-{slug}.php).
   MOBILE FIRST: the base rules are the phone (390px). min-width queries only
   (600, 768, 1024). Uses the tokens in main.css. Nothing under 16px, tap
   targets 48px+, body 18px+. No red text on navy.
   Shared classes (.section, .card, .card-grid, .prose, .notice, .btn) come from
   main.css; this file only adds page parts and modifiers.
   ========================================================================== */

:root {
	/* Private tokens. Each falls back to main.css's token where one exists. */
	--pg-fast: 150ms;
	--pg-base: var(--dur, 220ms);
	--pg-focus-dark: #ffffff;
	--pg-radius-md: var(--radius, 14px);
	--pg-radius-pill: 999px;
	--pg-shadow-sm: var(--shadow-1, 0 2px 6px rgba(8, 20, 52, 0.08));
	--pg-shadow-md: var(--shadow-2, 0 18px 40px -18px rgba(8, 20, 52, 0.45));
	--pg-shadow-lg: var(--shadow-3, 0 30px 60px -24px rgba(8, 20, 52, 0.6));
	--pg-space-2xl: clamp(3rem, 2.2rem + 3.2vw, 5rem);
	--pg-text-2xl: clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
}

/* ---------- 1. Page hero with photo -------------------------------------- */
.page-hero--image .page-hero__title { max-width: 18ch; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); }
.page-hero__eyebrow {
	display: inline-flex;
	margin: 0;
	padding: 0.35rem 0.95rem;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--pg-radius-pill);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	backdrop-filter: blur(4px);
}
.page-hero__lead { margin: 0; }
.page-hero__actions { display: grid; gap: var(--space-sm); width: 100%; margin-top: var(--space-xs); }
.page-hero__caption { margin: 0; color: var(--psc-muted); font-size: var(--text-sm); font-style: italic; }
.page-hero--image :focus-visible { outline-color: var(--pg-focus-dark); }

/* Breadcrumbs */
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--text-sm);
}
.breadcrumbs li { display: inline-flex; align-items: center; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--psc-muted); }
.breadcrumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--psc-white);
	font-weight: 700;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}
.breadcrumbs a:hover { color: var(--psc-white); text-decoration-color: var(--psc-red); }
.breadcrumbs a:active { color: var(--psc-muted); }
.breadcrumbs [aria-current] { color: var(--psc-muted); }

/* ---------- 2. Section modifiers and headings ---------------------------- */
.section--tight { padding-block: var(--space-xl); }

.pg-head { max-width: 44rem; margin-bottom: var(--space-xl); }
.pg-head p { color: var(--ink-soft); font-size: var(--text-lg); margin: 0; }
.section--navy .pg-head p { color: var(--psc-muted); }

.pg-kicker {
	margin: 0 0 var(--space-xs);
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #a50d1b; /* dark red on light backgrounds: 7:1 on white */
}
.section--navy .pg-kicker,
.prose--on-dark .pg-kicker { color: var(--psc-muted); } /* no red text on navy */
.pg-tagline { font-family: var(--font-display); font-style: italic; font-size: var(--text-lg); color: var(--psc-white); }

.prose--on-dark,
.prose--on-dark p { color: #dce4f0; }
.prose--on-dark h2 { color: var(--psc-white); }

.pg-arrow { flex: none; transition: transform var(--pg-fast) var(--ease); }
a:hover > .pg-arrow { transform: translateX(3px); }

/* ---------- 3. Split: text + figure ------------------------------------- */
.pg-split { display: grid; gap: var(--space-xl); align-items: center; }
/* Grid children may shrink below their content's width (textareas, long URLs). */
.pg-split > *,
.pg-two > *,
.pg-contact > *,
.pg-donate > * { min-width: 0; }
.pg-split .prose > :last-child { margin-bottom: 0; }
.pg-split__media { margin: 0; }
.pg-split__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--pg-shadow-lg);
}
.pg-split__media figcaption {
	margin-top: var(--space-xs);
	color: var(--ink-soft);
	font-size: var(--text-sm);
	font-style: italic;
}
.section--navy .pg-split__media figcaption,
.section--red .pg-split__media figcaption { color: #e6ebf3; }

/* Navy panel standing in for a photo (Scholarships). */
.pg-panel {
	display: grid;
	place-items: center;
	align-content: center;
	gap: var(--space-sm);
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	background: radial-gradient(120% 90% at 20% 10%, var(--psc-navy-soft), var(--psc-navy) 55%, var(--psc-navy-deep));
	color: var(--psc-white);
	box-shadow: var(--pg-shadow-lg);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: 700;
}
.pg-panel svg { color: var(--psc-white); }
.pg-panel::after { content: ""; width: 3rem; height: 4px; background: var(--psc-red); border-radius: 2px; }

/* ---------- 4. Stats ----------------------------------------------------- */
.pg-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pg-stats li { display: grid; gap: 0.35rem; }
.pg-stats strong {
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.6rem + 2vw, 3.25rem);
	font-weight: 800;
	line-height: 1;
	color: var(--psc-white);
}
.pg-stats strong::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 4px;
	margin-top: 0.6rem;
	border-radius: 2px;
	background: var(--psc-red);
}
.section--red .pg-stats strong::after { background: var(--psc-navy); }
.pg-stats span { color: var(--psc-muted); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.04em; }
.section--red .pg-stats span { color: var(--psc-white); }

/* ---------- 5. Card lists ------------------------------------------------ */
.pg-values,
.pg-partners,
.pg-funds { display: grid; gap: var(--space-md); }

/* The shared .card has no padding (it expects .card__body); ours carry content directly. */
.pg-values > .card,
.pg-partners > .card,
.pg-funds > .card,
.pg-details,
.pg-choice__card,
.pg-donate__form { padding: var(--space-lg); }
.pg-value { border-top: 4px solid var(--psc-red); }
.pg-value h3,
.pg-partners h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); }
.pg-value p,
.pg-partners p,
.pg-fund p { margin: 0; color: var(--ink-soft); }

.pg-fund__abbr {
	margin: 0 0 var(--space-xs) !important;
	font-family: var(--font-display);
	font-size: var(--pg-text-2xl);
	font-weight: 800;
	line-height: 1;
	color: var(--psc-red) !important; /* sits on a white card, not on navy */
}
.pg-fund h3 { font-size: var(--text-lg); margin-bottom: var(--space-xs); color: var(--ink); }

/* ---------- 6. Programs page --------------------------------------------- */
.pg-jump { background: var(--surface); border-bottom: 1px solid var(--line); }
.pg-jump__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}
.pg-jump__list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 1rem;
	border: 2px solid var(--line);
	border-radius: var(--pg-radius-pill);
	color: var(--ink);
	font-size: var(--text-sm);
	font-weight: 700;
	text-decoration: none;
	transition: border-color var(--pg-fast) var(--ease), background-color var(--pg-fast) var(--ease), color var(--pg-fast) var(--ease);
}
.pg-jump__list a:hover { border-color: var(--psc-red); color: var(--psc-red); }
.pg-jump__list a:active { background: var(--surface-alt); }

.program-block { scroll-margin-top: var(--header-h); }
.program-block--alt { background: var(--surface-alt); }

/* ---------- 7. Lists, details, facts ------------------------------------- */
.pg-two { display: grid; gap: var(--space-xl); align-items: start; }

.pg-checks { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; gap: var(--space-sm); }
.pg-checks li { position: relative; padding-left: 2.25rem; }
.pg-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--psc-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
}

.pg-details { display: grid; gap: var(--space-md); justify-items: start; }
.pg-details__title { font-size: var(--text-xl); margin: 0; }
.pg-details dl,
.pg-facts { margin: 0; display: grid; gap: 0; width: 100%; }
.pg-details dl > div,
.pg-facts > div {
	display: grid;
	gap: 0.15rem;
	padding-block: var(--space-sm);
	border-bottom: 1px solid var(--line);
}
.pg-details dl > div:last-child { border-bottom: 0; }
.pg-details dt,
.pg-facts dt {
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.pg-details dd,
.pg-facts dd { margin: 0; color: var(--ink); font-weight: 500; }

.pg-tag {
	justify-self: start;
	display: inline-flex;
	margin: 0;
	padding: 0.3rem 0.85rem;
	border-radius: var(--pg-radius-pill);
	background: #fdebed;
	color: #a50d1b;
	font-size: var(--text-sm);
	font-weight: 700;
}

/* ---------- 8. Feature card (camps) -------------------------------------- */
.pg-feature { display: grid; padding: 0; overflow: hidden; }
.pg-feature__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pg-feature__body { display: grid; gap: var(--space-sm); justify-items: start; padding: var(--space-lg); }
.pg-feature__body h2 { font-size: var(--text-xl); margin: 0; }
.pg-feature__body p { margin: 0; color: var(--ink-soft); }

/* ---------- 9. Registration ---------------------------------------------- */
.pg-form { margin-top: var(--space-lg); }
.pg-help { margin-top: var(--space-lg); color: var(--ink-soft); }
.pg-help a { font-weight: 700; }
/* Links inside sentences: pad the hit area to 44px+ without moving the text. */
.pg-help a,
.pg-notes a,
.pg-empty a { padding-block: 0.7em; }

.pg-choice { display: grid; gap: var(--space-md); }
.pg-choice__card { display: grid; gap: var(--space-sm); justify-items: start; border-top: 6px solid var(--psc-red); }
.pg-choice__card h3 { font-size: var(--text-xl); margin: 0; }
.pg-choice__card .btn { width: 100%; margin-top: var(--space-xs); }
.pg-choice__day {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #a50d1b;
}
.pg-choice__list { margin: 0; padding-left: 1.2em; color: var(--ink-body); }
.pg-choice__price { margin: 0; color: var(--ink-soft); }
.pg-choice__price strong { font-family: var(--font-display); font-size: var(--pg-text-2xl); color: var(--ink); }
.pg-notes { margin-top: var(--space-lg); }
.pg-notes p { margin: 0 0 var(--space-xs); }
.pg-notes p:last-child { margin: 0; }

/* ---------- 10. Events --------------------------------------------------- */
.event-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xl); }

.event-card {
	display: grid;
	overflow: hidden;
	background: var(--surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--pg-shadow-md);
	transition: transform var(--pg-base) var(--ease), box-shadow var(--pg-base) var(--ease);
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--pg-shadow-lg); }
.event-card__media { position: relative; }
.event-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 35%; }
.event-card__date {
	position: absolute;
	left: var(--space-md);
	bottom: -1.75rem;
	display: grid;
	justify-items: center;
	min-width: 5.25rem;
	padding: 0.6rem 0.75rem;
	border-radius: var(--pg-radius-md);
	background: var(--psc-red);
	color: var(--psc-white);
	box-shadow: var(--pg-shadow-md);
	font-weight: 700;
	line-height: 1.1;
}
.event-card__m,
.event-card__y { font-size: var(--text-sm); letter-spacing: 0.1em; }
.event-card__d { font-family: var(--font-display); font-size: 2rem; font-weight: 800; white-space: nowrap; }
.event-card__body { display: grid; gap: var(--space-sm); padding: 2.75rem var(--space-lg) var(--space-lg); }
.event-card__tag {
	justify-self: start;
	padding: 0.3rem 0.85rem;
	border-radius: var(--pg-radius-pill);
	background: #fdebed;
	color: #a50d1b;
	font-size: var(--text-sm);
	font-weight: 700;
}
.event-card--full .event-card__tag,
.event-card--past .event-card__tag { background: var(--surface-alt); color: var(--ink-soft); }
.event-card__title { margin: 0; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem); }
.event-card__meta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.event-card__meta li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink); }
.event-card__meta svg { flex: none; width: 22px; height: 22px; margin-top: 0.2rem; color: var(--psc-red); }
.event-card__actions { display: grid; margin-top: var(--space-xs); }
.event-card__actions:empty { display: none; }
.pg-empty { margin-top: var(--space-xl); }

/* ---------- 11. Contact -------------------------------------------------- */
.pg-contact { display: grid; gap: var(--pg-space-2xl); }
.pg-contact__form { scroll-margin-top: calc(var(--header-h) + 1rem); }
.pg-contact__form > p { color: var(--ink-soft); }

.contact-form { display: grid; gap: var(--space-md); margin-top: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.field__req { color: #a50d1b; }
.field__opt { font-weight: 400; color: var(--ink-soft); }
.field input,
.field select,
.field textarea {
	width: 100%;
	min-height: var(--tap);
	padding: 0.625rem 0.875rem;
	background: var(--surface);
	color: var(--ink-body);
	border: 2px solid var(--line);
	border-radius: var(--radius-sm);
	font-family: var(--font-body);
	font-size: 1.125rem; /* 18px: readable, and above iOS's 16px zoom threshold */
	transition: border-color var(--pg-fast) var(--ease), box-shadow var(--pg-fast) var(--ease);
}
.field select {
	appearance: none;
	padding-right: 2.75rem;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1e4a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 0.85rem center / 1.25rem no-repeat;
}
.field textarea { min-height: 10rem; resize: vertical; line-height: 1.5; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--ink-soft); }
.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--psc-navy);
	box-shadow: 0 0 0 3px rgba(204, 17, 34, 0.35);
}
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid { border-color: var(--psc-red); }
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__note { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
.contact-form__submit { width: 100%; min-height: 52px; font-size: 1.0625rem; }
.contact-form__submit:disabled { opacity: 0.65; cursor: progress; transform: none; box-shadow: none; }

.notice--success { border-left-color: #1e7a46; }
.notice--error { border-left-color: var(--psc-red); }
.notice--info { border-left-color: var(--psc-navy); }

.pg-contact__info {
	align-self: start;
	padding: var(--space-lg);
	border-radius: var(--radius-lg);
	background: var(--psc-navy);
	color: var(--psc-white);
	box-shadow: var(--pg-shadow-lg);
}
.pg-contact__info :focus-visible { outline-color: var(--pg-focus-dark); }
.pg-contact__info-title { color: var(--psc-white); font-size: var(--text-xl); margin-bottom: var(--space-lg); }
.pg-info { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.pg-info li { display: grid; gap: 0.15rem; }
.pg-info__label {
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--psc-muted);
}
.pg-info a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--psc-white);
	font-weight: 700;
	overflow-wrap: anywhere;
	text-decoration-color: var(--psc-red);
}
.pg-info a:hover { color: var(--psc-white); text-decoration-thickness: 3px; }
.pg-info a:active { color: var(--psc-muted); }
.pg-info__give { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid rgba(160, 180, 204, 0.3); }
.pg-info__give p { color: #dce4f0; }
.pg-info__give .btn { width: 100%; }

.pg-faq { display: grid; gap: var(--space-sm); }
.pg-faq details {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--pg-radius-md);
	box-shadow: var(--pg-shadow-sm);
	transition: box-shadow var(--pg-base) var(--ease);
}
.pg-faq details:hover { box-shadow: var(--pg-shadow-md); }
.pg-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	min-height: 56px;
	padding: var(--space-sm) var(--space-lg);
	font-family: var(--font-display);
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	list-style: none;
	border-radius: var(--pg-radius-md);
}
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--surface-alt);
	color: var(--psc-red);
	font-family: var(--font-body);
	font-size: 1.5rem;
	line-height: 1;
	transition: transform var(--pg-base) var(--ease), background-color var(--pg-fast) var(--ease);
}
.pg-faq details[open] summary::after { transform: rotate(45deg); background: #fdebed; }
.pg-faq summary:hover { color: var(--psc-red); }
.pg-faq summary:active { background: var(--surface-alt); }
.pg-faq details p { margin: 0; padding: 0 var(--space-lg) var(--space-lg); color: var(--ink-soft); }

/* ---------- 12. Donate --------------------------------------------------- */
.pg-donate { display: grid; gap: var(--pg-space-2xl); align-items: start; }
.pg-donate__form { scroll-margin-top: calc(var(--header-h) + 1rem); border-top: 6px solid var(--psc-red); }
.pg-donate__form-title { font-size: var(--text-xl); margin-bottom: var(--space-xs); }
.pg-donate__note { color: var(--ink-soft); font-size: var(--text-sm); }
.donorbox { display: grid; justify-items: center; }
.donorbox iframe { display: block; border: 0; }
.donorbox__fallback { margin: var(--space-md) 0 0; text-align: center; color: var(--ink-soft); }
.donorbox__fallback a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 700; }

/* ---------- 13. Closing CTA band ----------------------------------------- */
.pg-cta__inner { display: grid; gap: var(--space-sm); justify-items: start; max-width: 52rem; }
.pg-cta h2 { color: var(--psc-white); margin: 0; }
.pg-cta p { margin: 0; color: var(--psc-white); font-size: var(--text-lg); }
.pg-cta__actions { display: grid; gap: var(--space-sm); width: 100%; margin-top: var(--space-sm); }
.pg-cta :focus-visible { outline-color: var(--pg-focus-dark); }

/* ---------- 14. 600px: buttons side by side ------------------------------ */
@media (min-width: 600px) {
	.page-hero__actions,
	.pg-cta__actions { display: flex; flex-wrap: wrap; width: auto; }
	.pg-stats { grid-template-columns: repeat(4, 1fr); }
	.event-card__actions { justify-content: start; }
	.contact-form__submit { width: auto; padding-inline: 2.25rem; }
}

/* ---------- 15. Tablet (768px) ------------------------------------------- */
@media (min-width: 768px) {
	.pg-values,
	.pg-partners,
	.pg-funds,
	.pg-choice { grid-template-columns: 1fr 1fr; }
	.pg-facts { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-md); }
	.pg-facts > div { border-bottom: 0; border-left: 3px solid var(--psc-red); padding: 0 0 0 var(--space-md); }

	.pg-feature { grid-template-columns: 1fr 1fr; }
	.pg-feature__media img { height: 100%; aspect-ratio: auto; min-height: 20rem; }
	.pg-feature__body { align-content: center; padding: var(--space-xl); }

	.event-card { grid-template-columns: 1fr 1fr; }
	.event-card__media img { height: 100%; aspect-ratio: auto; min-height: 22rem; }
	.event-card__date { bottom: var(--space-md); }
	.event-card__body { align-content: center; padding: var(--space-xl); }
}

/* ---------- 16. Desktop (1024px) ----------------------------------------- */
@media (min-width: 1024px) {
	.pg-split { grid-template-columns: 1.1fr 1fr; gap: var(--pg-space-2xl); }
	.pg-split--reverse > :first-child { order: 2; }
	.pg-two { grid-template-columns: 1.2fr 1fr; gap: var(--pg-space-2xl); }
	.pg-values { grid-template-columns: repeat(4, 1fr); }
	.pg-partners,
	.pg-funds { grid-template-columns: repeat(3, 1fr); }

	.pg-contact { grid-template-columns: 1.5fr 1fr; gap: var(--pg-space-2xl); }
	.pg-donate { grid-template-columns: 1fr minmax(22rem, 32rem); }
	.page-hero--image .page-hero__title { max-width: 20ch; }
}