/* =============================================================================
 * showcase.css
 * ─────────────────────────────────────────────────────────────────────────────
 * BrenduhNet product showcase — Steam-style tabbed feature display.
 * Companion stylesheet to showcase.js.
 *
 * LOADED BY: index.php (homepage) — inserted after style.css
 *
 * LAYOUT STRUCTURE:
 *   .showcase                      outer container (max-width 1200px)
 *   ├─ .showcase-products          product switcher tab bar (CarPotato / HomePotato)
 *   │   └─ .showcase-product-tab  individual product tab
 *   ├─ .showcase-main              two-column grid (detail left, feature list right)
 *   │   ├─ .showcase-detail        left panel: eyebrow, title, body, spec chips
 *   │   └─ .showcase-features      right panel: scrollable feature selector list
 *   ├─ .showcase-timer             auto-rotate progress bar (2px, fills over 6s)
 *   └─ .showcase-categories        category tab bar (Control / Connectivity / Safety)
 *
 * ACCENT COLORS:
 *   CarPotato  → var(--accent) / amber #F59E0B
 *   HomePotato → #22c55e / green
 *   All product-specific color rules use [data-product="..."] attribute selectors.
 *
 * TRANSITIONS:
 *   .showcase-detail fades via opacity 0.2s when showcase.js adds .fading class.
 *   .showcase-timer-bar fills via transition: width linear (duration set by JS).
 *   Both are reset by JS on each feature/category switch.
 *
 * RESPONSIVE:
 *   ≥900px: two-column layout (.showcase-main grid-template-columns: 1fr 320px)
 *   <900px: stacked — feature list becomes horizontal scrolling row below detail
 *   <600px: product tabs shrink, detail padding reduced, category tabs scroll
 *
 * SECTION MAP:
 *   L1    File header + docblock
 *   L46   .showcase outer container
 *   L51   Product switcher tabs + active state per product
 *   L88   .showcase-main grid + product border tint
 *   L99   Left panel (.showcase-detail) — eyebrow, title, body, specs
 *   L148  Right panel (.showcase-features) — selector list, active state, active bar
 *   L196  Category tabs (.showcase-categories / .showcase-cat-tab)
 *   L220  Fade transition (.showcase-detail.fading)
 *   L226  Auto-rotate timer bar (.showcase-timer / .showcase-timer-bar)
 *   L234  Responsive: <900px (stacked), <600px (compact)
 * ============================================================================= */
/* ================================================================
   PRODUCT SHOWCASE — Steam-style tabbed display
   ================================================================ */

/* Outer wrapper — centered, relative so JS-positioned elements anchor here */
.showcase {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* === PRODUCT SWITCHER TABS === */
/* Connected tab bar above the main panel — no gap, borders merge */
.showcase-products {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

/* Each product tab takes equal width */
.showcase-product-tab {
    flex: 1;
    padding: 1rem 1.5rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.9rem; font-weight: 700; letter-spacing: 2px;
    text-align: center; cursor: pointer;
    border: 1px solid var(--border); border-bottom: none;
    background: var(--bg-deep); color: var(--text-dim);
    transition: all 0.3s; user-select: none;
}
.showcase-product-tab:hover {
    color: var(--text-secondary);
    background: var(--bg-card);
}

/* Active CarPotato tab — amber accent. border-bottom: 2px solid bg-card
   visually merges the tab with the panel below it. */
.showcase-product-tab.active[data-product="carpotato"] {
    color: var(--accent);
    border-color: var(--accent);
    border-bottom: 2px solid var(--bg-card);
    background: var(--bg-card);
}

/* Active HomePotato tab — green accent */
.showcase-product-tab.active[data-product="homepotato"] {
    color: #22c55e;
    border-color: #22c55e;
    border-bottom: 2px solid var(--bg-card);
    background: var(--bg-card);
}

/* === MAIN PANEL (two-column grid) === */
/* Left: feature detail (1fr). Right: feature selector list (fixed 320px). */
.showcase-main {
    display: grid;
    grid-template-columns: 1fr 320px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    min-height: 420px;
}

/* Subtle tinted border per active product — reinforces brand color in the UI */
.showcase-main[data-active-product="carpotato"]  { border-color: rgba(245, 158, 11, 0.2); }
.showcase-main[data-active-product="homepotato"] { border-color: rgba(34, 197, 94, 0.2); }

/* === LEFT PANEL — Feature Detail === */
.showcase-detail {
    padding: 2.5rem;
    display: flex; flex-direction: column; justify-content: center;
}

/* Small mono eyebrow label above the feature title (e.g. "CHANNEL CONTROL") */
.showcase-detail .detail-eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem; letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 0.75rem;
}
/* Eyebrow color follows active product */
.showcase-detail[data-product="carpotato"]  .detail-eyebrow { color: var(--accent); }
.showcase-detail[data-product="homepotato"] .detail-eyebrow { color: #22c55e; }

/* Feature headline — large Orbitron */
.showcase-detail .detail-title {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.5rem; font-weight: 800; letter-spacing: 2px;
    color: var(--text-primary); margin-bottom: 1rem; line-height: 1.3;
}

/* Feature description body text */
.showcase-detail .detail-body {
    font-size: 1rem; line-height: 1.8;
    color: var(--text-secondary); margin-bottom: 1.5rem;
}

/* Spec chips row — e.g. "200+ CHANNELS", "8 GPIO" */
.showcase-detail .detail-specs {
    display: flex; gap: 2rem; flex-wrap: wrap;
}
.showcase-detail .spec-item  { display: flex; flex-direction: column; }

/* Large bold number/value for the spec */
.showcase-detail .spec-value {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem; font-weight: 700;
}
.showcase-detail[data-product="carpotato"]  .spec-value { color: var(--accent); }
.showcase-detail[data-product="homepotato"] .spec-value { color: #22c55e; }

/* Mono all-caps label below the spec value */
.showcase-detail .spec-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem; letter-spacing: 2px;
    color: var(--text-dim); text-transform: uppercase;
}

/* === RIGHT PANEL — Feature Selector List === */
/* Scrollable vertical list of features — max 500px tall with overflow-y:auto */
.showcase-features {
    border-left: 1px solid var(--border);
    display: flex; flex-direction: column;
    overflow-y: auto; max-height: 500px;
}

/* Individual feature row — full-width clickable, hover tint */
.showcase-feature-item {
    padding: 1rem 1.25rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: all 0.2s;
    position: relative; /* needed for ::before active accent bar */
}
.showcase-feature-item:last-child { border-bottom: none; }
.showcase-feature-item:hover  { background: rgba(255,255,255,0.02); }
.showcase-feature-item.active { background: rgba(255,255,255,0.04); }

/* Colored 3px left bar on the active feature row — product color */
.showcase-feature-item.active[data-product="carpotato"]::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--accent);
}
.showcase-feature-item.active[data-product="homepotato"]::before {
    content: ''; position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: #22c55e;
}

