/* =========================================================
   RADIUS · COMPARE PREVIEW  (hero surface)
   assets/css/pages/radius-builder/preview/compare-preview.css
   =========================================================
   "Compare" tab. Four preset columns rendered side by side
   (compare-preview.js sets layout + per-column corners inline).
   This file owns the interactive state (hover / active / focus)
   and the mobile carousel reflow so the styles stay comparable
   by swipe rather than collapsing.
   ========================================================= */

.rd-cmp-col {
    position: relative;
    font: inherit;
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

/* Hover = "this is interactive" — a neutral lift, not a colored ring, so it
   reads as a distinct signal from the selected state below. */
.rd-cmp-col:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.rd-cmp-col:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Active = the committed preset. A refined border + soft fill communicate
   "selected" without a heavy outline; the badge below confirms it. */
.rd-cmp-col--active {
    border: 1.5px solid var(--color-primary) !important;
    background: var(--color-primary-soft) !important;
    box-shadow: var(--shadow-sm);
}

.rd-cmp-col--active::after {
    content: '✓';
    position: absolute;
    top: 15px;
    right: 15px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font: 700 11px/18px var(--font-primary);
    text-align: center;
    box-shadow: 0 0 0 2px var(--surface-primary);
}

.rd-cmp-col-hint {
    font-variant-numeric: tabular-nums;
}

/* ── Mobile reflow ──────────────────────────────────────────
   On a narrow viewport or the mobile device toggle, the four
   columns stack full-width instead of squeezing side by side. */
@media (max-width: 640px) {
    .rd-cmp {
        flex-direction: column;
    }
    .rd-cmp-col {
        flex: 1 1 auto !important;
        width: 100%;
    }
}

.rd-preview-root--mobile .rd-cmp {
    flex-direction: column;
}

.rd-preview-root--mobile .rd-cmp-col {
    flex: 1 1 auto !important;
    width: 100%;
}