/* Atomik Menace: the pieces only this site has.

   Everything shared with J7 Creations is in base.css. These are the few
   additions: the red-violet-blue rail, the striped banner, and the product
   cards. Colours 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);
}

/* A banner section: the wallpaper darkened, with thin diagonal stripes. */
.hero-band {
    background:
        linear-gradient(var(--hero-wash), var(--hero-wash)),
        repeating-linear-gradient(135deg, var(--stripe-colour) 0 2px, transparent 2px 16px);
    padding: var(--spacing-xl) var(--spacing-md);
    text-align: center;
}

/* The big banner heading, in the logo's own red. */
.hero-band h1 {
    color: var(--brand-red);
    font-size: var(--text-4xl);
    letter-spacing: 0.02em;
    margin-bottom: var(--spacing-sm);
}

/* 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. */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--spacing-m);
}

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

.product-card:hover,
.product-card:focus-visible {
    transform: translateY(calc(-1 * var(--card-lift)));
    border-color: var(--card-hover-border);
    box-shadow: var(--card-hover-shadow);
}

.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: 500;
}