/*
 * Hamilton Karate, black-and-gold academy visual system.
 * Colors/type come from theme.json custom properties; this file handles
 * layout, the hero treatment, and the program/location/belt components.
 */

.hk-eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 700;
	font-size: 0.76rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 14px;
}

/* ---------- Ghost button ---------- */
.wp-block-button.is-style-hk-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--main) !important;
	border: 2px solid var(--wp--preset--color--border-dark) !important;
}
.wp-block-button.is-style-hk-ghost .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--primary) !important;
}

/* ---------- Hero ---------- */
.hk-hero {
	position: relative;
	overflow: hidden;
	min-height: min(82vh, 720px);
	display: flex;
	align-items: flex-end;
}
.hk-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hk-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	filter: saturate(0.9);
}
.hk-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg,
			var(--wp--preset--color--base) 4%,
			color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) 42%,
			color-mix(in srgb, var(--wp--preset--color--base) 20%, transparent) 68%,
			color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent) 100%);
}
/* WordPress auto-constrains unaligned children of a "constrained"-layout group
   to the theme's (narrower) content-size and centers them, overriding plain
   CSS. !important matches that specificity so this hugs the left edge exactly
   like the nav does, instead of floating centered in the middle of the hero. */
.hk-hero-inner {
	position: relative !important;
	z-index: 2;
	max-width: var(--wp--style--global--wide-size, 1260px) !important;
	margin-left: 0 !important;
	margin-right: auto !important;
	padding-left: var(--wp--preset--spacing--medium) !important;
	padding-right: var(--wp--preset--spacing--medium) !important;
}
.hk-hero h1 em {
	font-style: normal;
	color: var(--wp--preset--color--primary);
}
.hk-hero-sub {
	max-width: 54ch;
	color: var(--wp--preset--color--main);
	opacity: 0.92;
	font-size: 1.12rem;
}

/* ---------- Stat band ---------- */
.hk-stat-band {
	border-top: 1px solid var(--wp--preset--color--border-light);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	background: var(--wp--preset--color--tertiary);
}
.hk-stat {
	border-left: 1px solid var(--wp--preset--color--border-light);
	padding: 30px clamp(16px, 3vw, 32px);
}
.hk-stat:first-child { border-left: none; }
.hk-stat .hk-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.9rem;
	color: var(--wp--preset--color--primary);
	font-variant-numeric: tabular-nums;
	display: block;
}
.hk-stat .hk-label {
	font-size: 0.8rem;
	color: var(--wp--preset--color--secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

/* ---------- Section head ---------- */
.hk-section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
	padding-bottom: 24px;
	margin-bottom: 46px;
}
.hk-see-all {
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
	text-transform: uppercase;
}
.hk-see-all:hover { text-decoration: underline; }

/* ---------- Programs grid ---------- */
.hk-programs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--border-light);
	border: 1px solid var(--wp--preset--color--border-light);
}
.hk-program-card {
	background: var(--wp--preset--color--base);
	padding: 36px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
}
.hk-program-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: var(--wp--preset--color--primary);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.hk-program-card:hover::before { opacity: 1; }
.hk-program-card:hover { background: var(--wp--preset--color--tertiary); }
.hk-program-card .hk-tag {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.hk-program-card h3 { font-size: 1.6rem; margin: 0; }
.hk-program-card p { margin: 0; color: var(--wp--preset--color--secondary); font-size: 0.95rem; }
.hk-program-card .hk-learn {
	margin-top: auto;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* ---------- Belt ladder ---------- */
.hk-belt-band {
	background: var(--wp--preset--color--tertiary);
	border-top: 1px solid var(--wp--preset--color--border-light);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.hk-belt-row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 26px;
}
.hk-belt-chip {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	padding: 10px 18px 10px 12px;
	border-radius: 999px;
}
.hk-belt-swatch {
	width: 22px;
	height: 10px;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.hk-belt-chip span { font-size: 0.84rem; font-weight: 600; letter-spacing: 0.02em; }

/* ---------- Person / instructor cards ---------- */
.hk-people-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1px;
	background: var(--wp--preset--color--border-light);
	border: 1px solid var(--wp--preset--color--border-light);
}
.hk-person-card {
	background: var(--wp--preset--color--base);
	display: flex;
	flex-direction: column;
}
.hk-person-card img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
}
.hk-person-card-body {
	padding: 24px 26px 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hk-person-card h3 { font-size: 1.3rem; margin: 0; }
.hk-person-card p { margin: 0; color: var(--wp--preset--color--secondary); font-size: 0.92rem; }

.hk-junior-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 28px;
}
.hk-junior-card { display: flex; flex-direction: column; gap: 10px; }
.hk-junior-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.hk-junior-card h4 { font-family: var(--wp--preset--font-family--heading); font-size: 1.1rem; text-align: center; margin: 0; }
.hk-junior-card p { margin: 0; color: var(--wp--preset--color--secondary); font-size: 0.86rem; text-align: center; }

/* ---------- Locations grid ---------- */
.hk-locations-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--wp--preset--color--border-light);
	border: 1px solid var(--wp--preset--color--border-light);
}
@media (min-width: 760px) {
	.hk-locations-grid { grid-template-columns: 1fr 1fr; }
}
.hk-location-card {
	background: var(--wp--preset--color--base);
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.hk-location-card .hk-since {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.95rem;
	color: var(--wp--preset--color--primary);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.hk-location-card h3 { font-size: 1.9rem; margin: 0; }
.hk-location-card address { font-style: normal; color: var(--wp--preset--color--secondary); font-size: 0.95rem; line-height: 1.6; }

/* ---------- Instructor / testimonial ---------- */
.hk-instructor-photo { position: relative; }
.hk-instructor-photo img { border-radius: 2px; box-shadow: 0 26px 50px -20px rgba(10, 8, 5, 0.5); }
.hk-instructor-badge {
	position: absolute;
	bottom: -18px;
	left: -18px;
	background: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	padding: 10px 18px;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	box-shadow: 0 12px 24px -10px rgba(10, 8, 5, 0.5);
}
blockquote.hk-pull {
	margin: 24px 0;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	border-left: 3px solid var(--wp--preset--color--primary);
	padding-left: 24px;
}
blockquote.hk-pull cite {
	display: block;
	margin-top: 16px;
	font-style: normal;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
}

/* ---------- Community band ---------- */
.hk-community-band img {
	width: 100%;
	height: clamp(260px, 34vw, 420px);
	object-fit: cover;
	filter: saturate(0.92);
}
.hk-community-caption {
	padding: 18px 0 0;
	font-size: 0.86rem;
	color: var(--wp--preset--color--secondary);
	font-style: italic;
}

/* ---------- Tables (belt requirements) ---------- */
.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}
.wp-block-table td, .wp-block-table th {
	border: 1px solid var(--wp--preset--color--border-light);
	padding: 14px 18px;
	vertical-align: top;
	font-size: 0.92rem;
}
.wp-block-table th {
	background: var(--wp--preset--color--tertiary);
	text-align: left;
	font-family: var(--wp--preset--font-family--heading);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 0.8rem;
}
.wp-block-table a { color: var(--wp--preset--color--primary); }

/* ---------- Footer ---------- */
.hk-footer-col h4 {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 0.75rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
	margin: 0 0 16px;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.hk-program-card, .hk-program-card::before { transition: none; }
}