/* card.css -- Card grid, cards, badges
   Part of the site stylesheet, split out of the former single
   site.css. Load order is significant and is fixed in
   src/view/layout.php -- theme first (tokens), then base, then
   layout, then components. Rules were moved verbatim, in their
   original order, so the cascade is unchanged. */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-4);
    margin: var(--spacing-6) 0;
    padding: 0;
    list-style: none;
}

.card-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.card-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.card-grid-3 .card,
.card-grid-2 .card {
    /* Acts as a *minimum* height, not a fixed one -- a card whose
       content needs more room (e.g. a longer list) still grows past
       16:9 instead of clipping, since nothing here sets an explicit
       conflicting height. */
    aspect-ratio: 16 / 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.section .card {
    /* The card itself carries the gray, not the whole .section --
       otherwise the section's own background made everything in it
       (heading, text, card) uniformly gray instead of the card
       reading as a distinct box. */
    background: var(--bg-neutral-section);
}

@media (max-width: 640px) {
    .card-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.card {
    /* Was implicitly transparent, relying on always sitting over a
       white/near-white ancestor background -- broke once the
       corner-shape fallback (assets/js/corner-shape.js) started
       inserting an SVG shadow directly behind each card: with no
       opaque fill of its own, the card let that shadow show straight
       through instead of covering it. */
    background: var(--bg-raised);
    border: 1px solid var(--border-neutral-default);
    border-radius: calc(var(--rounded-lg) * var(--brm));
    corner-shape: var(--corner-shape);
    padding: var(--spacing-5);
    /* Grid items default to min-width:auto (their content's intrinsic
       min size), not 0 -- a card with enough text can force its 1fr
       track wider than the grid container, overflowing the whole
       page horizontally. This lets it actually shrink to the track. */
    min-width: 0;
}

.card h4 {
    margin: 0 0 var(--spacing-2);
    font-size: var(--text-size-large);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-accent);
}

.card h4 a {
    /* Otherwise the global a{} link color (blue) wins over the
       inherited heading color -- a rule directly matching the
       element always beats inheritance, regardless of specificity. */
    color: inherit;
    text-decoration: none;
}

.card-link,
.card-link:hover {
    display: block;
    color: inherit;
    text-decoration: none;
}

/* .card's own padding puts empty space *outside* the .card-link
   anchor sitting inside it -- clicks in that ring silently miss the
   link even though the ring looks like part of the card. Move the
   padding onto the anchor itself instead, and stretch it to fill the
   card's full (aspect-ratio'd) height, so the whole visual box is one
   click target. Only applies to cards that actually wrap a link --
   plain/muted cards keep their padding directly. */
.card:has(> .card-link) {
    padding: 0;
}

.card > .card-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-5);
    box-sizing: border-box;
    /* Not our own CSS -- Safari's default hover/focus ring on the
       anchor, rendering as if .card's own border darkened. Suppressed
       here; :focus-visible below keeps a real indicator for keyboard
       navigation instead of just removing it outright. */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.card > .card-link:focus-visible {
    outline: 2px solid var(--fg-neutral-accent);
    outline-offset: -2px;
}

.card-link:hover h4 {
    color: var(--fg-neutral-accent-hover, var(--fg-neutral-accent));
}

.badge {
    display: inline-block;
    font-size: var(--text-size-small);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-muted);
    border: 1px solid var(--border-neutral-default);
    border-radius: var(--rounded-full);
    padding: 0 var(--spacing-2);
    vertical-align: middle;
}

.card-product h4 {
    position: relative;
    font-size: var(--heading-size-h2);
}

.card-product h4 .badge {
    /* Raised, top-right of the title -- like a version-number pill
       riding the corner of the word, not sitting inline on its
       baseline. */
    position: relative;
    top: -0.15em;
    margin-left: 4px;
    vertical-align: top;
}

.card.card-product p {
    /* Higher specificity than .card p (same 0-1-1 otherwise, and
       .card p comes later in source) so this actually wins. */
    font-size: var(--text-size-lead);
}

.card-product h4,
.card-product p {
    text-wrap: balance;
}

/* Base CTA treatment for any card-link, e.g. foundry.php's denser
   "Current engine" card (a feature list, not just a teaser blurb, so
   it doesn't want card-product's larger type). */
.card-cta {
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-accent);
    margin-top: var(--spacing-4);
}

.card.card-product p.card-cta {
    /* Higher specificity again to override the rule directly above --
       the CTA line reads as a link, not another paragraph of body
       copy, so it stays at label size regardless. */
    font-size: var(--heading-size-h4);
    font-weight: var(--weight-semibold);
    color: var(--fg-neutral-accent);
    margin-top: var(--spacing-4);
}

.card-cta .arrow {
    display: inline-block;
    transition: transform 0.15s ease;
}

.card-link:hover .card-cta .arrow {
    transform: translateX(4px);
}

.card p {
    margin: 0;
    color: var(--fg-neutral-body);
    font-size: var(--text-size-label);
}

.card.muted {
    background: var(--bg-neutral-section);
    border-color: transparent;
}

.card.muted h4, .card.muted p {
    color: var(--fg-neutral-muted);
}

/* dashed divider */