/*
 * NETZLICHT Downloads in the framework look (download cards of the
 * framework sites, formerly .nl-download-card in base.css).
 *
 * Applies to the plugin block netzlicht/downloads with the block style
 * "Karten-Raster" (.nl-dl.is-style-cards). Element blocks: icon in the
 * variant "Kürzel" (.nl-dl__kuerzel) becomes the clipped file-type tile,
 * title + description + meta sit in the second column, the title link is
 * stretched over the whole card. The format inside the link stays for
 * screen readers (BITV 9.2.4.4) and is only visually hidden. The plugin
 * sets no colours on purpose; everything comes from the theme tokens.
 * Selectors start with body: the plugin stylesheet loads after the theme.
 */
body .nl-dl { margin: var(--space-lg) 0 0; }
/* Inside nl/downloads: head to cards 2rem like the framework rule
   "main .container > h2 + *" (the plugin's own 1.5rem margins are reset). */
.wp-block-nl-downloads .section-head { margin-bottom: 2rem; }
body .wp-block-nl-downloads .nl-dl { margin: 0; }
body .nl-dl.is-style-cards .nl-dl__list {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
body .nl-dl.is-style-cards .nl-dl__item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-sm);
    /* no row-gap: the tile spans 4 rows, an empty row would add a gap;
       spacing comes from margins on desc and meta */
    row-gap: 0;
    align-items: start;
    align-content: start;
    padding: var(--space-md);
    background: var(--color-bg-soft);
    border: 0;
    border-radius: var(--radius-md);
    transition: background-color .18s ease;
}
.section--alt .nl-dl.is-style-cards .nl-dl__item,
.section--dark .nl-dl.is-style-cards .nl-dl__item { background: var(--color-surface); }
body .nl-dl.is-style-cards .nl-dl__item > * { grid-column: 2; }
body .nl-dl.is-style-cards .nl-dl__item > .nl-dl__icon-wrap { grid-column: 1; grid-row: 1 / span 4; }
@media (hover: hover) and (pointer: fine) {
    body .nl-dl.is-style-cards .nl-dl__item:hover {
        background: color-mix(in oklab, var(--color-bg-soft) 88%, var(--color-text));
    }
}
body .nl-dl.is-style-cards .nl-dl__item:focus-within {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* File-type tile: clipped corner, accent colour, abbreviation as text */
body .nl-dl .nl-dl__kuerzel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 3.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 80% 0, 100% 20%, 100% 100%, 0 100%);
}

/* Title: the whole card is the link (::after), no underline */
body .nl-dl.is-style-cards .nl-dl__link {
    color: var(--color-text);
    font-weight: 600;
    font-size: var(--font-size-base);
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: break-word;
    hyphens: auto;
}
body .nl-dl.is-style-cards .nl-dl__link::after {
    content: "";
    position: absolute;
    inset: 0;
}
body .nl-dl.is-style-cards .nl-dl__link:focus-visible { outline: none; }
body .nl-dl.is-style-cards .nl-dl__format {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
body .nl-dl.is-style-cards .nl-dl__desc {
    margin-top: var(--space-3xs);
    hyphens: manual; /* inherited from li (base.css), framework has none */
    font-size: var(--font-size-sm);
    line-height: 1.45;
    color: var(--color-text-muted);
    opacity: 1;
}
body .nl-dl.is-style-cards .nl-dl__meta {
    margin-top: calc(2 * var(--space-3xs));
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}