/* ============================================================
   features/tabs/tabs.css — process tabs (redesign · P2 s3 reskin)
   ------------------------------------------------------------
   Reskin only: the JS contract (.process-tab[data-tab],
   .process-tab-pane[data-pane], .active) is unchanged. tabs.js
   adds the ARIA tablist/tab/tabpanel roles + roving tabindex at
   runtime, so the markup stays as-is.

   Soft-dreamy language: tinted squircle pills instead of chunky
   white cards; the active pill fills with the coral gradient + glow
   and is marked by the brand dot ("you are here"); the panel sits on
   a warm gradient wash. Layout consumes tokens.
   ============================================================ */

.process-tabs {
    max-width: var(--container-narrow);
    margin: 0 auto;
}

.process-tabs.production {
    max-width: 100%;
    display: flex;
    gap: var(--space-7);
}

.process-tabs-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.process-tabs-nav.production {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-3);
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    width: 22%;
}

.process-tab {
    position: relative;
    background: var(--surface-tint);
    border: 1.5px solid transparent;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: clamp(17px, 1.6vw, 20px);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    cursor: pointer;
    text-align: center;
    width: 100%;
    color: var(--text-soft);
    transition: color var(--dur-base) var(--ease-dreamy),
        border-color var(--dur-base) var(--ease-dreamy),
        background var(--dur-base) var(--ease-dreamy),
        box-shadow var(--dur-base) var(--ease-dreamy),
        transform var(--dur-base) var(--ease-dreamy);
}

.process-tab:hover {
    border-color: var(--accent);
    background: var(--coral-100);
    color: var(--text);
    transform: translateY(-3px);
    box-shadow: var(--shadow-sm);
}

.process-tab:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.process-tab.active {
    background: var(--grad-coral);
    color: var(--text-on-coral);
    border-color: transparent;
    box-shadow: var(--shadow-glow);
}

.process-tab.active:hover {
    color: var(--text-on-coral);
    transform: translateY(-3px);
}

/* The dot blooms on hover and marks the active step, where it gently
   pulses — the brand's signature "dot bloom" interaction. Its space is
   reserved on every tab so blooming never reflows the label. */
.process-tab::before {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 0.55em;
    vertical-align: 0.1em;
    transform: scale(0);
    transition: transform var(--dur-base) var(--ease-dreamy),
        background var(--dur-base) var(--ease-dreamy);
}

.process-tab:hover::before {
    transform: scale(1);
}

.process-tab.active::before {
    background: currentColor;
    /* white on the coral fill */
    transform: scale(1);
    animation: ddTabDotPulse 2.2s var(--ease-soft) infinite;
}

@keyframes ddTabDotPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }
}

.process-tabs-content {
    position: relative;
    overflow: hidden;
    /* Stack every pane in one grid cell so the panel is always as tall as the
       LARGEST tab — its size no longer jumps when switching tabs. */
    display: grid;
    /* white base (not the warm grad-soft) so the drifting coral/peach
       mesh reads with real contrast instead of pink-on-pink */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    box-shadow: var(--shadow-md);
    transition: border-color var(--dur-base) var(--ease-dreamy),
        box-shadow var(--dur-base) var(--ease-dreamy);
}

/* A soft coral/peach glow mesh drifting slowly behind the body — the
   design-language "mesh of glow-coral + glow-peach blobs". Oversized so
   the drift never reveals an edge; clipped by the panel's overflow. */
.process-tabs-content::before {
    content: "";
    position: absolute;
    inset: -30%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(38% 50% at 22% 28%, rgba(255, 170, 168, 0.28), transparent 72%),
        radial-gradient(42% 55% at 80% 72%, rgba(255, 217, 194, 0.30), transparent 75%),
        radial-gradient(32% 42% at 62% 20%, rgba(255, 139, 136, 0.16), transparent 70%);
    animation: ddTabsMesh 24s var(--ease-soft) infinite;
}

@keyframes ddTabsMesh {
    0% {
        transform: translate3d(-3%, -2%, 0) scale(1.05);
    }

    50% {
        transform: translate3d(3%, 2%, 0) scale(1.12);
    }

    100% {
        transform: translate3d(-3%, -2%, 0) scale(1.05);
    }
}

.process-tabs-content:hover {
    border-color: var(--coral-200);
    box-shadow: var(--shadow-lg);
}

.process-tabs-content.production {
    width: 78%;
}

.process-tab-pane {
    /* All panes share one cell (stacked); only the active one is shown. Using
       visibility (not display:none) keeps every pane measured so the panel
       holds the tallest pane's height — no resize on tab switch. */
    grid-area: 1 / 1;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-dreamy),
        transform var(--dur-base) var(--ease-dreamy),
        visibility var(--dur-base) var(--ease-dreamy);
}

.process-tab-pane.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.process-tab-pane p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text-muted);
    margin-bottom: var(--space-4);
}

.process-tab-pane p:last-child {
    margin-bottom: 0;
}

.process-tab-pane em {
    color: var(--accent-strong);
    font-style: normal;
    font-weight: 600;
}

.tab-link {
    color: var(--link);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color var(--dur-fast) var(--ease-soft);
}

.tab-link:hover {
    color: var(--link-hover);
}

.process-tab-pane ul,
.process-tab-pane ol {
    margin-left: 2.5em;
    color: var(--text-muted);
}

.process-tab-pane li {
    font-size: var(--fs-body);
    margin-bottom: var(--space-3);
    line-height: var(--lh-snug);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1264px) {
    .process-tabs-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .process-tabs-nav {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .process-tabs-content {
        padding: var(--space-6) var(--space-5);
    }
}

/* Reduced motion: keep state changes instant, drop the lift + rise. */
@media (prefers-reduced-motion: reduce) {

    .process-tab,
    .process-tabs-content,
    .process-tab-pane,
    .process-tab::before {
        transition: none;
    }

    .process-tab:hover,
    .process-tab.active:hover {
        transform: none;
    }

    .process-tab-pane {
        transform: none;
    }

    .process-tab.active::before,
    .process-tabs-content::before {
        animation: none;
    }
}