/*
 * NETZLICHT Downloads — Frontend-Styles.
 * Gescopet auf .nl-dl (Spezifitaet niedrig, damit Block-supports der Redakteure
 * gewinnen), KEIN !important.
 *
 * Farben setzt das Plugin NICHT selbst: Links erben die Theme-Linkfarbe
 * (theme.json elements.link trifft jedes <a>), Buttons tragen die Core-Klasse
 * wp-element-button und werden komplett vom Theme gestylt (elements.button bzw.
 * direkte Theme-Regeln wie bei Kadence) — verifiziert 2026-07-02, Snapshot
 * docs/vendor-specs/wp-theme-json-elements-2026-07-02.md. Die verbleibenden
 * Toene (muted/border) sind neutrale currentColor-Mischungen. Redakteure
 * ueberschreiben pro Block ueber die Block-Farb-Optionen (color-supports).
 */
.nl-dl {
	/* 85%, nicht weniger: das Format-Kuerzel (PDF) sitzt IM Link und die Meta-
	 * Angaben sind Pflicht-Linktext (BITV 9.2.4.4) -> muessen AA 4.5:1 erreichen.
	 * Bei 62% fiel die Linkfarbe auf Weiss unter 3.2:1; 85% bleibt AA-sicher. */
	--nl-dl-muted: color-mix( in srgb, currentColor 85%, transparent );
	--nl-dl-border: color-mix( in srgb, currentColor 18%, transparent );
	--nl-dl-gap: 0.75rem;
	--nl-dl-radius: 6px;
	margin: 1.5rem 0;
}

/* Struktur-Resets mit .nl-dl-Praefix (Spezifitaet 0,2,0): Theme-Content-Regeln
 * wie Kadences ".single-content ul { padding-left: 2em }", ".single-content
 * figure/h2 { margin: ... }" oder ".single-content li>img" liegen bei (0,1,1)-
 * (0,1,2) und wuerden einfache Klassen-Selektoren (0,1,0) schlagen — verifiziert
 * im Live-CSS 2026-07-02. Kein !important noetig. */
.nl-dl .nl-dl__heading {
	margin: 0 0 0.75rem;
}

/* ── Dokument-Liste (v2-Block-Familie + Legacy) ──────────────────────────── */
.nl-dl .nl-dl__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.nl-dl__item {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --nl-dl-gap );
	/* Innenabstand je Eintrag konfigurierbar (Block-Option "Innenabstand je Eintrag",
	 * BoxControl -> --nl-dl-item-p*); Default 0.7rem oben/unten, 0 links/rechts. */
	padding: var( --nl-dl-item-pt, 0.7rem ) var( --nl-dl-item-pr, 0 ) var( --nl-dl-item-pb, 0.7rem ) var( --nl-dl-item-pl, 0 );
	border-bottom: 1px solid var( --nl-dl-border );
}

/* Element-Bloecke sind flex-items des Eintrags: keine vertikalen Block-margins. */
.nl-dl__item > * {
	margin-block: 0;
}

/* Titel-Link (oeffnet die Datei) — Link-Farbe + Hover kommen vom Theme
 * (elements.link bzw. globale a-Regeln), hier nur Layout + Unterstreichung.
 * Titel-Gewicht hier am Wrapper, NICHT am inneren .nl-dl__title-Span: die
 * Typografie-Optionen des Titel-Blocks landen als Inline-Style am Wrapper und
 * greifen am Titel nur ueber Vererbung — eine Span-Regel wuerde sie schlagen.
 * Das Format-Span bleibt per eigener 400er-Regel bewusst normal. */
.nl-dl__link {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: from-font;
}

/* Explizite Hover-Textfarbe (download-title Block-Option, CSS-Variable am <a>).
 * !important: eine color.text (block-supports) landet als INLINE-Style auf
 * demselben <a> und wuerde die Hover-Farbe sonst in jedem Zustand schlagen
 * (NETZLICHT-Ausnahme fuer Inline-Konflikt). */
.nl-dl__link[style*="--nl-dl-link-htx"]:hover {
	color: var( --nl-dl-link-htx ) !important;
}

/* Explizite Hover-Dekoration (download-title Block-Option: unterstreichen /
 * keine Unterstreichung bei Hover). Dieselbe Inline-Konflikt-Ausnahme: die
 * Grund-Dekoration aus dem Typografie-Panel liegt als Inline-Style am <a>. */
.nl-dl__link[style*="--nl-dl-link-hdeco"]:hover {
	text-decoration: var( --nl-dl-link-hdeco ) !important;
}

/* Dateiformat im Linktext (BITV) — dezent, aber Teil des Links. */
.nl-dl__format {
	color: var( --nl-dl-muted );
	font-weight: 400;
	font-size: 0.9em;
}

