/*
 * templates-blocks.css - composants .mam-block--* utilises dans les
 * sections sous le head des fiches CPT et pages locales.
 *
 * Couvre :
 *   - .mam-block (base) + __head, __num, __title, __body, __intro
 *   - Variants : --intro, --tech-stats, --gallery, --context, --features,
 *     --steps, --video, --maillage
 *   - .mam-stats-grid, .mam-feature-card, .mam-steps-timeline, .mam-step
 *   - .mam-blocks-row (pair side-by-side)
 *
 * Depend de templates-core.css (charge avant).
 */

/* --- Block base : tous les blocs --------------------------------- */

.mam-block {
    padding-block: var(--sp-8);
    position: relative;
}

.mam-block__head {
    margin-bottom: var(--sp-6);
}

.mam-block__head--center {
    text-align: center;
}

.mam-block__head--row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

.mam-block__num {
    display: block;
    margin-bottom: var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.mam-block__num--huge {
    display: block;
    margin-bottom: 0;
    font-size: clamp(5rem, 12vw, 10rem);
    font-weight: 200;
    font-style: italic;
    line-height: 0.85;
    color: var(--color-accent);
    letter-spacing: -0.06em;
    opacity: 0.85;
}

.mam-block__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    font-weight: 500;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--color-text);
}

.mam-block__title--center {
    text-align: center;
    max-width: 18ch;
    margin-inline: auto;
}

.mam-block__title--xl {
    font-size: clamp(2rem, 3vw + 0.5rem, 3rem);
    letter-spacing: -0.025em;
    margin-top: var(--sp-3);
}

.mam-block__title--paper {
    color: var(--c-paper);
}

.mam-block__body,
.mam-block__intro {
    /* Prose container generique */
}

.mam-block__intro {
    margin-bottom: var(--sp-6);
    max-width: 65ch;
}

.mam-block__intro--on-dark p,
.mam-block__intro--on-dark {
    color: var(--c-paper);
}

/* --- Block INTRO : layout vertical avec numero au-dessus --------- */
/* Refonte v4 (feedback user) : le split horizontal 5-7 decalait le H2
   "Presentation" par rapport au H1 ConfidenCiel du head (alignement
   incoherent). Maintenant le numero "01" est SUPERPOSE au-dessus du H2
   qui reste aligne avec le H1. Prose en bicolonne en dessous. */

.mam-block--intro {
    background: var(--color-bg);
    padding-block: var(--sp-8) var(--sp-6);
}

/* Si intro suivi de gallery -> pas de padding-bottom intro */
.mam-block--intro:has(+ .mam-block--gallery) {
    padding-bottom: var(--sp-4);
}

.mam-block--intro .mam-block__head {
    margin-bottom: var(--sp-6);
    position: relative;
}

.mam-block--intro .mam-block__head .mam-block__num--huge {
    position: absolute;
    top: -0.45em;
    left: -0.1em;
    z-index: 0;
    font-size: clamp(7rem, 14vw, 12rem);
    opacity: 0.12;
    pointer-events: none;
}

.mam-block--intro .mam-block__head .mam-kicker {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin-bottom: var(--sp-3);
}

.mam-block--intro .mam-block__head .mam-block__title--xl {
    position: relative;
    z-index: 1;
    margin: 0;
}

.mam-block__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: start;
}

.mam-block__split-side {
    /* Plus de sticky : le numero est maintenant dans le head au-dessus */
    display: none;
}

.mam-block__split-main {
    min-width: 0;
    grid-column: 1 / -1;
}

.mam-block__split-main > p:first-of-type::first-letter {
    /* Drop cap subtil style magazine FR : taille moderee, italique,
       fuchsia mais aligne sur la baseline du texte. */
    initial-letter: 2;
    font-family: var(--font-sans);
    font-weight: 400;
    font-style: italic;
    color: var(--color-accent);
    margin-right: 0.12em;
}

