/*
 * Spacing overrides — thème ataho.fr
 *
 * Lors du portage Loki -> Joornal, de nombreux styles inline du thème
 * référencent des variables CSS `var(--wp--preset--spacing--NN)` (échelle
 * d'espacement WordPress) qui n'étaient jamais définies nulle part dans le
 * thème livré. Sans définition, ces `var()` sont invalides et les
 * `padding`/`margin` qui les utilisent retombent à 0 : c'est la cause
 * principale de l'effet "tout est compressé" (header, footer, titres
 * d'article, cartes de la liste d'articles...).
 *
 * Ce fichier : (1) définit une échelle d'espacement cohérente pour que tous
 * ces styles inline existants s'appliquent enfin, (2) ajoute des marges
 * horizontales de page, (3) ajoute de l'espace entre images et texte, et
 * (4) aère la grille "derniers articles" (post-loop). Chargé en dernier
 * pour prendre le dessus si besoin.
 */

:root {
    --wp--preset--spacing--10: 0.5rem;   /* 8px */
    --wp--preset--spacing--20: 0.75rem;  /* 12px */
    --wp--preset--spacing--30: 1rem;     /* 16px */
    --wp--preset--spacing--40: 1.5rem;   /* 24px */
    --wp--preset--spacing--50: 2rem;     /* 32px */
    --wp--preset--spacing--60: 2.5rem;   /* 40px */
    --wp--preset--spacing--70: 3.5rem;   /* 56px */
    --wp--preset--spacing--80: 4.5rem;   /* 72px */
}


/* ---------------------------------------------------------------------
 * 1) Marges de page (gauche/droite) sur le conteneur principal
 * ------------------------------------------------------------------- */
.has-global-padding {
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 782px) {
    .has-global-padding {
        padding-left: 40px;
        padding-right: 40px;
    }
}

@media (min-width: 1200px) {
    .has-global-padding {
        padding-left: 64px;
        padding-right: 64px;
    }
}

/* Evite le cumul de padding quand un bloc "has-global-padding" est imbriqué
   dans un autre (le padding du parent suffit). */
.has-global-padding .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Les blocs "pleine largeur" (alignfull, ex: cover/hero) doivent rester
   bord à bord malgré le nouveau padding de leur parent. */
.has-global-padding > .alignfull {
    margin-left: -24px;
    margin-right: -24px;
}

@media (min-width: 782px) {
    .has-global-padding > .alignfull {
        margin-left: -40px;
        margin-right: -40px;
    }
}

@media (min-width: 1200px) {
    .has-global-padding > .alignfull {
        margin-left: -64px;
        margin-right: -64px;
    }
}


/* ---------------------------------------------------------------------
 * 2) Espace entre les images et le texte qui suit
 * ------------------------------------------------------------------- */
.entry-content img,
.wp-block-post-content img,
.entry-content figure,
.wp-block-post-content figure,
.wp-block-image {
    margin-bottom: 1.75rem;
}

.entry-content figure:last-child,
.wp-block-post-content figure:last-child,
.entry-content img:last-child,
.wp-block-post-content img:last-child {
    margin-bottom: 0;
}

/* Air supplémentaire entre paragraphes du contenu d'article */
.entry-content p,
.wp-block-post-content p {
    margin-bottom: 1.25rem;
}


/* ---------------------------------------------------------------------
 * 3) Vue "derniers articles" (grille post-loop) : plus d'air entre les
 *    cartes et entre le titre / l'image / l'extrait à l'intérieur de
 *    chaque carte.
 * ------------------------------------------------------------------- */
/* Plus d'espace vertical entre les lignes de la grille (le column-gap
   horizontal n'est pas touché car la largeur des cartes est calculée en
   fonction de lui : calc(33.333% - 0.85em)). */
ul.wp-block-post-template {
    row-gap: 3.5rem !important;
}

/* Espace entre le titre et l'extrait dans chaque carte d'article */
.wp-block-post-title + .wp-block-group {
    margin-top: 0.65rem;
}

/* Un peu d'air sous l'extrait / au-dessus du bas de carte */
li.wp-block-post .wp-block-post-author {
    margin-bottom: 0.25rem;
}


/* ---------------------------------------------------------------------
 * 4) Respiration générale entre les grandes sections de la page
 * ------------------------------------------------------------------- */
footer.site-footer {
    margin-top: 3rem !important;
}

header.site-header {
    margin-bottom: 0.5rem;
}