/**
 * Contenu d'article — corps de `core/post-content` et son enveloppe.
 *
 * Préfixe : .lenain-article
 * Utilisée par `templates/single-mag.html` et `templates/single-realisation.html`.
 *
 * À charger APRÈS custom.css et buttons.css (voir lenain_stylesheets()).
 *
 * Deux points d'attention repris de la maquette :
 *
 * 1. Le carré rose de `.lenain-section-title` ne s'applique PAS aux titres du
 *    corps d'article : dans l'export, seuls les titres de section le portent
 *    (« À lire ensuite », « Une question sur votre projet ? »), jamais les h2
 *    de l'article. Rien ici ne le pose donc, et il ne faut pas ajouter la
 *    classe aux titres saisis dans l'éditeur.
 *
 * 2. WordPress espace les enfants d'un `is-layout-flow` avec
 *    `:root :where(.is-layout-flow) > *`, de spécificité (0,1,0). Les règles de
 *    rythme ci-dessous sont préfixées par `:root` pour passer devant sans
 *    recourir à `!important`, exactement comme WordPress le fait.
 */

/* ------------------------------------------------------------- Enveloppe */

.lenain-article__header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lenain-article__terms {
    margin: 0;
    color: var(--wp--preset--color--rose);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lenain-article__title {
    max-width: 880px;
    margin: 0;
    color: var(--wp--preset--color--titre);
    font-size: var(--wp--preset--font-size--xl-4);
    line-height: 1.35;
}

.lenain-article__excerpt {
    margin: 0;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.75;
}

/*
 * Visuel de couverture : bandeau large, plus bas que haut (maquette : 520px).
 * Le cran le plus large de la hiérarchie : l'image occupe toute la largeur du
 * conteneur de contenu (1280), gouttières en dehors — la maquette la mesure
 * bord à bord de la boîte, quand le conteneur paddé la réduisait à 1200,
 * moins large que le duo.
 */
.lenain-article__media {
    max-width: min(var(--lp-article-cover), calc(100vw - var(--lp-container-padding) * 2));
    padding-inline: 0;
    margin-block-end: 64px;
}

.lenain-article__media .wp-block-post-featured-image {
    margin: 0;
    border-radius: var(--lp-radius-md);
    overflow: hidden;
}

.lenain-article__media .wp-block-post-featured-image img {
    display: block;
    width: 100%;
    height: clamp(220px, 40vw, 520px);
    object-fit: cover;
}

/* Le header, quand il y en a un, précède le visuel. */
.lenain-article__header + .lenain-article__media {
    margin-block-start: 48px;
}

/* --------------------------------------------------------- Rythme du corps */

.lenain-article__body .entry-content {
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--base);
    line-height: 1.8;
}

:root .lenain-article__body .entry-content > :where(:not(.lenain-section):not(.alignfull):not(.alignwide):not(.wp-block-image):not(.wp-block-video):not(.wp-block-columns):not(.wp-block-lenain-conseil)) {
    /* La colonne de lecture, portée par chaque bloc : 720 au large, la
       gouttière aux petits écrans — sans toucher aux paddings propres des
       blocs (citation, listes, encarts). */
    max-width: min(720px, calc(100% - var(--lp-container-padding) * 2));
    margin-block: var(--lp-article-step) 0;
    margin-inline: auto;
}

/*
 * Les blocs du thème (sections) et les blocs larges se gèrent seuls : leur
 * marge vient de leurs propres règles (tokens du système, crans 880/1280),
 * jamais du gabarit d'article — le wrapper n'impose plus rien.
 */

:root .lenain-article__body .entry-content > :first-child {
    margin-block-start: 0;
}

/*
 * Pas de marge dédiée aux intertitres en desktop : les règles 48/36 d'antan
 * étaient battues par la générique de colonne — le rendu réel a toujours été
 * le pas de lecture (28). La variante mobile, elle, gagnait et demeure.
 */

/* ------------------------------------------------------------------ Titres */

/*
 * La famille, la casse et la couleur viennent de theme.json (élément
 * `heading`) : il ne reste que l'interlignage propre à la colonne de lecture.
 */
/*
 * Les intertitres d'un article sont plus discrets que les titres de section :
 * la maquette les descend d'un cran, le texte du corps restant le même.
 */
.lenain-article__body .entry-content :is(h2, h3, h4, h5, h6) {
    line-height: 1.45;
}

.lenain-article__body .entry-content > h2 {
    position: relative;
    font-size: var(--wp--preset--font-size--xl);
}

.lenain-article__body .entry-content > h2::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--lp-titre-repere));
    top: calc(1em - 12px);
    width: 12px;
    height: 12px;
    background: var(--wp--preset--color--rose);
}

.lenain-article__body .entry-content h3 {
    color: color-mix(in srgb, var(--wp--preset--color--titre) 90%, transparent);
    font-weight: 500;
    letter-spacing: 0.12em;
}