/* Fallback navigators sans support initial-letter : drop cap classique */
@supports not (initial-letter: 2) {
    .mam-block__split-main > p:first-of-type::first-letter {
        float: left;
        font-size: 2.6em;
        line-height: 0.9;
        padding-top: 0.08em;
        margin-right: 0.08em;
    }
}

.mam-block__split-main > p {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    margin-block: var(--sp-4);
}

.mam-block__split-main > p:first-of-type {
    font-size: var(--fs-lg);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .mam-block__split {
        grid-template-columns: 1fr;
        gap: var(--sp-5);
    }
}

/* --- Block TECH-STATS : grid cards stats sur fond CLAIR ----------- */
/* Refonte (feedback user) : fond paper-pure-alt clair, pas dark. Layout
   grid en colonnes fixes pour eviter le wrap moche des labels courts.
   Si nb cards impair -> on retire la card vide grace a :empty. */

.mam-block--tech-stats {
    background: var(--color-bg-alt);
    padding-block: var(--sp-9);
}

.mam-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--color-hairline);
    border: 1px solid var(--color-hairline);
    margin-top: var(--sp-3);
}

@media (max-width: 900px) {
    .mam-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mam-stat-card {
    background: var(--c-paper);
    padding: var(--sp-5) var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    min-height: 130px;
    position: relative;
    transition: background var(--dur-hover) var(--ease-editorial);
}

.mam-stat-card:hover {
    background: var(--c-paper-pure);
}

.mam-stat-card__label {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.3;
    order: 1;
}

.mam-stat-card__value {
    font-family: var(--font-sans);
    font-size: clamp(1.4rem, 1.5vw + 0.6rem, 2rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    order: 2;
    /* Pas de word-break (provoque wrap moche). On reduit le min-width
       et on laisse les valeurs longues respirer naturellement. */
}

.mam-stat-card--text .mam-stat-card__value {
    font-size: clamp(0.95rem, 0.4vw + 0.8rem, 1.1rem);
    font-weight: 400;
    font-style: italic;
    color: var(--color-accent);
    letter-spacing: 0;
    word-break: break-all;
}

/* Filet decoratif fuchsia sur la 1ere card */
.mam-stat-card:first-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 2px;
    background: var(--color-accent);
}

/* --- Block GALLERY : galerie editorial 100vw full-bleed ---------- */

.mam-block--gallery {
    padding-block: 0;
    background: var(--color-bg);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: 0;
}

/* Bloc suivant la galerie : padding-top reduit pour coherence */
.mam-block--gallery + .mam-block {
    padding-top: var(--sp-7);
}

.mam-block__gallery-inner {
    padding-block: 0;
}

.mam-block--gallery .wp-block-gallery {
    /* Full-bleed effectif : 100% de la largeur du parent (qui est 100vw) */
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 !important;
    /* Override de la variable CSS native WP gallery-gap qui injecte 24px */
    --wp--style--unstable-gallery-gap: 0 !important;
    --wp--style--gallery-gap-default: 0 !important;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
}

.mam-block--gallery .wp-block-gallery .wp-block-image {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--color-bg-alt); /* paper-alt pour eviter le bg noir natif WP */
    width: 100% !important;
    height: 100% !important;
    flex: 1 1 100% !important;
    display: block !important;
    max-width: none !important;
    cursor: zoom-in;
    position: relative;
}

.mam-block--gallery .wp-block-gallery .wp-block-image figure,
.mam-block--gallery .wp-block-gallery figure.wp-block-image {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: var(--color-bg-alt) !important;
}

.mam-block--gallery .wp-block-gallery .wp-block-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover; /* COVER : remplit toute la cellule, recadre si necessaire */
    object-position: center;
    display: block;
    aspect-ratio: 16 / 11;
    max-width: none;
    background: var(--color-bg-alt);
    transition: transform var(--dur-reveal) var(--ease-editorial);
}

/* Hide bouton lightbox natif WP (injecte par wp-lightbox-container)
   puisqu'on a notre propre lightbox custom (cf. JS plus bas) */
