/* =============================================================================
   Journal index as a magazine contents page (template-journal-hub.php), body.ca-journal-hub.
   Frame (header, footer, Jost 500/600, --ui-* tokens) from ui.css. House tokens only.
   Lead story, then search + filter chips, then a card grid. Cards are container-query driven:
   a compact row in a narrow cell, a stacked card in a wide one. Entries without an image get a
   typographic panel (the title's initial on ruled paper), never a stock photograph.
   ============================================================================= */
html:has(body.ca-journal-hub), body.ca-journal-hub { overflow-x: clip; }
body.ca-journal-hub { background: var(--ui-bg); }
body.ca-journal-hub .jh { display: block; color: var(--ui-ink); background: var(--ui-bg); font-family: 'Jost', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.6; }
body.ca-journal-hub .jh *, body.ca-journal-hub .jh *::before, body.ca-journal-hub .jh *::after { box-sizing: border-box; }
body.ca-journal-hub .jh-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 3rem); }
body.ca-journal-hub .jh h1, body.ca-journal-hub .jh h2, body.ca-journal-hub .jh h3 { font-family: 'Jost', sans-serif; font-style: normal; text-transform: none; letter-spacing: -.005em; color: var(--ui-ink); text-align: left; }
body.ca-journal-hub .jh p { text-align: left; }

/* Masthead of the page */
body.ca-journal-hub .jh-head { padding: clamp(2rem, 5vw, 3.75rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
body.ca-journal-hub .jh .jh-eyebrow { font-family: 'Jost', sans-serif !important; font-style: normal !important; margin: 0 0 .6rem; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ui-accent); }
body.ca-journal-hub .jh-h1 { font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 3vw, 3.6rem) !important; line-height: 1.08 !important;  /* the theme's inline h1:not(...) chain outranks a plain class */ margin: 0 0 .9rem; max-width: 16ch; }
body.ca-journal-hub .jh-lead-in { margin: 0; max-width: 34em; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--ui-ink-2); }

/* Shared bits */
body.ca-journal-hub .jh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; margin: 0; font-size: 14px; color: var(--ui-ink-2); }
body.ca-journal-hub .jh-when { white-space: nowrap; }
body.ca-journal-hub .jh-flag { flex: 1 0 100%; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ui-accent); }
body.ca-journal-hub .jh-stretch { color: inherit; text-decoration: none; }
body.ca-journal-hub .jh-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
body.ca-journal-hub .jh-stretch:focus-visible { outline: none; }
body.ca-journal-hub .jh-meta > .jh-tourlink { margin-left: auto; }
body.ca-journal-hub .jh-tourlink { position: relative; z-index: 2; font-weight: 500; color: var(--ui-ink); text-decoration: underline; text-decoration-color: var(--ui-accent); text-underline-offset: 3px; padding: .35rem 0; }
body.ca-journal-hub .jh-tourlink:hover { color: var(--ui-accent); }
body.ca-journal-hub .jh-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.3rem; border-radius: var(--ui-radius-sm); font: 600 16px/1.2 'Jost', sans-serif; text-decoration: none; text-transform: none; letter-spacing: .01em; cursor: pointer; transition: border-color var(--ca-transition), background var(--ca-transition); }
body.ca-journal-hub .jh-btn-ghost { background: transparent; color: var(--ui-ink); border: 1px solid color-mix(in srgb, var(--obsidian) 35%, transparent); }
body.ca-journal-hub .jh-btn-ghost:hover { border-color: var(--ui-ink); color: var(--ui-ink); background: var(--ui-paper); }
body.ca-journal-hub .jh-btn:focus-visible, body.ca-journal-hub .jh-tourlink:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }

/* The typographic panel: the title's initial on ruled paper */
body.ca-journal-hub .jh-lead-media, body.ca-journal-hub .jh-card-media {
    position: relative; overflow: hidden; display: grid; place-items: center;
    background:
        repeating-linear-gradient(0deg, transparent 0 27px, var(--ui-line) 27px 28px),
        linear-gradient(150deg, var(--ui-tint), color-mix(in srgb, var(--beige) 70%, var(--gold-pale)));
}
body.ca-journal-hub .jh-lead-media img, body.ca-journal-hub .jh-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.ca-journal-hub .jh-mono { font-family: 'Jost', sans-serif; font-weight: 600; line-height: 1; color: color-mix(in srgb, var(--ui-accent) 70%, transparent); user-select: none; transition: transform 600ms cubic-bezier(.2, .7, .2, 1); }

