/* ════════════════════════════════════════════════════════════════════
   FASE 21.C — Section variants (2026-05-09)
   ────────────────────────────────────────────────────────────────────
   5 visual flavours applied to any section via the wrapper's
   `data-variant` attribute. Operators set this via Field("sectionVariant")
   in the inspector; whitelist enforced server-side in Site/Page.cshtml.

   Variants (CSS attribute selectors target the inner <section>):
     default   — no override (current behaviour)
     compact   — smaller padding + smaller heading scale (tighter pages)
     hero      — bigger padding + display-1 heading + brand-soft bg
                 (use for the page's most-important section)
     muted     — lower contrast, smaller text (de-emphasized callouts)
     featured  — accent border + soft shadow (draws the eye)
   ──────────────────────────────────────────────────────────────────── */

/* ── compact ──────────────────────────────────────────────────────── */

.platforma-motion-wrap[data-variant="compact"] > section {
    padding-block: 24px;
    padding-inline: 16px;
}

.platforma-motion-wrap[data-variant="compact"] > section h1,
.platforma-motion-wrap[data-variant="compact"] > section h2 {
    font-size: 1.4rem;
    line-height: 1.25;
}

.platforma-motion-wrap[data-variant="compact"] > section h3 {
    font-size: 1.1rem;
}

/* ── hero ─────────────────────────────────────────────────────────── */

.platforma-motion-wrap[data-variant="hero"] > section {
    padding-block: 96px 72px;
    background: var(--tenant-primary-soft, var(--platforma-brand-soft, #fce4e8));
}

.platforma-motion-wrap[data-variant="hero"] > section h1,
.platforma-motion-wrap[data-variant="hero"] > section h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--tenant-primary-dark, var(--platforma-brand-dark, #B11A33));
}

/* ── muted ────────────────────────────────────────────────────────── */

.platforma-motion-wrap[data-variant="muted"] > section {
    background: var(--platforma-gray-50, #f9fafb);
    color: var(--platforma-gray-600, #4b5563);
}

.platforma-motion-wrap[data-variant="muted"] > section h1,
.platforma-motion-wrap[data-variant="muted"] > section h2,
.platforma-motion-wrap[data-variant="muted"] > section h3 {
    color: var(--platforma-gray-700, #374151);
    font-weight: 600;
}

.platforma-motion-wrap[data-variant="muted"] > section a {
    color: var(--platforma-gray-700, #374151);
    text-decoration: underline;
}

/* ── featured ─────────────────────────────────────────────────────── */

.platforma-motion-wrap[data-variant="featured"] > section {
    border: 2px solid var(--tenant-primary, var(--platforma-brand, #D4213D));
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
    margin-block: 24px;
    /* Wrap so the border doesn't bleed off-screen on full-width sections. */
    max-width: calc(100% - 32px);
    margin-inline: auto;
}

/* ── Dark-mode + reduced-motion overrides ───────────────────────── */

@media (prefers-color-scheme: dark) {
    .platforma-motion-wrap[data-variant="muted"] > section {
        background: var(--platforma-gray-800, #1f2937);
        color: var(--platforma-gray-300, #d1d5db);
    }
    .platforma-motion-wrap[data-variant="hero"] > section {
        background: rgba(212, 33, 61, 0.12);
    }
}

/* When the editor is in preview mode, variants stay in effect — operator
   wants to see exactly what the public visitor will see. No override. */