/* ==========================================================================
   NAGI — one-off page templates
   About, Sourcing, Materials & Safety, Wholesale, Gifting, Journal, FAQ,
   Contact, legal pages, 404. Built out in Phase 4.
   ========================================================================== */

.nagi-page-hero {
	background: var(--nagi-ink);
	color: var(--nagi-text-light);
	padding-block: var(--nagi-space-8) var(--nagi-space-7);
}

.nagi-page-hero__title {
	font-size: var(--nagi-t-h1);
	max-width: 18ch;
}

.nagi-prose {
	max-width: var(--nagi-max-narrow);
	font-size: var(--nagi-t-body);
	line-height: var(--nagi-lh-body);
}

.nagi-prose h2 { margin-block: var(--nagi-space-6) var(--nagi-space-3); }
.nagi-prose h3 { margin-block: var(--nagi-space-5) var(--nagi-space-2); }
.nagi-prose img { border-radius: var(--nagi-radius); margin-block: var(--nagi-space-4); }

.nagi-prose blockquote {
	margin-block: var(--nagi-space-5);
	padding-left: var(--nagi-space-4);
	border-left: 2px solid var(--nagi-red);
	font-family: var(--nagi-f-display);
	font-size: var(--nagi-t-h3);
	line-height: 1.3;
}

/* Accordion — grid-template-rows, never a max-height hack. */
.nagi-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--nagi-dur-m) var(--nagi-ease);
}

.nagi-accordion__item[data-open="true"] .nagi-accordion__panel {
	grid-template-rows: 1fr;
}

.nagi-accordion__inner {
	overflow: hidden;
	min-height: 0;
}

.nagi-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nagi-space-3);
	width: 100%;
	padding-block: var(--nagi-space-3);
	text-align: left;
	border-bottom: 1px solid var(--nagi-surface-rule, rgba(31, 31, 31, 0.14));
	font-family: var(--nagi-f-display);
	font-size: var(--nagi-t-h3);
}

.nagi-accordion__icon {
	flex: none;
	transition: transform var(--nagi-dur-m) var(--nagi-ease);
	color: var(--nagi-red-deep);
}

.nagi-accordion__item[data-open="true"] .nagi-accordion__icon {
	transform: rotate(45deg);
}

/* Reading progress — blog single only. */
.nagi-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: calc(var(--nagi-z-header) + 1);
	background: var(--nagi-red);
	transform-origin: left center;
	transform: scaleX(var(--nagi-read, 0));
}

/* 404 */
.nagi-404 {
	text-align: center;
	padding-block: var(--nagi-space-9);
}

/* ---- Page hero with a featured image -------------------------------- */

/* Bottom padding deliberately exceeds top: it lifts the headline off the
   table edge in the photography and into the quiet navy field above it. */
.nagi-page-hero--image {
	position: relative;
	isolation: isolate;
	padding-block: clamp(3.5rem, 6vw, 5.5rem) clamp(5rem, 9vw, 8rem);
	border-bottom: 1px solid rgba(175, 26, 22, 0.22);
}

.nagi-page-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.nagi-page-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The stills are shot dark already, so this only has to carry the text —
   heavier on the left where the headline sits, lighter on the right where
   each composition leaves its clear space. Kept deliberately light: at the
   original 0.92 the brass and the candle highlights stopped reading and the
   photography flattened into background texture. */
.nagi-page-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(26, 26, 26, 0.72) 0%,
		rgba(26, 26, 26, 0.52) 45%,
		rgba(26, 26, 26, 0.32) 100%
	);
}

.nagi-page-hero__inner {
	position: relative;
	z-index: 2;
}

.nagi-page-hero--image .nagi-page-hero__title { max-width: 16ch; }

@media (max-width: 700px) {
	.nagi-page-hero--image::after {
		background: linear-gradient(180deg, rgba(26, 26, 26, 0.46) 0%, rgba(26, 26, 26, 0.84) 100%);
	}
}