/* =============================================================================
   INSTALL COMMUNICATION 33
   BOUTIQUE — CARDS SOUS-CATÉGORIES
   =============================================================================
   
   FICHIER :
   assets/css/shop/subcategory-card.css

   OBJECTIFS :
   - pleine largeur de la fenêtre
   - marge latérale contrôlée
   - 8 cards sur une ligne sur grand écran
   - moins de 8 cards : même largeur + centrage
   - cards carrées 1:1
   - bandeau bleu fin
   - aucun impact sur Hero / filtres / produits
============================================================================= */


/* =============================================================================
   01 — VARIABLES
============================================================================= */

:root {

    --ic33-subcat-side-margin: 20px;

    --ic33-subcat-gap: 16px;

    --ic33-subcat-blue: #071b30;

    --ic33-subcat-white: #ffffff;

    --ic33-subcat-banner-height: 32px;

    --ic33-subcat-radius: 8px;

}


/* =============================================================================
   02 — SECTION
   -----------------------------------------------------------------------------
   IMPORTANT :
   Le parent WooCommerce peut être limité par .col-full / .site-main.

   On sort donc explicitement la section de ce container avec :
       width:100vw
       margin-left:calc(50% - 50vw)

   Les marges internes sont ensuite gérées par padding.
============================================================================= */

.ic33-subcategories {

    display: block;

    position: relative;

    width: 100vw !important;

    max-width: none !important;

    margin-top: 0;

    margin-right: 0 !important;

    margin-bottom: 22px;

    margin-left: calc(50% - 50vw) !important;

    padding-top: 16px;

    padding-right: var(--ic33-subcat-side-margin);

    padding-bottom: 22px;

    padding-left: var(--ic33-subcat-side-margin);

    box-sizing: border-box;

    overflow: visible;

}


/* =============================================================================
   03 — CONTENEUR INTERNE
============================================================================= */

.ic33-subcategories__inner {

    display: block;

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box;

}


/* =============================================================================
   04 — GRILLE DES CARDS
============================================================================= */

.ic33-subcategories__grid {

    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    gap: var(--ic33-subcat-gap);

    width: 100%;

    max-width: none;

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    list-style: none;

}


/* =============================================================================
   05 — MOINS DE 8 CARDS
   -----------------------------------------------------------------------------
   Même largeur qu'une card dans une grille de 8.
   Les cards sont centrées.
============================================================================= */

.ic33-subcategories__grid[data-category-count]:not(
    [data-category-count="8"]
) {

    display: flex;

    flex-wrap: nowrap;

    justify-content: center;

    align-items: flex-start;

    gap: var(--ic33-subcat-gap);

}


/* Largeur calculée comme dans une grille de 8 */

.ic33-subcategories__grid[data-category-count]:not(
    [data-category-count="8"]
) > * {

    flex: 0 0 calc(
        (
            100% - (7 * var(--ic33-subcat-gap))
        ) / 8
    );

    width: calc(
        (
            100% - (7 * var(--ic33-subcat-gap))
        ) / 8
    );

    max-width: calc(
        (
            100% - (7 * var(--ic33-subcat-gap))
        ) / 8
    );

}


/* =============================================================================
   06 — ITEMS
============================================================================= */

.ic33-subcategories__grid > *,
.ic33-subcategories__grid > li,
.ic33-subcategories__grid li.product,
.ic33-subcategories__grid li.product-category {

    position: relative;

    min-width: 0;

    margin: 0 !important;

    padding: 0 !important;

    float: none !important;

    clear: none !important;

    box-sizing: border-box;

    list-style: none;

    background: transparent !important;

    border: 0 !important;

}


/* =============================================================================
   07 — CARD
============================================================================= */

.ic33-subcategory-card {

    position: relative;

    display: block;

    width: 100%;

    aspect-ratio: 1 / 1;

    margin: 0;

    padding: 0;

    overflow: hidden;

    box-sizing: border-box;

    background: #ffffff;

    border: 0;

    border-radius: var(--ic33-subcat-radius);

    box-shadow:
        0 4px 12px rgba(7, 27, 48, 0.14);

    isolation: isolate;

    transition:
        transform 0.20s ease,
        box-shadow 0.20s ease;

}


/* =============================================================================
   08 — LIEN
============================================================================= */

.ic33-subcategory-card__link {

    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    box-sizing: border-box;

    color: inherit;

    text-decoration: none !important;

    border-radius: inherit;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

}


/* =============================================================================
   09 — IMAGE
============================================================================= */