/* Lead story */
body.ca-journal-hub .jh-lead-wrap { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
body.ca-journal-hub .jh-lead { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; transition: box-shadow var(--ca-transition); }
body.ca-journal-hub .jh-lead:hover, body.ca-journal-hub .jh-lead:focus-within { box-shadow: var(--ui-shadow); }
body.ca-journal-hub .jh-lead:has(.jh-stretch:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 3px; }
body.ca-journal-hub .jh-lead-media { min-height: 320px; }
body.ca-journal-hub .jh-lead .jh-mono { font-size: clamp(9rem, 6rem + 12vw, 17rem); }
body.ca-journal-hub .jh-lead:hover .jh-mono { transform: scale(1.04); }
body.ca-journal-hub .jh-lead-body { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(1.5rem, 4vw, 3rem); }
body.ca-journal-hub .jh-lead-title { margin: 0; font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.2rem); line-height: 1.15; }
body.ca-journal-hub .jh-dek { margin: 0; font-size: 17px; color: var(--ui-ink-2); max-width: 36em; }
body.ca-journal-hub .jh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: .5rem; }
body.ca-journal-hub .jh-lead:hover .jh-btn-ghost { border-color: var(--ui-ink); }

/* Index bar: heading, chips, search */
body.ca-journal-hub .jh-index { padding: clamp(2.5rem, 6vw, 4.5rem) 0; background: var(--ui-tint); scroll-margin-top: 80px; }
body.ca-journal-hub .jh-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin: 0 0 .75rem; }
body.ca-journal-hub .jh-h2 { font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem); line-height: 1.15; margin: 0; }
body.ca-journal-hub .jh-tools { flex: 0 1 640px; justify-content: flex-end; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
body.ca-journal-hub .jh-chips { display: flex; gap: .5rem; flex: none; }
body.ca-journal-hub .jh-chips button { appearance: none; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-paper); color: var(--ui-ink); font: 500 15px 'Jost', sans-serif; cursor: pointer; text-transform: none; letter-spacing: 0; white-space: nowrap; transition: background var(--ca-transition), color var(--ca-transition); }
body.ca-journal-hub .jh-chips button span { color: var(--ui-ink-2); margin-left: .25rem; }
body.ca-journal-hub .jh-chips button[aria-pressed="true"] { background: var(--ui-ink); border-color: var(--ui-ink); color: var(--ivory); }
body.ca-journal-hub .jh-chips button[aria-pressed="true"] span { color: color-mix(in srgb, var(--ivory) 70%, transparent); }
body.ca-journal-hub .jh-chips button:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
body.ca-journal-hub .jh-search { position: relative; display: flex; align-items: center; margin: 0; min-width: min(100%, 280px); flex: 1 1 240px; }
body.ca-journal-hub .jh-search svg { position: absolute; left: .9rem; color: var(--ui-ink-2); pointer-events: none; }
body.ca-journal-hub .jh-search input { width: 100%; min-height: 44px; margin: 0; padding: 0 1rem 0 2.6rem; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-paper); color: var(--ui-ink); font: 400 16px 'Jost', sans-serif; box-shadow: none; transition: border-color var(--ca-transition), box-shadow var(--ca-transition); }
body.ca-journal-hub .jh-search input::placeholder { color: var(--ui-ink-2); opacity: .8; }
body.ca-journal-hub .jh-search input:focus { outline: none; border-color: var(--ui-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 25%, transparent); }
body.ca-journal-hub .jh-count { margin: 0 0 1.25rem; font-size: 14px; color: var(--ui-ink-2); }

