/* ==========================================================================
   KG Resource Library — Resource Card CSS
   Milestone: 5.4.0 — premium list row (controlled list-layout refactor)

   Scope:
   - Styles the KG Resource Library card/list classes only.
   - No endpoint logic. No direct media/PDF URL assumption.
   - No page-builder/template-pack behaviour. No JavaScript.

   Markup contract:
   - GRID/CARD mode: existing markup, unchanged (header + pill + subtle file
     badge chip, body, meta, actions).
   - LIST mode: renderer outputs 3 columns —
       .kg-resource-card__file-visual  (reused .__file-badge tile + .__file-size)
       .kg-resource-card__body         (title + optional description)
       .kg-resource-card__actions      (download button, stable endpoint)
     Two new classes only: .__file-visual and .__file-size.
     List mode does NOT render .__header / .__pill / .__meta / raw file name.

   Design direction: beat Download Manager by being calmer, not louder.
   ========================================================================== */

.kg-resource-library-block {
    width: 100%;
}

.kg-resource-library,
.kg-resource-library *,
.kg-resource-library *::before,
.kg-resource-library *::after {
    box-sizing: border-box;
}

.kg-resource-library {
    --kg-resource-accent: #0d223f;
    --kg-resource-accent-strong: #ed1b2f;
    --kg-resource-accent-hover: #c91528;
    --kg-resource-accent-dark: #09182c;        /* darker KG blue — button :active */

    --kg-resource-surface: #ffffff;
    --kg-resource-surface-muted: #f8fafc;
    --kg-resource-surface-soft: #f1f5f9;

    --kg-resource-border: #d9dee7;
    --kg-resource-border-strong: #b8c0cc;

    --kg-resource-text: #111827;
    --kg-resource-muted: #5f6b7a;
    --kg-resource-subtle: #7a8696;

    --kg-resource-button-text: #ffffff;

    --kg-resource-radius: 16px;
    --kg-resource-radius-sm: 10px;
    --kg-resource-gap: 1.25rem;

    /* Practical responsive column floor (grid mode). With the 1.25rem gap:
       3-up from ~760px CONTAINER width upward (covers wide / wide-aligned),
       2-up ~500–760px, 1-up below ~500px. Container-relative, so it behaves
       correctly inside a Gutenberg Group. Raise toward 280px to reserve 3-up
       for genuinely wide containers. */
    --kg-resource-card-min: 240px;

    --kg-resource-shadow: 0 10px 26px rgba(15, 23, 42, 0.08);
    --kg-resource-shadow-hover: 0 16px 34px rgba(15, 23, 42, 0.12);

    display: grid;
    gap: var(--kg-resource-gap);
    width: 100%;
    color: var(--kg-resource-text);
}

/* Brand token modifiers. Repaint the same component only — no new templates. */

.kg-resource-library--brand-kg {
    --kg-resource-accent: #0d223f;
    --kg-resource-accent-strong: #ed1b2f;
    --kg-resource-accent-hover: #c91528;
    --kg-resource-accent-dark: #09182c;
}

/* PestWest — approved palette: deep teal main + secondary red.
   hover derives from the secondary red, active derives from the main teal. */
.kg-resource-library--brand-pw {
    --kg-resource-accent: #003C4B;
    --kg-resource-accent-strong: #E13A3E;
    --kg-resource-accent-hover: #bf3135;
    --kg-resource-accent-dark: #002a34;
}

/* PCN — jet black / white direction. Restrained near-black + greys. */
.kg-resource-library--brand-pcn {
    --kg-resource-accent: #1a1a1a;
    --kg-resource-accent-strong: #3d3d3d;
    --kg-resource-accent-hover: #2b2b2b;
    --kg-resource-accent-dark: #000000;
}

.kg-resource-library--brand-neutral {
    --kg-resource-accent: #374151;
    --kg-resource-accent-strong: #6b7280;
    --kg-resource-accent-hover: #4b5563;
    --kg-resource-accent-dark: #272e39;
}

/* CRRU — approved palette: forest green main + lime secondary on clean white.
   hover derives from the lime secondary, active derives from the green main.
   Surface tokens intentionally inherit the clean white defaults above. */
.kg-resource-library--brand-crru {
    --kg-resource-accent: #1e4327;
    --kg-resource-accent-strong: #8ab732;
    --kg-resource-accent-hover: #759b2a;
    --kg-resource-accent-dark: #152f1b;
}

/* Layout modes */

.kg-resource-library--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Controlled grid column options (grid layout only). minmax(0, 1fr) keeps
   columns fluid so they never force horizontal overflow; the responsive
   overrides further down collapse them safely on narrower screens.
   "auto" adds no modifier class and keeps the default behaviour above. */

.kg-resource-library--grid.kg-resource-library--grid-columns-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kg-resource-library--grid.kg-resource-library--grid-columns-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kg-resource-library--list {
    grid-template-columns: 1fr;
}

