/*
 * Grounded Journal — Single post ("the product page")
 * Editorial grid: three centred rails sharing one spine.
 *   measure ~680px | wide ~1040px | full = edge-to-edge
 * See docs/single-post-spec.md. Tokens + interaction system: foundation.css.
 */

:root {
	interpolate-size: allow-keywords; /* smooth <details> open where supported */
}

/* ---------- Section colour, derived from the post's category ---------- */

.gj-article { --gj-accent: var(--gj-moss); }
.gj-article.category-wellness { --gj-accent: var(--wellness); }
.gj-article.category-travel { --gj-accent: var(--travel); }
.gj-article.category-food { --gj-accent: var(--food); }
.gj-article.category-journal { --gj-accent: var(--journal); }

body.single { --gj-accent: var(--gj-moss); }
body.single.category-wellness { --gj-accent: var(--wellness); }
body.single.category-travel { --gj-accent: var(--travel); }
body.single.category-food { --gj-accent: var(--food); }
body.single.category-journal { --gj-accent: var(--journal); }

/* ---------- Reading progress hairline ---------- */

.gj-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	z-index: 1000;
	pointer-events: none;
}

.gj-progress__bar {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--gj-accent);
	transform: scaleX(0);
	transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
	.gj-progress { display: none; }
}

/* ---------- Hero: full-bleed image, title set large IN the image ---------- */

.gj-shero {
	position: relative;
	min-height: 78vh;
	min-height: 78svh;
	display: flex;
	align-items: flex-end;
}

.gj-shero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.gj-shero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Soft bottom-up scrim for type legibility */
.gj-shero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(32, 30, 25, .68) 0%, rgba(32, 30, 25, .30) 32%, rgba(32, 30, 25, 0) 58%);
	pointer-events: none;
}

/* Content rides the centred container — aligned to the grid, not the viewport */
.gj-shero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-bottom: clamp(40px, 6vh, 72px);
}

.gj-shero__kicker {
	color: rgba(239, 238, 232, .85);
	margin: 0 0 14px;
}

.gj-shero__title {
	font-family: var(--gj-font-banner);
	font-size: clamp(40px, 5.5vw, 86px);
	line-height: .98;
	letter-spacing: -0.02em;
	color: var(--gj-paper);
	margin: 0 0 18px;
	max-width: 16em;
}

.gj-shero__title .flourish {
	font-style: italic;
	font-weight: 400;
}

.gj-shero__dek {
	font-family: var(--gj-font-text);
	font-style: italic;
	font-size: clamp(17px, 1.5vw, 20px);
	line-height: 1.5;
	color: rgba(239, 238, 232, .92);
	margin: 0 0 16px;
	max-width: 34em;
}

.gj-shero__byline {
	font-family: var(--gj-font-body);
	font-size: 13px;
	letter-spacing: .08em;
	color: rgba(239, 238, 232, .75);
	margin: 0;
}

/* ---------- The content grid: three centred rails ----------
 * Every direct child of the body sits on the measure rail by default;
 * .wide/.img-wide/.gj-gallery/.gj-reveal take the wide rail; .full/.img-full
 * break to the viewport edge. All rails share one centre line, so successive
 * block edges align down the page.
 */

.gj-article__body {
	width: 100%;
	padding-top: clamp(48px, 6vw, 72px);
	font-size: 17px;
}

/* Double-class selectors: the rails must out-rank Kadence/core rules like
   ".entry-content blockquote { margin: 1.5em 0 }" that would otherwise zero
   the inline margins and pin elements to the left edge. */
.entry-content.gj-article__body > * {
	width: min(680px, calc(100% - 48px));
	margin-inline: auto;
}

.entry-content.gj-article__body > .wide,
.entry-content.gj-article__body > .img-wide,
.entry-content.gj-article__body > .gj-gallery,
.entry-content.gj-article__body > .gj-reveal {
	width: min(1040px, calc(100% - 48px));
}

.entry-content.gj-article__body > .full,
.entry-content.gj-article__body > .img-full {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: 0;
}

.gj-article__body > p { margin-block: 0 1.5em; }

/* Warbler drop-cap on the opening paragraph */
.gj-dropcap .gj-article__body > p:first-of-type::first-letter {
	font-family: var(--gj-font-display);
	font-weight: 700;
	font-size: 3.4em;
	line-height: .82;
	float: left;
	padding: .08em .12em 0 0;
	color: var(--gj-ink);
}

/* ---------- Headings ---------- */

.gj-article__body h2 {
	font-family: var(--gj-font-display);
	font-size: clamp(26px, 3vw, 32px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--gj-ink);
	clear: both;
	position: relative;
	padding-top: 26px;
	margin-block: 2.4em .8em;
}

/* Ground-line divider at the top of the measure, draws on scroll-in */
.gj-article__body h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 1px;
	background-color: var(--gj-ink);
	transform-origin: left center;
}

