/* The Torah stories (tools/stories.mjs): the hub, a story, the values.
   Only the tokens from base.css, which already carries light and dark, and
   logical properties, so the Hebrew pages mirror without a rule of their own. */

/* ---- Hub ---------------------------------------------------------------- */
/* .hub-top's grid, its bottom margin and the phone's centring are in guide.css. */
.hub-top .guide-hero { margin-bottom: 0; }
.hub-shot { margin: 0; display: grid; justify-items: center; }
.hub-shot .shot-cap { text-align: center; }

.story-book { padding-block: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line); }
.story-book h2 { font-size: var(--step-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.story-book h2 .alt { font-family: var(--f-body); font-size: var(--step-1); font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
/* Each parashah takes as many card widths as it has stories, and the
   parashot flow along the line like books on a shelf. */
.parashot { display: flex; flex-wrap: wrap; gap: 2.25rem 1.25rem; margin-top: 1.5rem; }
.parashah-group { --n: 1; width: min(100%, calc(var(--n) * 17rem + (var(--n) - 1) * 1rem)); }
.parashah-group[data-n="2"] { --n: 2; }
.parashah-group[data-n="3"] { --n: 3; }
.parashah-group[data-n="4"] { --n: 4; }
.parashah-group h3 { font-family: var(--f-body); font-size: var(--step-0); font-weight: 700; letter-spacing: 0; }
.parashah-group h3 a { color: var(--brand); text-decoration: none; }
.parashah-group h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.parashah-group .cards { margin-top: .7rem; }

/* ---- A story ------------------------------------------------------------ */
/* The English search name, one quiet line under the h1. */
.guide-hero .aka { margin-top: -.45rem; font-size: .98rem; color: var(--ink-3); }
.story-text .story-part + .story-part { margin-top: 1.6rem; }
.guide-section .story-part > p { color: var(--ink); font-size: 1.12rem; line-height: 1.7; }
.story-part .quote p { color: var(--ink); }
.guide-section .value-desc { margin-bottom: .9rem; font-weight: 600; color: var(--ink); }
.guide-section .talk { padding: 1rem 1.25rem; border-radius: var(--r-card); background: var(--brand-tint); font-family: var(--f-display); font-size: var(--step-1); line-height: 1.45; color: var(--ink); }
.guide-section .moral { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.35; color: var(--ink); }
/* Frank Ruhl Libre runs Latin words together at display sizes (as base.css
   does for headings); Hebrew keeps its normal spacing. */
.guide-section .moral, .guide-section .talk { word-spacing: .06em; }
[dir="rtl"] .guide-section .moral, [dir="rtl"] .guide-section .talk { word-spacing: normal; }
.guide-section .source { margin-top: 1rem; font-size: .95rem; color: var(--ink-3); }
.source a { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }

/* The options run a, b, c on an English page and א, ב, ג on a Hebrew one. */
.story-qa ol { list-style-type: lower-alpha; }
[dir="rtl"] .story-qa ol { list-style-type: hebrew; }
.story-qa ol li + li { margin-top: .2rem; }
.story-qa .right { color: var(--ink); }

.story-more ul { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 1.5rem 0 0; max-width: 33.5em; display: grid; gap: .55rem; border-top: 1px solid var(--line); }
.story-more a { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }

/* ---- Values ------------------------------------------------------------- */
.value-block h2 { font-size: var(--step-3); margin-bottom: .6rem; }
.value-block .guide-alt { margin-bottom: .6rem; }
.value-block .guide-alt .he { font-size: 1.35rem; }
.value-stories { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; gap: .75rem; }
.value-stories a { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: center; padding: .6rem; border-radius: var(--r-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .2s var(--ease); }
.value-stories a:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.value-stories img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); background: var(--paper-deep); }
.vs-text { display: grid; gap: .15rem; padding-inline-end: .4rem; }
.vs-text .where { font-size: .82rem; color: var(--ink-3); }
.vs-text strong { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.vs-text .one { font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 420px) { .value-stories a { grid-template-columns: 5.25rem minmax(0, 1fr); gap: .75rem; } }