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

/* ==========================================================================
   17. Recommandations : [data-recommendations-layout] (posé sur la section)
   « grid » = grille historique (recommendations.css), non touchée ici.
   ========================================================================== */

/* Grand format : une citation par ligne, en grand, centrée. */
#portfolio_page [data-recommendations-layout="feature"] .recommendations-grid {
    --cols: 1;
    --cols-md: 1;
    --cols-sm: 1;
}

#portfolio_page [data-recommendations-layout="feature"] .recommendation-card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#portfolio_page [data-recommendations-layout="feature"] .recommendation-quote {
    font-size: 1.4em;
    line-height: 1.45;
    max-width: var(--layout-width-read, 65ch);
    margin-inline: auto;
}

/* Polaroïd : photo en haut, cartes légèrement inclinées tour à tour. */
#portfolio_page [data-recommendations-layout="polaroid"] .recommendations-grid {
    --cols: 3;
    --cols-md: 2;
    --cols-sm: 1;
}

#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card-header {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

/* Le tirage : la photo de l'auteur occupe toute la largeur du cadre (une pastille de 80 px laissait une
   carte vide, plus proche du verre que d'un polaroïd) ; la citation fait la légende dans le bas large. */
#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card-header .about-artist-img.recommendation-author-photo {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
}

#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card:nth-child(odd) {
    transform: rotate(-1.2deg);
}

#portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card:nth-child(even) {
    transform: rotate(1deg);
}

/* Défilement : une rangée qui glisse, une citation calée à la fois. */
#portfolio_page [data-recommendations-layout="carousel"] .recommendations-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(85%, 34rem);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: calc(0.75rem * var(--pf-density-pad, 1));
}

#portfolio_page [data-recommendations-layout="carousel"] .recommendation-card {
    scroll-snap-align: start;
}

/* Bento : une citation sur trois en double largeur. */
#portfolio_page [data-recommendations-layout="bento"] .recommendations-grid {
    --cols: 3;
    --cols-md: 2;
    --cols-sm: 1;
}

#portfolio_page [data-recommendations-layout="bento"] .recommendation-card:nth-child(3n + 1) {
    grid-column: span 2;
}

/* Texte seul : citation en italique, filet d'accent à gauche. */
#portfolio_page [data-recommendations-layout="minimal"] .recommendation-card-body {
    padding-left: calc(1rem * var(--pf-density-pad, 1));
    border-left: max(2px, var(--pf-border-width, 2px)) solid var(--pf-rule-color);
}

#portfolio_page [data-recommendations-layout="minimal"] .recommendation-quote {
    font-style: italic;
}

@media (max-width: 1100px) {
    #portfolio_page [data-recommendations-layout="bento"] .recommendation-card:nth-child(3n + 1) {
        grid-column: auto;
    }

    #portfolio_page [data-recommendations-layout="polaroid"] .recommendation-card:is(:nth-child(odd), :nth-child(even)) {
        transform: none;
    }
}
}