.ic33-subcategory-card__image {

    position: absolute;

    inset: 0;

    z-index: 0;

    display: block;

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    box-sizing: border-box;

    background: #ffffff;

}


/* =============================================================================
   10 — IMAGE INTERNE
============================================================================= */

.ic33-subcategory-card__image-file {

    display: block;

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    box-sizing: border-box;

    object-fit: cover;

    object-position: center center;

    border: 0 !important;

    border-radius: 0 !important;

    box-shadow: none !important;

    outline: none !important;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

}


/* =============================================================================
   11 — BANDEAU
============================================================================= */

.ic33-subcategory-card__banner {

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: var(--ic33-subcat-banner-height);

    min-height: var(--ic33-subcat-banner-height);

    max-height: var(--ic33-subcat-banner-height);

    margin: 0;

    padding: 2px 7px;

    box-sizing: border-box;

    overflow: hidden;

    background: var(--ic33-subcat-blue);

    border: 0;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

}


/* =============================================================================
   12 — NOM
============================================================================= */

.ic33-subcategory-card__title {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    min-width: 0;

    max-width: 100%;

    margin: 0 !important;

    padding: 0 3px !important;

    box-sizing: border-box;

    overflow: hidden;

    color: #ffffff !important;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: clamp(
        9px,
        0.70vw,
        14px
    );

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.01em;

    text-align: center;

    text-transform: uppercase !important;

    text-decoration: none !important;

    white-space: normal;

    overflow-wrap: break-word;

    word-break: normal;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

}


/* =============================================================================
   13 — ÉLÉMENTS NON UTILISÉS
============================================================================= */

.ic33-subcategory-card__description,
.ic33-subcategory-card__count,
.ic33-subcategory-card__button,
.ic33-subcategory-card__cta,
.ic33-subcategory-card__meta {

    display: none !important;

}


/* =============================================================================
   14 — HOVER
============================================================================= */

@media (hover: hover) and (pointer: fine) {

    .ic33-subcategory-card:hover {

        transform: translateY(-2px);

        box-shadow:
            0 8px 20px rgba(7, 27, 48, 0.20);

    }

}


/* =============================================================================
   15 — FOCUS
============================================================================= */

.ic33-subcategory-card__link:focus {

    outline: none;

}


.ic33-subcategory-card__link:focus-visible {

    outline: 3px solid #ff7900;

    outline-offset: -3px;

}


/* =============================================================================
   16 — PROTECTION WOOCOMMERCE
============================================================================= */

.woocommerce
.ic33-subcategories
.ic33-subcategory-card {

    width: 100% !important;

    max-width: none !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    box-sizing: border-box;

}


/* =============================================================================
   17 — PROTECTION STOREFRONT
============================================================================= */

.ic33-subcategory-card::before,
.ic33-subcategory-card::after,
.ic33-subcategory-card__link::before,
.ic33-subcategory-card__link::after {

    display: none !important;

    content: none !important;

}


/* =============================================================================
   18 — RESET LISTES
============================================================================= */

.ic33-subcategories__grid ul,
.ic33-subcategories__grid ol {

    margin: 0;

    padding: 0;

    list-style: none;

}


.ic33-subcategories__grid li {

    list-style: none;

}


/* =============================================================================
   19 — RESET TITRES
============================================================================= */

.ic33-subcategory-card h1,
.ic33-subcategory-card h2,
.ic33-subcategory-card h3,
.ic33-subcategory-card h4,
.ic33-subcategory-card h5,
.ic33-subcategory-card h6,
.ic33-subcategory-card p {

    margin: 0 !important;

    padding: 0 !important;

}


/* =============================================================================
   20 — GRAND ÉCRAN
   -----------------------------------------------------------------------------
   8 CARDS SUR UNE SEULE LIGNE
============================================================================= */

@media (min-width: 1400px) {

    .ic33-subcategories {

        --ic33-subcat-side-margin: 24px;

        --ic33-subcat-gap: 16px;

    }

}


/* =============================================================================
   21 — PETIT DESKTOP / ÉCRAN 17"
============================================================================= */

@media (max-width: 1399px) {

    .ic33-subcategories {

        --ic33-subcat-side-margin: 16px;

        --ic33-subcat-gap: 16px;

    }


    .ic33-subcategories__grid {

        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 16px;

    }


    .ic33-subcategories__grid[data-category-count]:not(
        [data-category-count="4"]
    ) {

        display: flex;

        justify-content: center;

    }


    .ic33-subcategories__grid[data-category-count]:not(
        [data-category-count="4"]
    ) > * {

        flex: 0 0 calc(
            (
                100% - (3 * var(--ic33-subcat-gap))
            ) / 4
        );

        width: calc(
            (
                100% - (3 * var(--ic33-subcat-gap))
            ) / 4
        );

        max-width: calc(
            (
                100% - (3 * var(--ic33-subcat-gap))
            ) / 4
        );

    }

}


