/* ============================================================
   AYURCALL — about-faq.css
   Shared styles for About Us (/about) and FAQ (/faq) pages.
   Loaded via @section Styles in each view.
   ============================================================ */

/* ================================================================
   ABOUT US
   ================================================================ */

/* ── Hero ── */
.about-hero {
    background: var(--color-primary);
    padding: var(--space-10) var(--space-8);
    display: flex;
    gap: var(--space-8);
    align-items: center;
    flex-wrap: wrap;
}
.about-hero__left { flex: 1; min-width: 280px; }
.about-hero__eyebrow {
    font-size: 9px;
    letter-spacing: 1.8px;
    color: #6EC9C6;
    font-weight: 500;
    margin-bottom: var(--space-2);
}
.about-hero__h1 {
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    line-height: 1.25;
    margin-bottom: var(--space-3);
}
.about-hero__h1 em { color: var(--color-accent); font-style: normal; }
.about-hero__sub {
    font-size: var(--font-size-body);
    color: #A8DCDA;
    line-height: 1.7;
    max-width: 460px;
}

.about-stats {
    display: flex;
    gap: var(--space-3);
    flex-shrink: 0;
}
.about-stat {
    background: rgba(255,255,255,0.1);
    border: 0.5px solid rgba(168,220,218,0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    text-align: center;
    min-width: 90px;
}
.about-stat__num   { display: block; font-size: 22px; font-weight: 600; color: var(--color-accent); }
.about-stat__label { display: block; font-size: var(--font-size-micro); color: #A8DCDA; margin-top: 3px; }

/* ── Story ── */
.about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 0.5px solid var(--color-border);
    border-bottom: 0.5px solid var(--color-border);
}
.about-story__col {
    padding: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.about-story__col:first-child { border-right: 0.5px solid var(--color-border); }
.about-story__col p {
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: 1.75;
}
.about-story__col strong { color: var(--color-text-primary); }

.about-col-title {
    font-size: var(--font-size-card);
    font-weight: 500;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.about-col-title i { font-size: 18px; color: var(--color-primary); }

.indheal-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-primary-light);
    border: 0.5px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 7px 14px;
    font-size: var(--font-size-small);
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
    width: fit-content;
    transition: background var(--transition);
}
.indheal-link:hover { background: #D3EAE9; }
.indheal-link i { font-size: 14px; }

/* ── Why choose us ── */
.why-section {
    padding: var(--space-8);
    background: var(--color-primary-light);
}
.why-section__title {
    font-size: var(--font-size-section);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-5);
    text-align: center;
}
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}
.why-card {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.why-card__icon {
    width: 42px; height: 42px;
    border-radius: var(--radius-full);
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
}
.why-card__icon i  { font-size: 20px; color: var(--color-primary); }
.why-card__title   { font-size: var(--font-size-body); font-weight: 500; color: var(--color-text-primary); }
.why-card__text    { font-size: var(--font-size-small); color: var(--color-text-secondary); line-height: 1.65; }

/* ── Contact CTA ── */
.about-contact {
    background: var(--color-primary-dark);
    padding: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}
.about-contact__text h2 { font-size: var(--font-size-card); font-weight: 500; color: #fff; margin-bottom: var(--space-1); }
.about-contact__text p  { font-size: var(--font-size-small); color: #A8DCDA; }
.about-contact__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.about-contact__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-full);
    padding: 10px 22px;
    font-size: var(--font-size-small);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition);
}
.about-contact__btn:hover { opacity: 0.9; }
.about-contact__btn--ghost {
    background: rgba(255,255,255,0.12);
    border: 0.5px solid rgba(255,255,255,0.3);
    color: #fff;
}

/* ================================================================
   FAQ
   ================================================================ */

/* ── Intro ── */
.faq-intro {
    background: var(--color-bg);
    padding: var(--space-5) var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-8);
    justify-content: space-between;
    border-bottom: 0.5px solid var(--color-border);
    flex-wrap: wrap;
}
.faq-intro__title { font-size: var(--font-size-section); font-weight: 500; color: var(--color-text-primary); margin-bottom: var(--space-1); }
.faq-intro__sub   { font-size: var(--font-size-small); color: var(--color-text-secondary); }
.faq-intro__sub a { color: var(--color-primary); font-weight: 500; text-decoration: none; }

.faq-search-wrap {
    position: relative;
    width: 320px;
}
.faq-search-wrap i {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--color-text-muted);
    pointer-events: none;
}
.faq-search-input {
    width: 100%;
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: 9px 14px 9px 38px;
    font-size: var(--font-size-small);
    font-family: var(--font-family);
    color: var(--color-text-primary);
    background: var(--color-surface);
    outline: none;
    transition: border-color var(--transition);
}
.faq-search-input:focus { border-color: var(--color-primary); }

/* ── Mobile tabs (hidden on desktop) ── */
.faq-mobile-tabs { display: none; }

/* ── Desktop 2-col layout ── */
.faq-layout {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: start;
}

/* Left nav */
.faq-nav {
    position: sticky;
    top: var(--nav-height);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    border-right: 0.5px solid var(--color-border);
    padding: var(--space-3) 0;
    scrollbar-width: thin;
}

.faq-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
    border-left: 2px solid transparent;
    cursor: pointer;
}
.faq-nav__item i     { font-size: 16px; flex-shrink: 0; }
.faq-nav__item span  { flex: 1; }
.faq-nav__item:hover { background: var(--color-bg); color: var(--color-primary); }