.js-anim .gj-article__body h2::before {
	transform: scaleX(0);
	transition: transform .8s var(--ease);
}

.js-anim .gj-article__body h2.is-in::before {
	transform: scaleX(1);
}

.gj-article__body h3 {
	font-family: var(--gj-font-deck);
	font-size: 22px;
	line-height: 1.25;
	margin-block: 1.8em .6em;
}

/* ---------- Lists ---------- */

.gj-article__body ul {
	list-style: none;
	padding-left: 0;
	margin-block: 0 1.6em;
}

.gj-article__body ul li {
	position: relative;
	padding-left: 22px;
	margin: 8px 0;
}

.gj-article__body ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 8px;
	height: 8px;
	background-color: var(--gj-accent);
}

/* ---------- Pull quote ---------- */

.gj-article__body blockquote {
	border: 0;
	margin-block: 2.6rem;
	padding: 0;
}

.gj-article__body blockquote::before {
	content: "";
	display: block;
	width: 64px;
	height: 1px;
	background-color: var(--gj-accent);
	margin-bottom: 20px;
}

.gj-article__body blockquote p {
	font-family: var(--gj-font-deck);
	font-style: italic;
	font-weight: 400;
	font-size: 26px;
	line-height: 1.35;
	color: var(--gj-ink);
	margin: 0;
}

/* ---------- Image rhythm ----------
 * Standalone landscape → .wide (3:2). Portrait/detail beside text → float
 * within the measure at ~42%, aligned to the measure's edge so the pairing
 * sits mid-page. Galleries → .wide, equal heights (3:2 items).
 * Inline images never hover-zoom.
 */

.gj-article__body figure {
	margin-block: 2.6rem;
}

.gj-article__body figure img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 76vh;
	object-fit: cover;
}

.gj-article__body figcaption {
	font-family: var(--gj-font-body);
	font-size: 13px;
	letter-spacing: .02em;
	color: var(--gj-slate);
	margin-top: 10px;
	text-align: left;
}

.gj-article__body .img-wide img,
.gj-article__body .img-full img {
	aspect-ratio: 3 / 2;
	max-height: none;
}

/* Floats: locked 4:5, aligned to the measure's edges so text wraps mid-page */
.entry-content.gj-article__body > figure.img-left,
.entry-content.gj-article__body > figure.alignleft,
.entry-content.gj-article__body > figure.img-right,
.entry-content.gj-article__body > figure.alignright {
	width: min(286px, 42vw);
}

.entry-content.gj-article__body > figure.img-left,
.entry-content.gj-article__body > figure.alignleft {
	float: left;
	margin: .4rem 2.2rem 1.4rem max(24px, calc((100% - 680px) / 2));
}

.entry-content.gj-article__body > figure.img-right,
.entry-content.gj-article__body > figure.alignright {
	float: right;
	margin: .4rem max(24px, calc((100% - 680px) / 2)) 1.4rem 2.2rem;
}

.gj-article__body figure.img-left img,
.gj-article__body figure.alignleft img,
.gj-article__body figure.img-right img,
.gj-article__body figure.alignright img {
	aspect-ratio: 4 / 5;
	max-height: none;
}

/* 2-up gallery on the wide rail, equal heights */
.gj-article__body .gj-gallery {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-block: 2.6rem;
}

.gj-article__body .gj-gallery figure {
	margin: 0;
	width: 100%;
}

.gj-article__body .gj-gallery img,
.gj-article__body .gj-gallery video {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	max-height: none;
}

/* Video: constrained to the measure (or .wide), locked ratio */
.gj-article__body video {
	display: block;
	width: 100%;
	height: auto;
	background-color: var(--gj-ink);
}

