/* Card — the shared bordered/elevated content container (docs/css-refactoring.md §7/§8).
   Consolidates the ~17 per-page card idioms (cv-card, form-card, sa-hero, the eForm section/
   next-steps/contact/success cards, and the Group-B frames: ea-card, class-hero/section,
   user-card/digest-item) onto one tokenised frame + a small set of modifiers. Each family keeps
   its own rich sub-element classes (`.ea-card__title`, `.cv-dl`, …) — only the OUTER frame adopts
   `.w5-card`. Colour comes from the :root token ramp (app.css); never hardcode hex here.

   Base:        .w5-card  (+ __header / __body / __footer)
   Modifiers:   --accent (top border), --accent-left (left border), --flat (no shadow),
                --hover (lift on hover), --hero (gradient frame), --warning (amber tonal).
   Accent colour is driven by --w5-card-accent so a caller tints without a new rule, e.g.
   `<div class="w5-card w5-card--accent-left" style="--w5-card-accent: var(--brand-teal)">`. */

.w5-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: .5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    margin-bottom: 1.25rem;
    overflow: hidden;
}

.w5-card__header {
    padding: .75rem 1.25rem;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The cv-card icon contract: a leading icon in the header is tinted primary. */
.w5-card__header svg {
    color: var(--primary);
    flex-shrink: 0;
}

.w5-card__body {
    padding: 1.25rem;
}

/* The sa-actions footer shape: a tonal action row at the foot of the card. */
.w5-card__footer {
    padding: 1rem 1.25rem;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* ── Modifiers ──────────────────────────────────────────────────────────── */

/* Top accent bar (sa-hero). Tint via --w5-card-accent; defaults to primary. */
.w5-card--accent {
    border-top: 3px solid var(--w5-card-accent, var(--primary));
}

/* Left accent bar (ea-card run-status). Tint via --w5-card-accent; defaults to a neutral. */
.w5-card--accent-left {
    border-left: 4px solid var(--w5-card-accent, var(--gray-400));
}

/* No elevation — flat-bordered cards (class-hero, user-card). */
.w5-card--flat {
    box-shadow: none;
}

/* Lift on hover (ea-card, user-card link cards). */
.w5-card--hover {
    transition: transform .15s ease, box-shadow .15s ease;
}

.w5-card--hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .08);
}

/* Subtle gradient frame for hero banners (class-hero, eForm success).
   A celebratory hero overrides the gradient stops locally via --w5-card-hero-from/-to. */
.w5-card--hero {
    background: linear-gradient(135deg,
        var(--w5-card-hero-from, var(--gray-50)) 0%,
        var(--w5-card-hero-to, var(--white)) 70%);
}

/* Amber warning tonal — the one place a card warning tint is owned (eForm incomplete summary).
   --warning is the app token; the soft fill/border are the sanctioned card-warning values. */
.w5-card--warning {
    border-color: #f0e0a8;
}

.w5-card--warning > .w5-card__header {
    background: #fff8e6;
    border-bottom-color: #f0e0a8;
    color: #6e4f00;
}

@media (max-width: 767.98px) {
    .w5-card__header,
    .w5-card__body,
    .w5-card__footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}