/* -------------------------------------------------------------- Paragraphes */

.lenain-article__body .entry-content p {
    margin-block-end: 0;
}

/* Chapô : le premier paragraphe ouvre plus large et plus soutenu. */
.lenain-article__body .entry-content > p:first-child {
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 500;
    line-height: 1.7;
}

.lenain-article__body .entry-content a:where(:not(.leb-cta)) {
    color: var(--wp--preset--color--rose);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.lenain-article__body .entry-content a:where(:not(.leb-cta)):hover,
.lenain-article__body .entry-content a:where(:not(.leb-cta)):focus-visible {
    text-decoration: none;
}

/* ------------------------------------------------------------------ Listes */

/*
 * Maquette : une liste à puces devient un tableau de points, filets au-dessus
 * et au-dessous, carré rose en guise de puce. Le carré est du décor : il est
 * posé en ::before, jamais saisi dans le contenu.
 */
.lenain-article__body .entry-content ul.wp-block-list {
    padding: 0;
    border-block: 1px solid var(--wp--preset--color--border-soft);
    list-style: none;
}

.lenain-article__body .entry-content ul.wp-block-list > li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.6;
}

.lenain-article__body .entry-content ul.wp-block-list > li::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: var(--wp--preset--color--rose);
}

/* Une sous-liste reste à l'intérieur du bloc : ni filets, ni double puce. */
.lenain-article__body .entry-content ul.wp-block-list ul.wp-block-list {
    flex: 1 1 100%;
    border-block: 0;
    padding-inline-start: 20px;
}

.lenain-article__body .entry-content ol.wp-block-list {
    margin-inline: 0;
    padding-inline-start: 1.4em;
    color: var(--wp--preset--color--text);
    font-size: var(--wp--preset--font-size--md);
}

.lenain-article__body .entry-content ol.wp-block-list > li {
    padding-block: 6px;
    line-height: 1.7;
}

.lenain-article__body .entry-content ol.wp-block-list > li::marker {
    color: var(--wp--preset--color--rose);
    font-weight: 600;
}

/* ---------------------------------------------------------------- Citation */

.lenain-article__body .entry-content :is(.wp-block-quote, blockquote) {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 8px 0 8px 28px;
    border: 0;
    border-inline-start: 3px solid var(--wp--preset--color--rose);
    font-style: normal;
}

.lenain-article__body .entry-content :is(.wp-block-quote, blockquote) p {
    margin: 0;
    color: var(--wp--preset--color--anthracite);
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 500;
    line-height: 1.6;
}

/* La citation respire pareil au-dessus et en dessous, comme tout bloc. */
:root .lenain-article__body .entry-content > :is(.wp-block-quote, blockquote) {
    margin-block: 40px;
}

.lenain-article__body .entry-content :is(.wp-block-quote, blockquote) > *:first-child {
    margin-block-start: 0;
}

.lenain-article__body .entry-content :is(.wp-block-quote, blockquote) cite {
    display: block;
    color: var(--wp--preset--color--kicker);
    font-size: var(--wp--preset--font-size--xs);
    font-style: normal;
    letter-spacing: 0.06em;
}

/* ------------------------------------------------------------ Images, média */

.lenain-article__body .entry-content :is(.wp-block-image, .wp-block-gallery, figure) img {
    display: block;
    border-radius: var(--lp-radius-md);
}

.lenain-article__body .entry-content figcaption {
    margin-block-start: 12px;
    padding-inline: 4px;
    color: var(--wp--preset--color--kicker);
    font-size: var(--wp--preset--font-size--xs);
    line-height: 1.5;
    text-align: start;
}

.lenain-article__body .entry-content .wp-block-gallery figcaption {
    margin-block-start: 8px;
}

/* ----------------------------------------------------------------- Vidéo */

/*
 * La vidéo native suit la hiérarchie de l'image seule : le cran 880 qui
 * déborde de la colonne de lecture, centré sur le même axe — et le cran
 * pleine colonne (1280) quand elle est passée en large.
 */
:root .lenain-article__body .entry-content > .wp-block-video {
    --lp-video-largeur: min(var(--lp-article-image), calc(100vw - var(--lp-container-padding) * 2));

    width: var(--lp-video-largeur);
    margin-block: 64px;
    margin-inline: auto;
}

:root .lenain-article__body .entry-content > .wp-block-video.alignwide {
    --lp-video-largeur: min(var(--wp--style--global--content-size), calc(100vw - var(--lp-container-padding) * 2));
}

.lenain-article__body .entry-content > .wp-block-video video {
    display: block;
    width: 100%;
    border-radius: var(--lp-radius-md);
}

.lenain-article__body .entry-content > .wp-block-video > figcaption {
    max-width: 720px;
    margin-inline: auto;
    padding-inline: 0;
}