.mam-block--gallery .wp-lightbox-container button,
.mam-block--gallery .wp-lightbox-container .lightbox-trigger,
.mam-block--gallery .wp-block-image button.lightbox-trigger {
    display: none !important;
}

.mam-block--gallery .wp-block-gallery .wp-block-image:hover img {
    transform: scale(1.04);
}

/* Lightbox custom retire au profit du lightbox natif WP 6.4+ */

/* 3+ images : grid 3 cols */
.mam-block--gallery .wp-block-gallery:has(> .wp-block-image:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
}

/* 1 image : full-bleed mais aspect-ratio plus large */
.mam-block--gallery .wp-block-gallery:has(> .wp-block-image:only-child) {
    grid-template-columns: 1fr;
}

.mam-block--gallery .wp-block-gallery:has(> .wp-block-image:only-child) img {
    aspect-ratio: 21 / 9;
}

@media (max-width: 768px) {
    .mam-block--gallery .wp-block-gallery,
    .mam-block--gallery .wp-block-gallery:has(> .wp-block-image:nth-child(3)) {
        grid-template-columns: 1fr;
    }
}

/* --- Block CONTEXT : prose centree style edito magazine ---------- */

.mam-block--context {
    background: var(--color-bg);
    padding-block: var(--sp-9);
    position: relative;
}

/* Marker visuel : filet horizontal fuchsia 56px centre en haut */
.mam-block--context::before {
    content: "";
    position: absolute;
    top: var(--sp-7);
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 2px;
    background: var(--color-accent);
}

.mam-block--context .mam-block__head {
    padding-top: var(--sp-5);
}

/* Reset drop cap dans context (centre, pas besoin de drop cap) */
.mam-block--context p:first-of-type::first-letter,
.mam-block--features p:first-of-type::first-letter,
.mam-block--prose p:first-of-type::first-letter,
.mam-feature-card p:first-of-type::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-weight: inherit !important;
    initial-letter: unset !important;
}

.mam-block__body-center {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.mam-block__body-center > p {
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    margin-block: var(--sp-4);
    text-align: center;
}

.mam-block__body-center > p:first-child {
    font-size: var(--fs-lg);
    font-style: italic;
    line-height: 1.5;
    color: var(--color-text);
}

/* --- Block FEATURES : grid cards par H3+P ------------------------ */
/* Refonte v3 (feedback user) : H2 a gauche + intro centree = melange
   chaotique. Maintenant tout est CENTRE pour coherence. */

.mam-block--features {
    background: var(--color-bg-alt);
    padding-block: var(--sp-9);
}

.mam-block--features .mam-block__head {
    text-align: center;
}

.mam-block--features .mam-block__title {
    margin-inline: auto;
    max-width: 22ch;
}

.mam-block--features .mam-block__intro {
    text-align: center;
    margin-inline: auto;
    margin-bottom: var(--sp-7);
    max-width: 65ch;
    font-size: var(--fs-lg);
    line-height: 1.5;
}

.mam-block--features .mam-block__intro p {
    margin: 0 0 var(--sp-3);
}

/* Pas de drop cap dans l'intro features */
.mam-block--features .mam-block__intro p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
}

.mam-block--features .mam-block__intro > p {
    margin: 0 0 var(--sp-3);
}

.mam-features-grid {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
    /* Defaut : 3 colonnes (3+ features) */
    grid-template-columns: repeat(3, 1fr);
}

/* 1 feature -> card centree max-width */
.mam-features-grid:has(> .mam-feature-card:only-child) {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
}

/* 2 features -> grid 2 cols */
.mam-features-grid:not(:has(> .mam-feature-card:nth-child(3))):has(> .mam-feature-card:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 920px;
    margin-inline: auto;
}

@media (max-width: 900px) {
    .mam-features-grid {
        grid-template-columns: 1fr;
        max-width: 640px;
        margin-inline: auto;
    }
}

