/* Release notes (M-383d) — page-scoped presentation for BOTH surfaces. The technical changelog uses the static
   card-style table (`.platform-release*`, in _releases.blade.php, deliberately NOT Tabulator); the friendly
   "Novinky" uses the impact-tiered feed (`.platform-novinky*`) at the bottom of this file. Token-driven so both
   re-skin with the theme (incl. dark mode); mobile-first — headers/rows stack on a narrow viewport and reflow to
   a row from the `sm` breakpoint up. No behaviour here (the changelog load-more is a plain GET link, §4). */

.platform-release-notes__empty {
    margin: 0;
    padding: var(--platform-space-lg, 1.5rem);
    color: var(--platform-color-text-muted, #636e6f);
}

/* The list of releases, each a bordered block; the card wrapping this is `padding="flush"` so the blocks reach
   its edge and the dividers read as one continuous table. */
.platform-release-notes {
    display: flex;
    flex-direction: column;
}

.platform-release + .platform-release,
.platform-release:not(:first-child) {
    border-top: 1px solid var(--platform-color-border, #d9e0e0);
}

/* ── Highlighted release header row ────────────────────────────────────────────────────────────────────────
   Version + release date + deploy status. Tinted so it stands out from its card rows; a release deployed on
   THIS server gets the stronger accent + a left accent bar, so "this shipped here, and when" reads at a glance. */
.platform-release__head {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs, 0.25rem);
    padding: var(--platform-space-md, 0.75rem) var(--platform-space-lg, 1.5rem);
    background: var(--platform-color-surface-muted, #f2f5f5);
    border-left: 3px solid transparent;
}

.platform-release__head--deployed {
    background: var(--platform-color-accent-surface, #e6f4f1);
    border-left-color: var(--platform-color-accent, #1f8a70);
}

.platform-release__version {
    font-weight: 600;
    font-size: var(--platform-font-size-md, 1rem);
    color: var(--platform-color-text, #1f2933);
}

.platform-release__date {
    color: var(--platform-color-text-muted, #636e6f);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.platform-release__deploy {
    color: var(--platform-color-text-muted, #636e6f);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.platform-release__head--deployed .platform-release__deploy {
    color: var(--platform-color-accent-strong, #14614f);
    font-weight: 500;
}

/* ── Cards under a release ─────────────────────────────────────────────────────────────────────────────────
   The curated cs note (friendly) or the id + English title (technical). One per row, hair-line separated. */
.platform-release__cards {
    margin: 0;
    padding: 0;
    list-style: none;
}

.platform-release__card {
    display: flex;
    gap: var(--platform-space-sm, 0.5rem);
    padding: var(--platform-space-sm, 0.5rem) var(--platform-space-lg, 1.5rem);
    color: var(--platform-color-text, #1f2933);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.platform-release__card + .platform-release__card {
    border-top: 1px solid var(--platform-color-border, #d9e0e0);
}

/* The card id is a fixed-width, muted label so the titles align into a readable column on the technical view. */
.platform-release__card-id {
    flex: none;
    min-width: 4.5rem;
    color: var(--platform-color-text-muted, #636e6f);
    font-variant-numeric: tabular-nums;
}

.platform-release__card-title {
    flex: 1 1 auto;
}

.platform-release__note {
    flex: 1 1 auto;
}

/* ── Load-more ─────────────────────────────────────────────────────────────────────────────────────────────
   Centred below the list; a plain link styled as a ghost button (server-side GET, works with JS off). */
.platform-release-notes__more {
    display: flex;
    justify-content: center;
    padding: var(--platform-space-md, 0.75rem);
    border-top: 1px solid var(--platform-color-border, #d9e0e0);
}

/* From the small breakpoint up, lay the header out as a single row: version, then date + deploy trailing. */
@media (min-width: 480px) {
    .platform-release__head {
        flex-direction: row;
        align-items: baseline;
        gap: var(--platform-space-md, 0.75rem);
    }

    .platform-release__deploy {
        margin-left: auto;
    }
}

/* ── Friendly "Novinky" feed (M-383d rework) ─────────────────────────────────────────────────────────────────
   Grouped by RELEASE — one card per release, newest first (version + date in the header), and inside each card
   the notes tiered by impact (major ★ / normal / minor), most-impactful first. NOT the release-grouped table
   above (that stays for the technical changelog). Token-driven, mobile-first, dark-mode-safe. No behaviour here. */

/* The stack of release cards: a clear gap between cards so each release reads as its own block. */
.platform-novinky {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-lg, 1.5rem);
}

/* ── Release header (inside each card) ───────────────────────────────────────────────────────────────────────
   Version + release date + deploy status. Tinted so it stands out from its tiers; a release deployed on THIS
   server gets the stronger accent + a left accent bar, so "this shipped here, and when" reads at a glance. */
.platform-novinky__release-head {
    display: flex;
    flex-direction: column;
    gap: var(--platform-space-xs, 0.25rem);
    padding: var(--platform-space-md, 0.75rem) var(--platform-space-lg, 1.5rem);
    background: var(--platform-color-surface-muted, #f2f5f5);
    border-left: 3px solid transparent;
}

.platform-novinky__release-head--deployed {
    background: var(--platform-color-accent-surface, #e6f4f1);
    border-left-color: var(--platform-color-accent, #1f8a70);
}

.platform-novinky__version {
    font-weight: 600;
    font-size: var(--platform-font-size-md, 1rem);
    color: var(--platform-color-text, #1f2933);
}

.platform-novinky__date {
    color: var(--platform-color-text-muted, #636e6f);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

/* Deploy marker — muted by default, promoted to the accent when this release is live on this server. */
.platform-novinky__deployed {
    color: var(--platform-color-text-muted, #636e6f);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.platform-novinky__release-head--deployed .platform-novinky__deployed {
    color: var(--platform-color-accent-strong, #14614f);
    font-weight: 500;
}

/* ── Impact tiers (inside each release card) ─────────────────────────────────────────────────────────────────*/
.platform-novinky__tier {
    padding: var(--platform-space-lg, 1.5rem);
}

.platform-novinky__tier + .platform-novinky__tier {
    border-top: 1px solid var(--platform-color-border, #d9e0e0);
}

.platform-novinky__tier-title {
    margin: 0 0 var(--platform-space-md, 0.75rem);
    font-size: var(--platform-font-size-md, 1rem);
    font-weight: 600;
    color: var(--platform-color-text, #1f2933);
}

.platform-novinky__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Each note on its own hair-line-separated row: star (major only), then the note text. */
.platform-novinky__item {
    display: flex;
    align-items: baseline;
    gap: var(--platform-space-sm, 0.5rem);
    padding: var(--platform-space-sm, 0.5rem) 0;
    color: var(--platform-color-text, #1f2933);
    font-size: var(--platform-font-size-sm, 0.875rem);
}

.platform-novinky__item + .platform-novinky__item {
    border-top: 1px solid var(--platform-color-border, #d9e0e0);
}

/* The major-feature star: filled with the accent colour, sized to the text line and pinned to the FIRST line
   of the note. `align-self: center` centred it in the whole item instead, which is the same thing only while
   the note is one line long — a two-line note put the star in the gap between the lines, and M-680's
   feature-wide headline note (four lines at desktop) put it in the middle of line three, reading as a bullet
   dropped into a paragraph. `flex-start` plus half the leading centres it on line one at any note length;
   the container's `align-items: baseline` cannot do that job, because an SVG's baseline is its bottom edge. */
.platform-novinky__star {
    flex: none;
    width: 1em;
    height: 1em;
    align-self: flex-start;
    margin-top: 0.25em;
    fill: var(--platform-color-accent, #1f8a70);
}

.platform-novinky__note {
    flex: 1 1 auto;
}

/* From the small breakpoint up, lay the release header out as a single row: version, then date + deploy trailing. */
@media (min-width: 480px) {
    .platform-novinky__release-head {
        flex-direction: row;
        align-items: baseline;
        gap: var(--platform-space-md, 0.75rem);
    }

    .platform-novinky__deployed {
        margin-left: auto;
    }
}