/* ============================================================
   RESPONSIVE CSS
   @package AlQuraish
   ============================================================ */

/* --- Tablet: 768px–1199px --- */
@media (max-width: 1199px) {
    .aq-stats__grid { grid-template-columns: repeat(3, 1fr); }
    .aq-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .aq-intro__grid { gap: 2.5rem; }
    .aq-why__grid { gap: 3rem; }
    .aq-services-grid { grid-template-columns: repeat(2, 1fr); }
    .aq-services-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .aq-products-grid { grid-template-columns: repeat(2, 1fr); }
    .aq-clients-grid { grid-template-columns: repeat(3, 1fr); }
    .aq-team-grid { grid-template-columns: repeat(2, 1fr); }
    .aq-contact-strip__grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Mobile: below 768px --- */
@media (max-width: 767px) {

    /* Topbar */
    .aq-topbar { display: none; }

    /* Header */
    .aq-header__inner { height: 64px; }
    .aq-nav { display: none; }
    .aq-header__cta { display: none; }
    .aq-mobile-toggle { display: flex; }

    /* Hero */
    .aq-hero { min-height: 100svh; padding: 6rem 0 4rem; }
    .aq-hero__title { font-size: 2.5rem; }
    .aq-hero__subtitle { font-size: 1rem; }
    .aq-hero__actions { flex-direction: column; }
    .aq-hero__actions .btn { width: 100%; justify-content: center; }

    /* Stats */
    .aq-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .aq-stat__number { font-size: 2.25rem; }

    /* Intro */
    .aq-intro { padding: 4rem 0; }
    .aq-intro__grid { grid-template-columns: 1fr; gap: 2rem; }
    .aq-intro__image { display: none; }

    /* Products */
    .aq-products-grid { grid-template-columns: 1fr; }
    .aq-filter-tabs { gap: .25rem; }
    .aq-filter-tab { font-size: .75rem; padding: .4rem .875rem; }

    /* Services */
    .aq-services-grid,
    .aq-services-grid--3 { grid-template-columns: 1fr; }

    /* Why Us */
    .aq-why { padding: 4rem 0; }
    .aq-why__grid { grid-template-columns: 1fr; gap: 2rem; }
    .aq-why__features { grid-template-columns: 1fr; }

    /* Clients */
    .aq-clients-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

    /* Team */
    .aq-team-grid { grid-template-columns: 1fr; }

    /* Contact strip */
    .aq-contact-strip__grid { grid-template-columns: 1fr; gap: 1.25rem; }

    /* Footer */
    .aq-footer { padding: 3rem 0 0; }
    .aq-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
    .aq-footer__bottom-inner { flex-direction: column; text-align: center; }

    /* Pre-footer */
    .aq-prefooter__inner { flex-direction: column; text-align: center; }
    .aq-prefooter__text { font-size: 1.125rem; }

    /* Page hero */
    .aq-page-hero { padding: 4rem 0 3rem; }
    .aq-page-hero__title { font-size: 2rem; }

    /* CTA Banner */
    .aq-cta-banner { padding: 4rem 0; }
    .aq-cta-banner__actions { flex-direction: column; align-items: center; }
    .aq-cta-banner__actions .btn { width: 100%; max-width: 320px; justify-content: center; }

    /* Single product */
    .aq-product-single__grid { grid-template-columns: 1fr; }

    /* Forms */
    .aq-form-row { grid-template-columns: 1fr; }

    /* Tables — horizontal scroll */
    .aq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Org chart */
    .aq-org-level { flex-direction: column; align-items: center; }
    .aq-org-node { min-width: 80%; }

    /* Section padding */
    .section-padding { padding: 4rem 0; }
    .section-padding--sm { padding: 2.5rem 0; }

    /* Container padding */
    .container { padding: 0 1rem; }
}

/* --- Small mobile: below 480px --- */
@media (max-width: 479px) {
    .aq-stats__grid { grid-template-columns: 1fr 1fr; }
    .aq-clients-grid { grid-template-columns: 1fr; }
    .aq-hero__title { font-size: 2rem; }
    .aq-footer__col:nth-child(3),
    .aq-footer__col:nth-child(4) { display: block; }
}

/* --- Large desktop --- */
@media (min-width: 1400px) {
    .aq-stats__grid { grid-template-columns: repeat(5, 1fr); }
    .aq-hero__title { font-size: 5.5rem; }
}