/*
 * Roots 'n' Fruits — Journal (public blog) styles.
 *
 * Added 2026-07-30 (local only). ALL Journal presentation lives here, so the look
 * is swappable by replacing this one file. Enqueued from inc/journal.php on the
 * home page, the Journal index, single posts, and archives (never on search).
 *
 * Built entirely on the shared design tokens (assets/css/tokens.css) and the
 * shared shell in assets/css/offer.css (.rnf-sec, .rnf-sec__inner, .rnf-kick,
 * .rnf .disp, .rnf-prose). Every new selector is namespaced .rnf-journal*, so
 * nothing here can reach an existing component. Presentation only — no layout
 * decisions that belong in the templates.
 *
 * The grid numbers below are deliberately IDENTICAL to .rnf-follow__grid in
 * home.css (4 up / 18px gap, 2 up at 860px, 1 up at 520px) so the home page's
 * "From the journal" band shares the rhythm of the "Follow along" tiles directly
 * above it. Change them together.
 */

/* ---------------------------------------------------------------------------
 * Shared grid — home four-up, Journal index, archives
 * ------------------------------------------------------------------------- */
.rnf-journal-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------- */
.rnf-journal-card {
	display: flex;
	flex-direction: column;
	background: var(--paper2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.rnf-journal-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(44, 46, 40, 0.10);
}

.rnf-journal-card__media {
	display: block;
	line-height: 0;
	background: var(--sage2);
}

.rnf-journal-card__img,
.rnf-journal-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* No featured image: a solid sage block at the same aspect ratio, so an
   unillustrated card still looks deliberate rather than broken. */
.rnf-journal-card__ph {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: var(--sage2);
}

.rnf-journal-card__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 20px;
}

/* Eyebrow row — builds on the shared .rnf-kick (size/color/tracking). */
.rnf-journal-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin: 0;
}

.rnf-journal-card__cat {
	color: var(--kick);
	text-decoration: none;
}

.rnf-journal-card__cat:hover {
	text-decoration: underline;
}

.rnf-journal-card__sep {
	color: var(--sage);
}

.rnf-journal-card__title {
	font-size: 19px;
	line-height: 1.28;
	margin: 0;
}

.rnf-journal-card__title a {
	color: var(--ink);
	text-decoration: none;
}

.rnf-journal-card__title a:hover {
	color: var(--pine);
	text-decoration: underline;
}

.rnf-journal-card__excerpt {
	color: var(--inks);
	font-size: 14.5px;
	line-height: 1.6;
}

.rnf-journal-card__excerpt p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Journal index — head + featured latest
 * ------------------------------------------------------------------------- */
.rnf-journal__head {
	text-align: center;
	margin: 0 0 28px;
}

.rnf-journal__kick {
	text-align: center;
}

.rnf-journal__title {
	font-size: clamp(28px, 5vw, 40px);
	line-height: 1.15;
	margin: 0;
}

.rnf-journal__desc {
	color: var(--inks);
	font-size: 15px;
	line-height: 1.65;
	max-width: 60ch;
	margin: 12px auto 0;
}

.rnf-journal__empty {
	color: var(--inks);
	text-align: center;
	margin: 32px 0;
}

.rnf-journal-hero {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 26px;
	align-items: center;
	background: var(--paper2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	margin: 0 0 34px;
}

.rnf-journal-hero__media {
	display: block;
	line-height: 0;
	height: 100%;
	background: var(--sage2);
}

.rnf-journal-hero__img,
.rnf-journal-hero__media img,
.rnf-journal-hero__media .rnf-journal-card__ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	aspect-ratio: auto;
	object-fit: cover;
}

.rnf-journal-hero__body {
	padding: 26px 30px 26px 4px;
}

.rnf-journal-hero__title {
	font-size: clamp(22px, 3.4vw, 30px);
	line-height: 1.2;
	margin: 6px 0 10px;
}

.rnf-journal-hero__title a {
	color: var(--ink);
	text-decoration: none;
}

.rnf-journal-hero__title a:hover {
	color: var(--pine);
	text-decoration: underline;
}

.rnf-journal-hero__excerpt {
	color: var(--inks);
	font-size: 15.5px;
	line-height: 1.65;
}

.rnf-journal-hero__excerpt p {
	margin: 0 0 14px;
}

.rnf-journal-hero__more {
	display: inline-block;
	color: var(--pine);
	font-weight: 500;
	text-decoration: none;
}

.rnf-journal-hero__more:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Pagination (shared by the Journal index and archives)
 * ------------------------------------------------------------------------- */
.rnf-journal-pager {
	margin: 32px 0 0;
	text-align: center;
}

.rnf-journal-pager .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.rnf-journal-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.rnf-journal-pager .page-numbers {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--paper2);
	color: var(--pine);
	font-size: 14px;
	text-decoration: none;
}

.rnf-journal-pager a.page-numbers:hover {
	background: var(--sage2);
}

.rnf-journal-pager .page-numbers.current {
	background: var(--pine);
	border-color: var(--pine);
	color: var(--on-pine);
}

.rnf-journal__backlink {
	margin: 30px 0 0;
	text-align: center;
	font-family: var(--font-serif);
	font-style: italic;
}

