/* ═══════════════════════════════════════════════════════════════
   BUMAGA FAQ — Knowledge Center v2.0
   Location: /assets/css/faq.css
   ═══════════════════════════════════════════════════════════════
   
   Namespace: faq-*
   Dependencies: tokens.css (--bp-*)
   Pattern: labels.css hero/filters + Google Images expand
   ═══════════════════════════════════════════════════════════════ */

.faq-container { max-width:1100px; margin:0 auto; padding:40px 24px 60px; }

/* ══════════════════════════════════════════════════════════════
   HERO — labels.css pattern
   ══════════════════════════════════════════════════════════════ */
.faq-hero { text-align:center; margin-bottom:48px; }
.faq-hero-title { font-size:42px; font-weight:900; margin-bottom:15px; display:flex; align-items:center; justify-content:center; gap:15px; color:var(--bp-text); }
.faq-hero-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; background:linear-gradient(135deg, var(--bp-accent) 0%, #2d7cd6 100%); border-radius:var(--bp-radius); box-shadow:0 0 20px rgba(74,158,255,0.3); }
.faq-hero-icon svg { width:32px; height:32px; color:#fff; }
.faq-hero-subtitle { color:var(--bp-text-secondary); font-size:18px; max-width:600px; margin:0 auto 24px; line-height:1.6; }

/* Search */
.faq-search-wrap { max-width:500px; margin:0 auto 20px; position:relative; }
.faq-search-input { width:100%; background:var(--bp-surface); border:1px solid var(--bp-border); color:var(--bp-text); padding:13px 20px 13px 48px; border-radius:var(--bp-radius-sm); font-size:0.95rem; font-family:var(--bp-font,'Roboto',sans-serif); transition:border-color 0.2s; }
.faq-search-input::placeholder { color:var(--bp-text-muted); }
.faq-search-input:focus { border-color:var(--bp-accent); outline:none; box-shadow:0 0 0 3px rgba(74,158,255,0.12); }
.faq-search-svg { position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--bp-text-muted); pointer-events:none; }

/* Quick Entry Pills */
.faq-quick-entry { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.faq-qe-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:var(--bp-surface); border:1px solid var(--bp-border); border-radius:20px; color:var(--bp-text-secondary); font-size:0.85rem; font-weight:500; cursor:pointer; transition:all 0.2s; font-family:var(--bp-font,'Roboto',sans-serif); }
.faq-qe-pill:hover { border-color:rgba(74,158,255,0.4); color:var(--bp-accent); background:rgba(74,158,255,0.05); transform:translateY(-1px); }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════════════ */
.faq-section-header { display:flex; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,0.06); }
.faq-section-icon { font-size:1.3rem; }
.faq-section-title { font-size:1.1rem; font-weight:700; color:#fff; }
.faq-section-count { font-size:0.72rem; font-weight:600; color:var(--bp-text-muted); background:rgba(255,255,255,0.06); padding:2px 8px; border-radius:4px; margin-left:auto; }

/* ══════════════════════════════════════════════════════════════
   FEATURED CARDS — large, with cover
   ══════════════════════════════════════════════════════════════ */
.faq-featured-section { margin-bottom:40px; }
.faq-featured-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:16px; }

.faq-featured-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:14px; overflow:hidden; cursor:pointer; transition:all 0.25s; }
.faq-featured-card:hover { border-color:rgba(74,158,255,0.35); transform:translateY(-3px); box-shadow:0 12px 32px rgba(74,158,255,0.1); }
.faq-featured-card.faq-card--active { border-color:rgba(74,158,255,0.5); background:rgba(74,158,255,0.06); }

.faq-feat-cover { height:140px; overflow:hidden; background:#1a1a1a; }
.faq-feat-cover img { width:100%; height:100%; object-fit:cover; }
.faq-feat-cover--empty { display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(74,158,255,0.08), rgba(74,158,255,0.02)); }
.faq-feat-cover--empty span { font-size:2.5rem; }

