/**
 * Affiliate shop card: native product links from a partner (Fanatics), placed
 * by {% affiliate_shop %} in core/templates/core/ads/_affiliate_shop.html and
 * chosen by core/ads/affiliate.py. Shared by every site.
 *
 * Fixed image boxes (square, aspect-ratio 1) so the card never shifts layout
 * when images arrive.
 *
 * Token contract. This file writes no raw values: a site that links it must
 * define every token below (ImperialismMap generates them; VenueStats
 * hand-writes the slice in sites/venuestats/static/css/tokens.css).
 *   surface  border  text-primary  text-secondary  text-muted
 *   space-2 4 5  type-xs sm base  radius-card  leading-heading  leading-body
 *   font-display
 */

.affiliate-shop {
    margin-block: var(--space-5);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
}

.affiliate-shop__head {
    margin-bottom: var(--space-4);
}

.affiliate-shop__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--type-base);
    line-height: var(--leading-heading);
    color: var(--text-primary);
}

.affiliate-shop__disclosure {
    margin: var(--space-2) 0 0;
    font-size: var(--type-xs);
    line-height: var(--leading-body);
    color: var(--text-muted);
}

.affiliate-shop__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .affiliate-shop__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.affiliate-shop__link {
    display: block;
    color: var(--text-secondary);
    text-decoration: none;
}

.affiliate-shop__link:hover .affiliate-shop__name,
.affiliate-shop__link:focus-visible .affiliate-shop__name {
    color: var(--text-primary);
    text-decoration: underline;
}

.affiliate-shop__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    background: var(--surface);
}

.affiliate-shop__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin-top: var(--space-2);
    font-size: var(--type-sm);
    line-height: var(--leading-heading);
}