/*
 * Homepage only (front-page.php). Shared sections (focus areas, stats,
 * volunteer, engage, split features) are styled in global.css.
 */

/* ---------- Hero ---------- */
.nca-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(40px, 6vw, 88px) clamp(48px, 7vw, 104px);
	border-bottom: 1px solid var(--we-color-border);
}
.nca-hero__contours {
	position: absolute;
	inset: 0;
	background: var(--we-color-primary);
	opacity: 0.09;
	-webkit-mask: url("../../images/contours.svg") center / cover no-repeat;
	mask: url("../../images/contours.svg") center / cover no-repeat;
	pointer-events: none;
}
:root[data-theme="dark"] .nca-hero__contours { opacity: 0.14; }
.nca-hero__grid { position: relative; display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .nca-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }

.nca-hero__eyebrow { color: var(--we-color-secondary); }
.nca-hero__title {
	font-size: clamp(2.5rem, 1.6rem + 4.2vw, calc(var(--we-font-size-h1) * 1.08));
	line-height: 1.02;
	letter-spacing: calc(var(--we-heading-letter-spacing) - 0.01em);
	margin: 0 0 var(--we-space-5);
	max-width: 13ch;
}
.nca-hero__lead { font-size: var(--we-font-size-lead); color: var(--we-color-muted); max-width: 46ch; margin: 0 0 var(--we-space-6); }
.nca-hero__actions { margin-bottom: var(--we-space-5); }
.nca-hero__hotline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: var(--we-font-size-sm); color: var(--we-color-muted); }
.nca-hero__hotline .we-icon { color: var(--we-color-alert); width: 18px; height: 18px; }
.nca-hero__hotline a { font-weight: 700; color: var(--we-color-heading); }

.nca-hero__media { position: relative; margin: 0; }
.nca-hero__photo { aspect-ratio: 5 / 4; border-radius: var(--we-radius); overflow: hidden; background: var(--we-color-primary-soft); }
.nca-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nca-hero__placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: color-mix(in srgb, var(--we-color-primary) 40%, transparent); }
.nca-hero__placeholder .we-icon { width: 96px; height: 96px; stroke-width: 1; }
.nca-hero__caption { margin-top: var(--we-space-2); font-size: var(--we-font-size-xs); color: var(--we-color-muted); text-align: right; }

/* The live "field record" pinned to the photo — the hero's one bold moment. */
.nca-field-record {
	position: relative;
	display: grid;
	gap: 4px;
	max-width: 300px;
	margin: -48px 0 0 16px;
	padding: 16px 18px 18px;
	background: var(--we-color-card);
	color: var(--we-color-text);
	border: 1px solid var(--we-color-border);
	border-left: 4px solid var(--we-color-accent);
	border-radius: calc(var(--we-radius) * 0.7);
	box-shadow: var(--we-shadow-hover);
	text-decoration: none;
	transition: transform var(--we-transition);
}
@media (min-width: 900px) {
	.nca-field-record { position: absolute; left: -36px; bottom: 28px; margin: 0; }
}
.nca-field-record:hover { color: var(--we-color-text); text-decoration: none; transform: translateY(-2px); }
.nca-field-record:hover .nca-field-record__name { text-decoration: underline; }
.nca-field-record__label { font-size: var(--we-font-size-xs); font-weight: 600; color: var(--we-color-accent); }
.nca-field-record__name { font-family: var(--we-font-heading); font-weight: var(--we-heading-weight); font-size: 1.25rem; line-height: 1.2; color: var(--we-color-heading); }
.nca-field-record .nca-sci { font-size: var(--we-font-size-sm); }
.nca-field-record__meta { font-size: var(--we-font-size-sm); color: var(--we-color-muted); }
.nca-field-record .nca-badge { justify-self: start; margin-top: 6px; }

.nca-hero > .we-container > .nca-placeholder { margin-top: var(--we-space-6); }