.gj-article__body .gj-video video {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.gj-article__body .gj-video--portrait video {
	aspect-ratio: 9 / 16;
	width: min(400px, 100%);
	margin-inline: auto;
}

/* ---------- Set-piece: scorecard (measure rail) ---------- */

.gj-article__body table,
.gj-article__body .gj-scorecard {
	border-collapse: collapse;
	margin-block: 2.6rem;
}

.gj-article__body th {
	text-align: left;
	font-family: var(--gj-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gj-slate);
	padding: 0 16px 14px 0;
	border-bottom: 1px solid var(--gj-ink);
}

.gj-article__body td {
	padding: 16px 16px 16px 0;
	border-bottom: 1px solid var(--gj-line);
	vertical-align: baseline;
}

.gj-article__body td:nth-child(2) {
	font-family: var(--gj-font-deck);
	font-weight: 700;
	font-size: 19px;
	color: var(--gj-accent);
	white-space: nowrap;
}

.gj-article__body td:nth-child(3) {
	color: var(--gj-slate);
}

/* ---------- Set-piece: overall score ---------- */

.gj-score {
	text-align: center;
	margin-block: 2.6rem 1.2rem;
}

.gj-score .num {
	font-family: var(--gj-font-banner);
	font-weight: 700;
	font-size: clamp(64px, 9vw, 92px);
	line-height: 1;
	color: var(--gj-accent);
}

.gj-score .max {
	font-family: var(--gj-font-deck);
	font-size: 26px;
	color: var(--gj-slate);
	margin-left: 6px;
}

.gj-score .word {
	display: block;
	font-family: var(--gj-font-text);
	font-style: italic;
	font-size: 18px;
	color: var(--gj-ink-2);
	margin-top: 12px;
}

/* ---------- Set-piece: the reveal (wide rail, the payoff moment) ---------- */

.gj-reveal {
	background-color: var(--gj-ink);
	color: var(--gj-paper);
	text-align: center;
	padding: clamp(56px, 8vw, 88px) 28px;
}

.gj-article__body > .gj-reveal {
	margin-block: var(--space-section);
}

.gj-reveal .lbl {
	display: block;
	font-family: var(--gj-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: rgba(239, 238, 232, .55);
}

.gj-reveal .fig {
	display: block;
	font-family: var(--gj-font-banner);
	font-weight: 700;
	font-size: clamp(56px, 10vw, 116px);
	line-height: 1.08;
	margin: 14px 0 18px;
	color: var(--gj-paper);
}

.gj-reveal .sub {
	display: block;
	font-family: var(--gj-font-body);
	font-size: 14px;
	color: rgba(239, 238, 232, .72);
}

/* The moment: band fades in (via .reveal), the figure rises just after */
.js-anim .gj-reveal .fig {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s var(--ease) .18s, transform .6s var(--ease) .18s;
}

.js-anim .gj-reveal.is-in .fig {
	opacity: 1;
	transform: none;
}

/* ---------- Set-piece: FAQ (measure rail) ---------- */

.gj-article__body details {
	border-top: 1px solid var(--gj-line);
}

.gj-article__body details:last-of-type {
	border-bottom: 1px solid var(--gj-line);
}

.gj-article__body summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 22px 44px 22px 0;
	font-family: var(--gj-font-deck);
	font-weight: 700;
	font-size: 20px;
	color: var(--gj-ink);
}

.gj-article__body summary::-webkit-details-marker { display: none; }

.gj-article__body summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 18px;
	font-family: var(--gj-font-body);
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	color: var(--gj-accent);
}

.gj-article__body details[open] summary::after {
	content: "\2013";
}

.gj-article__body details p {
	margin: 0 0 24px;
	color: var(--gj-ink-2);
}

/* Smooth open/close where the platform supports it; snaps elsewhere */
.gj-article__body details::details-content {
	opacity: 0;
	block-size: 0;
	overflow: hidden;
	transition: content-visibility .4s allow-discrete, opacity .4s var(--ease), block-size .4s var(--ease);
}

.gj-article__body details[open]::details-content {
	opacity: 1;
	block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
	.gj-article__body details::details-content { transition: none; }
}

/* ---------- Watch link ---------- */

.gj-article__body .gj-watch {
	text-align: center;
	margin-block: 2.6rem;
}

.gj-article__body .gj-watch a {
	display: inline-block;
	font-family: var(--gj-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gj-paper);
	background-color: var(--gj-ink);
	padding: 16px 32px;
	text-decoration: none;
	border-bottom: 0;
	transition: background-color .3s ease;
}

.gj-article__body .gj-watch a:hover {
	background-color: var(--gj-accent);
	color: var(--gj-paper);
}

/* ---------- Keep reading ---------- */

.gj-related {
	padding-block: var(--space-section);
}

.gj-related__title {
	font-family: var(--gj-font-display);
	font-size: clamp(26px, 3vw, 34px);
	letter-spacing: -0.01em;
	margin: 22px 0 0;
}

/* Related cards derive their own accent from their category */
.gj-related .gj-grid__card { --gj-accent: var(--gj-moss); }
.gj-related .gj-section--wellness { --gj-accent: var(--wellness); }
.gj-related .gj-section--travel { --gj-accent: var(--travel); }
.gj-related .gj-section--food { --gj-accent: var(--food); }
.gj-related .gj-section--journal { --gj-accent: var(--journal); }

/* ---------- Mobile ---------- */

@media (max-width: 700px) {
	.gj-shero { min-height: 70vh; min-height: 70svh; }

	.entry-content.gj-article__body > figure.img-left,
	.entry-content.gj-article__body > figure.alignleft,
	.entry-content.gj-article__body > figure.img-right,
	.entry-content.gj-article__body > figure.alignright {
		float: none;
		width: min(680px, calc(100% - 48px));
		margin: 2rem auto;
	}

	.gj-article__body .gj-gallery {
		grid-template-columns: 1fr;
	}
}