/* Karten-Raster: das Format steht sichtbar in der Meta-Zeile, bleibt im Link
   aber fuer Screenreader erhalten (sonst liest die Linkliste nur den Titel).
   clip-path statt des alten clip: rect(), sonst schluckt Safari das Leerzeichen
   zwischen Titel und Format. */
.nl-dl .nl-dl__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}


/* Dateityp-Icon (dekorativ, erbt die Textfarbe des Themes via currentColor) */
.nl-dl__icon-wrap {
	display: inline-flex;
	flex: 0 0 auto;
}

.nl-dl__icon {
	flex: 0 0 auto;
}

/* Zusatz-Metadaten (Groesse / Stand) */
.nl-dl__meta {
	color: var( --nl-dl-muted );
	font-size: 0.875em;
	font-weight: 400;
}

/* Sekundaerer Download-Button (CTA, rechtsbuendig). Farben, Padding, Radius,
 * Hover und Fokus kommen vom Theme ueber die Core-Klasse wp-element-button im
 * Markup — hier nur das Listen-Layout + der Icon-Abstand. */
.nl-dl__button {
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	text-decoration: none;
	white-space: nowrap;
	transition: filter 0.15s ease, transform 0.1s ease;
}

/* Hover-Feedback nur, wenn der Redakteur eine eigene Hintergrundfarbe gesetzt
 * hat: die landet als Inline-Style auf dem <a> und schluege den Theme-Hover in
 * jedem Zustand — brightness gibt trotzdem Rueckmeldung. */
.nl-dl__button[style*="background"]:hover {
	filter: brightness( 0.92 );
}

/* Explizite Hover-Farben (Block-Option) ueberschreiben den brightness-Default.
 * !important ist hier die im NETZLICHT-Regelwerk erlaubte Ausnahme: setzt der
 * Redakteur zusaetzlich eine color.background/color.text (block-supports), landet
 * die als INLINE-Style auf demselben <a> und wuerde die klassenbasierte :hover-Regel
 * sonst in jedem Zustand schlagen. */
.nl-dl__button[style*="--nl-dl-btn-hbg"]:hover {
	background-color: var( --nl-dl-btn-hbg ) !important;
	filter: none;
}

.nl-dl__button[style*="--nl-dl-btn-htx"]:hover {
	color: var( --nl-dl-btn-htx ) !important;
}

/* Explizite Hover-Rahmenfarbe (Block-Option). Wirkt nur mit einer im Stile-Tab
 * gesetzten Rahmenbreite; !important schlaegt die als Inline-Style/has-border-
 * color-Klasse gerenderte native border-color auf demselben <a> (NETZLICHT-
 * Ausnahme fuer denselben Inline-Konflikt wie bei bg/text). */
.nl-dl__button[style*="--nl-dl-btn-hbc"]:hover {
	border-color: var( --nl-dl-btn-hbc ) !important;
}

.nl-dl__button:active {
	transform: translateY( 1px );
}

/* Legacy-„ansehen"-Link (v1-Markup, Bestandsseiten) — Farbe vom Theme. */
.nl-dl__view {
	margin-left: auto;
	text-decoration: underline;
	font-size: 0.9em;
}

/* Fokus-Ring: bewusst KEINE eigene Regel — der adaptive Browser-Default
 * (outline: auto) bzw. der Fokus-Stil des Themes bleibt aktiv und ist auf
 * jedem Hintergrund sichtbar (WCAG 2.4.7). */

/* ── Block-Style „plain": Titel-Link ohne Unterstreichung ─────────────────── */
.nl-dl__link.is-style-plain,
.is-style-plain .nl-dl__link {
	text-decoration: none;
}

.nl-dl__link.is-style-plain:hover,
.is-style-plain .nl-dl__link:hover {
	text-decoration: underline;
}

/* ── Container-Style „boxed": Liste als abgesetzte Karte ──────────────────── */
.nl-dl.is-style-boxed {
	padding: 1rem 1.25rem;
	border: 1px solid var( --nl-dl-border );
	border-radius: var( --nl-dl-radius );
}

.nl-dl.is-style-boxed .nl-dl__item:last-child {
	border-bottom: 0;
}

/* ── Container-Style „plain-list": ohne Trennlinien ───────────────────────── */
.nl-dl.is-style-plain-list .nl-dl__item {
	border-bottom: 0;
	padding: 0.35rem 0;
}

/* ── Container-Style „cards": Item-Template als Karten-Raster ───────────────
 * Gleiche Bausteine (Icon/Vorschau/Titel/Meta/Button), aber jedes Item als
 * Karte im Grid — Block-Pendant zur Shortcode-Karten-Galerie. Spalten, Abstand,
 * Rahmen (Breite 0 = aus), Radius und Schatten kommen als Block-/Shortcode-
 * Optionen ueber CSS-Variablen bzw. die nl-dl--cshadow-*-Klasse. Feste Spalten
 * mit minmax(0,1fr) fuellen IMMER die volle Boxbreite (auto-fill liesse bei
 * wenigen Items Leerspuren rechts). */
