/*
 * Onze topcategorieën: a row of cards to swipe through on a phone, three
 * columns from 640px, and a bento above 1024px where the first card is twice
 * the height of the rest.
 *
 * On a phone it was a two-column grid for a while, to show all six at once;
 * three rows of tiles made it the tallest section above the catalogue, so it is
 * a browsable strip again - the same mechanics as the Partijaanbiedingen row
 * above it (.promo-row), with larger cards so the two rows read as different.
 *
 * The category list comes from an unbounded admin-ordered query. The bento is
 * written so that a seventh category flows into a new row and a fifth leaves no
 * hole, rather than assuming today's six.
 */

/* Native scrolling, no script. The row runs to the screen edges and starts at
   the content edge (.shop-bleed, in the markup); snapping lands a card on that
   edge without stopping a fling, and the next card's visible edge is the cue
   to swipe, so the scrollbar is hidden. The block padding gives the cards'
   focus ring room inside the scroller, which clips on both axes. */
.category-grid {
    display: flex;
    gap: var(--shop-gap-tight);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-block: 4px;
    margin-block: -4px;
}

.category-grid::-webkit-scrollbar {
    display: none;
}

/* Card widths belong to the row. About three quarters of the width, so a good
   slice of the next card shows at every phone width (roughly 75-110px); capped
   so a large phone or a phone on its side does not get a card taller than a
   third of its screen. */
.category-grid > .category-card {
    flex: 0 0 min(72%, 280px);
    scroll-snap-align: start;
}

.category-card {
    position: relative;
    display: grid;
    /* One row the height of the card. An auto row stops the photo's height: 100% short
       of the card's bottom once the <img> sits in a <picture> (ResponsiveImage; base.css
       gives it display: contents), leaving a strip below the photo. */
    grid-template-rows: minmax(0, 1fr);
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--shop-radius-md);
    text-decoration: none;
    transition:
        transform var(--shop-duration) var(--shop-ease),
        box-shadow var(--shop-duration) var(--shop-ease);
}

/* The lift needs room the phone's scroller does not have - it clips on both
   axes - so it starts with the grid, at 640px. */

.category-card__image,
.category-card__overlay {
    grid-area: 1 / 1;
}

.category-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-card__overlay {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--shop-space-3);
    padding: var(--shop-space-3);
    /* Keeps the label legible over any photograph. Measured against the real
       images: the previous ramp left the name on 3.4:1 over the lighter ones,
       because it was spread over the whole card and had thinned out by the time
       it reached the text. It is now dense across the band the text occupies. */
    background: linear-gradient(to top, rgb(0 0 0 / 85%) 0%, rgb(0 0 0 / 70%) 28%, rgb(0 0 0 / 25%) 62%, transparent 100%);
    color: #fff;
}

.category-card__name {
    font-size: var(--shop-text-sm);
    font-weight: var(--shop-weight-bold);
    line-height: 1.1;
    letter-spacing: var(--shop-tracking-caps);
    text-transform: uppercase;
}

.category-card__tagline {
    margin-block-start: 2px;
    font-size: var(--shop-text-xs);
    line-height: 1.3;
}

/* Not on a phone: a circle on every card of the strip is noise, and the whole
   card is the link anyway. */
.category-card__arrow {
    flex: none;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 50%;
}

.category-card__arrow svg {
    width: 10px;
    height: 10px;
}

@media (min-width: 640px) {
    .category-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        overflow-x: visible;
        padding-block: 0;
        margin-block: 0;
    }


    .category-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
    }

    .category-card {
        aspect-ratio: 16 / 9;
    }

    .category-card__overlay {
        padding: var(--shop-space-4);
    }

    .category-card__arrow {
        display: flex;
    }

    .category-card__name {
        font-size: var(--shop-text-base);
    }
}

@media (min-width: 1024px) {
    /* Bento: a tall first card beside two rows of three. Rows are sized rather
       than the container, so an extra category simply adds a row instead of
       being squeezed into a fixed height. */
    .category-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        /* A minimum, not a height: the name and tagline are editable. */
        grid-auto-rows: minmax(160px, auto);
        gap: var(--shop-space-4);
    }

    .category-card {
        aspect-ratio: auto;
    }

    /* One tall card, then one wide one, which fills both rows of a five-column
       grid exactly when there are six categories - today's count and the one the
       design was drawn for. The rule is written so it degrades: with fewer, the
       remaining cards still tile; with more, they flow into further rows. */
    .category-card:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }

    .category-card:nth-child(2) {
        grid-column: span 2;
    }

    .category-card__name {
        font-size: var(--shop-text-lg);
    }
}