/*
 * Woanders-Liste und Kasten unter Artikeln. Farben, Schriften und Abstände
 * aus den Variablen des Themes (lui-theme, tokens.css), Rückfallwerte für
 * andere Themes.
 */
.lui-wo { display: grid; gap: var(--sp-5, 1.5rem); }
.lui-wo [hidden] { display: none !important; }
/* Fließtext-Abstände des Themes (li + li, p) gelten hier nicht. */
.lui-wo li, .lui-wo-box li, .lui-wo p { margin: 0; }

.lui-wo__counts { display: flex; flex-wrap: wrap; gap: var(--sp-3, .75rem) var(--sp-6, 2rem); margin: 0; padding: 0; list-style: none; font-size: var(--fs-s, .9rem); color: var(--c-muted, #625d55); }
.lui-wo__counts strong { display: block; font-family: var(--f-brand, inherit); font-size: var(--fs-xl, 1.5rem); line-height: 1.1; color: var(--c-ink, #1a1a1a); font-variant-numeric: tabular-nums; }

.lui-wo__filter { display: flex; flex-wrap: wrap; gap: var(--sp-2, .5rem); }
.lui-wo__filter button { font: inherit; font-size: var(--fs-s, .9rem); line-height: 1.4; padding: .25em .85em; border-radius: 999px; border: 1px solid var(--c-line, #e0d9cc); background: transparent; color: var(--c-ink-2, #3a3732); cursor: pointer; }
.lui-wo__filter button:hover { border-color: var(--c-ink-2, #3a3732); }
.lui-wo__filter button[aria-pressed="true"] { background: var(--c-ink, #1a1a1a); border-color: var(--c-ink, #1a1a1a); color: var(--c-bg, #faf8f4); }
.lui-wo__filter button:focus-visible { outline: 2px solid var(--c-accent, #ff6600); outline-offset: 2px; }

.lui-wo__year { display: grid; gap: var(--sp-3, .75rem); border-top: 1px solid var(--c-line, #e0d9cc); padding-top: var(--sp-3, .75rem); }
.lui-wo__y { margin: 0; font-family: var(--f-brand, inherit); font-size: var(--fs-l, 1.25rem); color: var(--c-muted, #625d55); font-variant-numeric: tabular-nums; }
.lui-wo__list { display: grid; gap: var(--sp-4, 1rem); margin: 0; padding: 0; list-style: none; }
.lui-wo__list li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: var(--sp-3, .75rem); align-items: baseline; }
.lui-wo__list time { font-family: var(--f-mono, monospace); font-size: var(--fs-xs, .78rem); color: var(--c-muted, #625d55); font-variant-numeric: tabular-nums; }
.lui-wo__list a { color: var(--c-ink, #1a1a1a); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.lui-wo__list a:hover { color: var(--c-link, #bd4b00); text-decoration: underline; }
.lui-wo__text { display: grid; gap: var(--sp-1, .25rem); min-width: 0; }
.lui-wo__teaser { margin: 0; font-family: var(--f-read, inherit); font-size: var(--fs-s, .9rem); line-height: 1.5; color: var(--c-ink-2, #3a3732); }
.lui-wo__src { display: flex; flex-wrap: wrap; gap: var(--sp-1, .25rem); justify-content: end; }

.lui-wo-badge { display: inline-block; font-family: var(--f-mono, monospace); font-size: var(--fs-xs, .72rem); letter-spacing: .03em; text-transform: uppercase; line-height: 1.5; padding: 0 .45em; border-radius: var(--r-s, 3px); border: 1px solid currentColor; white-space: nowrap; color: var(--c-ink-2, #3a3732); }
.lui-wo-badge--linuxuser { color: var(--c-info, #2f5d82); }
.lui-wo-badge--tuxedo { color: var(--c-tip, #3b6e47); }
.lui-wo-badge--raspberry-pi-geek { color: var(--c-warn, #a63a2a); }

.lui-wo-box { background: var(--c-surface, #f3efe8); border-left: 4px solid var(--c-accent, #ff6600); border-radius: var(--r-m, 6px); padding: var(--sp-5, 1.5rem); display: grid; gap: var(--sp-3, .75rem); }
.lui-wo-box h2 { margin: 0; font-size: var(--fs-l, 1.2rem); }
.lui-wo-box ul { display: grid; gap: var(--sp-2, .5rem); margin: 0; padding: 0; list-style: none; }
.lui-wo-box li { line-height: 1.45; }
.lui-wo-box .lui-wo-badge { margin-left: .35em; vertical-align: .1em; }
.lui-wo-box__all { font-size: var(--fs-s, .9rem); font-weight: 600; }

.lui-wo-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1279px) {
	.lui-wo-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
.lui-wo-card { display: grid; align-content: start; gap: var(--sp-2, .5rem); }
.lui-wo-card ul { margin: 0; }
.lui-wo-card li a { font-weight: 500; }
.lui-wo-card .lui-wo-card__n { margin: 0; margin-top: auto !important; padding-top: var(--sp-2, .5rem); border-top: 1px solid var(--c-line, #e0d9cc); line-height: 1.4; font-size: var(--fs-xs, .78rem); color: var(--c-muted, #625d55); }

@media (max-width: 639px) {
	.lui-wo-cards { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (max-width: 639px) {
	.lui-wo__list li { grid-template-columns: 3rem minmax(0, 1fr); }
	.lui-wo__src { grid-column: 2; justify-content: start; }
	.lui-wo-box { margin-inline: calc(-1 * var(--gutter, 16px)); border-radius: 0; padding-inline: var(--gutter, 16px); }
}