.nl-dl.is-style-cards .nl-dl__list {
	display: grid;
	grid-template-columns: repeat( var( --nl-dl-card-cols, 3 ), minmax( 0, 1fr ) );
	gap: var( --nl-dl-card-gap, 1rem );
}

/* Schmale Viewports: automatische Spaltenzahl unabhaengig von der Einstellung. */
@media ( max-width: 600px ) {
	.nl-dl.is-style-cards .nl-dl__list {
		grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	}
}

.nl-dl.is-style-cards .nl-dl__item {
	flex-direction: column;
	align-items: flex-start;
	flex-wrap: nowrap;
	min-width: 0;
	border: var( --nl-dl-card-bw, 1px ) solid var( --nl-dl-card-bc, var( --nl-dl-border ) );
	border-radius: var( --nl-dl-card-radius, var( --nl-dl-radius ) );
	/* Karten-Default 1rem rundum; die Block-Option "Innenabstand je Eintrag"
	 * (--nl-dl-item-p*) ueberschreibt weiterhin jede Seite einzeln. */
	padding: var( --nl-dl-item-pt, 1rem ) var( --nl-dl-item-pr, 1rem ) var( --nl-dl-item-pb, 1rem ) var( --nl-dl-item-pl, 1rem );
}

/* Titel + Format duerfen in der Karte umbrechen (statt das Format-Kuerzel
 * buchstabenweise zu quetschen). */
.nl-dl.is-style-cards .nl-dl__link {
	flex-wrap: wrap;
	min-width: 0;
}

/* Vorschaubild fuellt die Kartenbreite (statt der 64px-Listen-Spalte). */
.nl-dl.is-style-cards .nl-dl__item .nl-dl__thumb {
	width: 100%;
}

/* Download-Button ans Karten-Ende statt rechtsbuendig in der Zeile. */
.nl-dl.is-style-cards .nl-dl__button {
	margin-left: 0;
	margin-top: auto;
}

/* Karten-Schatten (Block-/Shortcode-Option: Leicht / Mittel / Stark) */
.nl-dl--cshadow-sm.is-style-cards .nl-dl__item { box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.12 ); }
.nl-dl--cshadow-md.is-style-cards .nl-dl__item { box-shadow: 0 3px 10px rgba( 0, 0, 0, 0.16 ); }
.nl-dl--cshadow-lg.is-style-cards .nl-dl__item { box-shadow: 0 8px 24px rgba( 0, 0, 0, 0.24 ); }

/* ── Galerie-Layout NUR fuer Shortcode/Legacy (der Block netzlicht/gallery hat eigene .nl-gal-Styles) ── */
.nl-dl .nl-dl__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) );
	gap: 1rem;
}

.nl-dl__card {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* Kein Default-Rahmen/-Radius/-Hintergrund: Vorschaubilder erscheinen initial
 * randlos und transparent; der Redakteur schaltet Rahmen + Radius bei Bedarf
 * ueber die Block-Rahmen-Optionen (border-supports) zu. overflow:hidden bleibt,
 * damit ein zugeschalteter Radius das Bild sauber clippt. */
.nl-dl__thumb {
	display: flex;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* Vorschaubild als flex-Item in der LISTE kompakt halten (in der Karten-Galerie
 * fuellt derselbe .nl-dl__thumb die volle Spaltenbreite). Block-supports
 * (dimensions/width am Preview-Block) ueberschreiben das per Inline-Style. */
.nl-dl__item .nl-dl__thumb {
	flex: 0 0 auto;
	width: 64px;
	align-items: center;
	justify-content: center;
}

/* .nl-dl-Praefix gegen Theme-Regeln wie ".single-content li>img" (0,1,2). */
.nl-dl .nl-dl__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* PDF-Vorschauen sind die gerasterte SEITE inkl. weissem Papierrand — ein
 * leichter Zoom kaschiert ihn (der overflow:hidden-Thumb clippt). Bewusst
 * NICHT bei der Thumbnail-Erzeugung getrimmt (Redakteursentscheidung); echtes
 * adaptives Zoomen kann CSS nicht, die Randbreite je PDF ist unbekannt. */
.nl-dl__img--pdf {
	transform: scale( 1.1 );
}

.nl-dl__icon--lg {
	width: 48px;
	height: 48px;
	margin: auto;
}

/* Download-Button der Karte: Optik komplett vom Theme (wp-element-button im
 * Markup); nur die a-Default-Unterstreichung neutralisieren. */
.nl-dl__dl {
	text-decoration: none;
}

/* Unverlinkter Titel (download-title mit linkToFile=false): gleiches Layout und
 * Gewicht wie der Titel-Link, ohne Link-Optik. */
.nl-dl__text {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-weight: 600;
}

.nl-dl__empty {
	color: var( --nl-dl-muted );
	font-style: italic;
}

/* ── Reduzierte Bewegung ─────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.nl-dl * {
		transition: none;
	}
}