/**
 * Wiki Responsive Fixes v15
 * Corrections pour mobile <= 768px
 */

/* ============================================
   SEARCH BOX - Mobile: override les styles problématiques
   ============================================ */

/* ============================================
   WIKI-CONTAINER - Correction mobile (style inline override)
   ============================================ */

@media (max-width: 768px) {
    .wiki-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: .75rem !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 768px) {
    /* Cacher décorations */
    .search-section .sparkle,
    .search-deco-left,
    .search-deco-right {
        display: none !important;
    }

    /* Bouton recherche : juste la loupe, pas le texte */
    .search-box .search-btn span {
        display: none !important;
    }
    
    /* S'assurer que l'icône du bouton est visible */
    .search-box .search-btn i {
        display: inline-block !important;
        margin: 0 !important;
    }
    
    /* Override les styles problématiques du search-btn */
    .search-btn,
    .search-box .search-btn,
    button.search-btn {
        width: auto !important;
        margin-top: 0 !important;
        top: 14px !important;
    }
}

/* ============================================
   CATEGORIES NAV - Mobile: wrap sur plusieurs lignes
   ============================================ */

@media (max-width: 768px) {
    nav.categories-nav,
    .categories-nav {
        padding: 15px 10px !important;
        overflow: visible !important;
    }
    
    nav.categories-nav .categories-container,
    .categories-container {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        overflow: visible !important;
        white-space: normal !important;
    }
    
    .categories-container .cat-pill,
    a.cat-pill {
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}

/* ============================================
   GENERAL LAYOUT - Mobile
   ============================================ */

@media (max-width: 768px) {
    .wiki-main-layout {
        flex-direction: column !important;
        gap: 20px !important;
        padding: 15px !important;
    }
    
    .wiki-main-layout .main-content,
    .wiki-main-layout .sidebar {
        width: 100% !important;
    }
    
    .recent-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   HIDE OLD AUTH TOAST (from modales_auth.php)
   ============================================ */
#authToast,
div.auth-toast {
    display: none !important;
}

/* ============================================
   COMMENTS - Mobile
   ============================================ */

@media (max-width: 600px) {
    /* Conteneur */
    .comment, .reply {
        overflow: hidden !important;
        max-width: 100% !important;
    }
    .comment-body {
        min-width: 0 !important;
        overflow: hidden !important;
        flex: 1 !important;
    }

    /* Header : auteur + date en colonne */
    .comment-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: .15rem !important;
    }
    .comment-avatar {
        width: 32px !important;
        height: 32px !important;
        flex-shrink: 0 !important;
    }
    .comment-author { font-size: .82rem !important; }
    .comment-date { font-size: .72rem !important; white-space: normal !important; }

    /* Replies : indentation minimale */
    .comment-replies {
        margin-left: 0 !important;
        padding-left: .4rem !important;
        border-left: 2px solid var(--wiki-border) !important;
    }
    .reply .comment-avatar {
        width: 26px !important;
        height: 26px !important;
    }
    .reply .comment-body {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Contenu */
    .comment-text, .comment-content {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        font-size: .85rem !important;
    }
}

/* ============================================
   FORMULES DE MIX - Mobile
   ============================================ */

@media (max-width: 480px) {
    /* hench-row = pleine largeur, overflow caché */
    .hench-list .hench-row {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: .5rem !important;
        overflow: hidden !important;
    }

    /* hench-card résultat : pleine largeur */
    .hench-list .hench-card {
        width: 100% !important;
        max-width: 260px !important;
    }
    .hench-list .hench-card .hench-card-img {
        width: 100% !important;
        max-width: 260px !important;
        height: auto !important;
        aspect-ratio: 228 / 167 !important;
    }
    .hench-list .hench-card .hench-card-img img.sprite {
        width: 100% !important;
        height: 100% !important;
    }
    .hench-list .hench-card .hench-race-bar {
        width: 100% !important;
        max-width: 260px !important;
        box-sizing: border-box !important;
    }

    /* formula-card ingrédients : taille fixe réduite */
    .hench-list .formula-card {
        width: 120px !important;
    }
    .hench-list .formula-card .hench-card-img {
        width: 120px !important;
        height: 88px !important;
    }
    .hench-list .formula-card .hench-card-img img.sprite {
        width: 120px !important;
        height: 88px !important;
    }
    .hench-list .formula-card .hench-race-bar {
        width: 120px !important;
        box-sizing: border-box !important;
    }

    /* info-bar : overflow hidden pour éviter le texte coupé */
    .hench-list .hench-info-bar {
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .hench-list .hench-info-bar a,
    .hench-list .hench-name {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
}

/* ============================================
   FORMULES - formula-line en colonne dès 420px
   (override le 406px de wiki-formules.css)
   ============================================ */

@media (max-width: 420px) {
    .formula-line {
        flex-direction: column !important;
        gap: 0.5rem !important;
        background: var(--wiki-bg-tertiary, #2a2f3a) !important;
        padding: 0.75rem !important;
        border-radius: 8px !important;
        border: 1px solid var(--wiki-border, #4a4f65) !important;
    }
    .formula-plus {
        transform: rotate(90deg) !important;
    }
}


/* ============================================
   FORMULES size-medium - Mobile : centrer les cartes
   ============================================ */

@media (max-width: 901px) {
    .hench-list.size-medium .hench-row {
        align-items: center !important;
    }
    /* La card elle-même centrée dans le row en colonne */
    .hench-list.size-medium .hench-card,
    .hench-list.size-medium .hench-formulas,
    .hench-list.size-medium .hench-equal {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}