/* ============================================================
   JINRO — NEWS list page (news.html only)

   Not a new design system: reuses foundation.css tokens (--jr-*),
   components.css primitives (.jr-section-shell, .jr-container-wide,
   .jr-focus-ring), same as products.html/enjoy.html. Everything specific to
   NEWS is scoped under .news-page so
   it can never leak onto or override TOP/Products/Product Detail/ENJOY.
   ============================================================ */

/* ---- Page title / KV — see assets/partials/page-kv.html /
   assets/js/page-kv.js (PAGE_KV_CONFIG.news, solid variant) /
   .jr-page-kv in components.css. Not styled here anymore. */

/* ---- Main content axis — wider than TOP/Products' 1280px axis ------
   Top padding is the shared Common Section spacing token, the same
   KV-to-first-content gap enjoy.html and recruit.html use, so every
   1st-level page opens on one rule rather than a page-local number.

   Bottom padding is intentionally 0 at every breakpoint: Pagination
   (cocktail.css's .cocktail-pagination, reused here) already carries its
   own bottom spacing before Footer via padding-bottom:
   var(--jr-section-space-y) — a second bottom padding on this section
   just stacked an extra empty gap on top of that. Do not reintroduce a
   bottom value here; if the gap before Footer ever needs to change,
   that's Pagination's own padding-bottom, not this section's. */
.news-page .news-main {
    padding: var(--jr-section-space-y) 0 0;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .news-page .news-main {
        padding: 90px 0 0;
    }
}

@media (max-width: 767px) {
    .news-page .news-main {
        padding: 48px 0 0;
    }
}

/* ---- Filter row: category chips (left) + year select (right) ------ */
.news-page .news-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.news-page .news-filter__categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    /* Without this, a flex item in a column-direction flex container
       (Mobile's .news-filter) sizes to its content's max-content width
       instead of the container's — every pill's true combined width, pushing
       the whole page wider — instead of respecting the container and
       letting overflow-x actually scroll internally. */
    min-width: 0;
}

.news-page .news-filter__categories::-webkit-scrollbar {
    display: none;
}

/* Right-hand cluster — Result Count + Year Select as one group, so the
   single .news-filter divider below can do all the separating and
   Result Count never needs a row (or divider) of its own. */
.news-page .news-filter__right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 22px;
    flex: 0 0 auto;
}

/* Size/typography/radius/transition all come from the shared
   .jr-pill-control base (components.css, mastered from enjoy.html's CTA)
   — only color/state rules live here. Normal stays a quiet white/
   light-gray control (not a strong black outline) so it doesn't compete
   with the CTA-style black hover or the Active red. */
.news-page .news-filter__chip {
    flex: 0 0 auto;
    color: var(--jr-color-muted);
    background: #fff;
    border-color: var(--jr-color-line);
}

/* Active keeps its Red regardless of hover — :not(.is-active) below is
   what lets Active opt out of the black hover invert. */
.news-page .news-filter__chip:not(.is-active):hover {
    color: #fff;
    background: var(--jr-color-ink);
    border-color: var(--jr-color-ink);
}

.news-page .news-filter__chip.is-active {
    color: #fff;
    background: var(--jr-color-red);
    border-color: var(--jr-color-red);
}

.news-page .news-filter__chip:focus-visible {
    outline: none;
    box-shadow: var(--jr-focus-ring);
}

.news-page .news-filter__year {
    flex: 0 0 auto;
}

/* Select's own chevron-down icon already matches .jr-arrow-icon's visual
   weight (16×16, stroke-width 2) — only re-declared here is what
   .jr-pill-control can't express for a native <select>: color, the
   custom background-image icon, and the extra right-side padding that
   icon needs beyond the shared 28px. */
.news-page .news-filter__select {
    padding-right: 52px;
    color: var(--jr-color-ink);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E") no-repeat right 24px center / 16px 16px;
    border-color: var(--jr-color-line);
    appearance: none;
    -webkit-appearance: none;
}

.news-page .news-filter__select:hover {
    border-color: var(--jr-color-ink);
}

.news-page .news-filter__select:focus-visible {
    outline: none;
    box-shadow: var(--jr-focus-ring);
}

/* ---- Result count — inline in .news-filter__right now, not its own
   row/divider; vertical-centers against Year Select via that group's
   align-items: center. --------------------------------------------- */
