/* Curios Filter — Farben über Curio-Design-Tokens (Defaults am Wrapper) */

.curios-filter-wrapper {
    width: 100%;
    --curio-white: #ffffff;
    --curio-black: #191717;
    --curio-blue: #addce2;
    --curio-red: #d625c9;
    --curio-grey: #2a2a2a;
    --curio-sand: #eeebe3;
    --curio-yellow: #ffdf06;
    --curio-sandhalf: #fcfcfc;
    --curio-green: #7ee85b;
    --curio-redhalf: #d355cb;
}

/* Filter als Tags (Radios nur für Logik / Screenreader, optisch verborgen) */
.curios-filter-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
    margin: 0 0 2rem 0;
    padding: 0;
    border: none;
    justify-content: center;
    align-items: center;
}

.curios-filter-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    margin: 0;
    padding: 0.6rem 1rem;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--curio-black);
    background: var(--curio-blue);
    border-radius: 999px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.curios-filter-radio:hover {
    background: var(--curio-yellow);
    color: var(--curio-black);
    border-color: color-mix(in srgb, var(--curio-black) 14%, transparent);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--curio-black) 12%, transparent);
}

.curios-filter-radio:active {
    transform: scale(0.98);
}

/* Native Radio unsichtbar, weiterhin per Label / Tastatur bedienbar */
.curios-filter-radio input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

.curios-filter-radio:has(input[type="radio"]:focus-visible) {
    outline: 2px solid var(--curio-red);
    outline-offset: 3px;
}

.curios-filter-radio:has(input[type="radio"]:checked) {
    background: var(--curio-yellow);
    color: var(--curio-black);
    border-color: color-mix(in srgb, var(--curio-black) 16%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--curio-black) 15%, transparent);
}

.curios-filter-radio:has(input[type="radio"]:checked):hover {
    filter: brightness(0.96);
}

.curios-filter-radio-text {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
}

.curios-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.12rem 0.45rem;
    margin-left: 0.1rem;
    background: color-mix(in srgb, var(--curio-white) 55%, transparent);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: inherit;
    line-height: 1.2;
}

.curios-filter-radio:hover .curios-filter-badge,
.curios-filter-radio:has(input[type="radio"]:checked) .curios-filter-badge {
    background: color-mix(in srgb, var(--curio-black) 12%, transparent);
    color: inherit;
}

/* Ergebnisse Container */
.curios-filter-results {
    transition: opacity 0.3s ease;
}

.curios-filter-results[aria-live="polite"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    align-items: start;
}

/*
 * Teaser: kompaktes Hochformat 4:5 (deutlich weniger Höhe als 9:16-Story).
 * align-items/start verhindert, dass Grid-Zeilen die Karten in die Höhe zerren.
 */
.curios-filter-card-link {
    display: block;
    min-width: 0;
    margin-inline: auto;
    text-decoration: none;
    color: inherit;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
}

/* Card Styles */
.curios-card {
    position: relative;
    height: 100%;
    min-height: 100%;
    background-size: cover;
    background-position: top center;
    background-color: var(--curio-sandhalf);
    border-radius: 0;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.curios-filter-card-link:hover .curios-card {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--curio-black) 22%, transparent);
}

/* Verlauf: unten dunkel, nach oben auslaufend — Bild oben klar, Titelzone lesbar */
.curios-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--curio-black) 88%, transparent) 0%,
        color-mix(in srgb, var(--curio-black) 45%, transparent) 38%,
        color-mix(in srgb, var(--curio-black) 12%, transparent) 58%,
        transparent 78%
    );
    z-index: 1;
    pointer-events: none;
}

.curios-card a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Schlagwort oben rechts */
.curios-card-schlagwort {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    z-index: 3;
    max-width: 58%;
    padding: 0.2rem 0.45rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: right;
    color: var(--curio-white);
    background: color-mix(in srgb, var(--curio-black) 42%, transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.curios-card-title {
    position: absolute;
    bottom: 0.85rem;
    left: 1rem;
    right: 1rem;
    margin: 0;
    z-index: 2;
    font-size: 1.2rem;
    line-height: 1.35;
    font-weight: 700;
}

.curios-card-title-text {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--curio-white);
    background: none;
    text-shadow:
        0 0 1px color-mix(in srgb, var(--curio-black) 85%, transparent),
        0 1px 12px color-mix(in srgb, var(--curio-black) 55%, transparent),
        0 2px 24px color-mix(in srgb, var(--curio-black) 35%, transparent);
    box-decoration-break: unset;
    -webkit-box-decoration-break: unset;
}

/* Empty State */
.curios-filter-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--curio-grey);
    font-size: 1.125rem;
}

/* Load More Button */
.curios-filter-load-more-wrapper {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 2rem;
    padding: 1rem 0;
}

.curios-filter-load-more {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--curio-red);
    color: var(--curio-white);
    border: 1px solid color-mix(in srgb, var(--curio-black) 12%, transparent);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    margin: auto;
}

.curios-filter-load-more:hover:not(:disabled) {
    background: var(--curio-yellow);
    color: var(--curio-black);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--curio-black) 14%, transparent);
}

.curios-filter-load-more:active:not(:disabled) {
    transform: translateY(0);
}

.curios-filter-load-more:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.curios-filter-load-more:focus-visible {
    outline: 2px solid var(--curio-yellow);
    outline-offset: 3px;
}

/* Responsive */
@media (max-width: 768px) {
    .curios-filter-radios {
        gap: 0.5rem;
    }
    
    .curios-filter-radio {
        font-size: 0.875rem;
        padding: 0.35rem 0.75rem;
    }
    
    .curios-filter-results[aria-live="polite"] {
        grid-template-columns: 1fr;
    }
}