/* @layer-wrap:site.elements */
@layer site.elements {
/* Version: 18-10-2026-elements */
/* Éléments de contenu — images (venu de design/matrices/base.css, lot C1 de plan-elements-contenu.md ;
   ordre de chargement : portfolios_content_element_sheets()). */

/* ==========================================================================
   8. Images — [data-images-layout] sur #gallery et #production-show-photos-grid
   Balisage : > a.gallery-item (fond = image) > img (masquée en grille)
   ========================================================================== */

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout]:not([data-images-layout="grid"]) > a::after {
    content: none;
}

/* Contrat d'orientation : une tuile d'image est carrée (gallery.css). Aucune mise en page ci-dessous ne change ce
   format : elle varie l'emprise (colonnes / rangées) ou le nombre par ligne, jamais le rapport largeur / hauteur. */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout] {
    --pf-card-ratio: 1 / 1;
}

/* gallery.css (≤ 620 px) centre les éléments : les tuiles doivent remplir leur ligne. */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout]:not([data-images-layout="grid"]) {
    align-items: stretch;
}

/* Mosaïque : tailles variées */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="mosaic"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: calc(6px * var(--pf-density-gap, 1));
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="mosaic"] > a {
    height: auto;
    padding: 0;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="mosaic"] > a:nth-child(6n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Pellicule : défilement horizontal aimanté */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="carousel"] {
    display: flex;
    gap: calc(10px * var(--pf-density-gap, 1));
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
    scrollbar-width: thin;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="carousel"] > a {
    flex: 0 0 clamp(10rem, 26vw, 18rem);
    height: auto;
    aspect-ratio: var(--pf-card-ratio);
    padding: 0;
    scroll-snap-align: start;
}

/* Polaroïd : cadre couleur des contenus (+ épaisseur de l'utilisateur), légère rotation */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] {
    display: grid;
    gap: calc(28px * var(--pf-density-gap, 1));
    padding: calc(12px * var(--pf-density-pad, 1));
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a {
    background-clip: padding-box;
    transition: rotate 0.2s ease;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a:nth-child(3n + 1) {
    rotate: -2deg;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a:nth-child(3n + 2) {
    rotate: 1.5deg;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] > a:hover {
    rotate: 0deg;
}

/* Bento : tuiles arrondies, une grande */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-auto-flow: dense;
    gap: calc(12px * var(--pf-density-gap, 1));
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a {
    height: auto;
    padding: 0;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="bento"] > a:nth-child(5n + 1) {
    grid-column: span 2;
    grid-row: span 2;
}

/* Index numéroté : planche contact, vignettes serrées (6 à 7 par ligne sur ordinateur), numéro sur chacune */
#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: calc(4px * var(--pf-density-gap, 1));
    counter-reset: pf-image;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] > a {
    position: relative;
    counter-increment: pf-image;
}

#portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] > a::before {
    content: counter(pf-image, decimal-leading-zero);
    position: absolute;
    top: 0.3rem;
    left: 0.3rem;
    padding: calc(0.05rem * var(--pf-density-pad, 1)) calc(0.35rem * var(--pf-density-pad, 1));
    border-radius: var(--pf-radius-inner);
    background: var(--pf-ink);
    color: var(--pf-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
}

@media (max-width: 1100px) {

    #portfolio_page :is(#gallery, #production-show-photos-grid):is([data-images-layout="mosaic"], [data-images-layout="bento"]) {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: auto;
    }

    /* modules/photos/gallery.css passe la grille en carrousel flex : les gabarits en grille la gardent. */
    #portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="polaroid"] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="carousel"] > a {
        flex-basis: 78vw;
    }

    #portfolio_page :is(#gallery, #production-show-photos-grid)[data-images-layout="index"] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
}