/*
 * Phase 9 FE-02 + FE-03 — Empty-State Cards + Mobile-Responsive Layout
 *
 * Mobile-first strategy: default styles target 375px (iPhone SE / kleinster
 * relevanter DACH-Mobile-Viewport). Progressive enhancement via
 *   @media (min-width: 768px)  — Tablet
 *   @media (min-width: 1024px) — Desktop
 *
 * Skeleton-Animations bleiben strikt auf transform/opacity beschränkt
 * (CWV-bloat-Vermeidung — keine layout-thrashenden Eigenschaften wie
 * width/height/margin in @keyframes).
 *
 * CSS-Variablen lokal definiert (keine globalen Heritage-CSS-Variablen
 * in cbd-frontend.css vorhanden — Heritage nutzt Hex-Literals).
 *
 * @package cbdcompared
 * @since   0.9.0 (Phase 9 FE-02 + FE-03)
 */

/* ===========================================================================
 * 1) Empty-State Cards (FE-03)
 *    Markup-Vertrag siehe cbd_render_empty_state() in includes/empty-states.php
 * =========================================================================== */

.cbd-empty-state {
    margin: 1.5rem auto;
    padding: 1.5rem 1rem;
    max-width: 36rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: #f9fafb;
    text-align: center;
    /* role="status" wird vom Screenreader als polite-live-region angekündigt —
       Visual-Hint: subtle box statt schreiendes Alert-Banner. */
}

.cbd-empty-state-headline {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
    line-height: 1.3;
    font-weight: 600;
    color: #111827;
}

.cbd-empty-state-description {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #4b5563;
}

.cbd-empty-state-cta {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background-color: #047857;
    color: #ffffff;
    text-decoration: none;
    border-radius: 0.375rem;
    font-weight: 500;
    /* a11y: focus-visible-Outline (WCAG 2.4.7 Focus-Visible).
       cbd-empty-state-cta:focus-visible — opt-in für moderne Browser,
       :focus-fallback für ältere Stacks via :focus auch. */
}

.cbd-empty-state-cta:hover,
.cbd-empty-state-cta:focus,
.cbd-empty-state-cta:focus-visible {
    background-color: #065f46;
    outline: 2px solid #047857;
    outline-offset: 2px;
}

/* Context-spezifische Tweaks — derzeit kein Per-Context-Override,
   aber Markup hat cbd-empty-state-{context} Class für künftige Targeting-Punkte. */

/* ===========================================================================
 * 2) Mobile-First Layout (Default = 375px / iPhone SE)
 *    Diese Regeln gelten OHNE @media-Query, sind also der Default-Stack.
 * =========================================================================== */

.cbd-product-grid {
    display: grid;
    grid-template-columns: 1fr;            /* 1 Spalte auf Mobile */
    gap: 1rem;
}

.cbd-filter-sidebar {
    margin: 1rem 0;                        /* full-width auf Mobile */
    /* Auf Mobile bleibt die Sidebar above-the-grid — Templates dürfen
       die <fieldset>s optional in ein <details>-Element wrappen für
       Disclosure-Pattern. */
}

.cbd-filter-sidebar > .cbd-filter-fieldset {
    margin-bottom: 1rem;
}

/* Mobile-Disclosure für noUiSlider/Filter — gilt wenn Templates eine
   <details><summary>-Struktur in cbd-filter-sidebar einbetten. */
.cbd-filter-sidebar details > summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    background-color: #f3f4f6;
    border-radius: 0.375rem;
    font-weight: 600;
    list-style: none;        /* webkit chevron versteckt — eigener Marker */
}
.cbd-filter-sidebar details > summary::-webkit-details-marker {
    display: none;
}

/* Listing-Layout: stack default (mobile single-column) — Sidebar oben, Cards unten.
   .cbd-listing-layout ist bereits in category-listing.php Wave-1 vorhanden. */
.cbd-listing-layout {
    display: block;
}

/* ===========================================================================
 * 3) Tablet Breakpoint: ≥768px
 *    Sidebar bleibt sichtbar (kein Toggle-Required), Cards-Grid 2-spaltig.
 * =========================================================================== */

@media (min-width: 768px) {
    .cbd-product-grid {
        grid-template-columns: repeat(2, 1fr);    /* 2 Spalten */
        gap: 1.25rem;
    }

    .cbd-empty-state {
        padding: 2rem 1.5rem;
    }

    .cbd-empty-state-headline {
        font-size: 1.5rem;
    }
}

/* ===========================================================================
 * 4) Desktop Breakpoint: ≥1024px
 *    Sidebar 1/4 + Cards-Grid 3-spaltig. .cbd-listing-layout switcht zu
 *    grid-template-columns mit fester Sidebar-Spalte.
 * =========================================================================== */

@media (min-width: 1024px) {
    .cbd-product-grid {
        grid-template-columns: repeat(3, 1fr);    /* 3 Spalten Default */
        gap: 1.5rem;
    }

    /* Desktop-Sidebar-Layout: Sidebar 16rem + Cards-Grid restlich.
       category-listing.php hat bereits den .cbd-listing-layout-Wrapper
       (Z509) — wir aktivieren ihn nur auf Desktop als Grid. */
    .cbd-listing-layout {
        display: grid;
        grid-template-columns: 16rem 1fr;
        gap: 1.5rem;
    }

    .cbd-filter-sidebar {
        margin: 0;
    }
}

/* ===========================================================================
 * 5) Skeleton-Loading-Animation
 *    Nice-to-have für Pre-AJAX-Era (heute server-side rendered, keine
 *    Loading-States nötig — aber Marker für Phase-9.1 wenn echte
 *    AJAX-Filter eingebaut werden).
 *
 *    Animation läuft ausschließlich auf background-position (kein
 *    Layout-Thrashing → bleibt im Composite-Layer, kostet 0 LCP/CLS).
 * =========================================================================== */

@keyframes cbd-skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

.cbd-skeleton {
    background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 37%, #e5e7eb 63%);
    background-size: 200% 100%;
    animation: cbd-skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.25rem;
    min-height: 1rem;
}

/* a11y: Reduced-Motion-Respect (WCAG 2.3.3 Animation from Interactions). */
@media (prefers-reduced-motion: reduce) {
    .cbd-skeleton {
        animation: none;
    }
}