/* ==========================================================================
   NutriFoodGuide — dynamic blocks, patterns and cards
   Loaded only where these components actually appear.
   ========================================================================== */

/* --- Section header ------------------------------------------------------- */
.nfg-section { margin-block: var(--nfg-space-8); }

.nfg-section__head {
	display: flex;
	flex-direction: column;
	gap: var(--nfg-space-4);
	margin-bottom: var(--nfg-space-6);
}

.nfg-section__title {
	font-size: var(--nfg-text-2xl);
	margin: 0;
}
.nfg-section__title--small { font-size: var(--nfg-text-xl); }

.nfg-section__intro {
	max-width: 62ch;
	color: var(--nfg-muted);
	margin: var(--nfg-space-3) 0 0;
}

/* --- Grids ------------------------------------------------------------------ */
.nfg-grid {
	display: grid;
	gap: var(--nfg-space-5);
	grid-template-columns: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nfg-grid__empty {
	color: var(--nfg-muted);
	font-size: var(--nfg-text-sm);
	margin-top: var(--nfg-space-5);
}

/* --- Cards -------------------------------------------------------------------
   The card is the workhorse of the Atlas. It stays quiet until hovered or
   focused, when a hairline warms to sage and the arrow steps forward. */
.nfg-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--nfg-surface);
	border: 1px solid var(--nfg-line);
	border-radius: var(--nfg-radius-md);
	overflow: hidden;
	transition: border-color var(--nfg-duration) var(--nfg-ease), box-shadow var(--nfg-duration) var(--nfg-ease), transform var(--nfg-duration) var(--nfg-ease);
}

.nfg-card:hover,
.nfg-card:focus-within {
	border-color: var(--nfg-sage);
	box-shadow: var(--nfg-shadow-md);
}

.nfg-card__media {
	background: var(--nfg-panel);
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.nfg-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms var(--nfg-ease);
}
.nfg-card:hover .nfg-card__media img { transform: scale(1.03); }
.nfg-card__media--short { aspect-ratio: 16 / 9; }
.nfg-card__media .nfg-media-placeholder { height: 100%; border-radius: 0; aspect-ratio: auto; }

.nfg-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--nfg-space-3);
	padding: var(--nfg-space-5);
	flex: 1;
}

.nfg-card__title {
	font-size: var(--nfg-text-lg);
	margin: 0;
	line-height: 1.28;
}
.nfg-card__title a {
	color: var(--nfg-forest-deep);
	text-decoration: none;
}
/* Whole card is clickable, but only the title is a tab stop. */
.nfg-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.nfg-card:hover .nfg-card__title a { color: var(--nfg-forest); }

.nfg-card__badge { margin: 0; }
.nfg-card__kicker {
	margin: 0;
	font-size: var(--nfg-text-xs);
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	color: var(--nfg-moss);
}

.nfg-card__excerpt {
	margin: 0;
	color: var(--nfg-muted);
	font-size: 0.95rem;
}

.nfg-card__foot {
	margin: auto 0 0;
	padding-top: var(--nfg-space-2);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nfg-space-3);
	font-size: var(--nfg-text-sm);
	color: var(--nfg-muted);
}

.nfg-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--nfg-space-2);
	color: var(--nfg-forest);
	font-weight: 600;
}
.nfg-card__cta .nfg-icon { transition: transform var(--nfg-duration) var(--nfg-ease); }
.nfg-card:hover .nfg-card__cta .nfg-icon { transform: translateX(3px); }

/* Category card — no image, a symbol instead. */
.nfg-card--category {
	padding: var(--nfg-space-5);
	gap: var(--nfg-space-3);
	background: var(--nfg-surface);
}
.nfg-card__symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--nfg-sage-light);
	color: var(--nfg-forest);
	font-family: var(--nfg-font-display);
	font-size: 1.2rem;
	font-weight: 600;
}
.nfg-card--category .nfg-card__title { font-size: var(--nfg-text-md); }

.nfg-card--journal { background: transparent; border-color: transparent; }
.nfg-card--journal .nfg-card__body { padding: var(--nfg-space-4) 0 0; }
.nfg-card--journal .nfg-card__media { border-radius: var(--nfg-radius-md); }
.nfg-card--journal:hover { box-shadow: none; }
.nfg-card__title--journal { font-size: var(--nfg-text-md); }

