/*
 * QARAR B2B — Mobile Typography Rebuild V1
 * Scope: mobile only (<= 767px)
 * Purpose: rebuild hierarchy, readability and rhythm without changing desktop/tablet.
 */

@media (max-width: 767px) {

    /* =========================================================
       01. GLOBAL MOBILE TYPE SCALE
       ========================================================= */
    :root {
        --m-type-eyebrow: 10.5px;
        --m-type-body: 13.5px;
        --m-type-body-lg: 14px;
        --m-type-small: 11.5px;
        --m-type-control: 13.5px;

        --m-type-hero: clamp(18px, 5.2vw, 21px);
        --m-type-section: clamp(21px, 6vw, 25px);
        --m-type-form-title: 18px;
        --m-type-card-title: 16px;
        --m-type-station-title: 19px;
        --m-type-stat: clamp(36px, 10vw, 42px);
        --m-type-ai-title: clamp(21px, 6vw, 24px);
        --m-type-cta: clamp(21px, 6.2vw, 24px);

        --m-leading-tight: 1.38;
        --m-leading-heading: 1.45;
        --m-leading-body: 1.85;
    }

    html,
    body {
        font-size: 15px;
    }

    body {
        line-height: var(--m-leading-body);
    }

    /* Keep the mobile experience visually consistent in Cairo. */
    .qarar-home-v2,
    .ai-assistant-section,
    .qarar-gallery-section {
        font-family: "Cairo", Arial, sans-serif;
    }


    /* =========================================================
       02. HEADER / MOBILE MENU
       ========================================================= */
    .main-navigation a {
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.55;
    }

    .mobile-menu-toggle {
        font-size: 17px;
    }


    /* =========================================================
       03. SHARED SECTION HEADINGS
       ========================================================= */
    .section-heading {
        margin-bottom: 20px;
    }

    .section-heading h2 {
        max-width: 100%;
        margin-bottom: 8px;
        font-size: var(--m-type-section);
        font-weight: 700;
        line-height: var(--m-leading-heading);
        letter-spacing: 0;
        text-wrap: balance;
    }

    .section-heading p:last-child {
        max-width: 100%;
        font-size: var(--m-type-body);
        line-height: var(--m-leading-body);
        text-wrap: pretty;
    }

    .eyebrow {
        margin-bottom: 6px;
        font-size: var(--m-type-eyebrow);
        font-weight: 700;
        line-height: 1.55;
        letter-spacing: 0;
    }


    /* =========================================================
       04. HERO
       Main title intentionally compact on mobile.
       Description intentionally more readable.
       ========================================================= */
    .hero-copy {
        padding-inline: 18px;
    }

    .hero-copy h1 {
        max-width: 100%;
        margin-bottom: 12px;
        font-size: var(--m-type-hero);
        font-weight: 700;
        line-height: var(--m-leading-tight);
        letter-spacing: 0;
        text-wrap: balance;
    }

    .hero-description {
        max-width: 100%;
        margin-bottom: 16px;
        font-size: var(--m-type-body-lg);
        font-weight: 400;
        line-height: 1.9;
        text-wrap: pretty;
    }

    .quick-points li {
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.7;
    }


    /* =========================================================
       05. PARTICIPATION FORM
       ========================================================= */
    .form-card__heading .eyebrow {
        font-size: 10.5px;
    }

    .form-card__heading h2 {
        margin-bottom: 7px;
        font-size: var(--m-type-form-title);
        font-weight: 700;
        line-height: 1.5;
    }

    .form-card__heading > p:last-child {
        margin-bottom: 17px;
        font-size: 12.5px;
        line-height: 1.75;
    }

    .form-step legend {
        margin-bottom: 15px;
    }

    .form-step legend small {
        font-size: 10.5px;
        line-height: 1.55;
    }

    .form-step legend strong {
        margin: 3px 0;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
    }

    .form-step legend span {
        font-size: 12.5px;
        line-height: 1.75;
    }

    .field label,
    .selection-label,
    .consent-row {
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.6;
    }

    .field input,
    .field select,
    .field textarea {
        font-size: var(--m-type-control);
        line-height: 1.55;
    }

    .choice-card span,
    .station-choice {
        font-size: 12.5px;
        line-height: 1.6;
    }

    .field-error,
    .field small,
    .form-note {
        font-size: 11px;
        line-height: 1.65;
    }

    .developer-form .button,
    .form-actions .button,
    .form-card .button {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
    }


    /* =========================================================
       06. WHY PARTICIPATE CARDS
       ========================================================= */
    .card-number {
        font-size: 30px;
        line-height: 1;
    }

    .benefit-card h3 {
        margin-top: 25px;
        margin-bottom: 6px;
        font-size: var(--m-type-card-title);
        font-weight: 700;
        line-height: 1.55;
    }

    .benefit-card p {
        font-size: 12.8px;
        line-height: 1.8;
    }


    /* =========================================================
       07. STATIONS
       ========================================================= */
    .station-index {
        font-size: 36px;
        line-height: 1;
    }

    .station-card h3 {
        margin-top: 18px;
        margin-bottom: 4px;
        font-size: var(--m-type-station-title);
        font-weight: 700;
        line-height: 1.45;
    }

    .station-date {
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.6;
    }

    .station-venue {
        font-size: 11.5px;
        line-height: 1.7;
    }

    .station-card .button {
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.5;
    }


    /* =========================================================
       08. COMPANY BENEFITS
       ========================================================= */
    .company-benefits li {
        font-size: 12.8px;
        font-weight: 600;
        line-height: 1.75;
    }


    /* =========================================================
       09. STATISTICS
       ========================================================= */
    .result-card strong {
        font-family: "Cairo", Arial, sans-serif;
        font-size: var(--m-type-stat);
        font-weight: 800;
        line-height: 1.05;
    }

    .result-card span {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
    }

    .result-card p {
        margin-top: 5px;
        font-size: 11.5px;
        line-height: 1.65;
    }


    /* =========================================================
       10. AI ASSISTANT
       ========================================================= */
    .ai-assistant-eyebrow {
        font-size: var(--m-type-eyebrow);
        line-height: 1.55;
    }

    .ai-assistant-english {
        font-size: 10.5px;
        line-height: 1.5;
    }

    .ai-assistant-content h2 {
        max-width: 100%;
        margin-bottom: 10px;
        font-size: var(--m-type-ai-title);
        font-weight: 700;
        line-height: 1.48;
        letter-spacing: 0;
        text-wrap: balance;
    }

    .ai-assistant-description {
        margin-bottom: 17px;
        font-size: 13.5px;
        line-height: 1.85;
    }

    .ai-assistant-benefits li {
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.7;
    }

    .ai-assistant-cta {
        font-size: 13px;
        line-height: 1.5;
    }

    .ai-chat-demo__head strong {
        font-size: 12.5px;
    }

    .ai-chat-demo__head small {
        font-size: 10px;
    }

    .ai-chat-bubble {
        font-size: 11.5px;
        line-height: 1.7;
    }

    .ai-chat-demo__chips span {
        font-size: 9.5px;
    }

    .ai-chat-demo__composer,
    .ai-chat-demo__inline-cta {
        font-size: 10.5px;
    }


    /* =========================================================
       11. GALLERY
       ========================================================= */
    .qarar-gallery-heading h2 {
        font-size: var(--m-type-section);
        line-height: var(--m-leading-heading);
    }

    .qarar-gallery-heading p {
        font-size: 13px;
        line-height: 1.8;
    }

    .qarar-gallery__filter {
        font-size: 10.5px;
        font-weight: 700;
    }

    .qarar-gallery__caption strong {
        font-size: 17px;
        line-height: 1.45;
    }

    .qarar-gallery__caption small {
        font-size: 10.5px;
        line-height: 1.55;
    }

    .qarar-gallery__counter {
        font-size: 10.5px;
    }

    .qarar-gallery__counter strong {
        font-size: 18px;
    }


    /* =========================================================
       12. PARTNERS
       ========================================================= */
    .partners-section .section-heading h2 {
        font-size: var(--m-type-section);
    }


    /* =========================================================
       13. FAQ
       ========================================================= */
    .faq-item button {
        min-height: 56px;
        font-size: 13.5px;
        font-weight: 700;
        line-height: 1.65;
    }

    .faq-panel,
    .faq-panel p {
        font-size: 13px;
        line-height: 1.85;
    }


    /* =========================================================
       14. FINAL CTA
       ========================================================= */
    .final-cta .eyebrow {
        font-size: 10px;
    }

    .final-cta h2 {
        max-width: 100%;
        margin-bottom: 8px;
        font-size: var(--m-type-cta);
        font-weight: 700;
        line-height: 1.48;
        letter-spacing: 0;
        text-wrap: balance;
    }

    .final-cta p {
        max-width: 100%;
        font-size: 13.5px;
        line-height: 1.85;
        text-wrap: pretty;
    }

    .final-cta .button {
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
    }


    /* =========================================================
       15. FOOTER
       ========================================================= */
    .footer-grid h2 {
        margin-bottom: 9px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
    }

    .footer-grid > div:first-child > p,
    .footer-grid li,
    .footer-grid a {
        font-size: 12px;
        line-height: 1.8;
    }

    .footer-bottom {
        font-size: 10.5px;
        line-height: 1.7;
    }
}


/* Extra-small phones */
@media (max-width: 360px) {

    .hero-copy h1 {
        font-size: 18px;
    }

    .hero-description {
        font-size: 13.5px;
    }

    .section-heading h2,
    .qarar-gallery-heading h2,
    .partners-section .section-heading h2 {
        font-size: 20.5px;
    }

    .form-card__heading h2 {
        font-size: 17.5px;
    }

    .ai-assistant-content h2 {
        font-size: 21px;
    }

    .final-cta h2 {
        font-size: 21px;
    }

    .result-card strong {
        font-size: 35px;
    }
}