/*
 * Article card - styles for template-parts/card-article.php.
 * Loaded site-wide (handle `wd-article-card`, see functions.php) with no
 * is_singular condition: templates that render the partial - category.php,
 * archive.php, search - never load the [rokiskis_articles] CSS heredoc, so
 * card CSS cannot live there. The heredoc keeps grid-level rules only.
 * Tokens come from inc/imp-styles.php :root.
 *
 * SURFACE: the card draws its own LIGHT panel (--imp-color-bg-alt, #F0EBE3)
 * under the image, so everything inside .article-card__body takes the normal
 * light-surface tokens - NOT the -inverse ones the dark page canvas needs.
 * The card was transparent-on-dark until 2.1.0 and used --imp-color-text-inverse
 * throughout; those two states must not be mixed.
 *
 * The gold CTA on cream (--imp-color-primary-dark on --imp-color-bg-alt) is
 * about 2.8:1. It is the one deliberate contrast compromise here, kept because
 * it is the card's only brand accent and it carries an arrow affordance next
 * to a 12.6:1 title. Everything else clears 4.5:1. Do not "match" the eyebrow
 * to it - the eyebrow is body copy and uses --imp-color-text-muted (4.8:1).
 */

/* No height:100% here - grid items already stretch to the row, and pinning the
   height turns the media box into a shrinkable flex item that collapses when a
   neighbouring card is taller. flex-shrink:0 below is the belt to that braces. */
.article-card { display: flex; flex-direction: column; text-align: left; text-decoration: none; color: inherit; background: var(--imp-color-bg-alt); transition: transform var(--imp-duration) var(--imp-ease), box-shadow var(--imp-duration) var(--imp-ease); }
.article-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); }
.article-card__media { width: 100%; aspect-ratio: 3 / 2; flex-shrink: 0; overflow: hidden; background: var(--imp-color-bg-dark); }
.article-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--imp-duration) var(--imp-ease); }
.article-card:hover .article-card__image { transform: scale(1.04); }
.article-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a17 0%, #2a2a25 100%); }
/* box-sizing is per-block in this theme, never global - without it the padding
   below is added to a stretched width and the panel overflows the card. */
.article-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px; box-sizing: border-box; }
.article-card__category { display: block; font-family: var(--imp-font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--imp-color-text-muted); margin-bottom: 10px; }
.article-card__title { display: block; font-family: var(--imp-font-display); font-size: 22px; font-weight: 400; line-height: 1.3; color: var(--imp-color-text); transition: color var(--imp-duration) var(--imp-ease); }
.article-card:hover .article-card__title { color: var(--imp-color-primary-dark); }
.article-card__excerpt { display: block; font-family: var(--imp-font-body); font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--imp-color-text-muted); margin-top: 10px; }
.article-card__distance { display: block; font-family: var(--imp-font-body); font-size: 12px; line-height: 1.5; color: var(--imp-color-text-muted); margin-top: 12px; }
/* margin-top:auto pins the CTA to the bottom so it lines up across a row of
   cards with different title and excerpt lengths. */
.article-card__cta { display: block; margin-top: auto; padding-top: 18px; font-family: var(--imp-font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--imp-color-primary-dark); }
@media (max-width: 768px) { .article-card__body { padding: 20px; } }