.faq-nav__item.active {
    color: var(--color-primary);
    font-weight: 500;
    background: var(--color-primary-light);
    border-left-color: var(--color-primary);
}

.faq-nav__count {
    font-size: var(--font-size-micro);
    background: var(--color-bg);
    color: var(--color-text-muted);
    border-radius: var(--radius-full);
    padding: 1px 7px;
    flex-shrink: 0;
}
.faq-nav__item.active .faq-nav__count {
    background: #C8E6E5;
    color: var(--color-primary);
}

/* FAQ content */
.faq-content { padding: var(--space-6) var(--space-6); }

/* Group */
.faq-group { margin-bottom: var(--space-8); scroll-margin-top: calc(var(--nav-height) + 16px); }

.faq-group__title {
    font-size: var(--font-size-card);
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: 0.5px solid var(--color-border);
}
.faq-group__title i { font-size: 18px; color: var(--color-primary); }

/* Accordion */
.faq-accordion { display: flex; flex-direction: column; gap: var(--space-2); }

.faq-item {
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color var(--transition);
}
.faq-item:hover         { border-color: var(--color-primary); }
.faq-item.faq-item--open { border-color: var(--color-primary); }

.faq-item__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4);
    font-size: var(--font-size-body);
    font-weight: 500;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: var(--font-family);
    transition: background var(--transition), color var(--transition);
}
.faq-item__question span { flex: 1; line-height: 1.4; }
.faq-item__question i    { font-size: 16px; color: var(--color-text-secondary); flex-shrink: 0; transition: transform 0.25s ease; }

.faq-item--open .faq-item__question {
    background: var(--color-primary-light);
    color: var(--color-primary);
}
.faq-item--open .faq-item__question i {
    transform: rotate(180deg);
    color: var(--color-primary);
}

.faq-item__answer {
    padding: var(--space-4) var(--space-5);
    font-size: var(--font-size-body);
    color: var(--color-text-secondary);
    line-height: 1.75;
    border-top: 0.5px solid var(--color-border);
    background: var(--color-bg);
}

/* Search highlight */
.faq-item--hidden  { display: none; }
.faq-highlight     { background: #FEF9C3; border-radius: 2px; padding: 0 2px; }

/* No results */
.faq-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-10) 0;
    color: var(--color-text-secondary);
    text-align: center;
}
.faq-no-results i { font-size: 48px; color: var(--color-border); }
.faq-no-results p { font-size: var(--font-size-body); }
.faq-no-results a { color: var(--color-primary); font-weight: 500; }

/* Bottom CTA */
.faq-bottom-cta {
    background: var(--color-primary-light);
    border-top: 0.5px solid var(--color-border);
    padding: var(--space-8);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.faq-bottom-cta p { font-size: var(--font-size-card); font-weight: 500; color: var(--color-text-primary); }
.faq-bottom-cta__actions { display: flex; gap: var(--space-3); }
.faq-bottom-cta .btn { display: inline-flex; align-items: center; gap: var(--space-2); }
.faq-bottom-cta .btn i { font-size: 16px; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .about-hero  { padding: var(--space-8) var(--space-5); }
    .why-section { padding: var(--space-6) var(--space-5); }
    .about-contact { padding: var(--space-6) var(--space-5); }
    .about-story__col { padding: var(--space-6); }
    .faq-intro   { padding: var(--space-4) var(--space-5); }
    .faq-content { padding: var(--space-5); }
}

@media (max-width: 768px) {
    /* About */
    .about-hero   { padding: var(--space-6) var(--space-4); flex-direction: column; gap: var(--space-5); }
    .about-hero__h1 { font-size: var(--font-size-card); }
    .about-stats  { gap: var(--space-2); }
    .about-stat   { min-width: 70px; padding: var(--space-3); }
    .about-story  { grid-template-columns: 1fr; }
    .about-story__col:first-child { border-right: none; border-bottom: 0.5px solid var(--color-border); padding: var(--space-5) var(--space-4); }
    .about-story__col { padding: var(--space-5) var(--space-4); }
    .why-grid     { grid-template-columns: 1fr; }
    .why-section  { padding: var(--space-5) var(--space-4); }
    .about-contact { flex-direction: column; padding: var(--space-5) var(--space-4); }

    /* FAQ — switch to mobile tabs */
    .faq-intro     { flex-direction: column; align-items: flex-start; padding: var(--space-4); gap: var(--space-3); }
    .faq-search-wrap { width: 100%; }

    .faq-mobile-tabs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
        border-bottom: 0.5px solid var(--color-border);
        background: var(--color-surface);
        position: sticky;
        top: var(--nav-height);
        z-index: var(--z-base);
    }
    .faq-mobile-tabs::-webkit-scrollbar { display: none; }
    .faq-mobile-tab {
        flex-shrink: 0;
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-small);
        color: var(--color-text-secondary);
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        cursor: pointer;
        font-family: var(--font-family);
        white-space: nowrap;
    }
    .faq-mobile-tab.active { color: var(--color-primary); font-weight: 500; border-bottom-color: var(--color-primary); }

    /* Hide desktop left nav */
    .faq-nav      { display: none; }
    .faq-layout   { grid-template-columns: 1fr; }
    .faq-content  { padding: var(--space-4); }

    /* Hide all groups except active on mobile */
    .faq-group.faq-group--hidden { display: none; }

    .faq-bottom-cta { flex-direction: column; padding: var(--space-5) var(--space-4); }
}