/* ============================================================
   DESIGN BLOG NOLWENN
============================================================ */

/* --- 1. BOÎTE GLOBALE --- */
.blog-custom-nolwenn .et_pb_post {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 700 / 600 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #282e3e !important;
    border: none !important;
    container-type: inline-size !important;
    container-name: blog-card !important;
}

.blog-custom-nolwenn article.et_pb_post {
    margin-bottom: 40px !important;
}

/* Espace entre cartes */
.blog-custom-nolwenn .et_pb_ajax_pagination_container {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
}
.blog-custom-nolwenn .et_pb_ajax_pagination_container article + article {
    margin-top: 40px !important;
}

/* Lien cliquable sur toute la carte */
.blog-custom-nolwenn .et_pb_post .entry-title a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
}

/* --- 2. BANDEAU DATE VERTICAL À GAUCHE --- */
.blog-custom-nolwenn .post-meta {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    background-color: #282e3e !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    overflow: hidden !important;
}

.blog-custom-nolwenn .post-meta .published {
    color: #ededed !important;
    font-family: 'Urbanist', sans-serif !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    writing-mode: vertical-lr !important;
    position: absolute !important;
    top: 30px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(180deg) !important;
    font-size: 3.5cqi !important;
}

/* --- 3. IMAGE --- */
.blog-custom-nolwenn .et_pb_image_container {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 60px !important;
    width: calc(100% - 60px) !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}

.blog-custom-nolwenn .et_pb_image_container a,
.blog-custom-nolwenn .et_pb_image_container img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* --- 4. TITRE --- */
.blog-custom-nolwenn .entry-title {
    position: absolute !important;
    top: 52% !important;
    left: 60px !important;
    right: 0 !important;
    z-index: 20 !important;
    margin: 0 !important;
    padding: 2cqi 4cqi 1cqi 4cqi !important;
    box-sizing: border-box !important;
}

.blog-custom-nolwenn .entry-title a {
    color: #282e3e !important;
    font-family: 'Urbanist', sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.2em !important;
    display: block !important;
    text-shadow: none !important;
    font-size: 4.5cqi !important;
}

/* --- 5. ZONE BLANCHE TRANSLUCIDE --- */
.blog-custom-nolwenn .post-content {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    left: 60px !important;
    top: 52% !important;
    height: auto !important;
    background: rgba(255, 255, 255, 0.72) !important;
    z-index: 5 !important;
    padding: 11cqi 4cqi 3cqi 4cqi !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
}