/* =============================================================================
   22 — TABLETTE
============================================================================= */

@media (max-width: 1000px) {

    .ic33-subcategories {

        --ic33-subcat-side-margin: 14px;

        --ic33-subcat-gap: 14px;

    }


    .ic33-subcategories__grid {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

    }


    .ic33-subcategories__grid[data-category-count]:not(
        [data-category-count="3"]
    ) {

        display: flex;

        flex-wrap: nowrap;

        justify-content: center;

    }


    .ic33-subcategories__grid[data-category-count]:not(
        [data-category-count="3"]
    ) > * {

        flex: 0 0 calc(
            (
                100% - (2 * var(--ic33-subcat-gap))
            ) / 3
        );

        width: calc(
            (
                100% - (2 * var(--ic33-subcat-gap))
            ) / 3
        );

        max-width: calc(
            (
                100% - (2 * var(--ic33-subcat-gap))
            ) / 3
        );

    }


    .ic33-subcategory-card__banner {

        height: 30px;

        min-height: 30px;

        max-height: 30px;

    }


    .ic33-subcategory-card__title {

        font-size: 11px;

    }

}


/* =============================================================================
   23 — MOBILE
============================================================================= */

@media (max-width: 700px) {

    .ic33-subcategories {

        --ic33-subcat-side-margin: 10px;

        --ic33-subcat-gap: 12px;

    }


    .ic33-subcategories__grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

    }


    .ic33-subcategories__grid[data-category-count]:not(
        [data-category-count="2"]
    ) {

        display: flex;

        flex-wrap: nowrap;

        justify-content: center;

    }


    .ic33-subcategories__grid[data-category-count]:not(
        [data-category-count="2"]
    ) > * {

        flex: 0 0 calc(
            (
                100% - var(--ic33-subcat-gap)
            ) / 2
        );

        width: calc(
            (
                100% - var(--ic33-subcat-gap)
            ) / 2
        );

        max-width: calc(
            (
                100% - var(--ic33-subcat-gap)
            ) / 2
        );

    }


    .ic33-subcategory-card__banner {

        height: 29px;

        min-height: 29px;

        max-height: 29px;

        padding-left: 4px;

        padding-right: 4px;

    }


    .ic33-subcategory-card__title {

        font-size: 10px;

    }

}


/* =============================================================================
   24 — TRÈS PETIT MOBILE
============================================================================= */

@media (max-width: 420px) {

    .ic33-subcategories {

        --ic33-subcat-side-margin: 10px;

        --ic33-subcat-gap: 12px;

    }


    .ic33-subcategories__grid {

        grid-template-columns:
            minmax(0, 1fr);

    }


    .ic33-subcategories__grid[data-category-count]:not(
        [data-category-count="1"]
    ) {

        display: flex;

        flex-wrap: wrap;

        justify-content: center;

    }


    .ic33-subcategories__grid[data-category-count]:not(
        [data-category-count="1"]
    ) > * {

        flex: 0 0 100%;

        width: 100%;

        max-width: 100%;

    }


    .ic33-subcategory-card__banner {

        height: 32px;

        min-height: 32px;

        max-height: 32px;

    }


    .ic33-subcategory-card__title {

        font-size: 12px;

    }

}


/* =============================================================================
   25 — PAS D'EFFET HOVER SUR TACTILE
============================================================================= */

@media (hover: none) {

    .ic33-subcategory-card:hover {

        transform: none;

        box-shadow:
            0 4px 12px rgba(7, 27, 48, 0.14);

    }

}


/* =============================================================================
   26 — RÉDUCTION DES ANIMATIONS
============================================================================= */

@media (prefers-reduced-motion: reduce) {

    .ic33-subcategory-card {

        transition: none !important;

    }

}


/* =============================================================================
   27 — BOX SIZING
============================================================================= */

.ic33-subcategories,
.ic33-subcategories *,
.ic33-subcategory-card,
.ic33-subcategory-card__link,
.ic33-subcategory-card__image,
.ic33-subcategory-card__image-file,
.ic33-subcategory-card__banner,
.ic33-subcategory-card__title {

    box-sizing: border-box;

}


/* =============================================================================
   FIN
============================================================================= */