/* Grid card — auto-loaded for the card snippet (site/snippets/landing/card.php).
   The issue cover, only the cover (Figma grid mode 290:3944). The cover floats
   inside a padded cell; the active issue's cell fills with its accent colour. */

.card {
    display: block;
    padding: var(--space-s);
    /* Positioning context for the .visually-hidden title span. Without it that
     absolutely-positioned span's containing block escapes the column's scroll
     box (the card, column and grid are all static), so it plants a box at the
     bottom of the tall column content in document coordinates and inflates the
     page scroll height — a body scrollbar appears once a column overflows. */
    position: relative;
}
/* Active (featured) or hovered card → its cell fills with the accent colour: the
   issue's own colour for an issue cover, the owning issue's colour for an article
   card (exploded-issue grid mode, passed in via --dot). */
.card.is-active,
.card:hover {
    background: var(--dot, var(--color-accent));
}

.card__thumb {
    display: block;
    aspect-ratio: 2 / 3; /* book-cover proportion (Figma cover 112 × 167.6) */
    background: #f2f2f2;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1);
}

/* Hover */
.card__thumb:hover img {
    filter: grayscale(0);
}

/* Clicked (active state) */
.card__thumb.is-active img {
    filter: grayscale(0);
}

.card__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    padding: var(--space-xs);
    text-align: center;
    color: var(--color-muted);
}