SkinbaseNova/resources/js/components/gallery/MasonryGallery.css

/*
 * MasonryGallery – scoped CSS
 *
 * Grid column definitions (activated when React adds .is-enhanced to the root).
 * Mirrors the blade @push('styles') blocks so the same rules apply whether the
 * page is rendered server-side or by the React component.
 */

/* ── Masonry grid ─────────────────────────────────────────────────────────── */
[data-nova-gallery].is-enhanced [data-gallery-grid] {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    grid-auto-rows: 8px;
    gap: 1rem;
}

@media (min-width: 768px) {
    [data-nova-gallery].is-enhanced [data-gallery-grid] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    [data-nova-gallery] [data-gallery-grid]              { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    [data-nova-gallery].is-enhanced [data-gallery-grid]  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    [data-nova-gallery] [data-gallery-grid].force-5      { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

@media (min-width: 1600px) {
    [data-nova-gallery] [data-gallery-grid]              { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    [data-nova-gallery].is-enhanced [data-gallery-grid]  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    [data-nova-gallery] [data-gallery-grid].force-5      { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
}

@media (min-width: 2600px) {
    [data-nova-gallery] [data-gallery-grid]              { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    [data-nova-gallery].is-enhanced [data-gallery-grid]  { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    [data-nova-gallery] [data-gallery-grid].force-5      { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
}

[data-nova-gallery].is-enhanced [data-gallery-grid] > .nova-card { margin: 0 !important; }

/* ── Fallback aspect-ratio for cards without stored dimensions ───────────── */
/*
 * When ArtworkCard has no width/height data it renders the img as h-auto,
 * meaning the container height is 0 until the image loads. Setting a
 * default aspect-ratio here reserves approximate space immediately and
 * prevents applyMasonry from calculating span=1 → then jumping on load.
 * Cards with an inline aspect-ratio style (from real dimensions) override this.
 */
[data-nova-gallery] [data-gallery-grid] .nova-card-media {
    aspect-ratio: 3 / 2;
    width: 100%; /* prevent aspect-ratio + max-height from shrinking the column width */
}

/* Override: when an inline aspect-ratio is set by ArtworkCard those values    */
/* take precedence naturally (inline style > class). No extra selector needed. */

/* ── Card max-height cap ──────────────────────────────────────────────────── */
/*
 * Limits any single card to the height of 2 stacked 16:9 images in its column.
 * Formula: 2 × (col_width × 9/16)  =  col_width × 9/8
 *
 *  5-col (lg+):  col_width = (100vw - 80px_padding - 4×24px_gaps) / 5
 *                           = (100vw - 176px) / 5
 *                max-height = (100vw - 176px) / 5 × 9/8
 *                           = (100vw - 176px) × 0.225
 *
 *  2-col (md):   col_width = (100vw - 80px - 1×24px) / 2
 *                           = (100vw - 104px) / 2
 *                max-height = (100vw - 104px) / 2 × 9/8
 *                           = (100vw - 104px) × 0.5625
 *
 *  1-col mobile: uncapped – portrait images are fine filling the full width.
 */

/* Global selector covers both the React-rendered gallery and the blade fallback */
[data-nova-gallery] [data-gallery-grid] .nova-card-media {
    overflow: hidden; /* ensure img is clipped at max-height */
}

@media (min-width: 1024px) {
    [data-nova-gallery] [data-gallery-grid] .nova-card-media {
        /* 5-column layout: 2 × (col_width × 9/16) = col_width × 9/8 */
        max-height: calc((100vw - 176px) * 9 / 40);
    }
    /* Wide (2-col spanning) cards get double the column width */
    [data-nova-gallery] [data-gallery-grid] .nova-card--wide .nova-card-media {
        max-height: calc((100vw - 176px) * 9 / 20);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    [data-nova-gallery] [data-gallery-grid] .nova-card-media {
        /* 2-column layout */
        max-height: calc((100vw - 104px) * 9 / 16);
    }
    [data-nova-gallery] [data-gallery-grid] .nova-card--wide .nova-card-media {
        /* 2-col span fills full width on md breakpoint */
        max-height: calc((100vw - 104px) * 9 / 8);
    }
}

/* Image is positioned absolutely inside the container so it always fills
   the capped box (max-height), cropping top/bottom via object-fit: cover. */
[data-nova-gallery] [data-gallery-grid] .nova-card-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Skeleton ─────────────────────────────────────────────────────────────── */
.nova-skeleton-card {
    border-radius: 1rem;
    min-height: 180px;
    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.06)  8%,
        rgba(255, 255, 255, 0.12) 18%,
        rgba(255, 255, 255, 0.06) 33%
    );
    background-size: 200% 100%;
    animation: novaShimmer 1.2s linear infinite;
}

@keyframes novaShimmer {
    to { background-position-x: -200%; }
}

/* ── Card enter animation (appended by infinite scroll) ───────────────────── */
.nova-card-enter { opacity: 0; transform: translateY(8px); }
.nova-card-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}