/* catalog.css — galeries : mosaïque des originals et rangées par format des
   prints. */

/* Grid & Cards ----------------------------------------------------------- */
/* Mosaïque originals : positionnement calculé en JS (layoutMasonry,
   js/pages/originals.js), pas des colonnes CSS (column-count). Les colonnes
   CSS natives ÉQUILIBRENT la hauteur totale entre colonnes, ce qui laisse un
   grand vide sous les colonnes courtes dès qu'un item est beaucoup plus haut
   que les autres — un masonry "empilé" (chaque colonne se remplit
   indépendamment, comme Pinterest) n'a pas ce défaut. max-width comme les
   autres pages (panier, contact...) : au-delà, les images afficheraient plus
   grand que leur résolution générée (1600px max, voir IMAGE_WIDTHS dans
   js/images.js) et deviendraient floues. */
.originals-grid {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

/* Une catégorie = une seule rangée horizontale, défilable (doigt, molette
   horizontale) et pilotée par des flèches (wireSliderNav, product-shared.js)
   quand toutes les cartes ne tiennent pas. Largeur de carte fixe, posée par
   catégorie via --card-w (carré comme référence : un paysage est plus large
   pour garder la même hauteur qu'un carré, voir PRINT_CATEGORIES/
   PRINT_REFERENCE dans js/pages/prints.js). Le ratio de chaque image est
   aussi posé en style inline par catégorie ; object-fit:cover fait le
   recadrage. */
/* Le reste (défilement, accroche par carte) vient de .scroll-row-x
   (components.css), posée sur le même élément dans le HTML généré. */
.prints-grid {
    gap: 16px;
}

.print-card {
    position: relative;
    flex: 0 0 var(--card-w);
    scroll-snap-align: start;
}

.original-card {
    position: relative;
    background: var(--bg);
}

.img-disabled {
    filter: grayscale(80%);
    opacity: 0.5;
}

.card-meta {
    padding-top: 10px;
}

/* Sections prints par format (carré / portrait / paysage / tall / wide), au
   lieu de la mosaïque des originals. Une section masquée entièrement si vide
   (voir renderPrints, js/pages/prints.js). Même max-width que .originals-grid/.product,
   portée par le wrapper plutôt que .prints-grid directement, pour ne pas la
   répéter sur chaque section. */
.prints-category {
    max-width: 1400px;
    margin: 0 auto 36px;
}

.prints-category:last-child {
    margin-bottom: 0;
}

.prints-category h2 {
    margin: 0 0 20px;
}

/* Cartes plus larges que la colonne fixe desktop : la carte suivante dépasse à
   droite (PRINT_SIZES_MOBILE, js/pages/prints.js, en dépend). */
@media (max-width: 600px) { /* sm */
    .print-card {
        flex-basis: 78%;
    }
}