/* ============================================================
   .uk-tabs — canonical tabs system
   ============================================================
   Three orthogonal style variants share one base + tab + panel
   structure:
     --pill        marketing-grade gradient active (signature look)
     --underline   minimalist, content-heavy
     --solid       form-segmented filled
   Plus two size modifiers (--sm / --lg) and a --centered alignment
   helper. Panels fade in on activation, respecting
   prefers-reduced-motion.

   Replaces the legacy .features-tabs / .feature-tab / .feature-content
   trio on the home page until that page migrates.
   ============================================================ */

.uk-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.uk-tabs--centered {
    justify-content: center;
}

.uk-tabs-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: var(--font-md);
    font-weight: 500;
    line-height: var(--line-normal);
    cursor: pointer;
    white-space: nowrap;
    transition: var(--transition-fast);
}

.uk-tabs-tab > svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.uk-tabs-tab:hover {
    color: var(--color-text);
}

.uk-tabs-tab:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- Pill variant (marketing-grade signature look) ---- */
.uk-tabs--pill .uk-tabs-tab {
    border: 1px solid var(--color-border);
}

.uk-tabs--pill .uk-tabs-tab:hover:not(.active) {
    border-color: var(--color-text-muted);
    background: rgba(var(--color-primary-rgb), 0.04);
}

.uk-tabs--pill .uk-tabs-tab.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #000;
    font-weight: 600;
}

/* ---- Underline variant (minimalist, content-heavy) ---- */
.uk-tabs--underline {
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    align-items: stretch;
}

.uk-tabs--underline .uk-tabs-tab {
    border-radius: 0;
    padding: 0.75rem 1.25rem;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
}

.uk-tabs--underline .uk-tabs-tab:hover:not(.active) {
    color: var(--color-text);
    border-bottom-color: rgba(var(--color-primary-rgb), 0.4);
}

.uk-tabs--underline .uk-tabs-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

/* ---- Solid variant (form-segmented style) ---- */
.uk-tabs--solid {
    display: inline-flex;
    flex-wrap: nowrap;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 4px;
    gap: 0;
}

.uk-tabs--solid .uk-tabs-tab {
    border-radius: var(--radius-md);
    padding: 0.5rem 1rem;
}

.uk-tabs--solid .uk-tabs-tab:hover:not(.active) {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-text);
}

.uk-tabs--solid .uk-tabs-tab.active {
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

/* ---- Size modifiers (apply to .uk-tabs, cascade into tabs) ---- */
.uk-tabs--sm .uk-tabs-tab {
    padding: 0.4rem 0.85rem;
    font-size: var(--font-sm);
    gap: var(--space-xs);
}
.uk-tabs--sm .uk-tabs-tab > svg {
    width: 14px;
    height: 14px;
}
.uk-tabs--sm.uk-tabs--underline .uk-tabs-tab {
    padding: 0.5rem 0.85rem;
}

.uk-tabs--lg .uk-tabs-tab {
    padding: 0.875rem 1.5rem;
    font-size: var(--font-base);
    gap: var(--space-md);
}
.uk-tabs--lg .uk-tabs-tab > svg {
    width: 22px;
    height: 22px;
}

/* ---- Panel — fade in on activation ---- */
.uk-tabs-panel {
    display: none;
    animation: uk-tabs-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.uk-tabs-panel.active {
    display: block;
}

@keyframes uk-tabs-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .uk-tabs-panel { animation: none; }
    .uk-tabs-tab { transition: none; }
}