/**
 * ------------------------------------------------------------------------
 * V.and The Wolf
 * Module : Home Categories Styles (Vintage High-End Fashion)
 * ------------------------------------------------------------------------
 */

/* =================================================================
    1. Section principale (.vtw-home-categories)
    - Espacement réduit pour rapprocher du texte d'accueil
    - Fond global de la section
    ================================================================ */
.vtw-home-categories {
    padding: 30px 0 50px 0;
    background-color: transparent;
    width: 100%;
}

/* =================================================================
    2. Titre de section (.vtw-section-title)
    - Hiérarchie visuelle élégante et épurée
    - Trait décoratif discret réutilisable via ::after
    ================================================================ */
.vtw-home-categories .vtw-section-title {
    position: relative;
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: #1a1a1a;
    margin-bottom: 45px;
}

.vtw-home-categories .vtw-section-title::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 1px;
    background-color: #1a1a1a;
    opacity: 0.25;
}

/* =================================================================
    3. Grille des univers (.vtw-grid)
    - Desktop : 4 cartes en colonne (gap réduit à ~24px)
    - Tablette : 2 colonnes
    - Mobile : 1 colonne
    ================================================================ */
.vtw-home-categories .vtw-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

@media screen and (max-width: 1024px) {
    .vtw-home-categories .vtw-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media screen and (max-width: 576px) {
    .vtw-home-categories .vtw-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* =================================================================
    4. Carte individuelle (.vtw-card)
    - Fond blanc, coins arrondis discrets (~10px)
    - Ombre douce et premium (0 8px 24px rgba(0,0,0,.05))
    - Animation fluide au survol
    ================================================================ */
.vtw-home-categories .vtw-card {
    background: #ffffff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.vtw-home-categories .vtw-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
}

/* Lien global englobant la carte */
.vtw-home-categories .vtw-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* =================================================================
    5. Conteneur image (.vtw-card-image & .vtw-card-placeholder)
    - Hauteur réduite
    - Mise en valeur optimale des visuels sans déformation
    ================================================================ */
.vtw-home-categories .vtw-card-image {
    position: relative;
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fcfbf9;
    overflow: hidden;
}

.vtw-home-categories .vtw-card-image img {
    max-width: 85%;
    max-height: 85%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.vtw-home-categories .vtw-card:hover .vtw-card-image img {
    transform: scale(1.03);
}

.vtw-home-categories .vtw-card-placeholder {
    width: 100%;
    height: 100%;
    background: #f0ede6;
}

/* =================================================================
    6. Titre de la carte (h3)
    - Hiérarchie typographique soignée
    ================================================================ */
.vtw-home-categories .vtw-card h3 {
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #1a1a1a;
    margin: 20px 20px 10px 20px;
    text-align: center;
}

/* =================================================================
    7. Description de la carte (p)
    - Espacements optimisés et lisibilité feutrée
    ================================================================ */
.vtw-home-categories .vtw-card p {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #666666;
    margin: 0 20px 20px 20px;
    text-align: center;
    flex-grow: 1;
}

/* =================================================================
    8. Lien d'action discret (.vtw-card-link)
    - Style minimaliste avec effet de soulignement subtil au survol
    ================================================================ */
.vtw-home-categories .vtw-card-link {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #1a1a1a;
    margin: 0 auto 24px auto;
    padding-bottom: 2px;
    position: relative;
    width: fit-content;
    transition: color 0.3s ease;
}

.vtw-home-categories .vtw-card-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: #1a1a1a;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.vtw-home-categories .vtw-card:hover .vtw-card-link::after {
    width: 100%;
}