/* Feature name — brightens when active */
.showcase-feature-item .fi-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem; font-weight: 600;
    color: var(--text-secondary); margin-bottom: 0.15rem;
}
.showcase-feature-item.active .fi-name { color: var(--text-primary); }

/* Short hint line below feature name — e.g. "8→200+ channels" */
.showcase-feature-item .fi-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem; color: var(--text-dim); letter-spacing: 0.5px;
}

/* === CATEGORY TABS === */
/* Three tabs below the main panel (Control / Connectivity / Safety).
   margin-top: -1px merges with the panel's bottom border. */
.showcase-categories {
    display: flex; gap: 0;
    margin-top: -1px;
}
.showcase-cat-tab {
    flex: 1;
    padding: 0.6rem 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem; letter-spacing: 1px; text-align: center;
    cursor: pointer;
    border: 1px solid var(--border); border-top: none;
    background: var(--bg-deep); color: var(--text-dim);
    transition: all 0.3s; user-select: none;
}
.showcase-cat-tab:hover  { color: var(--text-secondary); }
.showcase-cat-tab.active { color: var(--text-primary); background: var(--bg-card); }

/* === FADE TRANSITION === */
/* showcase.js adds/removes .fading on .showcase-detail to trigger the
   opacity fade between feature switches (0.2s ease) */
.showcase-detail {
    opacity: 1;
    transition: opacity 0.2s ease;
}
.showcase-detail.fading { opacity: 0; }

/* === AUTO-ROTATE TIMER BAR === */
/* 2px progress bar between main panel and category tabs.
   showcase.js sets transition duration = rotation interval (default 6000ms)
   and animates width from 0% → 100%, then resets on each feature change. */
.showcase-timer {
    height: 2px;
    background: var(--border);
    margin-top: 0;
    overflow: hidden;
}
.showcase-timer-bar {
    height: 100%; width: 0%;
    transition: width linear; /* duration set dynamically by JS */
}
.showcase-timer-bar[data-product="carpotato"]  { background: var(--accent); }
.showcase-timer-bar[data-product="homepotato"] { background: #22c55e; }

/* === RESPONSIVE === */
/* <900px: switch to stacked layout — feature list becomes horizontal scroll row */
@media (max-width: 900px) {
    .showcase-main { grid-template-columns: 1fr; }

    /* Feature list becomes a horizontal scrolling row below the detail panel */
    .showcase-features {
        border-left: none; border-top: 1px solid var(--border);
        flex-direction: row;
        overflow-x: auto; overflow-y: hidden; max-height: none;
        -webkit-overflow-scrolling: touch; /* smooth momentum scroll on iOS */
    }
    .showcase-feature-item {
        min-width: 140px;
        border-bottom: none; border-right: 1px solid var(--border);
        text-align: center;
    }
    /* Active bar moves from left edge to bottom edge in horizontal layout */
    .showcase-feature-item.active::before {
        left: 0; right: 0; bottom: 0; top: auto;
        width: 100%; height: 3px;
    }
}

/* <600px: compact product tabs, smaller detail padding, category tabs scroll */
@media (max-width: 600px) {
    .showcase-product-tab {
        font-size: 0.9rem; padding: 0.75rem 0.5rem; letter-spacing: 1px;
    }
    .showcase-detail { padding: 1.5rem; }
    .showcase-detail .detail-title { font-size: 1.15rem; }

    /* Category tabs scroll horizontally instead of wrapping */
    .showcase-categories { overflow-x: auto; flex-wrap: nowrap; }
    .showcase-cat-tab { white-space: nowrap; flex: none; padding: 0.5rem 0.75rem; }
}