/* QAFlow - Homepage hero section (questions.php, IS_HOMEPAGE only)
   Mobile-first: base rules target small screens, larger layouts are
   added via min-width media queries. All colors reuse the site's own
   --primary/--primary-dark theme variables (set in includes/header.php
   from admin-configured settings), never hardcoded brand colors. */

.hero-section {
    background: var(--card-bg, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 24px;
    overflow: hidden;
}

/* Spacing from the navbar above, applied to the whole row (not just the
   hero card) so the hero and the sidebar card next to it stay aligned
   at the same starting height. */
.row.hero-row {
    margin-top: 20px;
}

@media (min-width: 768px) {
    .row.hero-row {
        margin-top: 28px;
    }
}

.hero-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-content {
    min-width: 0;
}

.hero-title {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 10px;
    color: var(--text-primary);
}

.hero-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 18px;
}

.hero-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
    margin-bottom: 20px;
}

.hero-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: var(--text-primary);
}

.hero-feature-item i {
    color: var(--success, #22c55e);
    font-size: 1rem;
    flex-shrink: 0;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: .95rem;
    text-decoration: none;
    transition: opacity .15s, transform .15s;
    width: 100%;
}

.hero-btn:hover {
    opacity: .92;
    transform: translateY(-1px);
}

.hero-btn-primary {
    background: var(--primary);
    color: #fff;
}

.hero-btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 1.5px solid var(--primary);
}

.hero-illustration {
    display: none;
}

.hero-stats {
    display: none;
}

/* Tablet and up: illustration + two-column buttons */
@media (min-width: 768px) {
    .hero-section {
        padding: 36px 32px;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.05rem;
    }

    .hero-buttons {
        flex-direction: row;
    }

    .hero-btn {
        width: auto;
        padding: 13px 26px;
    }
}

/* Desktop: side-by-side content + illustration, stats bar visible.
   Triggered at 1200px (not the usual 992px) because on the homepage
   this section lives inside the col-lg-8 main content column
   alongside the sidebar, not full page width, so it needs more
   viewport room before its own column is wide enough for this layout. */
@media (min-width: 1200px) {
    .hero-main {
        flex-direction: row;
        align-items: center;
        gap: 32px;
    }

    .hero-content {
        flex: 1 1 58%;
    }

    .hero-illustration {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        flex: 1 1 42%;
        min-height: 260px;
    }

    .hero-illustration-bg {
        position: absolute;
        inset: 8%;
        border-radius: 50%;
        background:
            radial-gradient(circle, var(--primary) 0 2px, transparent 2px) 0 0 / 24px 24px,
            var(--body-bg, #f8fafc);
        opacity: .6;
    }

    .hero-illustration-face {
        position: relative;
        width: 140px;
        height: 140px;
        border-radius: 28px;
        background: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 4rem;
        box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .25);
    }

    .hero-orbit-icon {
        position: absolute;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--card-bg, #fff);
        border: 1px solid var(--border-color, #e5e7eb);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        color: var(--primary);
        box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .15);
    }

    .hero-orbit-1 { top: 6%; left: 12%; }
    .hero-orbit-2 { top: 10%; right: 10%; }
    .hero-orbit-3 { top: 46%; right: 2%; }
    .hero-orbit-4 { bottom: 10%; right: 16%; }
    .hero-orbit-5 { bottom: 8%; left: 8%; }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 16px;
        margin-top: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--border-color, #e5e7eb);
    }

    .hero-stat {
        text-align: center;
    }

    .hero-stat-value {
        font-size: 1.35rem;
        font-weight: 800;
        color: var(--text-primary);
    }

    .hero-stat-label {
        font-size: .78rem;
        color: var(--text-secondary);
        margin-top: 2px;
    }
}

/* Between tablet and desktop: keep stats visible but in 3 columns */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid var(--border-color, #e5e7eb);
    }

    .hero-stat {
        text-align: center;
    }

    .hero-stat-value {
        font-size: 1.2rem;
        font-weight: 800;
        color: var(--text-primary);
    }

    .hero-stat-label {
        font-size: .75rem;
        color: var(--text-secondary);
        margin-top: 2px;
    }
}