/* --- Filters -------------------------------------------------------------------- */
.nfg-filters { margin-bottom: var(--nfg-space-5); }
.nfg-filters__label {
	margin: 0 0 var(--nfg-space-3);
	font-size: var(--nfg-text-xs);
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	color: var(--nfg-muted);
}
.nfg-filters__chips { display: flex; flex-wrap: wrap; gap: var(--nfg-space-2); }

/* --- Featured interaction ---------------------------------------------------------- */
.nfg-featured {
	background: var(--nfg-surface);
	border: 1px solid var(--nfg-line);
	border-radius: var(--nfg-radius-lg);
	overflow: hidden;
	margin-block: var(--nfg-space-8);
}

.nfg-featured__inner { display: grid; }

.nfg-featured__body {
	padding: clamp(1.5rem, 4vw, 3.25rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--nfg-space-4);
}

.nfg-featured__kicker {
	margin: 0;
	font-family: var(--nfg-font-display);
	font-size: var(--nfg-text-lg);
	color: var(--nfg-moss);
}

.nfg-featured__title {
	margin: 0;
	font-size: var(--nfg-text-2xl);
	line-height: 1.15;
}
.nfg-featured__title a { color: var(--nfg-forest-deep); text-decoration: none; }
.nfg-featured__title a:hover { color: var(--nfg-forest); }

.nfg-featured__excerpt {
	margin: 0;
	color: var(--nfg-muted);
	max-width: 52ch;
}

.nfg-featured__media { background: var(--nfg-panel); min-height: 240px; }
.nfg-featured__media img,
.nfg-featured__media a {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nfg-featured__media .nfg-media-placeholder { height: 100%; border-radius: 0; }

.nfg-featured--archive { margin-top: var(--nfg-space-6); }

/* --- Hero ------------------------------------------------------------------------- */
.nfg-hero {
	padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
}

.nfg-hero__title {
	font-size: var(--nfg-text-3xl);
	line-height: 1.02;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 var(--nfg-space-4);
}

.nfg-hero__tagline {
	font-family: var(--nfg-font-display);
	font-style: italic;
	font-size: clamp(1.3rem, 1rem + 1.4vw, 1.85rem);
	color: var(--nfg-moss);
	margin: 0 0 var(--nfg-space-4);
}

.nfg-hero__standfirst {
	font-size: var(--nfg-text-md);
	color: var(--nfg-muted);
	max-width: 44ch;
	margin-bottom: var(--nfg-space-6);
}

/* Style the core search block to match the theme's own form. */
.nfg-hero__search .wp-block-search__inside-wrapper {
	background: var(--nfg-surface);
	border: 1px solid var(--nfg-line-strong);
	border-radius: var(--nfg-radius-pill);
	padding: 0.35rem 0.4rem 0.35rem 1.15rem;
	gap: var(--nfg-space-2);
}
.nfg-hero__search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--nfg-moss);
	box-shadow: 0 0 0 3px var(--nfg-sage-light);
}
.nfg-hero__search .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0.6rem 0;
	font-size: var(--nfg-text-base);
	color: var(--nfg-ink);
}
.nfg-hero__search .wp-block-search__input:focus { outline: none; }
.nfg-hero__search .wp-block-search__button {
	margin: 0;
	border: 0;
	border-radius: var(--nfg-radius-pill);
	background: var(--nfg-forest);
	color: #fff;
	padding: 0.6rem 1.3rem;
	font-size: var(--nfg-text-sm);
	font-weight: 600;
}
.nfg-hero__search .wp-block-search__button:hover { background: var(--nfg-forest-deep); }

/* The hero visual reserves its space whether or not an image is set. */
.nfg-hero__visual { margin: 0; }
.nfg-hero__visual img { border-radius: var(--nfg-radius-lg); width: 100%; }
.nfg-hero__visual:not(:has(img)) {
	display: block;
	aspect-ratio: 8 / 5;
	border-radius: var(--nfg-radius-lg);
	background:
		radial-gradient(circle at 26% 30%, var(--nfg-sage) 0 9px, transparent 10px),
		radial-gradient(circle at 62% 22%, var(--nfg-amber-soft) 0 14px, transparent 15px),
		radial-gradient(circle at 48% 55%, var(--nfg-forest) 0 22px, transparent 23px),
		radial-gradient(circle at 78% 66%, var(--nfg-sage-light) 0 12px, transparent 13px),
		radial-gradient(circle at 22% 74%, var(--nfg-sage-light) 0 10px, transparent 11px),
		linear-gradient(150deg, var(--nfg-panel-warm), var(--nfg-panel));
}

