/* ==============================
 * Block — Réalisations par catégories
 * Scope racine : .block-real-cats
 *
 * Layout :
 *   - Mobile (<1024px) : .__mobile = 1 ligne scrollable (scroll natif)
 *   - Desktop (≥1024px) :
 *     · Row 1 (grid 2 cols) : viewport-top + bloc texte → hauteur auto-synchronisée
 *     · Row 2 : viewport-bottom pleine largeur écran (bord à bord)
 *     · Pas de scroll, slots fixes ; swap d'images au prev/next (boucle infinie)
 * ============================== */

.block-real-cats {
    --rcat-img-w: 560px;
    --rcat-img-h: 431px;
    --rcat-gap: 16px;
    --rcat-edge: max(var(--gutter), calc((100vw - var(--container-max)) / 2));
    --rcat-bleed: 280px; /* moitié image, pour la coupe esthétique */
    --rcat-mobile-item-w: clamp(240px, 70vw, 360px); /* largeur item en mobile */
    padding: var(--section-py) 0;
    background: var(--color-bg);
}

/* ----- Header (titre + intro centrés) ----- */
.block-real-cats__header {
    text-align: center;
    margin-bottom: 83px;
}
@media (max-width: 1023px) {
    .block-real-cats__header { text-align: left; }
}
.block-real-cats__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: var(--fs-h2);
    color: var(--color-primary);
    margin: 0 0 16px;
    line-height: 1.15;
}
.block-real-cats__intro {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
    line-height: 1.6;
    max-width: var(--container-narrow);
    margin: 0 auto;
}
.block-real-cats__intro > * { margin: 0; }
.block-real-cats__intro > * + * { margin-top: 12px; }

/* ----- Liste des catégories ----- */
.block-real-cats__list {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 6vw, 96px);
}

/* ============================== ITEM (commun mobile/desktop) ============================== */

.block-real-cats__item {
    margin: 0;
    flex-shrink: 0;
    width: var(--rcat-mobile-item-w);
    aspect-ratio: 560 / 431;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-alt);
}
.block-real-cats__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ----- Bloc texte (commun) ----- */
.block-real-cats__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 var(--gutter);
    box-sizing: border-box;
}
.block-real-cats__cat-title {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: clamp(22px, 2.4vw, 28px);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}
.block-real-cats__cat-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-text);
    line-height: 1.6;
}
.block-real-cats__cat-desc > * { margin: 0; }
.block-real-cats__cat-desc > * + * { margin-top: 12px; }

/* ----- Boutons prev/next ----- */
.block-real-cats__nav {
    display: flex;
    gap: 0;
    align-items: center;
    margin-top: 63px;
}
@media (max-width: 1023px) {
    .block-real-cats__nav { margin-top: 30px; }
}
/* Articles pairs (text-left = 2e, 4e, …) : flèches ancrées à droite */
.block-real-cats__cat--text-left .block-real-cats__nav {
    justify-content: flex-end;
}
.block-real-cats__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text);
    transition: color var(--dur) var(--ease);
}
.block-real-cats__nav-btn:hover,
.block-real-cats__nav-btn:focus-visible {
    color: var(--color-primary);
}
.block-real-cats__nav-btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
    color: var(--color-muted);
}
.block-real-cats__nav-arrow {
    width: 18px;
    height: auto;
}
.block-real-cats__nav-btn--next .block-real-cats__nav-arrow {
    transform: scaleX(-1);
}

/* ----- Empty (édition Gutenberg) ----- */
.block-real-cats__empty {
    padding: 24px;
    background: var(--color-bg-alt);
    color: var(--color-muted);
    border-radius: var(--radius-md);
    text-align: center;
    border: 2px dashed var(--color-border);
}

/* ============================== MOBILE (par défaut) ============================== */

.block-real-cats__cat {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
}

/* Desktop hidden, mobile visible */
.block-real-cats__desktop { display: none; }
.block-real-cats__text:not(.block-real-cats__text--mobile) { display: none; }

/* Slider mobile : 1 ligne scroll horizontal, item centré au viewport.
   padding-inline = (50vw - item/2) → 1er item centré au load,
   bouts d'items adjacents visibles à gauche/droite, mangés par les bords de l'écran. */