/* --------------------------------------------------------------- Tableaux */

.lenain-article__body .entry-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--wp--preset--font-size--base);
}

.lenain-article__body .entry-content .wp-block-table :is(th, td) {
    padding: 12px 16px;
    border: 1px solid var(--wp--preset--color--border-soft);
    text-align: start;
}

.lenain-article__body .entry-content .wp-block-table th {
    background: var(--wp--preset--color--bg);
    color: var(--wp--preset--color--anthracite);
    font-weight: 600;
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 640px) {
    .lenain-article__media {
        margin-block-end: 40px;
    }

    :root .lenain-article__body .entry-content > :where(:not(.lenain-section)) {
        margin-block-start: 22px;
    }

    :root .lenain-article__body .entry-content > h2 {
        margin-block-start: 36px;
    }

    .lenain-article__body .entry-content :is(.wp-block-quote, blockquote) {
        padding: 24px 20px;
    }
}

/* La couverture est arrondie, comme toute photo de la maquette. */
.lenain-article__media img {
    border-radius: var(--lp-radius-md);
}

/* -------------------------------------------------------- Image seule */

/*
 * Une image posée seule dans le corps déborde légèrement de la colonne de
 * lecture — le cran intermédiaire bas de la hiérarchie (880, la largeur du
 * titre d'article) — pour casser le rythme sans concurrencer le duo ni la
 * couverture. Même mécanique de centrage que le duo.
 */
:root .lenain-article__body .entry-content > .wp-block-image {
    --lp-image-largeur: min(var(--lp-article-image), calc(100vw - var(--lp-container-padding) * 2));

    width: var(--lp-image-largeur);
    margin-block: 64px;
    margin-inline: auto;
}

.lenain-article__body .entry-content > .wp-block-image img {
    width: 100%;
    border-radius: var(--lp-radius-md);
}

/*
 * La légende d'une image seule ou de la couverture se cale sur la colonne de
 * texte (720, centrée sur le même axe) : même bord gauche que le paragraphe
 * qui suit. Celles des duos restent alignées chacune à son image.
 */
.lenain-article__body .entry-content > .wp-block-image > figcaption,
.lenain-article__media figcaption {
    max-width: 720px;
    margin-inline: auto;
    /* Le retrait de 4px de la règle générique romprait l'alignement exact. */
    padding-inline: 0;
}

/* ---------------------------------------------------------- Duo d'images */

/*
 * Deux visuels côte à côte, à la trame de la maquette : colonnes égales
 * serrées, photos de même hauteur, légende sous chacune. La grille remplace le
 * flex des colonnes natives, dont le pas est plus large.
 *
 * Le duo déborde de la colonne de lecture : il s'étale sur la largeur de
 * contenu du site — 1280px — centré sur le même axe, soit 280px de débord de
 * part et d'autre des 720px du texte. La marge négative rend cette largeur, et
 * se résorbe d'elle-même quand l'écran ne l'offre plus.
 *
 * Il respire aussi davantage que le texte : 64px au-dessus et en dessous, là
 * où les paragraphes se suivent à 28. Le préfixe `:root` égale la force de la
 * règle de rythme, déclarée plus haut — à égalité, celle-ci l'emporte.
 */
:root .lenain-article__body .entry-content > .wp-block-columns {
    --lp-duo-largeur: min(var(--lp-article-duo), calc(100vw - var(--lp-container-padding) * 2));

    display: grid;
    /*
     * Chaque visuel garde le ratio paysage de la maquette (632 × 400) quelle
     * que soit la place : sous 280px de colonne, l'auto-fit replie le duo en
     * pile pleine largeur au lieu d'écraser les images. Bascule calculée :
     * 280 × 2 + 16 de gouttière = 576px de conteneur, soit ~616px d'écran.
     */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    width: var(--lp-duo-largeur);
    margin-block: 64px;
    margin-inline: auto;
}

/*
 * Le ratio paysage de la maquette (632 × 400), tenu par aspect-ratio et non
 * par une hauteur fixe : l'image rétrécit en homothétie, jamais vers le
 * portrait. La bascule en pile est portée par l'auto-fit de la grille —
 * plus besoin de point de rupture manuel.
 */
.lenain-article__body .entry-content .wp-block-columns .wp-block-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 632 / 400;
    object-fit: cover;
    border-radius: var(--lp-radius-md);
}

/* L'encart conseil est devenu le bloc lenain/conseil : ses styles vivent
   dans blocks/conseil/style.css. */

/*
 * La dernière section du corps s'arrête net : le gabarit de l'article porte
 * déjà l'écart avec ce qui suit, et les deux marges s'additionneraient.
 */
.lenain-article__body .entry-content > .lenain-section:last-child {
    margin-block-end: 0;
}