/*
 * Responsive- und Feinschliff-Regeln für das Portlet "Cubar Kategorie-Karte".
 *
 * Prinzip: FLUID statt fixer Breakpoints.
 * - Schrift skaliert stufenlos mit der verfügbaren Breite (clamp() + Container-
 *   Query-Einheiten "cqi") - kein abruptes Springen zwischen festen Größen,
 *   kein Abschneiden von Text, keine Silbentrennung.
 * - Jede Karte ist ihr eigener Container (container-type: inline-size), also
 *   reagiert sie auf ihre EIGENE Breite - unabhängig davon, ob sie in einem
 *   4-Spalten-Grid, 2-Spalten-Grid oder allein auf der Seite liegt.
 * - Es werden keine Farben verändert - nur Abstände, Bewegung/Hover und
 *   Typografie, damit die Karte moderner und hochwertiger wirkt, ohne vom
 *   bestehenden Farbschema abzuweichen.
 */

.category-card-link {
    display: flex;
    width: 100%;
    height: 100%;
    container-type: inline-size;
    container-name: cubar-card;
}

.category-card {
    width: 100%;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Dezenter "Lift"-Effekt beim Hover - macht die Karte lebendiger, ohne
   Farben zu ändern (nur Schatten/Bewegung, neutral in Schwarz-Transparenz) */
.category-card-link:hover .category-card {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.18);
}

.category-card .card-text-content {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: clamp(0.5rem, 2cqi, 1rem);
}

/* Fluid Typography: wächst/schrumpft stufenlos mit der Kartenbreite (cqi =
   1% der Container-Inline-Breite). Untere/obere Grenze verhindert, dass der
   Text auf sehr breiten oder sehr schmalen Karten unlesbar wird. */
.category-card .card-subtitle {
    font-size: clamp(0.9rem, 4cqi, 1.4rem);
    line-height: 1.25;
    letter-spacing: 0.02em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

.category-card .card-title {
    font-size: clamp(1.5rem, 7.5cqi, 3rem);
    line-height: 1.1;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}

/* Button: bleibt IMMER einzeilig, wächst/schrumpft mit der Karte, ohne
   Farben zu verändern - nur Größe, Innenabstand und ein sanfter Hover */
.category-card .cubar-btn {
    margin-top: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.85rem, 3.2cqi, 1.05rem);
    padding-inline: clamp(1rem, 5cqi, 1.75rem);
    padding-block: clamp(0.5rem, 2cqi, 0.75rem);
    transition: transform 0.2s ease;
}

.category-card-link:hover .cubar-btn {
    transform: scale(1.04);
}

.category-card .card-image-wrapper {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.category-card-link:hover .card-image-wrapper {
    transform: scale(1.05);
}

.category-card .card-image {
    width: clamp(90px, 32cqi, 210px);
    height: clamp(90px, 32cqi, 210px);
    max-width: 100%;
    max-height: 100%;
}

/* Wird die Karte sehr schmal (z. B. Handy oder viele Spalten nebeneinander),
   wandert das Bild unter den Text statt beides zusammenzuquetschen - der
   Text bekommt die volle Breite und bleibt frei umbrechend lesbar */
@container cubar-card (max-width: 340px) {
    .category-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .category-card .card-text-content {
        align-items: center;
    }

    .category-card .cubar-btn {
        margin-top: 0.5rem;
    }
}

/* Fallback für Browser ohne Container-Query-Unterstützung (sehr wenige,
   z. B. Safari < 16): fluide Typografie über Viewport-Einheiten statt cqi */
@supports not (container-type: inline-size) {
    .category-card .card-subtitle {
        font-size: clamp(0.9rem, 1.6vw + 0.55rem, 1.4rem);
    }

    .category-card .card-title {
        font-size: clamp(1.5rem, 2.8vw + 0.9rem, 3rem);
    }

    .category-card .cubar-btn {
        font-size: clamp(0.85rem, 1vw + 0.6rem, 1.05rem);
    }
}

/* Nutzer, die reduzierte Bewegung bevorzugen: keine Hover-Animationen */
@media (prefers-reduced-motion: reduce) {
    .category-card,
    .category-card .cubar-btn,
    .category-card .card-image-wrapper {
        transition: none;
    }
}