/*!
 * Features page (/features) — palette-aware styling.
 * The feature cards render from the featurelist translation token
 * (identical markup in all 15 languages), so styling lives here.
 * Colors ride on the dialog theme's --bs-* vars + site-overrides' --site-*.
 * NB: never write the two-character comment-close sequence inside these
 * comments — it silently truncates the comment and eats the next rule.
 */

.features-container {
    max-width: 860px;
}

/* Hero: the homepage console shot in the same bezel frame */
.features-hero {
    display: block;
    box-sizing: border-box;
    width: min(100%, 916px);
    height: auto;
    aspect-ratio: 43 / 18;
    object-fit: cover;
    margin: 1rem auto 0;
    padding: 8px;
    border-radius: 14px;
    background: linear-gradient(180deg, var(--bs-tertiary-bg), var(--bs-body-bg));
    border: 1px solid rgba(var(--site-border-rgb), 0.16);
    box-shadow: 0 40px 80px -34px rgba(0, 0, 0, .75);
}

/* ── Feature cards ──────────────────────────────────────────────────
   Raised Command surfaces with an accent top rail and a HUD diamond
   marker on each header — interest comes from the accent language, not
   from per-card colors. */

.card {
    position: relative;
    overflow: hidden;
    background-color: var(--bs-secondary-bg);
    border: 1px solid rgba(var(--site-border-rgb), 0.14);
    transition: transform .2s ease, border-color .2s ease;
}

/* accent rail across the top edge */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-primary), var(--site-accent-2) 55%, transparent 90%);
    opacity: .75;
    transition: opacity .2s ease;
    pointer-events: none;
}

.card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--bs-primary-rgb), 0.35);
}

.card:hover::before {
    opacity: 1;
}

/* Card headers: one consistent Command cap. The token markup carries
   legacy colored header variants (cyan and green, with white text) —
   normalized here rather than editing 15 translation files. The
   background and color pins need to out-rank the utility classes, which
   compile with their own important flag. */
.card-header,
.card-header.bg-primary,
.card-header.bg-success {
    background-color: var(--site-toolbar) !important;
    color: var(--bs-primary-text-emphasis) !important;
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.25);
    font-weight: 600;
    letter-spacing: .02em;
}

/* HUD diamond marker before each header */
.card-header::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: .6rem;
    border-radius: 2px;
    background: var(--bs-primary);
    box-shadow: 0 0 8px rgba(var(--bs-primary-rgb), 0.6);
    transform: rotate(45deg);
}

.card-title {
    color: var(--bs-secondary-color);
    font-size: 1rem;
}

.card-text {
    /* body ink, slightly softened — a hair dimmer than list items */
    color: rgba(var(--bs-body-color-rgb), 0.85);
}

.list-group-item {
    background-color: transparent;
    color: var(--bs-body-color);
    border-color: rgba(var(--site-border-rgb), 0.10);
    transition: background-color .15s ease;
}

.list-group-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}