/* =========================================================
   EXCURSION AROUND MOROCCO
   ASTRA — PREMIUM TOUR ARCHIVE CARDS
   CLEAN VERSION
   LIGHT LUXURY / EDITORIAL
========================================================= */


/* =========================================================
   1. GRID
========================================================= */

#primary.ast-grid-3 .ast-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;

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

    align-items: start !important;
}


/* =========================================================
   2. CARD RESET
========================================================= */

#primary.ast-grid-3 .ast-row > article.ast-article-post {
    display: block !important;

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

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

    float: none !important;
}

#primary.ast-grid-3 .ast-article-inner,
#primary.ast-grid-3 .post-content {
    display: block !important;

    width: 100% !important;

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


/* =========================================================
   3. IMAGE / CARD
========================================================= */

#primary.ast-grid-3 .ast-blog-featured-section {
    position: relative !important;

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

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

    overflow: hidden !important;

    border-radius: 0 !important;
}

#primary.ast-grid-3 .post-thumb-img-content {
    position: relative !important;

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

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

    overflow: hidden !important;
}


/* =========================================================
   4. IMAGE
========================================================= */

#primary.ast-grid-3 .post-thumb-img-content img {
    display: block !important;

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

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

    object-fit: cover !important;

    transition:
        transform .7s cubic-bezier(.22,.61,.36,1),
        filter .5s ease !important;
}


/* =========================================================
   5. IMAGE HOVER
========================================================= */

#primary.ast-grid-3 .ast-article-post:hover
.post-thumb-img-content img {
    transform: scale(1.055) !important;
    filter: brightness(.94) !important;
}


/* =========================================================
   6. PREMIUM OVERLAY
========================================================= */

#primary.ast-grid-3 .post-thumb-img-content::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 2 !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            to top,
            rgba(15,13,10,.95) 0%,
            rgba(15,13,10,.80) 27%,
            rgba(15,13,10,.38) 57%,
            rgba(15,13,10,.08) 82%,
            transparent 100%
        ) !important;
}


/* =========================================================
   7. TOUR META CONTAINER
========================================================= */

#primary.ast-grid-3 .mne-tour-archive-info {
    position: absolute !important;

    left: 20px !important;
    right: 20px !important;

    /*
       105px = espace entre Duration et titre
    */
    bottom: 105px !important;

    z-index: 5 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 9px !important;

    width: auto !important;
    max-width: calc(100% - 40px) !important;

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

    pointer-events: none !important;
}


/* =========================================================
   8. META ORDER
========================================================= */

#primary.ast-grid-3 .mne-tour-from {
    order: 1 !important;
}

#primary.ast-grid-3 .mne-tour-duration {
    order: 2 !important;
}


/* =========================================================
   9. META BADGES
========================================================= */

#primary.ast-grid-3 .mne-tour-archive-meta {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    gap: 8px !important;

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

    min-height: 34px !important;

    margin: 0 !important;
    padding: 7px 12px !important;

    box-sizing: border-box !important;

    border-radius: 4px !important;

    backdrop-filter: blur(7px) !important;
    -webkit-backdrop-filter: blur(7px) !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.18) !important;
}


/* =========================================================
   10. FROM
========================================================= */

#primary.ast-grid-3 .mne-tour-from {
    background:
        linear-gradient(
            135deg,
            rgba(181,138,82,.97),
            rgba(184,149,74,.96)
        ) !important;

    border: 1px solid rgba(255,255,255,.30) !important;
}


/* =========================================================
   11. DURATION
========================================================= */

#primary.ast-grid-3 .mne-tour-duration {
    background:
        rgba(25,22,18,.91) !important;

    border: 1px solid rgba(255,255,255,.20) !important;
}


/* =========================================================
   12. META ICON
========================================================= */

#primary.ast-grid-3 .mne-tour-archive-meta > i {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    width: 16px !important;
    height: 16px !important;

    flex: 0 0 16px !important;

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

    font-size: 11px !important;

    line-height: 1 !important;

    color: #DFC16C !important;
}

#primary.ast-grid-3 .mne-tour-from > i {
    color: #fff !important;
}


/* =========================================================
   13. META TEXT
========================================================= */

#primary.ast-grid-3 .mne-tour-meta-text {
    display: flex !important;

    align-items: center !important;

    gap: 7px !important;

    min-width: 0 !important;

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

    line-height: 1 !important;
}


/* =========================================================
   14. META LABEL
========================================================= */

#primary.ast-grid-3 .mne-tour-meta-label {
    display: inline-block !important;

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

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 7px !important;
    line-height: 1 !important;

    font-weight: 700 !important;

    letter-spacing: 1px !important;

    text-transform: uppercase !important;

    white-space: nowrap !important;

    color: rgba(255,255,255,.68) !important;
}


/* =========================================================
   15. META VALUE
========================================================= */

#primary.ast-grid-3 .mne-tour-meta-value {
    display: inline-block !important;

    max-width: 100% !important;

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

    font-family: Arial, Helvetica, sans-serif !important;

    font-size: 11px !important;
    line-height: 1.1 !important;

    font-weight: 600 !important;

    white-space: nowrap !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;

    color: #fff !important;
}


/* =========================================================
   16. TITLE ON IMAGE
========================================================= */

#primary.ast-grid-3 .entry-title {
    position: absolute !important;

    left: 20px !important;
    right: 20px !important;
    bottom: 47px !important;

    width: auto !important;
    max-width: calc(100% - 40px) !important;

    z-index: 10 !important;

    display: -webkit-box !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;

    overflow: hidden !important;

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

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 22px !important;

    line-height: 1.28 !important;

    font-weight: 600 !important;

    letter-spacing: -.15px !important;

    text-align: left !important;
}


/* =========================================================
   17. TITLE LINK
========================================================= */

