/* TrueLoveStarlight homepage layout extras.
   Persistent source — copied into dist/ by add-homepage-layout.sh on every
   build, since dist/ itself is wiped by each raw `faircamp` build. Relies
   on Faircamp's own theme CSS variables, defined in the generated
   theme-*.css, so it inherits the live site's palette.

   All four nav cards (the audio release + three galleries) render
   identically — same box, same size. No separate grouping. */

.homepage-nav-grid {
    display: grid;
    gap: 1.6rem;
    grid-template-columns: 1fr;
    /* .page_grid > div switches to 2-3 columns at wider viewports
       (site.css), sized for the old flat list of release cards. This is
       now the only child, so it must span the full row or it gets
       squeezed into one column-third. */
    grid-column: 1 / -1;
}

@media (min-width: 40rem) {
    .homepage-nav-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 60rem) {
    .homepage-nav-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Override Faircamp's default fixed-width, square .release card
   (site.css: ".release { width: 14rem }" and
   ".release > :first-child { aspect-ratio: 1 }") so every card — audio
   release included — fills its grid cell at the same landscape ratio. */
.homepage-nav-grid .release {
    width: 100%;
}

.homepage-nav-grid .release > :first-child {
    aspect-ratio: 3 / 2;
    overflow: hidden;
}

.homepage-nav-grid .release img {
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.homepage-nav-grid .release:hover img {
    transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
    .homepage-nav-grid .release img { transition: none; }
}