/* Card */

.kg-resource-card {
    position: relative;
    padding: 1.15rem;
    border: 1px solid var(--kg-resource-border);
    border-radius: var(--kg-resource-radius);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 1)),
        var(--kg-resource-surface);
    box-shadow: var(--kg-resource-shadow);
    overflow: hidden;
    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.kg-resource-card::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    block-size: 4px;
    background: linear-gradient(90deg, var(--kg-resource-accent), var(--kg-resource-accent-strong));
}

.kg-resource-card:hover {
    border-color: var(--kg-resource-border-strong);
    box-shadow: var(--kg-resource-shadow-hover);
    transform: translateY(-2px);
}

.kg-resource-card:focus-within {
    border-color: var(--kg-resource-accent-strong);
}

/* Header (grid/card mode) */

.kg-resource-card__header {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    justify-content: space-between;
    min-width: 0;
}

.kg-resource-card__header-left,
.kg-resource-card__header-right {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.kg-resource-card__header-left {
    flex: 1 1 auto;
}

.kg-resource-card__header-right {
    flex: 0 0 auto;
    justify-content: flex-end;
}

/* Category pill */

.kg-resource-card__pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.75rem;
    max-width: 100%;
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 1px solid rgba(13, 34, 63, 0.14);
    background: rgba(13, 34, 63, 0.06);
    color: var(--kg-resource-accent);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* File badge — quiet metadata chip (grid/card mode). Pale fill, thin border,
   restrained text; type is signalled by text colour only, never a solid block.
   List mode re-skins this same element into a premium tile further below. */

.kg-resource-card__file-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    max-width: 100%;
    padding: 0.18rem 0.5rem;
    border: 1px solid var(--kg-resource-border);
    border-radius: 6px;
    background: var(--kg-resource-surface-soft);
    color: var(--kg-resource-muted);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kg-resource-card__file-badge--pdf {
    color: #b42318;
}

.kg-resource-card__file-badge--png {
    color: var(--kg-resource-muted);
}

.kg-resource-card__file-badge--jpg {
    color: var(--kg-resource-muted);
}

/* Body */

.kg-resource-card__body {
    display: grid;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0;
}

.kg-resource-card__title {
    margin: 0;
    color: var(--kg-resource-text);
    font-size: clamp(1.08rem, 0.7vw + 0.92rem, 1.28rem);
    font-weight: 750;
    line-height: 1.25;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.kg-resource-card__description {
    margin: 0;
    color: var(--kg-resource-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

/* Meta (grid/card mode): stacked filename (truncates) over muted size line. */

.kg-resource-card__meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
    padding-block-start: 0.15rem;
    color: var(--kg-resource-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

.kg-resource-card__meta-item {
    display: block;
    max-width: 100%;
    min-width: 0;
}

.kg-resource-card__meta-item--file-name {
    color: var(--kg-resource-text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-resource-card__meta-item--file-size {
    color: var(--kg-resource-subtle);
}

/* Actions */

.kg-resource-card__actions {
    display: flex;
}

/* Button — enterprise pill: white default, KG-blue outline + text;
   hover/focus fills KG blue (white text); active darker KG blue.
   Shadow is layered for a little premium depth, kept corporate. */

.kg-resource-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: auto;
    min-height: 2.85rem;
    padding: 0.72rem 1.75rem;
    border: 1.5px solid var(--kg-resource-accent);
    border-radius: 999px;
    background: var(--kg-resource-surface);
    color: var(--kg-resource-accent);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow:
        0 1px 1px rgba(15, 23, 42, 0.04),
        0 3px 8px rgba(15, 23, 42, 0.12);
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease,
        transform 160ms ease;
}

.kg-resource-card__button:hover,
.kg-resource-card__button:focus {
    border-color: var(--kg-resource-accent);
    background: var(--kg-resource-accent);
    color: var(--kg-resource-button-text);
    text-decoration: none;
    box-shadow:
        0 2px 4px rgba(13, 34, 63, 0.16),
        0 10px 22px rgba(13, 34, 63, 0.22);
    transform: translateY(-1px);
}

.kg-resource-card__button:active {
    border-color: var(--kg-resource-accent-dark);
    background: var(--kg-resource-accent-dark);
    color: var(--kg-resource-button-text);
    transform: translateY(0);
}

.kg-resource-card__button:focus-visible {
    outline: 3px solid var(--kg-resource-accent-strong);
    outline-offset: 3px;
}

.kg-resource-card__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    line-height: 1;
}

.kg-resource-card__button-label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* ==========================================================================
   LIST MODE — premium 3-column resource row
   file visual | content | action   (same card system, not a separate pack)
   ========================================================================== */

.kg-resource-library--list .kg-resource-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1.25rem;
    padding: 0.95rem 1.15rem;
}

/* List rows intentionally omit the decorative top accent bar; it stays on
   grid/card mode via the base .kg-resource-card::before rule. */
.kg-resource-library--list .kg-resource-card::before {
    content: none;
}

/* COL 1 — file visual: type tile with size caption beneath. Compact, stable. */

.kg-resource-library--list .kg-resource-card__file-visual {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

/* Reuse .__file-badge as the tile: a calm 52px square, type as a typographic
   label. PDF = subtle red accent; PNG/JPG = restrained navy. No saturated fills. */

.kg-resource-library--list .kg-resource-card__file-badge {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.32rem;
    width: 3.75rem;
    height: 4.25rem;
    min-height: 0;
    padding: 0.55rem 0.45rem 0.48rem;
    border-radius: 14px;
    border: 1px solid rgba(13, 34, 63, 0.15);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    color: var(--kg-resource-accent);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.8),
        0 5px 12px rgba(15, 23, 42, 0.08);
}

.kg-resource-library--list .kg-resource-card__file-badge--pdf {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.2);
    background: linear-gradient(180deg, #ffffff, #fef3f2);
}

.kg-resource-library--list .kg-resource-card__file-badge--png,
.kg-resource-library--list .kg-resource-card__file-badge--jpg {
    color: var(--kg-resource-accent);
    border-color: rgba(13, 34, 63, 0.16);
    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

.kg-resource-library--list .kg-resource-card__file-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    color: currentColor;
}

.kg-resource-library--list .kg-resource-card__file-icon-svg svg {
    display: block;
    width: 100%;
    height: 100%;
}

.kg-resource-library--list .kg-resource-card__file-icon-label {
    display: block;
    color: currentColor;
    font-size: 0.66rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kg-resource-library--list .kg-resource-card__file-size {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--kg-resource-subtle);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* COL 2 — content: title (wraps, max 2 lines) + optional muted description.
   minmax(0,1fr) on the column is what lets long titles wrap/ellipsis instead
   of forcing the row wider. Description absence never shifts alignment. */

.kg-resource-library--list .kg-resource-card__body {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

/* Category pill sits at the top of the content column, sized to its label
   rather than stretching to the full column width. */
.kg-resource-library--list .kg-resource-card__pill {
    align-self: flex-start;
}

.kg-resource-library--list .kg-resource-card__title {
    font-size: 1.05rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.kg-resource-library--list .kg-resource-card__description {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--kg-resource-muted);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
}

/* COL 3 — action: vertically centred, owns its column, stable width. */

.kg-resource-library--list .kg-resource-card__actions {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-block-start: 0;
    flex: 0 0 auto;
}

/* Denser list CTA — same KG-blue family, shorter, rounded-rect (not full pill). */

.kg-resource-library--list .kg-resource-card__button {
    min-height: 2.4rem;
    padding: 0.5rem 1.1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}

/* GRID card layout: compact vertical card (was previously in the base). */
.kg-resource-library--grid .kg-resource-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 100%;
}

/* GRID action: centred CTA, pinned to the card bottom for row alignment. */
.kg-resource-library--grid .kg-resource-card__actions {
    align-items: center;
    justify-content: center;
    margin-block-start: auto;
}

/* ==========================================================================
   GRID/CARD MODE — polished compact resource card
   Card-only refinement. List mode is deliberately not touched here.
   ========================================================================== */

.kg-resource-library--grid .kg-resource-card {
    gap: 1.1rem;
    padding: 1.35rem;
    min-height: 100%;
    background:
        radial-gradient(circle at top right, rgba(13, 34, 63, 0.035), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), #ffffff),
        var(--kg-resource-surface);
}

.kg-resource-library--grid .kg-resource-card__header {
    align-items: center;
}

.kg-resource-library--grid .kg-resource-card__pill {
    min-height: 1.85rem;
    padding: 0.36rem 0.78rem;
    border-color: rgba(13, 34, 63, 0.13);
    background: rgba(13, 34, 63, 0.045);
    font-size: 0.72rem;
}

.kg-resource-library--grid .kg-resource-card__file-badge {
    min-height: 1.85rem;
    padding: 0.35rem 0.72rem;
    border-radius: 9px;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px rgba(13, 34, 63, 0.035);
}

.kg-resource-library--grid .kg-resource-card__file-badge--pdf {
    color: #b42318;
    border-color: rgba(180, 35, 24, 0.18);
    background: rgba(180, 35, 24, 0.045);
}

.kg-resource-library--grid .kg-resource-card__file-badge--png,
.kg-resource-library--grid .kg-resource-card__file-badge--jpg {
    color: var(--kg-resource-accent);
    border-color: rgba(13, 34, 63, 0.14);
    background: rgba(13, 34, 63, 0.035);
}

.kg-resource-library--grid .kg-resource-card__body {
    gap: 0.55rem;
    align-items: center;
    text-align: center;

}

.kg-resource-library--grid .kg-resource-card__title {
    font-size: clamp(1rem, 0.65vw + 0.9rem, 1.25rem);
    line-height: 1.16;
    letter-spacing: -0.025em;
    text-align: center;
}

.kg-resource-library--grid .kg-resource-card__description {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--kg-resource-muted);
}

.kg-resource-library--grid .kg-resource-card__meta {
    padding-block-start: 0;
    gap: 0.25rem;
    align-items: center;
    text-align: center;
}

.kg-resource-library--grid .kg-resource-card__meta-item--file-name {
    display: none;
}

.kg-resource-library--grid .kg-resource-card__meta-item--file-size {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 0.15rem 0;
    color: var(--kg-resource-subtle);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
}

.kg-resource-library--grid .kg-resource-card__meta-item--file-size::before {
    content: "File size: ";
    margin-inline-end: 0.25rem;
    color: var(--kg-resource-muted);
    font-weight: 650;
}

.kg-resource-library--grid .kg-resource-card__actions {
    justify-content: center;
    margin-block-start: auto;
    padding-block-start: 0.52rem;
}

.kg-resource-library--grid .kg-resource-card__button {
    min-width: min(100%, 14rem);
    min-height: 3rem;
    padding: 0.82rem 1.6rem;
    border-width: 1.5px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, #ffffff, #f9fbfd);
    color: var(--kg-resource-accent);
    font-size: 1rem;
    font-weight: 800;
    box-shadow:
        0 1px 1px rgba(13, 34, 63, 0.05),
        0 4px 10px rgba(13, 34, 63, 0.13),
        0 12px 26px rgba(13, 34, 63, 0.08);
}

.kg-resource-library--grid .kg-resource-card__button:hover,
.kg-resource-library--grid .kg-resource-card__button:focus {
    background: var(--kg-resource-accent);
    border-color: var(--kg-resource-accent);
    color: var(--kg-resource-button-text);
    box-shadow:
        0 2px 5px rgba(13, 34, 63, 0.18),
        0 12px 28px rgba(13, 34, 63, 0.24);
}

.kg-resource-card__button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1;
}

.kg-resource-card__button-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Replaces the text arrow visually with a proper download icon.
   This keeps the current renderer untouched for this card-only CSS pass. */


/* Empty/editor states */

.kg-resource-library__empty {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--kg-resource-border);
    border-radius: var(--kg-resource-radius-sm);
    background: var(--kg-resource-surface-muted);
    color: var(--kg-resource-muted);
    font-size: 0.95rem;
    line-height: 1.5;
}

.kg-resource-library-editor-preview {
    padding: 1rem;
    border: 1px dashed #cbd5e1;
    border-radius: var(--kg-resource-radius-sm);
    background: var(--kg-resource-surface-muted);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1100px) {
    .kg-resource-library--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Column modifiers collapse in step with the default grid. Higher
       specificity than the rule above requires them to be restated here. */
    .kg-resource-library--grid.kg-resource-library--grid-columns-3,
    .kg-resource-library--grid.kg-resource-library--grid-columns-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .kg-resource-library {
        --kg-resource-gap: 1rem;
    }

    .kg-resource-library--grid {
        grid-template-columns: 1fr;
    }

    .kg-resource-library--grid.kg-resource-library--grid-columns-3,
    .kg-resource-library--grid.kg-resource-library--grid-columns-4 {
        grid-template-columns: 1fr;
    }

    .kg-resource-card {
        padding: 1rem;
    }

    .kg-resource-card__actions {
        justify-content: stretch;
    }

    .kg-resource-card__button {
        width: 100%;
    }

    /* List collapses cleanly:
       row 1 = file visual | content
       row 2 = full-width button
    */

    .kg-resource-library--list .kg-resource-card {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 1rem;
        row-gap: 0.85rem;
        align-items: start;
        padding: 1rem;
    }

    .kg-resource-library--list .kg-resource-card__file-visual {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-start;
    }

    .kg-resource-library--list .kg-resource-card__file-badge {
        width: 3.25rem;
        height: 3.75rem;
        padding: 0.48rem 0.38rem 0.42rem;
    }

    .kg-resource-library--list .kg-resource-card__file-icon-svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .kg-resource-library--list .kg-resource-card__body {
        grid-column: 2;
        grid-row: 1;
    }

    .kg-resource-library--list .kg-resource-card__actions {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: stretch;
    }
}

/* ==========================================================================
   Motion safety
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kg-resource-card,
    .kg-resource-card__button {
        transition: none;
    }

    .kg-resource-card:hover,
    .kg-resource-card__button:hover,
    .kg-resource-card__button:focus {
        transform: none;
    }
}