/* ─────────────────────────────────────────────────────────────────────
   Theme: "newspaper" — old-fashioned classified-ads look for Helsinki Live.

   Overrides the shared list components from site.html <style> with a dense,
   multi-column newspaper feel: flat rows (no cards/radius/shadow), thin
   hairlines between rows, vertical rules between columns (CSS multi-column
   column-rule), small-caps category/genre tags instead of color stripes,
   and masthead-style day labels.

   Scope: everything targets :is(body.theme-newspaper, body.theme-newspaper-compact) so other verticals are
   unaffected. The active theme's markup (event-paper rows) is generated by
   the Jinja macros + JS search/bookmark builders in site.html.
   ───────────────────────────────────────────────────────────────────── */

/* Wider layout for the multi-column list */
:is(body.theme-newspaper, body.theme-newspaper-compact) .container {
    max-width: 1080px;
}
:is(body.theme-newspaper, body.theme-newspaper-compact):has(.filter-bar) .container {
    max-width: 1200px;
}

/* ── Masthead-style section + day labels ── */
:is(body.theme-newspaper, body.theme-newspaper-compact) .section-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text);
}

:is(body.theme-newspaper, body.theme-newspaper-compact) .day-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text);
    padding: 8px 0 6px;
    margin-bottom: 6px;
    border-bottom: 2px solid var(--text);
    background: var(--bg);
    backdrop-filter: none;
}