#primary.ast-grid-3 .entry-title a {
    display: block !important;

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

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

    color: #fff !important;

    text-decoration: none !important;

    line-height: inherit !important;
}

#primary.ast-grid-3 .ast-article-post:hover
.entry-title a {
    color: #DFC16C !important;
}


/* =========================================================
   18. READ TOUR
========================================================= */

#primary.ast-grid-3 .ast-read-more-container {
    position: absolute !important;

    left: 20px !important;
    right: auto !important;
    bottom: 17px !important;

    z-index: 11 !important;

    display: block !important;

    width: auto !important;
    height: auto !important;

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

    clear: none !important;
    float: none !important;

    text-align: left !important;
}


/* =========================================================
   19. READ TOUR LINK
========================================================= */

#primary.ast-grid-3 .ast-read-more-container a {
    display: inline-flex !important;

    align-items: center !important;

    width: auto !important;

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

    color: #DFC16C !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 10px !important;

    line-height: 1 !important;

    font-weight: 700 !important;

    letter-spacing: 1.1px !important;

    text-transform: uppercase !important;

    text-decoration: none !important;

    white-space: nowrap !important;

    transition:
        color .25s ease,
        transform .25s ease !important;
}


/* =========================================================
   20. READ TOUR ARROW
========================================================= */

#primary.ast-grid-3 .ast-read-more-container a::after {
    content: "→" !important;

    display: inline-block !important;

    margin-left: 7px !important;

    font-size: 14px !important;

    line-height: 1 !important;

    transition:
        transform .25s ease !important;
}

#primary.ast-grid-3 .ast-read-more-container a:hover {
    color: #fff !important;

    transform: translateX(2px) !important;
}

#primary.ast-grid-3 .ast-read-more-container a:hover::after {
    transform: translateX(4px) !important;
}


/* =========================================================
   21. SCREEN READER TEXT
========================================================= */

#primary.ast-grid-3
.ast-read-more-container
.screen-reader-text {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0,0,0,0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   22. HIDE EMPTY CONTENT
========================================================= */

#primary.ast-grid-3 .entry-content {
    display: none !important;
}


/* =========================================================
   23. REMOVE ASTRA EXTRA SPACING
========================================================= */

#primary.ast-grid-3
.ast-blog-single-element {
    box-sizing: border-box !important;
}

#primary.ast-grid-3
.ast-blog-featured-section,
#primary.ast-grid-3
.post-thumb,
#primary.ast-grid-3
.post-thumb-img-content {
    margin-bottom: 0 !important;
}


/* =========================================================
   24. TABLET
========================================================= */

@media (max-width: 921px) {

    #primary.ast-grid-3 .ast-row {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 22px !important;
    }

    #primary.ast-grid-3 .ast-blog-featured-section {
        height: 360px !important;
    }

    #primary.ast-grid-3 .mne-tour-archive-info {
        left: 16px !important;
        right: 16px !important;

        bottom: 96px !important;

        max-width: calc(100% - 32px) !important;

        gap: 8px !important;
    }

    #primary.ast-grid-3 .entry-title {
        left: 16px !important;
        right: 16px !important;

        bottom: 43px !important;

        max-width: calc(100% - 32px) !important;

        font-size: 20px !important;

        line-height: 1.28 !important;
    }

    #primary.ast-grid-3 .ast-read-more-container {
        left: 16px !important;
        bottom: 17px !important;
    }
}


/* =========================================================
   25. MOBILE
========================================================= */

@media (max-width: 600px) {

    #primary.ast-grid-3 .ast-row {
        grid-template-columns: 1fr !important;

        gap: 25px !important;
    }

    #primary.ast-grid-3 .ast-blog-featured-section {
        height: 390px !important;
    }

    #primary.ast-grid-3 .mne-tour-archive-info {
        left: 16px !important;
        right: 16px !important;

        bottom: 100px !important;

        max-width: calc(100% - 32px) !important;

        gap: 8px !important;
    }

    #primary.ast-grid-3 .mne-tour-archive-meta {
        min-height: 33px !important;

        padding: 7px 10px !important;

        gap: 7px !important;
    }

    #primary.ast-grid-3 .mne-tour-archive-meta > i {
        width: 15px !important;
        height: 15px !important;

        flex-basis: 15px !important;

        font-size: 11px !important;
    }

    #primary.ast-grid-3 .mne-tour-meta-label {
        font-size: 7px !important;

        letter-spacing: .9px !important;
    }

    #primary.ast-grid-3 .mne-tour-meta-value {
        font-size: 10px !important;
    }

    #primary.ast-grid-3 .entry-title {
        left: 16px !important;
        right: 16px !important;

        bottom: 45px !important;

        max-width: calc(100% - 32px) !important;

        font-size: 21px !important;

        line-height: 1.28 !important;
    }

    #primary.ast-grid-3 .ast-read-more-container {
        left: 16px !important;

        bottom: 17px !important;
    }

    #primary.ast-grid-3 .ast-read-more-container a {
        font-size: 10px !important;

        letter-spacing: 1px !important;
    }
}


/* =========================================================
   26. SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    #primary.ast-grid-3 .ast-blog-featured-section {
        height: 370px !important;
    }

    #primary.ast-grid-3 .mne-tour-archive-info {
        left: 12px !important;
        right: 12px !important;

        bottom: 96px !important;

        max-width: calc(100% - 24px) !important;
    }

    #primary.ast-grid-3 .entry-title {
        left: 12px !important;
        right: 12px !important;

        bottom: 43px !important;

        max-width: calc(100% - 24px) !important;

        font-size: 19px !important;
    }

    #primary.ast-grid-3 .ast-read-more-container {
        left: 12px !important;

        bottom: 16px !important;
    }
}