/* ============================================================
   Feature Tabs – front.css   v2.0
   Layout: left nav | right (description TOP, image BOTTOM)
   ============================================================ */

.ft-wrapper *,
.ft-wrapper *::before,
.ft-wrapper *::after { box-sizing: border-box; }

/* ── Shell ── */
.ft-wrapper {
    --ft-accent:      #3b49df;
    --ft-bg:          #F2F2F5;
    --ft-nav-w:       260px;
    --ft-nav-bg:      #E2E2E2;
    --ft-nav-hover:   #000000;
    --ft-active-text: #FFFFFF;
    --ft-idle-text:   #3D3D3D;
    --ft-panel-text:  #444;
    --ft-screen-bg:   #1C1C24;
    --ft-screen-bar:  #2A2A36;
    --ft-radius:      14px;
    --ft-shadow:      0 4px 28px rgba(0,0,0,.10);
    --ft-transition:  .22s cubic-bezier(.4,0,.2,1);

    background: var(--ft-bg);
    border-radius: var(--ft-radius);
    padding: 40px 36px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Section heading ── */
.ft-section-heading {
    display: none;
}

/* ── Two-column layout ──
   .ft-inner holds tab buttons and panels as direct siblings,
   interleaved in source order (tab1, panel1, tab2, panel2, ...).
   Desktop: tabs stack normally (position: static) in a fixed-width
   column; the active panel is pulled out with position: absolute
   so its height can never push the tabs apart. JS sets a min-height
   on .ft-inner so the card still encloses whichever column is taller.
   Mobile: the panel becomes position: static again, so everything
   simply stacks in source order — giving an accordion where each
   tab's content appears directly beneath it. */
.ft-inner {
    position: relative;
}

/* ════════════════════════════
   TABS (left column on desktop)
════════════════════════════ */
.ft-tab {
    width: var(--ft-nav-w);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    border: none;
    border-radius: 10px;
    background: var(--ft-nav-bg) !important;
    color: var(--ft-idle-text) !important;
    font-size: .9rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    position: relative;
    transition:
        background var(--ft-transition),
        color var(--ft-transition),
        box-shadow var(--ft-transition);
}
.ft-tab:last-of-type { margin-bottom: 0; }

.ft-tab:hover:not(.ft-tab--active) {
    background: var(--ft-nav-hover) !important;
    color: #FFFFFF !important;
}

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

/* Active */
.ft-tab--active {
    background: var(--ft-accent) !important;
    color: var(--ft-active-text) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}

/* Arrow pointer on active tab */
.ft-tab--active::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    border-left: 10px solid var(--ft-accent) !important;
    pointer-events: none;
}

.ft-tab__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: .85;
}
.ft-tab--active .ft-tab__icon { opacity: 1; }

/* ════════════════════════════
   PANELS (right column on desktop)
   Structure per wireframe:
     1. Description (top)
     2. Image section (bottom)
════════════════════════════ */
.ft-panel {
    position: absolute;
    top: 0;
    left: calc(var(--ft-nav-w) + 32px);
    right: 0;
    display: flex;
    flex-direction: column;   /* description TOP, image BOTTOM */
    gap: 20px;
    animation: ft-fadeIn .25s ease;
}
.ft-panel--hidden { display: none; }

@keyframes ft-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Description */
.ft-panel__desc {
    margin: 0;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ft-panel-text);
}

/* Image wrapper */
.ft-panel__image-wrap { width: 100%; }

/* Browser-chrome card */
.ft-panel__screen {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--ft-shadow);
    background: var(--ft-screen-bg);
}

.ft-screen__bar {
    background: var(--ft-screen-bar);
    padding: 9px 13px;
    display: flex;
    gap: 6px;
    align-items: center;
}
.ft-screen__bar span {
    width: 11px; height: 11px;
    border-radius: 50%;
}
.ft-screen__bar span:nth-child(1) { background: #FF5F57; }
.ft-screen__bar span:nth-child(2) { background: #FEBC2E; }
.ft-screen__bar span:nth-child(3) { background: #28C840; }

.ft-screen__body { line-height: 0; }
.ft-screen__body img {
    width: 100%; height: auto;
    display: block; object-fit: cover;
}

/* Empty placeholder */
.ft-screen--placeholder .ft-screen__body--empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #888;
    line-height: 1.5;
}
.ft-screen--placeholder .ft-screen__body--empty p {
    margin: 8px 0 0;
    font-size: .85rem;
}

/* ════════════════════════════
   RESPONSIVE
   Below the breakpoint, both tabs and panels collapse to a single
   grid column, so they render in source order: tab1, panel1 (if
   active), tab2, panel2 (if active), etc. Hidden panels are
   display:none and take no space, so this naturally becomes an
   accordion — each tab's content appears directly beneath it.
════════════════════════════ */
@media (max-width: 768px) {
    .ft-tab {
        width: 100%;
        margin-bottom: 10px;
    }
    .ft-panel {
        position: static;
        margin-bottom: 10px;
    }
    .ft-tab--active::after { display: none; }
}
@media (max-width: 480px) {
    .ft-wrapper { padding: 20px 14px; }
    .ft-tab { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ft-panel { animation: none; }
    .ft-tab    { transition: none; }
}