/* --- Definition band ("What is a nutrient interaction?") --------------------------- */
.nfg-definition__title { font-size: var(--nfg-text-xl); }

.nfg-states { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nfg-space-3); }
.nfg-states__item {
	position: relative;
	padding-left: 2.6rem;
	color: var(--nfg-ink);
}
.nfg-states__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	display: block;
}
.nfg-states__item::after {
	position: absolute;
	left: 0;
	top: 0.1em;
	width: 1.75rem;
	height: 1.75rem;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.95rem;
}
.nfg-states__item--up::before { background: var(--nfg-sage-light); }
.nfg-states__item--up::after { content: "↑"; color: var(--nfg-forest); }
.nfg-states__item--down::before { background: var(--nfg-clay-soft); }
.nfg-states__item--down::after { content: "↓"; color: var(--nfg-clay); }
.nfg-states__item--neutral::before { background: var(--nfg-amber-soft); }
.nfg-states__item--neutral::after { content: "="; color: var(--nfg-amber-text); }
.nfg-states__item--unknown::before { background: var(--nfg-violet-soft); }
.nfg-states__item--unknown::after { content: "~"; color: #6C5F86; }

/* --- Process flow ------------------------------------------------------------------
   Signature element: numbered stages joined by a dotted spine. It is an
   ordered list, so it remains a sequence for screen readers and for anyone
   reading with styles disabled. */
.nfg-flow {
	list-style: none;
	counter-reset: nfg-flow;
	margin: var(--nfg-space-6) 0 0;
	padding: 0;
	display: grid;
	gap: var(--nfg-space-5);
}

.nfg-flow__step {
	counter-increment: nfg-flow;
	position: relative;
	padding-left: 3.25rem;
	color: var(--nfg-muted);
}
.nfg-flow__step strong { color: var(--nfg-forest-deep); }

.nfg-flow__step::before {
	content: counter(nfg-flow, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--nfg-sage);
	border-radius: 50%;
	background: var(--nfg-surface);
	color: var(--nfg-moss);
	font-family: var(--nfg-font-utility);
	font-size: var(--nfg-text-xs);
}

.nfg-flow__step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.125rem;
	top: 2.4rem;
	bottom: calc(-1 * var(--nfg-space-5));
	border-left: 1px dashed var(--nfg-sage);
}

/* --- Nuance and evidence bands -------------------------------------------------------- */
.nfg-nuance__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nfg-space-4); }
.nfg-nuance__list li {
	padding-left: var(--nfg-space-5);
	border-left: 2px solid var(--nfg-sage);
	color: var(--nfg-muted);
}
.nfg-nuance__list strong { color: var(--nfg-forest-deep); }

.nfg-evidence__heading { font-size: var(--nfg-text-md); }
.nfg-evidence ul { color: var(--nfg-muted); }

.nfg-note {
	background: var(--nfg-sage-light);
	border-radius: var(--nfg-radius-md);
	padding: var(--nfg-space-4) var(--nfg-space-5);
	font-size: 0.95rem;
	color: var(--nfg-forest-deep);
}
.nfg-note--inline { margin-top: var(--nfg-space-5); }
.nfg-note__label {
	font-size: var(--nfg-text-xs);
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	color: var(--nfg-moss);
	margin: 0 0 var(--nfg-space-2);
}