.faq-feat-body { padding:16px 18px; }
.faq-feat-title { font-size:1rem; font-weight:700; color:#e0e0e0; line-height:1.4; margin-bottom:6px; }
.faq-feat-short { font-size:0.82rem; color:#888; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ══════════════════════════════════════════════════════════════
   CATEGORY SECTIONS
   ══════════════════════════════════════════════════════════════ */
.faq-category-section { margin-bottom:36px; }

/* ══════════════════════════════════════════════════════════════
   COMPACT CARDS — grid
   ══════════════════════════════════════════════════════════════ */
.faq-compact-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

.faq-compact-card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:10px; padding:16px 18px; cursor:pointer; transition:all 0.2s; }
.faq-compact-card:hover { border-color:rgba(74,158,255,0.3); background:rgba(255,255,255,0.05); transform:translateY(-1px); }
.faq-compact-card.faq-card--active { border-color:rgba(74,158,255,0.5); background:rgba(74,158,255,0.06); }

.faq-c-title { font-size:0.88rem; font-weight:600; color:#e0e0e0; line-height:1.4; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.faq-c-short { font-size:0.78rem; color:#777; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; }
.faq-c-footer { display:flex; align-items:center; gap:6px; font-size:0.7rem; color:#555; }
.faq-c-media { background:rgba(251,191,36,0.1); color:#fbbf24; padding:2px 7px; border-radius:4px; }
.faq-c-cat { background:rgba(74,158,255,0.08); color:var(--bp-accent); padding:2px 7px; border-radius:4px; }
.faq-c-arrow { margin-left:auto; color:#555; transition:color 0.2s; }
.faq-compact-card:hover .faq-c-arrow { color:var(--bp-accent); }

/* ══════════════════════════════════════════════════════════════
   EXPAND BLOCK — Google Images inline pattern
   ══════════════════════════════════════════════════════════════ */
.faq-expand {
    grid-column:1 / -1;
    background:#1a1a1a; border:1px solid rgba(74,158,255,0.25);
    border-radius:14px; overflow:hidden;
    max-height:0; opacity:0;
    transition:max-height 0.35s ease, opacity 0.25s ease;
}
.faq-expand--open { max-height:2000px; opacity:1; }

.faq-expand-inner { display:flex; gap:0; }

/* Left: media area — active image viewer + thumbnails */
.faq-expand-media { position:relative; width:380px; flex-shrink:0; background:#111; padding:16px; display:flex; flex-direction:column; gap:10px; border-right:1px solid rgba(255,255,255,0.06); transition:width 0.35s ease; }
.faq-expand-media[style*="display: none"] ~ .faq-expand-content { border-left:none; }

/* Main preview */
.faq-media-main { position:relative; background:#0b0f14; border-radius:12px; overflow:hidden; cursor:pointer; aspect-ratio:4/3; min-height:320px; display:flex; align-items:center; justify-content:center; padding:10px; border:1px solid rgba(255,255,255,0.06); transition:min-height 0.35s ease; }
.faq-media-main img { width:100%; height:100%; object-fit:contain; transition:opacity 0.2s; }
.faq-media-main:hover::after { content:''; position:absolute; inset:0; background:rgba(0,0,0,0.3); }
.faq-media-main:hover .faq-media-zoom-hint { opacity:1; }
.faq-media-zoom-hint { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; background:rgba(74,158,255,0.85); border-radius:50%; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity 0.2s; pointer-events:none; z-index:2; }
.faq-media-zoom-hint svg { width:20px; height:20px; color:#fff; }
.faq-mzh-collapse { display:none; }
.faq-expand--zoomed .faq-mzh-expand { display:none; }
.faq-expand--zoomed .faq-mzh-collapse { display:block; }

/* Zoom close button (visible only in zoomed state) */
.faq-media-zoom-close { display:none; position:absolute; top:8px; right:8px; width:30px; height:30px; background:rgba(248,113,113,0.15); border:1px solid rgba(248,113,113,0.25); border-radius:8px; color:#f87171; font-size:0.9rem; cursor:pointer; align-items:center; justify-content:center; transition:all 0.2s; z-index:3; font-family:var(--bp-font,'Roboto',sans-serif); }
.faq-media-zoom-close:hover { background:rgba(248,113,113,0.3); color:#fff; }
.faq-expand--zoomed .faq-media-zoom-close { display:flex; }
.faq-media-badge { position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,0.75); color:#ccc; padding:3px 10px; border-radius:6px; font-size:0.72rem; font-weight:600; backdrop-filter:blur(4px); }

/* Thumbnail strip */
.faq-media-thumbs { display:flex; gap:6px; overflow-x:auto; padding:2px 0; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.1) transparent; }
.faq-media-thumbs::-webkit-scrollbar { height:4px; }
.faq-media-thumbs::-webkit-scrollbar-track { background:transparent; }
.faq-media-thumbs::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:2px; }
.faq-media-th { width:72px; height:54px; border-radius:8px; object-fit:cover; cursor:pointer; border:2px solid transparent; opacity:0.5; transition:all 0.2s; flex-shrink:0; }
.faq-media-th:hover { opacity:0.85; transform:scale(1.05); }
.faq-media-th.active { border-color:var(--bp-accent); opacity:1; box-shadow:0 0 0 1px rgba(74,158,255,0.3); }

/* Video link */
.faq-expand-video-link { display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; background:rgba(74,158,255,0.06); border:1px solid rgba(74,158,255,0.15); border-radius:8px; color:var(--bp-accent); font-size:0.85rem; font-weight:500; text-decoration:none; transition:all 0.2s; }
.faq-expand-video-link:hover { background:rgba(74,158,255,0.12); }

/* Right: content area */
.faq-expand-content { flex:1; min-width:0; display:flex; flex-direction:column; }
.faq-expand-header { display:flex; align-items:flex-start; gap:12px; padding:18px 20px; border-bottom:1px solid rgba(255,255,255,0.06); }
.faq-expand-title { flex:1; font-size:1.15rem; font-weight:700; color:#fff; line-height:1.3; }
.faq-expand-close { background:rgba(255,255,255,0.06); border:none; width:32px; height:32px; border-radius:8px; color:#888; font-size:1rem; cursor:pointer; transition:all 0.2s; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.faq-expand-close:hover { background:rgba(248,113,113,0.15); color:#f87171; }

.faq-expand-body { padding:20px; font-size:0.88rem; color:#bbb; line-height:1.75; overflow-y:auto; max-height:600px; flex:1; }
.faq-expand-body p { margin:0 0 16px; max-width:680px; }
.faq-expand-body p:last-child { margin:0; }
.faq-expand-body strong { color:var(--bp-accent); font-weight:600; }
.faq-expand-body a { color:var(--bp-accent); text-decoration:underline; }

/* Related */
.faq-expand-related { padding:14px 20px; border-top:1px solid rgba(255,255,255,0.06); }
.faq-expand-related-title { font-size:0.72rem; font-weight:600; color:#666; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
.faq-expand-related-item { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06); border-radius:8px; margin-right:8px; margin-bottom:6px; cursor:pointer; font-size:0.78rem; color:#ccc; transition:all 0.2s; }
.faq-expand-related-item:hover { border-color:rgba(74,158,255,0.3); color:var(--bp-accent); }

/* ══════════════════════════════════════════════════════════════
   SEARCH RESULTS STATE
   ══════════════════════════════════════════════════════════════ */
.faq-search-results-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:0.88rem; color:var(--bp-text-secondary); }
.faq-search-results-header span:first-child { font-weight:700; color:var(--bp-accent); font-size:1.1rem; }
.faq-search-clear { background:rgba(248,113,113,0.1); border:1px solid rgba(248,113,113,0.2); color:#f87171; padding:4px 12px; border-radius:6px; font-size:0.78rem; cursor:pointer; margin-left:auto; }
.faq-search-results-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

/* ══════════════════════════════════════════════════════════════
   ZOOMED MEDIA STATE — article-scoped viewer (Level 2)
   Click main image → media area expands, text shrinks. No overlay.
   ══════════════════════════════════════════════════════════════ */
.faq-expand--zoomed .faq-expand-media { width:62%; }
.faq-expand--zoomed .faq-media-main { aspect-ratio:auto; min-height:420px; }
.faq-expand--zoomed .faq-media-main img { object-fit:contain; }
.faq-expand--zoomed .faq-expand-body { max-height:500px; }

/* ══════════════════════════════════════════════════════════════
   CTA
   ══════════════════════════════════════════════════════════════ */
.faq-cta { text-align:center; padding:32px 20px; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); border-radius:16px; margin:40px 0 20px; }
.faq-cta-title { font-size:1.1rem; font-weight:700; color:#fff; margin-bottom:8px; }
.faq-cta-text { font-size:0.88rem; color:#888; margin-bottom:18px; }
.faq-cta-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 28px; background:linear-gradient(135deg,#0088cc,#006699); color:#fff; border-radius:8px; font-size:0.9rem; font-weight:600; text-decoration:none; transition:all 0.2s; }
.faq-cta-btn:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,136,204,0.3); }
.faq-cta-btn svg { width:18px; height:18px; }

/* Empty */
.faq-empty { text-align:center; padding:60px 20px; color:#555; }
.faq-empty-icon { font-size:3rem; margin-bottom:12px; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {
    .faq-hero-title { font-size:32px; }
    .faq-hero-subtitle { font-size:16px; }
    .faq-compact-grid { grid-template-columns:1fr 1fr; }
    .faq-search-results-grid { grid-template-columns:1fr 1fr; }
    .faq-expand-inner { flex-direction:column; }
    .faq-expand-media { width:100%; max-height:none; }
    .faq-expand--zoomed .faq-expand-media { width:100%; }
    .faq-expand--zoomed .faq-media-main { min-height:320px; }
    .faq-media-main { aspect-ratio:16/9; min-height:200px; }
    .faq-media-thumbs { flex-wrap:nowrap; }
    .faq-media-th { width:56px; height:42px; }
}

@media (max-width:600px) {
    .faq-container { padding:24px 16px 40px; }
    .faq-hero { margin-bottom:32px; }
    .faq-hero-title { font-size:26px; gap:10px; }
    .faq-hero-icon { width:44px; height:44px; }
    .faq-hero-icon svg { width:24px; height:24px; }
    .faq-hero-subtitle { font-size:14px; margin-bottom:18px; }
    .faq-search-input { padding:11px 16px 11px 42px; font-size:0.9rem; }
    .faq-quick-entry { gap:6px; }
    .faq-qe-pill { padding:7px 14px; font-size:0.78rem; }
    .faq-compact-grid { grid-template-columns:1fr; }
    .faq-search-results-grid { grid-template-columns:1fr; }
    .faq-featured-grid { grid-template-columns:1fr; }
    .faq-feat-cover { height:100px; }
    .faq-expand-media { padding:12px; }
    .faq-expand-body { padding:14px; font-size:0.84rem; max-height:500px; }
    .faq-cta { padding:24px 16px; margin:28px 0 16px; }
    .faq-expand--zoomed .faq-media-main { min-height:260px; }
}