/* --- 6. EXTRAIT --- */
.blog-custom-nolwenn .post-content p {
    color: #282e3e !important;
    font-family: 'Urbanist', sans-serif !important;
    line-height: 1.45em !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 3cqi !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* ============================================================
   MOBILE : ajustements sous 480px — très petits écrans
============================================================ */
@media (max-width: 480px) {

    .blog-custom-nolwenn .et_pb_post {
        aspect-ratio: 6 / 5 !important;
        margin-bottom: 30px !important;
    }

    .blog-custom-nolwenn .et_pb_ajax_pagination_container {
        gap: 30px !important;
    }

    .blog-custom-nolwenn .post-meta {
        width: 45px !important;
    }

    .blog-custom-nolwenn .post-meta .published {
        font-size: 4.5vw !important;
        top: 20px !important;
    }

    .blog-custom-nolwenn .et_pb_image_container {
        left: 45px !important;
        width: calc(100% - 45px) !important;
    }

    .blog-custom-nolwenn .entry-title {
        left: 45px !important;
        top: 52% !important;
        right: 0 !important;
        padding: 2vw 3vw 1vw 5vw !important;
    }

    .blog-custom-nolwenn .entry-title a {
        font-size: 5vw !important;
    }

    .blog-custom-nolwenn .post-content {
        left: 45px !important;
        top: 52% !important;
        padding: 14vw 3vw 3vw 5vw !important;
    }

    .blog-custom-nolwenn .post-content p {
        font-size: 3.5vw !important;
    }
}

/* ============================================================
   PHABLET : 481px – 768px
============================================================ */
@media (min-width: 481px) and (max-width: 768px) {

    .blog-custom-nolwenn .et_pb_post {
        aspect-ratio: 6 / 5 !important;
        margin-bottom: 30px !important;
    }

    .blog-custom-nolwenn .et_pb_ajax_pagination_container {
        gap: 30px !important;
    }

    .blog-custom-nolwenn .post-meta {
        width: 45px !important;
    }

    .blog-custom-nolwenn .post-meta .published {
        font-size: 3.5vw !important;
        top: 20px !important;
    }

    .blog-custom-nolwenn .et_pb_image_container {
        left: 45px !important;
        width: calc(100% - 45px) !important;
    }

    .blog-custom-nolwenn .entry-title {
        left: 45px !important;
        top: 52% !important;
        right: 0 !important;
        padding: 2vw 3vw 1vw 5vw !important;
    }

    .blog-custom-nolwenn .entry-title a {
        font-size: 5vw !important;
    }

    .blog-custom-nolwenn .post-content {
        left: 45px !important;
        top: 52% !important;
        padding: 14vw 3vw 3vw 5vw !important;
    }

    .blog-custom-nolwenn .post-content p {
        font-size: 3.5vw !important;
    }
}

/* ============================================================
   TABLETTE : 769px – 1024px
   Date légèrement plus petite que desktop
============================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .blog-custom-nolwenn .post-meta .published {
        font-size: 2.5cqi !important;
    }
}

/* ============================================================
   PAGE PRESSE : Blog Grid forcé sur 2 colonnes (ordre ligne)
============================================================ */

.blog-2-colonnes .et_pb_salvattore_content {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 40px !important;
    column-count: unset !important;
    columns: unset !important;
}

/* Le JS supprime les .column — cette règle est juste en sécurité */
.blog-2-colonnes .et_pb_salvattore_content .column {
    display: contents !important;
}

.blog-2-colonnes .et_pb_salvattore_content article.et_pb_post {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    min-width: 0 !important;
}

.blog-2-colonnes .et_pb_salvattore_content::before {
    content: '1 .column' !important;
}

/* ----- MOBILE : 1 colonne sous 768px ----- */
@media (max-width: 768px) {
    .blog-2-colonnes .et_pb_salvattore_content {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* ============================================================
   FIX : espacement titre / extrait trop serré sur la page presse
   (cartes 2x plus étroites en 2 colonnes -> moins d'espace libre
   dans la boîte pour pousser l'extrait vers le bas).

   IMPORTANT : passer de justify-content:flex-end à flex-start
   est nécessaire pour que le padding-top ait un effet réel.
   Avec flex-end, l'espace libre du flex se place AVANT l'extrait
   et absorbe/neutralise toute variation de padding-top (l'extrait
   ne bouge pas). Avec flex-start, l'espace libre se place APRÈS
   l'extrait : le padding-top devient un vrai espacement visible.

   Appliqué seulement à partir de 769px, largeur à laquelle la
   grille presse affiche réellement 2 colonnes.
============================================================ */
.blog-custom-nolwenn.blog-2-colonnes .post-content {
    justify-content: flex-start !important;
    padding-top: 20cqi !important;
}

/* L'extrait est limité à 3 lignes (au lieu de 4) sur la page presse
   pour garantir un espace visible sous le titre, même quand le
   texte est long et que la carte est étroite. */
.blog-custom-nolwenn.blog-2-colonnes .post-content p {
    -webkit-line-clamp: 4 !important;
}

/* Sur très petits écrans, la carte est trop petite pour 3 lignes
   d'extrait + un espace visible sous le titre : on réduit à 2 lignes. */
@media (max-width: 480px) {
    .blog-custom-nolwenn.blog-2-colonnes .post-content p {
        -webkit-line-clamp: 4 !important;
    }
}

/* ============================================================
   FIX : limiter le titre pour éviter chevauchement avec l'extrait
============================================================ */
.blog-custom-nolwenn .entry-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .blog-custom-nolwenn .entry-title a {
        -webkit-line-clamp: 2 !important;
    }
}