/*
 * 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;
    }
}

/* ========================================================================
   MOBILE + TABLET RESPONSIVE LAYER
   Desktop (>= 1200px) intentionally remains untouched.
   Bootstrap 4 viewport ranges:
   - tablet / small laptop: 768px - 1199.98px
   - mobile:               < 768px
   ======================================================================== */

/* Tablet: compact the desktop composition without changing its visual DNA. */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .category-card {
        padding: 1.25rem !important;
        gap: 1.1rem !important;
        margin-bottom: 1.25rem !important;
        min-height: 190px;
    }

    .category-card .card-text-content {
        row-gap: 0.45rem;
    }

    .category-card .card-subtitle {
        font-size: clamp(0.88rem, 2.15cqi, 1.1rem);
        line-height: 1.2;
    }

    .category-card .card-title {
        font-size: clamp(1.35rem, 4.5cqi, 2.15rem);
        line-height: 1.06;
        margin-bottom: 0.65rem !important;
        overflow-wrap: anywhere;
    }

    .category-card .cubar-btn {
        min-height: 44px;
        margin-top: 0.65rem !important;
        padding: 0.62rem 1.15rem;
        font-size: clamp(0.84rem, 1.8cqi, 0.98rem);
    }

    .category-card .card-image-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        max-width: 42%;
    }

    .category-card .card-image {
        width: clamp(110px, 25cqi, 175px);
        height: clamp(110px, 25cqi, 175px);
    }
}

/* Mobile: preserve horizontal cards while there is enough room, but reduce
   density aggressively so text + CTA never fight the product image. */
@media (max-width: 767.98px) {
    .category-card-link {
        height: auto;
        min-width: 0;
    }

    .category-card {
        padding: 1rem !important;
        gap: 0.85rem !important;
        margin-bottom: 1rem !important;
        min-height: 150px;
        overflow: hidden;
    }

    .category-card .card-text-content {
        min-width: 0;
        row-gap: 0.3rem;
    }

    .category-card .card-subtitle {
        font-size: clamp(0.78rem, 3.5cqi, 0.95rem);
        line-height: 1.2;
        letter-spacing: 0.01em;
        overflow-wrap: anywhere;
    }

    .category-card .card-title {
        font-size: clamp(1.2rem, 6.25cqi, 1.75rem);
        line-height: 1.05;
        margin-bottom: 0.35rem !important;
        overflow-wrap: anywhere;
    }

    .category-card .cubar-btn {
        min-height: 44px;
        margin-top: 0.5rem !important;
        padding: 0.58rem 0.95rem;
        font-size: clamp(0.8rem, 3.1cqi, 0.92rem);
        line-height: 1.15;
    }

    .category-card .card-image-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        max-width: 40%;
    }

    .category-card .card-image {
        width: clamp(88px, 27cqi, 135px);
        height: clamp(88px, 27cqi, 135px);
    }
}

/* Narrow cards / two-column mobile OPC layouts: stack deliberately rather
   than letting flex squeeze text and image into unusable columns. */
@media (max-width: 767.98px) {
    @container cubar-card (max-width: 359px) {
        .category-card {
            flex-direction: column;
            align-items: center !important;
            justify-content: flex-start !important;
            text-align: center;
            min-height: 0;
            padding: 0.9rem !important;
            gap: 0.65rem !important;
        }

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

        .category-card .card-image-wrapper {
            order: -1;
            width: 100%;
            max-width: none;
        }

        .category-card .card-image {
            width: clamp(84px, 42cqi, 125px);
            height: clamp(84px, 42cqi, 125px);
        }

        .category-card .card-subtitle {
            font-size: clamp(0.75rem, 5.4cqi, 0.9rem);
        }

        .category-card .card-title {
            font-size: clamp(1.05rem, 8.3cqi, 1.5rem);
            margin-bottom: 0.15rem !important;
        }

        .category-card .cubar-btn {
            width: 100%;
            max-width: 100%;
            min-height: 44px;
            margin-top: 0.35rem !important;
            padding-inline: 0.75rem;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
        }
    }
}

/* Very small phones: reduce decorative space, never the tap target. */
@media (max-width: 374.98px) {
    .category-card {
        padding: 0.8rem !important;
        margin-bottom: 0.85rem !important;
    }
}

/* Touch devices should not retain hover transforms after a tap. */
@media (max-width: 1199.98px) and (hover: none) {
    .category-card-link:hover .category-card,
    .category-card-link:hover .card-image-wrapper,
    .category-card-link:hover .cubar-btn {
        transform: none;
    }
}