/**
 * Module: FAQ Variant Composition Layer
 * Target: src/core_apps/frontend/static/frontend/themes/_shared/sections/faq/faq-variants.css
 *
 * Variant Identity Rules:
 *   default    → Centered narrow accordion, brand border on open, chevron rotation
 *   split-grid → Side-by-side header + accordion, brand accent on header column
 *   cards      → Static card grid, hover elevation, immediate Q&A display
 *
 * Specifications (HMS-Grade):
 * - Rule A: Zero sibling positional dependence
 * - Rule B: Rigid Static Weight Budget (Limit: 10 KB uncompressed)
 * - Rule C: Absolute scoping containment
 * - Rule D: Optimized to complement native SEO-compliant <details> anchors
 */


/* =============================================================================
   0. SHARED BASE
   ============================================================================= */

.page-home .home-composer .section-faq {
    position: relative;
    width: 100%;
    padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
}

/* Global Progressive Details Container — suppress browser artifacts */
.page-home .home-composer .section-faq details {
    margin-bottom: 0;
    background-color: var(--background-tertiary, #ffffff);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 3px solid transparent;
    transition: background-color var(--transition-fast, 0.2s ease), border-color var(--transition-fast, 0.2s ease);
}

.page-home .home-composer .section-faq details[open] {
    border-left-color: var(--brand-primary-color);
    background-color: color-mix(in srgb, var(--brand-primary-color) 3%, var(--background-tertiary, #ffffff));
}

.page-home .home-composer .section-faq details:last-child {
    border-bottom: none;
}

.page-home .home-composer .section-faq summary {
    padding: clamp(1rem, 2vw, 1.25rem) clamp(1rem, 2vw, 1.5rem);
    cursor: pointer;
    font-family: var(--font-family-primary);
    font-weight: 600;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    color: var(--color-secondary, #111);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-home .home-composer .section-faq summary::-webkit-details-marker {
    display: none;
}

.page-home .home-composer .section-faq .faq-content-inner,
.page-home .home-composer .section-faq .faq-default__answer {
    padding: 0 clamp(1rem, 2vw, 1.5rem) clamp(1rem, 2vw, 1.25rem);
}

.page-home .home-composer .section-faq .faq-content-inner p,
.page-home .home-composer .section-faq .faq-default__answer p {
    font-family: var(--font-family-primary);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    color: var(--text-primary, #555);
    line-height: 1.75;
    margin: 0;
}


/* =============================================================================
   1. VARIANT: DEFAULT — Centered Narrow Accordion
   
   Design: Narrow centered column (max 800px), brand-colored left border
   on open state, smooth chevron rotation, generous spacing.
   ============================================================================= */

.page-home .home-composer .section-faq--default .faq-default__container {
    max-width: 800px;
    margin: 0 auto;
}

/* Header — centered above accordion */
.page-home .home-composer .section-faq--default .faq-default__header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.page-home .home-composer .section-faq--default .faq-default__title {
    font-family: var(--font-family-secondary, serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    color: var(--color-secondary, #111);
    margin: 0 0 0.5rem 0;
}

.page-home .home-composer .section-faq--default .faq-default__subtitle {
    font-family: var(--font-family-primary);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    color: var(--text-primary, #666);
    margin: 0;
}

/* Accordion List */
.page-home .home-composer .section-faq--default .faq-default__list {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Individual Item */
.page-home .home-composer .section-faq--default .faq-default__item {
    /* Styles now inherited from global details */
}

/* Open State — brand border on left */
.page-home .home-composer .section-faq--default .faq-default__item[open] {
    /* Styles now inherited from global details */
}

/* Chevron rotation */
.page-home .home-composer .section-faq--default .faq-default__icon {
    font-size: 0.75rem;
    color: var(--brand-primary-color);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.page-home .home-composer .section-faq--default .faq-default__item[open] .faq-default__icon {
    transform: rotate(180deg);
}

.page-home .home-composer .section-faq--default .faq-default__question-text {
    flex: 1;
}


/* =============================================================================
   2. VARIANT: SPLIT-GRID — Side-by-Side Header + Accordion
   
   Design: Two-column layout with static intro text left, accordion right.
   Brand accent bar on the intro column.
   ============================================================================= */

.page-home .home-composer .section-faq--split-grid .split-faq-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    padding: 0 var(--spacing-md, 1rem);
    max-width: 1100px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .page-home .home-composer .section-faq--split-grid .split-faq-wrapper {
        grid-template-columns: 1fr 2fr;
    }
}

/* Intro Pane — brand accent */
.page-home .home-composer .section-faq--split-grid .faq-intro-pane {
    position: relative;
    padding-left: clamp(1rem, 2vw, 1.5rem);
}

.page-home .home-composer .section-faq--split-grid .faq-intro-pane::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--brand-primary-color);
    border-radius: 2px;
}

/* Override section-header alignment for split-grid sidebar layout */
.page-home .home-composer .section-faq--split-grid .faq-intro-pane .section-header {
    align-items: flex-start;
    text-align: left;
    padding: 0;
    margin: 0;
}

.page-home .home-composer .section-faq--split-grid .faq-intro-pane .section-header__subtitle {
    text-align: left;
}


/* Accordion Pane */
.page-home .home-composer .section-faq--split-grid .faq-list-pane {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Chevron for split-grid (reuse icon if present) */
.page-home .home-composer .section-faq--split-grid details[open] summary i {
    transform: rotate(180deg);
}

.page-home .home-composer .section-faq--split-grid summary i {
    transition: transform 0.3s ease;
}


/* =============================================================================
   3. VARIANT: CARDS — Static Card Grid
   
   Design: Multi-column card array with all Q&A visible immediately.
   Hover elevation effect. No accordion interaction.
   ============================================================================= */

.page-home .home-composer .section-faq--cards .container-default {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 2.5rem);
}

.page-home .home-composer .section-faq--cards .faq-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    padding: 0 var(--spacing-md, 1rem);
}

.page-home .home-composer .section-faq--cards .faq-card-item {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--background-tertiary, #ffffff);
    border-radius: var(--border-radius-secondary, 0.75rem);
    transition: transform var(--transition-smooth, 0.35s ease), box-shadow var(--transition-smooth, 0.35s ease);
}

.page-home .home-composer .section-faq--cards .faq-card-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-elevated, 0 10px 15px -3px rgba(0, 0, 0, 0.08));
}

.page-home .home-composer .section-faq--cards .faq-card-item h3 {
    font-family: var(--font-family-primary);
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    font-weight: 600;
    color: var(--color-secondary, #111);
    margin: 0 0 0.5rem 0;
    line-height: 1.35;
}

.page-home .home-composer .section-faq--cards .faq-card-item div {
    font-family: var(--font-family-primary);
    font-size: clamp(0.88rem, 1vw, 0.95rem);
    color: var(--text-primary, #555);
    line-height: 1.7;
}

/* Cards heading now handled by _shared/base/section-header.css */