/* ---------- Intro ---------- */
.nca-intro h2 { max-width: 20ch; }
.nca-intro__text { color: var(--we-color-muted); margin-bottom: var(--we-space-5); font-size: 1.0625rem; }
.nca-intro__pillars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--we-space-3); }
.nca-intro__pillars li {
	display: flex; align-items: center; gap: var(--we-space-4);
	padding: var(--we-space-5);
	background: var(--we-color-card);
	border: 1px solid var(--we-color-border);
	border-radius: var(--we-radius);
	font-family: var(--we-font-heading);
	font-size: 1.1875rem;
	color: var(--we-color-heading);
}
.nca-intro__pillars .we-icon { width: 32px; height: 32px; color: var(--we-color-secondary); }

/* ---------- Featured articles ---------- */
.nca-featured-articles__grid { display: grid; gap: var(--we-grid-gap); }
@media (min-width: 900px) { .nca-featured-articles__grid { grid-template-columns: 1.35fr 1fr; align-items: start; } }
.nca-featured-articles__lead .we-card__media { aspect-ratio: 16 / 9; }
.nca-featured-articles__lead .we-card__title { font-size: var(--we-font-size-h3); }
.nca-featured-articles__list { list-style: none; margin: 0; padding: 0; display: grid; }
.nca-featured-articles__list:empty { display: none; }
.nca-article-row { display: grid; grid-template-columns: 96px 1fr; gap: var(--we-space-4); padding: var(--we-space-4) 0; border-bottom: 1px solid var(--we-color-border); align-items: center; }
.nca-article-row:first-child { padding-top: 0; }
.nca-article-row__media { display: block; width: 96px; height: 96px; border-radius: calc(var(--we-radius) * 0.6); overflow: hidden; background: var(--we-color-primary-soft); }
.nca-article-row__media img, .nca-article-row__media .nca-media-placeholder { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.nca-article-row__media .nca-media-placeholder .we-icon { width: 32px; height: 32px; }
.nca-article-row__title { font-size: 1.0625rem; line-height: 1.35; margin: 0 0 4px; }
.nca-article-row__title a { color: var(--we-color-heading); text-decoration: none; }
.nca-article-row__title a:hover { text-decoration: underline; color: var(--we-color-link); }
.nca-article-row p { margin: 0; }

/* ---------- Gallery ---------- */
.nca-gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 160px; }
@media (min-width: 900px) { .nca-gallery__grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; } }
.nca-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.nca-gallery__grid--2 .nca-gallery__item:first-child, .nca-gallery__grid--1 .nca-gallery__item:first-child { grid-row: span 1; }
.nca-gallery__item figure { position: relative; height: 100%; margin: 0; border-radius: calc(var(--we-radius) * 0.7); overflow: hidden; background: var(--we-color-surface); }
.nca-gallery__item a { display: block; height: 100%; }
.nca-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms ease; }
.nca-gallery__item a:hover img { transform: scale(1.03); }
.nca-gallery__item figcaption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 28px 12px 10px; font-size: var(--we-font-size-xs); color: #fff;
	background: linear-gradient(to top, rgb(0 0 0 / 65%), transparent);
	pointer-events: none;
}

/* ---------- Field rescue log (homepage) ----------
 * Follows the site's light/dark mode. Colours derive from the active
 * preset, so it matches Forest Green, Earth & Sand or Deep Nature.
 */