/* --- Closing CTA ---------------------------------------------------------------------- */
.nfg-cta {
	background: var(--nfg-forest-deep);
	border-radius: var(--nfg-radius-lg);
	padding: clamp(2rem, 5vw, 4rem);
	text-align: center;
	margin-block: var(--nfg-space-8);
	color: #E8EDE6;
}
.nfg-cta__title { color: #fff; margin-bottom: var(--nfg-space-3); }
.nfg-cta__text { color: #B9C7B5; max-width: 48ch; margin-inline: auto; }
.nfg-cta .wp-block-button__link {
	background: var(--nfg-sage-light);
	border-color: var(--nfg-sage-light);
	color: var(--nfg-forest-deep);
}
.nfg-cta .wp-block-button__link:hover { background: #fff; border-color: #fff; color: var(--nfg-forest-deep); }
.nfg-cta__buttons { justify-content: center; }

/* --- Archive hero ---------------------------------------------------------------------- */
.nfg-archive-hero { padding-block: var(--nfg-space-7) var(--nfg-space-5); }
.nfg-archive-hero__title { margin-bottom: var(--nfg-space-4); }
.nfg-archive-hero__description { max-width: 62ch; color: var(--nfg-muted); }
.nfg-archive-hero--search .nfg-search { margin-block: var(--nfg-space-5); }

/* --- Search results ---------------------------------------------------------------------- */
.nfg-search-terms { margin-bottom: var(--nfg-space-6); }
.nfg-search-terms__title {
	font-family: var(--nfg-font-body);
	font-size: var(--nfg-text-xs);
	letter-spacing: var(--nfg-tracking-wide);
	text-transform: uppercase;
	color: var(--nfg-muted);
	margin-bottom: var(--nfg-space-3);
}
.nfg-chip--section { background: var(--nfg-sage-light); border-color: var(--nfg-sage); }

.nfg-results { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nfg-space-4); }
.nfg-result {
	display: flex;
	gap: var(--nfg-space-5);
	align-items: flex-start;
	justify-content: space-between;
	padding-bottom: var(--nfg-space-4);
	border-bottom: 1px solid var(--nfg-line);
}
.nfg-result__title { font-size: var(--nfg-text-lg); margin: var(--nfg-space-2) 0; }
.nfg-result__title a { color: var(--nfg-forest-deep); text-decoration: none; }
.nfg-result__title a:hover { text-decoration: underline; }
.nfg-result__excerpt { margin: 0; color: var(--nfg-muted); font-size: 0.95rem; }
.nfg-result__media { flex: 0 0 120px; }
.nfg-result__media img { border-radius: var(--nfg-radius-sm); aspect-ratio: 3 / 2; object-fit: cover; }

.nfg-empty-state { padding-block: var(--nfg-space-6) var(--nfg-space-8); }
.nfg-empty-state__title { font-size: var(--nfg-text-xl); }

/* --- 404 ------------------------------------------------------------------------------------ */
.nfg-404 { padding-block: var(--nfg-space-8); }
.nfg-404__text { color: var(--nfg-muted); margin-bottom: var(--nfg-space-5); }
.nfg-404__subtitle { font-size: var(--nfg-text-md); margin-top: var(--nfg-space-6); }

/* --- Related categories ---------------------------------------------------------------------- */
.nfg-related-categories {
	margin-block: var(--nfg-space-8);
	padding-top: var(--nfg-space-6);
	border-top: 1px solid var(--nfg-line);
}

/* --- Editor-only affordances ------------------------------------------------------------------- */
.nfg-quiz-editor {
	border: 1px solid var(--nfg-line-strong);
	border-radius: var(--nfg-radius-md);
	padding: var(--nfg-space-5);
	background: var(--nfg-panel-warm);
}
.nfg-quiz-editor__row {
	display: flex;
	align-items: center;
	gap: var(--nfg-space-3);
	margin-bottom: var(--nfg-space-2);
}
.nfg-quiz-editor__row .components-base-control { flex: 1; margin-bottom: 0; }
.nfg-quiz-editor__hint { font-size: var(--nfg-text-sm); color: var(--nfg-muted); }

/* ==========================================================================
   Tablet and desktop
   ========================================================================== */
@media (min-width: 600px) {
	.nfg-grid--2, .nfg-grid--3, .nfg-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.nfg-flow { gap: var(--nfg-space-6); }
}

@media (min-width: 782px) {
	.nfg-section__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
	.nfg-section__headings { max-width: 60ch; }

	.nfg-featured__inner { grid-template-columns: 1fr 1fr; align-items: stretch; }

	.nfg-hero__title { margin-bottom: var(--nfg-space-5); }
}

@media (min-width: 1000px) {
	.nfg-grid--3 { grid-template-columns: repeat(3, 1fr); }
	.nfg-grid--4 { grid-template-columns: repeat(4, 1fr); }

	/* The flow becomes a horizontal spine with room to breathe. */
	.nfg-flow {
		grid-template-columns: repeat(5, 1fr);
		gap: var(--nfg-space-4);
	}
	.nfg-flow__step {
		padding-left: 0;
		padding-top: 3.25rem;
		font-size: 0.95rem;
	}
	.nfg-flow__step::before { left: 0; }
	.nfg-flow__step:not(:last-child)::after {
		left: 2.5rem;
		top: 1.125rem;
		bottom: auto;
		right: calc(-1 * var(--nfg-space-4));
		border-left: 0;
		border-top: 1px dashed var(--nfg-sage);
	}
}