/* ========================================
   KATEGORIEN-KACHELN - MOBILE STYLES
   ========================================
   Spezifische Styles für Mobile/Smartphone
   Für Bildschirme bis 768px (Tablet, Mobile, iPhone)
   ======================================== */

/* ===== STARTSEITE: GRID ALS BLOCK ZENTRIEREN (überschreibt globale Offsets) =====
   Hintergrund: In `views/layouts/main.php` gibt es eine globale Regel
   `.categories-grid { margin-left: -15px !important; }`, die das Grid nach links zieht.
   Diese Regel neutralisieren wir NUR für die Startseite über `.homepage-categories`.
*/
.homepage-categories .categories-grid {
    margin-left: auto !important;
    margin-right: auto !important;
    /* WICHTIG: verhindert unterschiedlich breite Kacheln (z.B. durch justify-items:center aus globalen Styles) */
    justify-items: stretch !important;
    align-items: stretch !important;
}

/* ===== TABLET (768px) ===== */
@media (max-width: 768px) {
    .homepage-categories .categories-container {
        padding: var(--spacing-3) !important;
    }
    
    .homepage-categories .categories-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: var(--spacing-2) !important; /* 8px */
        max-width: 100% !important;
        padding: 0 !important;
        justify-items: stretch !important;
    }
    
    .homepage-categories .category-card {
        min-height: var(--category-card-height-tablet) !important; /* 90px */
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .homepage-categories .category-card .category-img {
        width: 100% !important;
        height: 90px !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .homepage-categories .category-icon {
        font-size: var(--category-icon-size-tablet) !important; /* 1.8rem */
        height: var(--category-icon-height-tablet) !important; /* 32px */
        min-height: var(--category-icon-height-tablet) !important;
        max-height: var(--category-icon-height-tablet) !important;
        margin-bottom: var(--spacing-1) !important;
    }
    
    .homepage-categories .category-title {
        font-size: var(--category-text-size-tablet) !important; /* 0.5rem */
        line-height: var(--category-text-line-height-tablet) !important; /* 1.2 */
        max-height: var(--category-text-max-height-tablet) !important; /* 24px */
    }
}

/* ===== MOBILE (480px) ===== */
@media (max-width: 480px) {
    .homepage-categories .categories-container {
        padding: var(--spacing-2) !important;
    }
    
    .homepage-categories .categories-grid {
        /* Handy: 2 Spalten statt 3 (sonst wird die 3. Kachel oft gequetscht/angeschnitten) */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: var(--spacing-1) !important; /* 4px */
        max-width: 100% !important;
        padding: 0 !important;
        justify-items: stretch !important;
    }
    
    .homepage-categories .category-card {
        min-height: var(--category-card-height-mobile) !important; /* 90px */
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    .homepage-categories .category-card .category-img {
        width: 100% !important;
        height: 80px !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .homepage-categories .category-icon {
        font-size: var(--category-icon-size-mobile) !important; /* 1.5rem */
        height: var(--category-icon-height-mobile) !important; /* 28px */
        min-height: var(--category-icon-height-mobile) !important;
        max-height: var(--category-icon-height-mobile) !important;
        margin-bottom: var(--spacing-1) !important;
    }
    
    .homepage-categories .category-title {
        font-size: var(--category-text-size-mobile) !important; /* 0.45rem */
        line-height: var(--category-text-line-height-mobile) !important; /* 1.2 */
        max-height: var(--category-text-max-height-mobile) !important; /* 22px */
    }
}

/* ===== IPHONE (428px) - OPTIMIERT ===== */
@media (max-width: 428px) {
    .homepage-categories .categories-container {
        padding: var(--spacing-2) !important;
    }
    
    .homepage-categories .categories-grid {
        /* iPhone: 2 Spalten für sichere Breiten + konsistentes Rendering */
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        max-width: 100% !important;
        padding: 0 !important;
        justify-items: stretch !important;
    }
    
    .homepage-categories .category-card {
        min-height: var(--category-card-height-iphone) !important; /* 95px */
        height: auto !important;
        max-height: none !important;
        padding: 0 !important;
        aspect-ratio: none !important;
        overflow: hidden !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        width: 100% !important;
    }

    .homepage-categories .category-card .category-img {
        width: 100% !important;
        height: 70px !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .homepage-categories .category-icon {
        font-size: var(--category-icon-size-iphone) !important; /* 1.1rem */
        height: var(--category-icon-height-iphone) !important; /* 22px */
        min-height: var(--category-icon-height-iphone) !important;
        max-height: var(--category-icon-height-iphone) !important;
        margin-bottom: 2px !important;
        flex-shrink: 0 !important;
    }
    
    .homepage-categories .category-title {
        font-size: var(--category-text-size-iphone) !important; /* 0.4rem */
        line-height: var(--category-text-line-height-iphone) !important; /* 1.25 */
        /* WICHTIG: keine Höhenbegrenzung/Clamp -> Text darf nie abgeschnitten werden */
        max-height: none !important;
        overflow: visible !important;
        white-space: normal !important;
        display: block !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* iOS Safari spezifische Optimierungen */
    @supports (-webkit-touch-callout: none) {
        .homepage-categories .category-title {
            -webkit-font-smoothing: antialiased !important;
            text-rendering: optimizeLegibility !important;
        }
    }
}