.nca-home-log--field {
	/* Light mode: a soft tinted band with white cards. */
	--nca-log-bg: color-mix(in srgb, var(--we-color-primary) 7%, var(--we-color-background));
	--nca-log-table: var(--we-color-card);
	--nca-log-head: var(--we-color-surface);
	--nca-log-line: var(--we-color-border);
	--nca-log-text: var(--we-color-text);
	--nca-log-muted: var(--we-color-muted);
	--nca-log-strong: var(--we-color-heading);
	--nca-log-accent: #b8620f;
	--nca-log-bangla: var(--we-color-primary);
	--nca-log-chip: color-mix(in srgb, var(--we-color-primary) 9%, transparent);
	--nca-log-track: color-mix(in srgb, var(--we-color-text) 9%, transparent);
	--nca-log-ok: #1f9d63;
	--nca-log-care: #c98410;
	--nca-log-info: #3b74d4;
	--nca-log-button-text: #ffffff;
	--nca-log-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
	background: var(--nca-log-bg);
	color: var(--nca-log-text);
}
/* Dark mode: the deep "field log" look. */
:root[data-theme="dark"] .nca-home-log--field {
	--nca-log-bg: color-mix(in srgb, var(--we-color-primary) 28%, #070c09);
	--nca-log-table: color-mix(in srgb, var(--we-color-primary) 22%, #0b120e);
	--nca-log-head: #0b100d;
	--nca-log-line: rgb(255 255 255 / 9%);
	--nca-log-text: #e6ece8;
	--nca-log-muted: #a9b5ae;
	--nca-log-strong: #ffffff;
	--nca-log-accent: #e8913a;
	--nca-log-bangla: #63d49b;
	--nca-log-chip: rgb(255 255 255 / 7%);
	--nca-log-track: rgb(255 255 255 / 7%);
	--nca-log-ok: #3ddc97;
	--nca-log-care: #f2b84b;
	--nca-log-info: #6ea8ff;
	--nca-log-button-text: #160d03;
	--we-color-heading: #ffffff;
	--we-color-muted: var(--nca-log-muted);
	--we-color-border: var(--nca-log-line);
	--we-color-card: var(--nca-log-table);
	--we-color-surface: var(--nca-log-head);
	--we-color-primary-soft: rgb(255 255 255 / 4%);
}
.nca-home-log--field .we-eyebrow {
	color: var(--nca-log-accent);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.8125rem;
	font-weight: 700;
}
.nca-home-log--field .we-section-header { margin-bottom: var(--we-space-7); }
.nca-home-log--field .we-section-header__title { font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem); line-height: 1.02; }
.nca-home-log--field .we-section-header__lead { color: var(--nca-log-muted); margin-top: var(--we-space-2); }

.nca-home-log--field .we-table-wrap { border-radius: 22px; border-color: var(--nca-log-line); background: var(--nca-log-table); }
.nca-home-log--field .we-table { color: var(--nca-log-text); font-size: 1.0625rem; }
.nca-home-log--field .we-table th,
.nca-home-log--field .we-table td { padding: 24px 22px; border-bottom-color: var(--nca-log-line); vertical-align: middle; }
.nca-home-log--field .we-table thead th {
	background: var(--nca-log-head);
	color: var(--nca-log-muted);
	font-family: var(--nca-log-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding-block: 26px;
}
.nca-home-log--field .nca-log__table tbody tr:hover { background: var(--nca-log-chip); }
.nca-home-log--field .nca-log__id { font-family: var(--nca-log-mono); font-weight: 500; color: var(--nca-log-accent); }
.nca-home-log--field .nca-log__species { color: var(--nca-log-strong); font-size: 1.125rem; }
.nca-home-log--field .nca-log__local { color: var(--nca-log-bangla); font-weight: 600; }
.nca-home-log--field .nca-log__date { font-family: var(--nca-log-mono); font-size: 0.875rem; color: var(--nca-log-text); }
.nca-home-log--field .nca-sci { color: var(--nca-log-muted); }

/* Outlined status badges */
.nca-home-log--field .nca-badge {
	background: color-mix(in srgb, currentColor 10%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 5px;
	padding: 4px 10px;
	font-size: 0.8125rem;
	font-weight: 700;
}
.nca-home-log--field .nca-badge::before { display: none; }
.nca-home-log--field .nca-badge--released { color: var(--nca-log-ok); }
.nca-home-log--field .nca-badge--under_care { color: var(--nca-log-care); }
.nca-home-log--field .nca-badge--rescued,
.nca-home-log--field .nca-badge--transferred { color: var(--nca-log-info); }
.nca-home-log--field .nca-badge--deceased { color: var(--nca-log-muted); }

.nca-home-log--field .nca-home-log__footer .we-button { background: var(--nca-log-accent); color: var(--nca-log-button-text); }
.nca-home-log--field .nca-home-log__footer .we-button:hover { background: color-mix(in srgb, var(--nca-log-accent) 85%, #fff); color: var(--nca-log-button-text); }

@media (max-width: 760px) {
	.nca-home-log--field .we-table td { padding: 6px 18px; }
	.nca-home-log--field .we-table--stack td::before { font-family: var(--nca-log-mono); text-transform: uppercase; letter-spacing: 0.05em; color: var(--nca-log-muted); }
	.nca-home-log--field .we-table-wrap { border-radius: 16px; }
}
@media (min-width: 761px) {
	.nca-home-log--field .nca-log__table td:nth-child(2) { min-width: 13rem; }
	.nca-home-log--field .nca-log__table td:nth-child(5) { min-width: 9rem; }
	.nca-home-log--field .nca-badge { white-space: nowrap; }
}

/* ---------- Homepage rescue statistics (inside the field-log band) ---------- */
.nca-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .nca-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .nca-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nca-kpi { display: flex; flex-direction: column; gap: 2px; padding: 22px; border: 1px solid var(--nca-log-line); border-radius: 18px; background: var(--nca-log-table); }
.nca-kpi--lead { background: linear-gradient(150deg, color-mix(in srgb, var(--nca-log-accent) 16%, var(--nca-log-table)), var(--nca-log-table) 70%); border-color: color-mix(in srgb, var(--nca-log-accent) 40%, transparent); }
.nca-kpi__icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; border-radius: 12px; background: var(--nca-log-chip); color: var(--nca-log-bangla); }
.nca-kpi--lead .nca-kpi__icon { color: var(--nca-log-accent); }
.nca-kpi__icon .we-icon { width: 20px; height: 20px; }
.nca-kpi__value { color: var(--nca-log-strong); font-family: var(--we-font-heading); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.nca-kpi__label { color: var(--nca-log-text); font-weight: 700; }
.nca-kpi__note { color: var(--nca-log-muted); font-size: var(--we-font-size-sm); }

.nca-breakdowns { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 900px) { .nca-breakdowns { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.nca-breakdown { padding: 22px; border: 1px solid var(--nca-log-line); border-radius: 18px; background: var(--nca-log-table); }
.nca-breakdown__title { margin: 0 0 14px; color: var(--nca-log-strong); font-size: 1.05rem; }
.nca-bars { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.nca-bars li { display: grid; grid-template-columns: minmax(84px, 38%) 1fr auto; align-items: center; gap: 10px; }
.nca-bars__label { overflow: hidden; color: var(--nca-log-text); font-size: var(--we-font-size-sm); text-overflow: ellipsis; white-space: nowrap; }
.nca-bars__track { height: 10px; overflow: hidden; border-radius: 999px; background: var(--nca-log-track); }
.nca-bars__fill { display: block; height: 100%; border-radius: inherit; background: var(--nca-log-bangla); }
.nca-bars--status .nca-bars--released .nca-bars__fill { background: var(--nca-log-ok); }
.nca-bars--status .nca-bars--under_care .nca-bars__fill { background: var(--nca-log-care); }
.nca-bars--status .nca-bars--rescued .nca-bars__fill, .nca-bars--status .nca-bars--transferred .nca-bars__fill { background: var(--nca-log-info); }
.nca-bars--status .nca-bars--deceased .nca-bars__fill { background: var(--nca-log-muted); }
.nca-bars__value { min-width: 2ch; color: var(--nca-log-strong); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.nca-toplist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: top; }
.nca-toplist li { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--nca-log-line); counter-increment: top; }
.nca-toplist li:last-child { border-bottom: 0; padding-bottom: 0; }
.nca-toplist li::before { content: counter(top); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--nca-log-chip); color: var(--nca-log-accent); font-size: .8rem; font-weight: 800; }
.nca-toplist__name { flex: 1; color: var(--nca-log-strong); font-weight: 600; }
.nca-toplist__count { color: var(--nca-log-muted); font-size: var(--we-font-size-sm); white-space: nowrap; }
.nca-home-stats .nca-home-log__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; }
.nca-home-stats__meta { margin: 0; color: var(--nca-log-muted); font-size: var(--we-font-size-sm); }
@media (max-width: 480px) { .nca-kpi { padding: 16px; } .nca-kpi__icon { width: 34px; height: 34px; margin-bottom: 8px; } }
.nca-kpi, .nca-breakdown { box-shadow: var(--we-shadow); }
:root[data-theme="dark"] .nca-kpi, :root[data-theme="dark"] .nca-breakdown { box-shadow: none; }