.block-real-cats__mobile {
    display: block;
}
.block-real-cats__mobile-row {
    display: flex;
    flex-direction: row;
    gap: var(--rcat-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-inline: calc(50vw - var(--rcat-mobile-item-w) / 2);
}
.block-real-cats__mobile-row::-webkit-scrollbar { display: none; }
.block-real-cats__mobile-row > .block-real-cats__item {
    scroll-snap-align: center;
}

/* ============================== DESKTOP (≥ 1024px) ============================== */
@media (min-width: 1024px) {

    /* Toggle mobile / desktop */
    .block-real-cats__mobile,
    .block-real-cats__text--mobile { display: none; }
    .block-real-cats__desktop {
        display: flex;
        flex-direction: column;
        gap: 60px;
    }
    .block-real-cats__text:not(.block-real-cats__text--mobile) {
        display: flex;
    }

    .block-real-cats__cat {
        gap: 0;
    }

    /* Items en taille fixe en desktop : largeur 560px, hauteur héritée de la row (auto) */
    .block-real-cats__desktop .block-real-cats__item {
        width: var(--rcat-img-w);
        height: 100%;
        aspect-ratio: auto;
        min-height: var(--rcat-img-h);
    }

    /* Viewport sans scroll, slots fixes en flex */
    .block-real-cats__viewport {
        overflow: hidden;
    }
    .block-real-cats__row {
        display: flex;
        flex-direction: row;
        gap: 60px;
        height: 100%;
    }

    /* ===== ROW 1 : grid 2 cols (viewport-top + texte) ===== */
    .block-real-cats__row-1 {
        display: grid;
        column-gap: 60px;
        align-items: stretch;
        min-height: var(--rcat-img-h);
    }
    .block-real-cats__cat--text-right .block-real-cats__row-1 {
        grid-template-columns: 1fr var(--rcat-img-w);
        padding-right: var(--rcat-edge);
    }
    .block-real-cats__cat--text-right .block-real-cats__row-1 > .block-real-cats__viewport--top {
        grid-column: 1;
        grid-row: 1;
    }
    .block-real-cats__cat--text-right .block-real-cats__row-1 > .block-real-cats__text {
        grid-column: 2;
        grid-row: 1;
    }

    .block-real-cats__cat--text-left .block-real-cats__row-1 {
        grid-template-columns: var(--rcat-img-w) 1fr;
        padding-left: var(--rcat-edge);
    }
    .block-real-cats__cat--text-left .block-real-cats__row-1 > .block-real-cats__text {
        grid-column: 1;
        grid-row: 1;
    }
    .block-real-cats__cat--text-left .block-real-cats__row-1 > .block-real-cats__viewport--top {
        grid-column: 2;
        grid-row: 1;
    }

    /* viewport-top : occupe toute sa cell ; min-width:0 = clip strict des débordements en grid */
    .block-real-cats__viewport--top {
        width: 100%;
        height: 100%;
        min-width: 0;
    }

    /* row-top : items ancrés du côté du panneau, débordent vers le bord écran libre.
       Quand l'écran rétrécit, ce sont les items côté écran qui se font manger en 1er. */
    .block-real-cats__cat--text-right .block-real-cats__row--top {
        justify-content: flex-end;
    }
    .block-real-cats__cat--text-left .block-real-cats__row--top {
        justify-content: flex-start;
    }

    /* Bloc texte desktop : fond opaque + padding, masque tout débordement de row-top derrière */
    .block-real-cats__desktop .block-real-cats__text {
        padding: 24px 0;
        align-self: stretch;
        background: var(--color-bg);
        position: relative;
        z-index: 2;
    }

    /* ===== ROW 2 : viewport-bottom — s'arrête au bord du panneau (= bord container) ===== */
    .block-real-cats__viewport--bottom {
        width: calc(100vw - var(--rcat-edge));
        height: var(--rcat-img-h);
    }
    .block-real-cats__row--bottom {
        height: 100%;
    }
    /* text-right : viewport-bottom de 0 → bord container droit, items ancrés à droite */
    .block-real-cats__cat--text-right .block-real-cats__row--bottom {
        justify-content: flex-end;
    }
    /* text-left : viewport-bottom de bord container gauche → 100vw, items ancrés à gauche */
    .block-real-cats__cat--text-left .block-real-cats__viewport--bottom {
        margin-left: var(--rcat-edge);
    }
    .block-real-cats__cat--text-left .block-real-cats__row--bottom {
        justify-content: flex-start;
    }
}