/*
 * Kukburi — Journal section: the /journal/ index (templates/page-journal.html)
 * and its individual article pages (templates/page-handpicked-for-kukburi.html,
 * templates/page-build-your-table.html — "A Day in the Kitchen" is on hold,
 * no template for it yet). Enqueued on all three (functions.php).
 *
 * .journal-grid / .journal-card moved here verbatim from
 * assets/css/home.css — the 3 cards they style were relocated from the
 * homepage to Section B of this page, so their styling moved with them
 * rather than staying behind as dead weight in home.css.
 */
.journal-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.journal-card img{ aspect-ratio: 16/11; object-fit: cover; border-radius: 4px; margin-bottom: 18px; }
.journal-card .tag{ display: inline-block; background: var(--green); color: #fff; font-family: 'Jost',sans-serif; font-size: .65rem; text-transform: uppercase; padding: 4px 10px; margin-bottom: 12px; }
.journal-card h4{ font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; line-height: 1.3; }
.journal-card p{ font-size: .84rem; opacity: .68; line-height: 1.5; }
.journal-card .date{ font-family: 'Jost',sans-serif; font-size: .72rem; opacity: .5; margin-top: 12px; display: block; }
/* Ingredients/Family Meals are now real links to their own article pages
 * (Behind the Scenes stays a plain, non-interactive div — its page doesn't
 * exist yet, see the template's own comment) — same hover affordance
 * .dish-card already uses elsewhere for a clickable card, so a real link
 * with zero visual affordance isn't the new, silent default here. `a{
 * color:inherit; text-decoration:none }` is already global (site.css), so
 * turning the wrapper from a div into an anchor needed no color/underline
 * reset of its own. */
a.journal-card{ display: block; transition: transform .25s ease, box-shadow .25s ease; }
a.journal-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }

/* Individual article pages: a single header photo above the
 * .page-banner text (site.css) — full-bleed-ish, wider than a
 * .journal-card thumbnail since it's the one image the whole page has,
 * not one of three peers in a grid. */
.article-header-img{ max-width: 900px; margin: 0 auto 48px; }
.article-header-img img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 6px; display: block; }

/* "Build Your Table"'s numbered how-to list — same section-label voice as
 * .eyebrow (uppercase, brown, tracked-out) for the steps header, then one
 * flex row per step. flex-direction stays the physical `row` — under
 * dir="rtl" (the .i18n-ar wrapper) a flex row already reverses visually on
 * its own, no separate RTL rule needed, same as every other flex layout
 * in this theme. */
.steps-header{ display: block; color: var(--brown); text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; font-weight: 700; margin: 40px 0 24px; }
.steps-list{ display: flex; flex-direction: column; gap: 26px; margin-bottom: 40px; }
.step{ display: flex; gap: 18px; align-items: flex-start; }
.step-num{ flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--brown); color: #fff; display: flex; align-items: center; justify-content: center; font-family: 'Jost',sans-serif; font-weight: 700; font-size: .95rem; }
.step-title{ display: block; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: .92rem; margin-bottom: 4px; }
.step-body{ font-size: .95rem; line-height: 1.6; opacity: .8; }

/* Section A: brand story — a single readable column, not a grid/card
   layout, since it's continuous prose rather than repeating content. */
.story-section{ max-width: 760px; margin: 0 auto 80px; }
.story-section p{ font-size: 1rem; line-height: 1.8; opacity: .82; margin-bottom: 22px; }
.story-tagline{ display: block; text-align: center; font-size: 1.5rem; font-style: italic; color: var(--brown); margin-top: 40px; }
body[dir="rtl"] .story-tagline{ font-family: 'Noto Naskh Arabic', serif; font-style: normal; }

@media (max-width: 980px){
	.journal-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
	.journal-grid{ grid-template-columns: 1fr; }
}