/* =========================================================
   APOLL CATEGORIES v2.04
   PrestaShop 1.7.8.11 / AngarTheme

   - 1170px content width
   - 3 cards desktop
   - 4 clipped corners
   - APOLL geometry
   - responsive
   - scoped styles
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.apoll-categories {
    --ac-width: 1170px;
    --ac-gap: 18px;
    --ac-height: 270px;
    --ac-cut: 18px;

    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding:
        36px
        20px
        54px !important;

    clear: both !important;

    background: #ffffff !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CONTAINER
   Same maximum width as APOLL header
   ========================================================= */

.apoll-categories__container {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: var(--ac-width) !important;

    margin-top: 0 !important;
    margin-right: auto !important;
    margin-bottom: 0 !important;
    margin-left: auto !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   GRID
   Always 3 columns on desktop.

   If only one card exists it occupies column 1.
   It DOES NOT stretch across the entire container.
   ========================================================= */

.apoll-categories__grid {
    display: grid !important;
    position: relative !important;

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

    grid-auto-flow: row !important;

    column-gap: var(--ac-gap) !important;
    row-gap: var(--ac-gap) !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CARD
   4 clipped corners
   ========================================================= */

.apoll-categories__card {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: var(--ac-height) !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ededed !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    /*
     * ALL FOUR CORNERS:
     *
     *   /----------------\
     *  |                  |
     *  |                  |
     *   \----------------/
     */

    clip-path: polygon(
        var(--ac-cut) 0,
        calc(100% - var(--ac-cut)) 0,

        100% var(--ac-cut),
        100% calc(100% - var(--ac-cut)),

        calc(100% - var(--ac-cut)) 100%,
        var(--ac-cut) 100%,

        0 calc(100% - var(--ac-cut)),
        0 var(--ac-cut)
    ) !important;

    -webkit-clip-path: polygon(
        var(--ac-cut) 0,
        calc(100% - var(--ac-cut)) 0,

        100% var(--ac-cut),
        100% calc(100% - var(--ac-cut)),

        calc(100% - var(--ac-cut)) 100%,
        var(--ac-cut) 100%,

        0 calc(100% - var(--ac-cut)),
        0 var(--ac-cut)
    ) !important;

    isolation: isolate !important;
}


/* =========================================================
   LINK / CARD CONTENT
   ========================================================= */

.apoll-categories__link {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #ededed !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;

    color: inherit !important;

    text-decoration: none !important;

    box-sizing: border-box !important;
}


a.apoll-categories__link {
    cursor: pointer !important;
}


a.apoll-categories__link:hover,
a.apoll-categories__link:focus,
a.apoll-categories__link:active {
    color: inherit !important;

    text-decoration: none !important;

    border: 0 !important;

    outline: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

.apoll-categories__image {
    display: block !important;
    position: absolute !important;

    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    max-width: none !important;

    min-height: 100% !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    object-fit: cover !important;
    object-position: center center !important;

    transform:
        translateZ(0)
        scale(1);

    transform-origin: center center;

    transition:
        transform
        450ms
        cubic-bezier(.22, .61, .36, 1);

    backface-visibility: hidden;

    box-sizing: border-box !important;
}


/* =========================================================
   HOVER
   Very subtle zoom
   ========================================================= */

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

    a.apoll-categories__link:hover
    .apoll-categories__image {
        transform:
            translateZ(0)
            scale(1.025);
    }

}


/* =========================================================
   KEYBOARD FOCUS
   Follow APOLL geometry instead of rectangular outline
   ========================================================= */

a.apoll-categories__link:focus-visible::after {
    content: "";

    display: block;

    position: absolute;

    z-index: 10;

    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;

    pointer-events: none;

    border: 2px solid rgba(20, 20, 20, 0.55);

    clip-path: polygon(
        13px 0,
        calc(100% - 13px) 0,

        100% 13px,
        100% calc(100% - 13px),

        calc(100% - 13px) 100%,
        13px 100%,

        0 calc(100% - 13px),
        0 13px
    );

    -webkit-clip-path: polygon(
        13px 0,
        calc(100% - 13px) 0,

        100% 13px,
        100% calc(100% - 13px),

        calc(100% - 13px) 100%,
        13px 100%,

        0 calc(100% - 13px),
        0 13px
    );
}


/* =========================================================
   DESKTOP
   1200+
   ========================================================= */

@media (min-width: 1200px) {

    .apoll-categories {
        --ac-width: 1170px;
        --ac-gap: 18px;
        --ac-height: 270px;
        --ac-cut: 18px;

        padding-top: 36px !important;
        padding-right: 20px !important;
        padding-bottom: 54px !important;
        padding-left: 20px !important;
    }

}


/* =========================================================
   SMALL DESKTOP
   992 - 1199
   ========================================================= */

@media
(max-width: 1199px)
and
(min-width: 992px) {

    .apoll-categories {
        --ac-gap: 16px;
        --ac-height: 238px;
        --ac-cut: 17px;

        padding-top: 32px !important;
        padding-right: 20px !important;
        padding-bottom: 48px !important;
        padding-left: 20px !important;
    }

}


/* =========================================================
   TABLET
   768 - 991
   2 columns
   ========================================================= */

@media
(max-width: 991px)
and
(min-width: 768px) {

    .apoll-categories {
        --ac-gap: 16px;
        --ac-height: 235px;
        --ac-cut: 17px;

        padding-top: 28px !important;
        padding-right: 16px !important;
        padding-bottom: 42px !important;
        padding-left: 16px !important;
    }


    .apoll-categories__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

}


/* =========================================================
   MOBILE
   <= 767
   1 column
   ========================================================= */

@media (max-width: 767px) {

    .apoll-categories {
        --ac-gap: 14px;
        --ac-height: 230px;
        --ac-cut: 16px;

        padding-top: 22px !important;
        padding-right: 12px !important;
        padding-bottom: 34px !important;
        padding-left: 12px !important;
    }


    .apoll-categories__grid {
        grid-template-columns:
            minmax(0, 1fr) !important;
    }

}


/* =========================================================
   SMALL MOBILE
   <= 479
   ========================================================= */

@media (max-width: 479px) {

    .apoll-categories {
        --ac-gap: 12px;
        --ac-height: 205px;
        --ac-cut: 14px;

        padding-top: 20px !important;
        padding-right: 10px !important;
        padding-bottom: 32px !important;
        padding-left: 10px !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    .apoll-categories__image {
        transition: none !important;
    }


    a.apoll-categories__link:hover
    .apoll-categories__image {
        transform:
            translateZ(0)
            scale(1) !important;
    }

}