.news-page .news-result-count {
    margin: 0;
    color: var(--jr-color-muted);
    font-size: 14px;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.news-page .news-result-count strong {
    color: var(--jr-color-ink);
    font-weight: 700;
}

/* ---- NEWS list — rows are the shared .jr-news-row component
   (components.css), mastered from TOP's NEWS RELEASE row so both pages
   read as the exact same UI. Only the list's own top spacing (relative
   to Result Count above it) is page-specific — the row grid/typography/
   hover and the Mobile stacked layout all live in the shared component
   now, not here. ------------------------------------------------------ */
.news-page [data-news-list] {
    /* Result Count no longer sits between the filter and the list as its
       own row, so this replaces that row's total vertical rhythm (was
       filter → 20px → count → 12px → list) with one value — same rhythm
       regardless of which filter/year is active. The single grey divider
       is this list's own border-top (shared .jr-news-row-list component,
       components.css) — .news-filter no longer draws a second one of its
       own directly above it. */
    margin-top: 32px;
}

.news-page .news-list__empty {
    margin: 64px 0;
    color: var(--jr-color-muted);
    font-size: 16px;
    text-align: center;
}

.news-page .news-list__empty[hidden] {
    display: none;
}

/* ---- Pagination --------------------------------------------------------
   No dedicated NEWS pagination component here on purpose: news.html
   reuses cocktail.html/cooking.html's .cocktail-pagination component
   verbatim (markup + CSS + visual states), see cocktail.css's
   ".cocktail-page .cocktail-pagination, .cooking-page .cocktail-pagination,
   .news-page .cocktail-pagination" selector groups. Do not add a
   news-pagination-prefixed rule set here — that would be exactly the
   "copy similar CSS for News" this reuse is meant to avoid. */

/* ============================================================
   Tablet (768–1023px) — no News Row override here on purpose: TOP's
   NEWS RELEASE row (the design source of truth) has no tablet-specific
   rule of its own either, so this page doesn't invent one. The shared
   .jr-news-row component's desktop grid stays active down to 768px,
   only switching at the same 767px point TOP's own row does.

   The Category Filter / Year Select pills are a deliberate EXCEPTION to
   that "no Tablet override" rule: .jr-pill-control itself never shrinks
   (it's mastered from enjoy.html's CTA, which stays 56px at every
   breakpoint by design), but a 56px/28px-padding control reads as
   oversized once it's one of four+ controls in a row rather than a
   single centered CTA. These two blocks override the shared base's
   height/padding/font-size at Tablet and Mobile — Active/Normal/Hover
   *colors* are untouched, only size/density changes. Specificity note:
   ".news-page .news-filter__chip" (2 class selectors) already beats the
   base ".jr-pill-control" (1 class selector) regardless of source order,
   so no !important is needed here.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
    /* One line: if the four category pills don't fit next to Result
       Count + Year Select, the categories scroll horizontally (see
       .news-filter__categories' own overflow-x) rather than the whole
       row wrapping and dropping the right-hand group onto its own line. */
    .news-page .news-filter { flex-wrap: nowrap; }

    .news-page .news-filter__chip,
    .news-page .news-filter__select {
        height: 48px;
        padding: 0 22px;
        font-size: 14px;
    }

    .news-page .news-filter__select {
        padding-right: 44px;
        background-position: right 18px center;
        background-size: 14px 14px;
    }
}

/* ============================================================
   Mobile (max 767px)
   ============================================================ */
@media (max-width: 767px) {
    .news-page .news-filter {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .news-page .news-filter__categories { gap: 8px; width: 100%; }

    /* Result Count + Year Select stay one right-aligned row/group — this
       is the row 2 the spec calls for, not Result Count on its own. */
    .news-page .news-filter__right { align-self: flex-end; gap: 14px; }
    .news-page .news-filter__select { width: auto; min-width: 140px; }

    /* 44px is the accessible minimum tap target — this is the floor,
       not a further shrink past it. */
    .news-page .news-filter__chip,
    .news-page .news-filter__select {
        height: 44px;
        padding: 0 18px;
        font-size: 13px;
    }

    .news-page .news-filter__select {
        padding-right: 38px;
        background-position: right 14px center;
        background-size: 14px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .news-page .news-filter__chip {
        transition: none;
    }
}