/* =============================================
   Module "Push long read" : carte d'un long read, un par module
   (bloc Gutenberg acf/longreadpush + section modulable section_longread_push)
   ============================================= */

.longread-push-conteneur{
    container-type: inline-size;
}

.longread-push{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: 1170px;
    margin: 0 auto;
}

/* Dans un long read (contenu Gutenberg), la grille prend la largeur de lecture et s'espace du reste */
.longread-template .block-longread-push{
    padding: 40px 20px;
}

/* Cotes et typos relevees sur la maquette Figma (noeud 20:55 "LongreadPush") :
   carte 1170 x 524.33, visuel 631.8 / panneau 538.2, panneau 58px 64px */
.longread-push-carte{
    --longread-push-couleur: #1b64d7;
    display: grid;
    grid-template-columns: 54% 46%;
    /* Taille preferee de la maquette ; sans overflow:hidden la carte grandit si un titre long depasse */
    aspect-ratio: 1170 / 524.33;
    color: #fff;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

/* Specificite renforcee : .block-editor a:hover (style.css) soulignait titre et texte au survol */
.longread-push-conteneur a.longread-push-carte,
.longread-push-conteneur a.longread-push-carte:hover,
.longread-push-conteneur a.longread-push-carte:focus-visible{
    color: #fff;
    text-decoration: none;
}

.longread-push-carte:hover,
.longread-push-carte:focus-visible{
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, .14);
}

.longread-push-visuel{
    position: relative;
    background: #e9e9e9;
    overflow: hidden;
}

.longread-push-visuel img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.longread-push-carte:hover .longread-push-visuel img{
    transform: scale(1.04);
}

.longread-push-panneau{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 58px 64px;
    background: var(--longread-push-couleur);
}

/* Numero : Sora Bold 14 / 21, interlettrage 1.4px, capitales, 18px sous le numero */
.longread-push-carte .longread-push-surtitre{
    margin: 0 0 18px;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.5;
}

/* Titre : Sora ExtraBold 49 / 54.08 */
.longread-push-carte .longread-push-titre{
    margin: 0;
    max-width: 411px;
    font-family: 'Sora', sans-serif;
    font-size: 49px;
    font-weight: 800;
    line-height: 1.104;
    color: #fff;
}

/* Texte : Sora Regular 16 / 26.4, 26px au-dessus, 34px au-dessous */
.longread-push-carte .longread-push-texte{
    margin: 26px 0 0;
    max-width: 411px;
    color: #fff;
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bouton : pilule blanche, Sora Bold 13 / 19.5 bleu nuit, 11px 28px, largeur mini 150px */
.longread-push-bouton{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    margin-top: 34px;
    padding: 11px 28px;
    border-radius: 999px;
    background: #fff;
    color: #00007d;
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    transition: background .25s ease, color .25s ease;
}

.longread-push-carte:hover .longread-push-bouton{
    background: #00007d;
    color: #fff;
}

/* Conteneur moyen (colonne de contenu, tablette) : typos reduites a l'echelle */
@container (max-width: 1000px) {
    .longread-push-panneau{
        padding: 40px 44px;
    }

    .longread-push-carte .longread-push-titre{
        font-size: 36px;
    }

    .longread-push-carte .longread-push-texte{
        margin-top: 20px;
        font-size: 15px;
    }

    .longread-push-bouton{
        margin-top: 26px;
    }
}

/* Conteneur etroit : panneau plus serre */
@container (max-width: 780px) {
    .longread-push-panneau{
        padding: 28px 30px;
    }

    .longread-push-carte .longread-push-surtitre{
        margin-bottom: 12px;
        font-size: 12px;
    }

    .longread-push-carte .longread-push-titre{
        font-size: 28px;
    }

    .longread-push-carte .longread-push-texte{
        margin-top: 14px;
        font-size: 14px;
    }

    .longread-push-bouton{
        margin-top: 20px;
    }
}

/* Mobile : visuel au-dessus du panneau */
@container (max-width: 600px) {
    .longread-push-carte{
        grid-template-columns: minmax(0, 1fr);
        aspect-ratio: auto;
    }

    .longread-push-visuel{
        aspect-ratio: 632 / 524;
    }

    .longread-push-panneau{
        padding: 32px 24px;
    }

    .longread-push-carte .longread-push-titre{
        font-size: 28px;
    }

    .longread-push-carte .longread-push-titre,
    .longread-push-carte .longread-push-texte{
        max-width: none;
    }
}

@media screen and (max-width: 767px) {
    .longread-template .block-longread-push{
        padding: 32px 16px;
    }
}

/* Espacement entre deux modules empiles dans un contenu Gutenberg */
.block-longread-push + .block-longread-push{
    margin-top: 32px;
}