.rnf-journal__backlink a {
	color: var(--pine);
	text-decoration: none;
}

.rnf-journal__backlink a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Single post
 *
 * The body itself is NOT styled here — it reuses .rnf-prose / .rnf-prose__body
 * from offer.css (the same containers page.php uses), so an article's typography
 * matches the legal pages exactly. Only the head, hero image and foot are new.
 * ------------------------------------------------------------------------- */
.rnf-journal-single__head {
	max-width: 720px;
	margin: 0 auto 22px;
	text-align: center;
}

.rnf-journal-single__head .rnf-journal-card__meta {
	justify-content: center;
}

.rnf-journal-single__title {
	font-size: clamp(28px, 5vw, 42px);
	line-height: 1.15;
	margin: 0;
}

.rnf-journal-single__media {
	max-width: 860px;
	margin: 0 auto 30px;
}

.rnf-journal-single__img,
.rnf-journal-single__media img {
	display: block;
	width: 100%;
	border-radius: var(--radius);
}

.rnf-journal-single__foot {
	max-width: 720px;
	margin: 34px auto 0;
	padding-top: 20px;
	border-top: 1px solid var(--line);
	text-align: center;
}

.rnf-journal-single__cats {
	color: var(--inks);
	font-size: 14px;
	margin: 0 0 12px;
}

.rnf-journal-single__cats a {
	color: var(--pine);
}

.rnf-journal-single__back {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--pine);
	text-decoration: none;
}

.rnf-journal-single__back:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Home page band ("From the journal")
 *
 * Sits directly below .rnf-follow, which is --paper; --paper2 here keeps the
 * home page's alternating band rhythm.
 * ------------------------------------------------------------------------- */
.rnf-journal-home {
	background: var(--paper2);
}

.rnf-journal-home__kick {
	text-align: center;
}

.rnf-journal-home__title {
	font-size: clamp(24px, 4vw, 32px);
	line-height: 1.2;
	text-align: center;
	margin: 0 0 26px;
}

.rnf-journal-home__more {
	margin: 26px 0 0;
	text-align: center;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 16px;
}

.rnf-journal-home__more a {
	color: var(--pine);
	text-decoration: none;
}

.rnf-journal-home__more a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Responsive — the grid breakpoints mirror .rnf-follow__grid in home.css
 * ------------------------------------------------------------------------- */
@media (max-width: 860px) {
	.rnf-journal-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.rnf-journal-hero {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.rnf-journal-hero__img,
	.rnf-journal-hero__media img,
	.rnf-journal-hero__media .rnf-journal-card__ph {
		min-height: 0;
		aspect-ratio: 16 / 9;
	}

	.rnf-journal-hero__body {
		padding: 22px 24px 26px;
	}
}

@media (max-width: 520px) {
	.rnf-journal-grid {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin: 0 auto;
	}
}

/* ---------------------------------------------------------------------------
 * BEGIN rnf journal filter
 *
 * Category filter control — added 2026-07-30 (local only). Purely additive:
 * every selector below is new and .rnf-journal-filter*-namespaced, so no
 * existing journal rule changes. Reversible: delete BEGIN..END.
 *
 * The select mirrors .rnf-checkout__select in checkout.css — the theme's only
 * .rnf-namespaced, token-pure select. Its chevron is built from two
 * linear-gradients tinted with var(--inks), so no hex is hardcoded. Note this
 * deliberately does NOT copy portal-category-filter.css, whose data-URI
 * chevron bakes in #272320 (the guide-scoped --ink, a different value from the
 * global --ink used here).
 * ------------------------------------------------------------------------- */

.rnf-journal-filter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0 0 30px;
}

.rnf-journal-filter__select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	min-width: 220px;
	padding: 11px 42px 11px 18px;
	background-color: var(--paper2);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.2;
	cursor: pointer;

	/* Chevron, drawn from tokens so it tracks the palette. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--inks) 50%),
		linear-gradient(135deg, var(--inks) 50%, transparent 50%);
	background-position: calc(100% - 22px) calc(50% + 2px), calc(100% - 17px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.rnf-journal-filter__select:hover {
	border-color: var(--sage);
}

.rnf-journal-filter__select:focus {
	outline: 2px solid var(--sage);
	outline-offset: 1px;
	border-color: var(--sage);
}

/*
 * Two classes on purpose. The button reuses .rnf-btn from offer.css; a single
 * class would tie the outcome to stylesheet load order, so this raises
 * specificity to guarantee the size override wins.
 */
.rnf-journal-filter .rnf-journal-filter__btn {
	padding: 11px 24px;
	font-size: 15px;
}

/* Filtered-view heading, in place of the hero. */
.rnf-journal-filter__heading {
	margin: 0 0 24px;
	color: var(--ink);
	font-size: 26px;
	line-height: 1.25;
	text-align: center;
}

/* 640px matches the precedent set by .section-filter in the guides. */
@media (max-width: 640px) {
	.rnf-journal-filter {
		flex-direction: column;
		align-items: stretch;
	}

	.rnf-journal-filter__select {
		width: 100%;
		min-width: 0;
	}

	.rnf-journal-filter .rnf-journal-filter__btn {
		width: 100%;
		justify-content: center;
	}
}
/* END rnf journal filter */