/* Classification headlines (MUSIIKKI / TEATTERI / TAIDE / ...) */
:is(body.theme-newspaper, body.theme-newspaper-compact) .category-group {
    margin: 48px 0 0;
    border-top: 3px double var(--border);
    padding-top: 16px;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .category-group:first-of-type {
    margin-top: 28px;
    border-top: none;
    padding-top: 0;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .category-group > .section-header {
    border-bottom: none;
    margin-bottom: 12px;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .category-group > .section-header .section-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1.1;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .category-group > .section-header .section-title::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--text);
    margin-top: 6px;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .category-group > .section-header .section-count {
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* ── Per-day classification (day heading first, then per-type/genre) ── */
:is(body.theme-newspaper, body.theme-newspaper-compact) .classified-group .day-items {
    margin-top: 2px;
}
/* A category must be allowed to split across columns. The old
   `break-inside: avoid` made each category atomic, and one oversized category
   ('muut' runs to 56–268 rows, up to 14,863px) then consumed a whole column
   by itself — the balancing algorithm could not place the remainder in a third,
   so 6 of 34 day groups rendered with an empty third column at column-count:3.
   Measured 2026-10-25: empty columns 6 -> 0 with this change. */
:is(body.theme-newspaper, body.theme-newspaper-compact) .cat-block {
    break-inside: auto;
    margin: 0 0 10px;
    min-width: 0;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .cat-head {
    /* …and keep a heading with the rows it introduces, so allowing the block
       to split does not strand a heading at the bottom of a column. Measured:
       orphaned headings 0 -> 0 (4 without this rule). */
    break-after: avoid;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding: 4px 0 2px;
    margin: 0 0 2px;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .cat-count,
:is(body.theme-newspaper, body.theme-newspaper-compact) .genre-count {
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .genre-block {
    break-inside: avoid;
    margin: 2px 0 6px;
    min-width: 0;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .genre-head {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-secondary);
    padding: 3px 0 1px;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .cat-head,
:is(body.theme-newspaper, body.theme-newspaper-compact) .genre-head {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 639px) {
    :is(body.theme-newspaper, body.theme-newspaper-compact) .cat-head {
        font-size: 0.76rem;
    }
    :is(body.theme-newspaper, body.theme-newspaper-compact) .genre-head {
        font-size: 0.66rem;
    }
}

/* ── Nav pills: flat newspaper section tabs ── */
:is(body.theme-newspaper, body.theme-newspaper-compact) .nav-pills a {
    border-radius: 0;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 4px 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    background: transparent;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .nav-pills a:hover {
    background: transparent;
    border-color: var(--text-muted);
    color: var(--text);
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .nav-pills a.active {
    background: transparent;
    color: var(--accent);
    border-color: var(--accent);
}

/* ── Flat filter bar ── */
:is(body.theme-newspaper, body.theme-newspaper-compact) .filter-bar {
    border-bottom: 1px solid var(--border);
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .today-genre-pill,
:is(body.theme-newspaper, body.theme-newspaper-compact) .today-expand {
    border-radius: 0;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) #venueFilter {
    border-radius: 0;
}

/* ── Multi-column list (true newspaper columns: top-to-bottom, then across) ── */
:is(body.theme-newspaper, body.theme-newspaper-compact) .today-group-items,
:is(body.theme-newspaper, body.theme-newspaper-compact) .day-items {
    display: block;                       /* drop the card grid */
    column-count: 1;
    column-gap: 28px;
    column-rule: 1px solid #dedede;
}
@media (min-width: 640px) and (max-width: 1023px) {
    :is(body.theme-newspaper, body.theme-newspaper-compact) .today-group-items,
    :is(body.theme-newspaper, body.theme-newspaper-compact) .day-items {
        column-count: 2;
    }
}
@media (min-width: 1024px) {
    :is(body.theme-newspaper, body.theme-newspaper-compact) .today-group-items,
    :is(body.theme-newspaper, body.theme-newspaper-compact) .day-items {
        column-count: 3;
    }
}

/* ── Column plan: renderer-chosen breaks + continuation heads ──────────
   column_plan.py splits each day into three balanced chunks and marks the
   cut points: fresh categories carry .needs-col-break, cuts inside a
   category render a "MUUT (jatkuu)" head that breaks itself. The browser
   does NO balancing on planned days — our chunks are the columns.

   The media query is load-bearing, not hygiene: a forced
   break-before: column is honored even at column-count:1 (measured
   2026-10-27 — Chrome laid a 900px wrap out into five side-by-side
   columns, up to 3712px, i.e. a horizontally scrolling mobile page), and
   a 3-column plan at column-count:2 pushes a column past the wrap edge.
   So: plan active at >=1024px only; mobile (<640px) never sees a break
   rule nor a continuation head (base display:none below), tablet
   (640–1023px) keeps today's browser balancing. */
:is(body.theme-newspaper, body.theme-newspaper-compact) .cat-head--cont {
    display: none;
}
@media (min-width: 1024px) {
    :is(body.theme-newspaper, body.theme-newspaper-compact) .cat-head--cont {
        display: block;
        break-before: column;
    }
    :is(body.theme-newspaper, body.theme-newspaper-compact) .day-items[data-planned] .cat-block {
        break-inside: avoid;
    }
    :is(body.theme-newspaper, body.theme-newspaper-compact) .day-items[data-planned] .cat-block.needs-col-break {
        break-before: column;
    }
}
/* A client-side filter hides rows — the plan's break points are stale by
   definition (and the visible subset is one category anyway), so hand
   balancing back to the browser and hide the continuation heads. The
   overrides must out-specify the media-query rules above. */
body.filtering:is(body.theme-newspaper, body.theme-newspaper-compact) .cat-head--cont {
    display: none;
    break-before: auto;
}
body.filtering:is(body.theme-newspaper, body.theme-newspaper-compact) .day-items .cat-block.needs-col-break {
    break-before: auto;
}
body.filtering:is(body.theme-newspaper, body.theme-newspaper-compact) .day-items[data-planned] .cat-block {
    break-inside: auto;
}
/* A continuation part is a second .cat-block: once its head is hidden
   (below 1024px, or while filtering) the previous part's 10px bottom
   margin would open a gap mid-category where the unsplit layout had
   none. Cancel it so single-column rendering stays pixel-identical —
   except at a genre-boundary cut, where the unsplit layout had the
   genre block's own 6px trailing margin: -4 collapses to exactly 6. */
@media (max-width: 1023px) {
    :is(body.theme-newspaper, body.theme-newspaper-compact) .cat-block:has(.cat-head--cont) {
        margin-top: -10px;
    }
    :is(body.theme-newspaper, body.theme-newspaper-compact) .cat-block:has(.cat-head--cont).cont-at-genre {
        margin-top: -4px;
    }
}
body.filtering:is(body.theme-newspaper, body.theme-newspaper-compact) .cat-block:has(.cat-head--cont) {
    margin-top: -10px;
}
body.filtering:is(body.theme-newspaper, body.theme-newspaper-compact) .cat-block:has(.cat-head--cont).cont-at-genre {
    margin-top: -4px;
}

/* ── Paper row: date · time · title/venue · caps tags ── */
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper {
    display: grid;
    /* Date col grows to fit its label ("ti 8.9.", year-suffixed dates) —
       a fixed 3.2em made long labels bleed into the time column. */
    grid-template-columns: minmax(3.2em, auto) 2.6em minmax(0, 1fr) auto;
    column-gap: 6px;
    align-items: baseline;
    padding: 5px 0;
    margin: 0;
    border: none;                         /* kill card chrome */
    border-left: none;
    border-bottom: 1px solid #e8e8e8;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    break-inside: avoid;
    text-decoration: none;
    color: var(--text);
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper:hover {
    background: var(--accent-soft);
    box-shadow: none;
    transform: none;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper.cancelled {
    opacity: 0.5;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper.cancelled .event-paper-title {
    text-decoration: line-through;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-date {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-time {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: break-word;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-venue {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-venue:empty {
    display: none;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-tags {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    white-space: nowrap;
    min-width: 0;
    padding-left: 8px;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-cat {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #4a4a4a;
    max-width: 8em;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-tag {
    font-size: 0.56rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    max-width: 9em;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-tag.event-paper-facet {
    color: var(--facet-text, #6b5b00);
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-remove {
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
}
:is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-remove:hover {
    color: var(--accent);
}

/* ── Narrow screens: single column; the day heading carries the date in the
   timeline, so the date cell is hidden THERE only. Search results and
   bookmarks have no day headings — their rows always show the date. ── */
@media (max-width: 639px) {
    :is(body.theme-newspaper, body.theme-newspaper-compact) .today-group-items,
    :is(body.theme-newspaper, body.theme-newspaper-compact) .day-items {
        column-count: 1;
        column-rule: none;
    }
    :is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper {
        grid-template-columns: minmax(4.2em, auto) 2.4em minmax(0, 1fr) auto;
    }
    #timeline :is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper {
        grid-template-columns: 2.6em minmax(0, 1fr) auto;
    }
    #timeline :is(body.theme-newspaper, body.theme-newspaper-compact) .event-paper-date {
        display: none;
    }
    /* The exhibitions section (#nayttelyt) has no day heading to carry the
       date, so its rows must keep the span cell even here, where every other
       timeline row hides it and leans on the heading above. Both rules are
       needed: un-hiding the cell against a 3-column grid drops the title into
       the 2.4em time column. Scoped to .exhibitions-group so artsu — which
       groups by gallery and does have headings — is untouched, and doubled on
       .day-group to out-specify the #timeline rule above. */
    #timeline .day-group.exhibitions-group .event-paper {
        grid-template-columns: minmax(4.2em, auto) 2.4em minmax(0, 1fr) auto;
    }
    #timeline .day-group.exhibitions-group .event-paper-date {
        display: block;
    }
}