/* Grid of cards. Each cell is a size container so the card shapes itself to its own width. */
body.ca-journal-hub .jh-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1.25rem; }
body.ca-journal-hub .jh-cell { margin: 0; padding: 0; container-type: inline-size; container-name: jhcard; }
body.ca-journal-hub .jh-cell::before { content: none; }
body.ca-journal-hub .jh-cell[hidden] { display: none; }
body.ca-journal-hub .jh:not([data-filtering]) .jh-cell.is-lead { display: none; }   /* the lead is above until a filter runs */
body.ca-journal-hub .jh[data-filtering] .jh-lead-wrap { display: none; }
body.ca-journal-hub .jh-card { position: relative; height: 100%; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 0; background: var(--ui-paper); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; transition: box-shadow var(--ca-transition), transform var(--ca-transition); }
body.ca-journal-hub .jh-card:hover { box-shadow: var(--ui-shadow); transform: translateY(-2px); }
body.ca-journal-hub .jh-card:has(.jh-stretch:focus-visible) { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
body.ca-journal-hub .jh-card-media { min-height: 100%; }
body.ca-journal-hub .jh-card .jh-mono { font-size: 2.6rem; }
body.ca-journal-hub .jh-card:hover .jh-mono { transform: scale(1.08); }
body.ca-journal-hub .jh-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.05rem; }
body.ca-journal-hub .jh-card-title { margin: 0; font-weight: 600; font-size: 18px; line-height: 1.3; }
body.ca-journal-hub .jh-card-dek { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ui-ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body.ca-journal-hub .jh-card .jh-meta { margin-top: auto; padding-top: .25rem; }

@container jhcard (min-width: 340px) {
    body.ca-journal-hub .jh-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
    body.ca-journal-hub .jh-card-media { aspect-ratio: 16 / 7; min-height: 0; }
    body.ca-journal-hub .jh-card .jh-mono { font-size: 5.5rem; }
    body.ca-journal-hub .jh-card-body { padding: 1.15rem 1.3rem 1.25rem; }
    body.ca-journal-hub .jh-card-title { font-size: 19px; }
}
@container jhcard (min-width: 520px) {
    body.ca-journal-hub .jh-card { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: none; }
    body.ca-journal-hub .jh-card-media { aspect-ratio: auto; min-height: 100%; }
}

/* Empty state */
body.ca-journal-hub .jh-empty { padding: 2.5rem 1.5rem; text-align: center; border: 1px dashed color-mix(in srgb, var(--obsidian) 22%, transparent); border-radius: var(--ui-radius); background: var(--ui-paper); }
body.ca-journal-hub .jh-empty[hidden] { display: none; }
body.ca-journal-hub .jh-empty p { margin: 0 0 1rem; text-align: center; font-size: 17px; color: var(--ui-ink); }

/* Close */
body.ca-journal-hub .jh-close { padding: clamp(2rem, 5vw, 3rem) 0 clamp(2.5rem, 6vw, 4rem); text-align: center; }
body.ca-journal-hub .jh-close .jh-wrap { display: flex; justify-content: center; }

/* View transitions when filtering (Chromium today; other browsers simply swap) */
html:has(body.ca-journal-hub)::view-transition-group(*) { animation-duration: 280ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }

@media (max-width: 860px) {
    body.ca-journal-hub .jh-lead { grid-template-columns: minmax(0, 1fr); }
    body.ca-journal-hub .jh-lead-media { min-height: 0; aspect-ratio: 16 / 9; }
    body.ca-journal-hub .jh-lead .jh-mono { font-size: clamp(7rem, 4rem + 14vw, 11rem); }
    body.ca-journal-hub .jh-tools { width: 100%; }
}
@media (max-width: 640px) {
    body.ca-journal-hub .jh-lead-media { aspect-ratio: 2 / 1; }
    body.ca-journal-hub .jh-lead-body { gap: .8rem; }
    body.ca-journal-hub .jh-chips { flex: 1 1 100%; }
    body.ca-journal-hub .jh-search { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    body.ca-journal-hub .jh-card, body.ca-journal-hub .jh-mono { transition: none; }
    body.ca-journal-hub .jh-card:hover { transform: none; }
    html:has(body.ca-journal-hub)::view-transition-group(*), html:has(body.ca-journal-hub)::view-transition-old(*), html:has(body.ca-journal-hub)::view-transition-new(*) { animation: none !important; }
}

/* Phone action bar: the shared .ui-mbar (ui-light.php, ui.css) since m-details 2026-10-08, the same bar as every family.
   The green button style stays for any WhatsApp button the page carries. */
body.ca-journal-hub .jh-btn-wa { background: var(--wa-green); color: var(--ivory); border: 1px solid var(--wa-green); }
body.ca-journal-hub .jh-btn-wa:hover { background: var(--wa-green-lt); border-color: var(--wa-green-lt); color: var(--ivory); }