.mam-feature-card {
    background: var(--c-paper);
    border-top: 2px solid var(--c-ink);
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    position: relative;
    transition: border-color var(--dur-hover) var(--ease-editorial),
                transform var(--dur-hover) var(--ease-editorial);
}

.mam-feature-card:hover {
    border-top-color: var(--color-accent);
    transform: translateY(-2px);
}

.mam-feature-card__num {
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.mam-feature-card__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-lg);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--color-text);
}

.mam-feature-card__body {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--color-text);
}

.mam-feature-card__body > p {
    margin: 0;
}

.mam-feature-card__body > p + p {
    margin-top: var(--sp-3);
}

/* --- Block STEPS v6 : carnet de route editorial sharp ------------- */
/* Refonte (feedback user) : design "bien mieux".
   Concept : "Etapes editoriales" - grands chiffres italique fuchsia en
   filigrane + hairline connectif horizontal qui traverse + typography
   sharp magazine. Pas de cercles ronds (incoherent avec id MAM sharp). */

.mam-block--steps {
    background: var(--color-bg);
    padding-block: var(--sp-7) var(--sp-8);
}

.mam-block--steps .mam-block__head {
    text-align: left;
    margin-bottom: var(--sp-7);
}

.mam-block--steps .mam-block__title {
    max-width: 32ch;
}

.mam-block--steps .mam-block__intro {
    text-align: left;
    margin-inline: 0;
    margin-bottom: var(--sp-7);
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
    max-width: 65ch;
}

/* Reset force du drop cap dans l'intro steps */
.mam-block--steps .mam-block__intro p:first-of-type::first-letter {
    float: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font-weight: inherit !important;
    initial-letter: unset !important;
}

/* --- Layout asymetrique bicolonne : head/intro a gauche, etapes a droite */

.mam-steps-split {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--sp-7);
    align-items: start;
}

.mam-steps-split__side {
    position: sticky;
    top: 120px;
    padding-right: var(--sp-4);
}

.mam-steps-split__side .mam-block__head {
    margin-bottom: var(--sp-5);
}

.mam-steps-split__side .mam-block__intro {
    margin: 0;
    max-width: none;
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

@media (max-width: 900px) {
    .mam-steps-split {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
    .mam-steps-split__side {
        position: static;
        padding-right: 0;
    }
}

/* Etapes empilees verticalement (au lieu d'horizontalement) */
.mam-steps-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    counter-reset: steps-counter;
}

/* Step vertical : ligne separatrice horizontale en haut */
.mam-step {
    position: relative;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
    border-top: 1px solid var(--color-hairline);
    overflow: hidden;
    transition: padding-left var(--dur-hover) var(--ease-editorial);
}

.mam-step:last-child {
    border-bottom: 1px solid var(--color-hairline);
}

.mam-step:hover {
    padding-left: var(--sp-3);
    background: var(--color-bg-alt);
}

/* Numero geant italique fuchsia a droite en filigrane */
.mam-step__num {
    position: absolute;
    top: 50%;
    right: var(--sp-4);
    transform: translateY(-50%);
    z-index: 0;
    font-family: var(--font-sans);
    font-size: clamp(3.5rem, 5vw, 4.5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 0.85;
    color: var(--color-accent);
    opacity: 0.18;
    letter-spacing: -0.05em;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    width: auto;
    height: auto;
    background: none;
    border: 0;
    border-radius: 0;
    display: block;
}

/* Eyebrow "ETAPE NN" via CSS counter */
.mam-step::before {
    content: "\00C9tape " counter(steps-counter, decimal-leading-zero);
    counter-increment: steps-counter;
    display: block;
    margin-bottom: var(--sp-2);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-kicker);
    text-transform: uppercase;
    color: var(--color-accent);
    position: relative;
    z-index: 1;
}

.mam-step__title {
    position: relative;
    z-index: 1;
    margin: 0 0 var(--sp-2);
    font-family: var(--font-sans);
    font-size: clamp(1.15rem, 0.5vw + 0.95rem, 1.4rem);
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.mam-step__desc {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 52ch;
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .mam-step__num {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
        right: var(--sp-3);
    }
}

/* --- Block PROSE : layout prose standard alternance -------------- */

.mam-block--prose.mam-block--default {
    background: var(--color-bg);
}

.mam-block--prose.mam-block--alt {
    background: var(--color-bg-alt);
}

.mam-block--prose .mam-block__body {
    max-width: 65ch;
}

/* --- Block VIDEO : embed YouTube/Vimeo --------------------------- */

.mam-block--video {
    background: var(--c-ink);
    padding-block: var(--sp-8);
}

.mam-block--video .mam-video-embed {
    aspect-ratio: 16 / 9;
}

/* --- Blocks paired (Context + Features cote a cote) --------------- */
/* Refonte v4 (feedback user) : quand 2 blocs maigres (context et features)
   se suivent, on les rend en bicolonne pour eviter l'enfilade verticale
   vide. Layout symetrique 1fr 1fr avec separateur hairline central. */

.mam-blocks-row {
    background: var(--color-bg);
    padding-block: var(--sp-7);
}

/* Reduit l'espace apres pair (avant le bloc suivant) */
.mam-blocks-row + .mam-block--steps {
    padding-top: var(--sp-5);
}

.mam-blocks-row {
    padding-bottom: var(--sp-6);
}

.mam-blocks-row__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-7);
    align-items: start;
    position: relative;
}

