/* Atomik Menace: the brand's own pieces, on both sites.

   The red-violet-blue rail and the product cards. The layout under them is
   in base.css. Colors and sizes all come from tokens.css; there are no
   settings in this file. */

/* The rail along the top edge of every page. It sits on the fixed menu bar,
   so it stays at the top while the page scrolls. */
.navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--rail-height);
    background: var(--rail-gradient);
}

/* The rail again, as a short underline beneath each section heading. */
.section-title::after {
    content: '';
    display: block;
    width: 72px;
    height: var(--rail-height);
    margin: var(--spacing-2xs) auto 0;
    border-radius: var(--rail-height);
    background: var(--rail-gradient);
}

/* Product cards: a grid of glass panels that lift and take the red edge when
   the pointer is on them. Give each card the class "panel" as well, so it
   gets the glass and, in the light theme, the dark text. A card's link is
   the product's name (src/pages.js), stretched over the whole card, so a
   click anywhere on it opens the product. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-m);
}

.product-card {
    position: relative;
    display: block;
    padding: var(--spacing-sm);
    border-radius: var(--radius);
    transition: transform var(--card-speed) ease, border-color var(--card-speed) ease,
                box-shadow var(--card-speed) ease;
}

.product-card .card-link {
    color: inherit;
    text-decoration: none;
    transition: none;
}

.product-card .card-link::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Hovered, the card's words take the hover color as well. */
.product-card:hover {
    transform: translateY(calc(-1 * var(--card-lift)));
    border-color: var(--card-hover-border);
    box-shadow: var(--card-hover-shadow);
    color: var(--color-gradient-mid);
}

/* Its link reached with the keyboard, the card lifts the same, and the ring
   goes round the whole card rather than the name. (A browser without :has()
   rings the name.) */
.product-card:has(.card-link:focus-visible) {
    transform: translateY(calc(-1 * var(--card-lift)));
    border-color: var(--card-hover-border);
    box-shadow: var(--card-hover-shadow);
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.product-card:has(.card-link:focus-visible) .card-link:focus-visible {
    outline: none;
}

.product-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-s);
}

.product-card .blurb {
    color: var(--color-text-gray);
    font-weight: 400;
}