/* Separateur vertical hairline entre les 2 blocs */
.mam-blocks-row__grid::before {
    content: "";
    position: absolute;
    top: var(--sp-3);
    bottom: var(--sp-3);
    left: 50%;
    width: 1px;
    background: var(--color-hairline);
    transform: translateX(-50%);
}

.mam-block-paired {
    padding: 0;
    position: relative;
}

.mam-block-paired__head {
    margin-bottom: var(--sp-5);
}

.mam-block-paired__head .mam-block__num {
    margin-bottom: var(--sp-2);
}

.mam-block-paired__title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(1.35rem, 1vw + 0.9rem, 1.65rem);
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--color-text);
}

.mam-block-paired__body {
    font-size: var(--fs-md);
    line-height: var(--lh-loose);
}

.mam-block-paired__body > p {
    margin: 0 0 var(--sp-3);
}

.mam-block-paired__intro {
    margin-bottom: var(--sp-4);
}

.mam-block-paired__intro p {
    margin: 0 0 var(--sp-3);
}

/* Feature card en mode paired : reset le grid de features-grid */
.mam-block-paired__feature {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--color-hairline);
}

.mam-block-paired__feature h3 {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--color-text);
    font-style: normal;
}

.mam-block-paired__feature p {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
}

/* Reset drop cap dans block-paired */
.mam-block-paired p:first-of-type::first-letter {
    float: none !important;
    font-size: inherit !important;
    color: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    initial-letter: unset !important;
}

@media (max-width: 900px) {
    .mam-blocks-row__grid {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
    }
    .mam-blocks-row__grid::before {
        display: none;
    }
}

/* --- Block MAILLAGE : 3 autres programmes ------------------------ */

.mam-block--maillage {
    background: var(--color-bg-alt);
    padding-block: var(--sp-8) var(--sp-9);
}

.mam-block--maillage .mam-block__head--row h2.mam-block__title {
    margin-top: var(--sp-3);
}

/* Blog uniquement : plus d'air entre la fin de l'article et le bloc
   "A lire aussi" (scope .mam-post__similar : ne touche pas la fiche agence). */
.mam-block--maillage.mam-post__similar {
    margin-top: var(--sp-8);
}

/* --- Liens "Espace client" sticky toujours actif --------------- */

/* Block prose : reset le padding-top automatique des sections enchaines */
.mam-block + .mam-block {
    padding-top: var(--sp-7);
}

.mam-annonce-strip + .mam-block {
    padding-top: var(--sp-7);
}