/**
 * ===========================================================
 * TAHIR COLLECTION — Mobile Enhancements
 * ===========================================================
 * EVERY rule in this file is wrapped in @media (max-width: 768px).
 * Desktop layout is NEVER affected by this stylesheet — it is
 * loaded last specifically so it can refine the mobile view only.
 *
 * What it does (mobile ≤768px only):
 *  1. Turns the homepage card/step strips into native swipe
 *     carousels (CSS scroll-snap — no JavaScript).
 *  2. Softer, more rounded "modern app" surfaces + shadows.
 *  3. Larger, comfortable touch targets.
 * ===========================================================
 */

@media (max-width: 768px) {

    /* ========================================================
     * 1. SWIPEABLE CAROUSELS
     * The homepage grids/strips previously stacked into one
     * long vertical column. On mobile they now scroll
     * horizontally with snap points and a peeking next card,
     * which signals "swipe me" without any JS or extra markup.
     * Targets are homepage-scoped (.home-* / #search-intent-map)
     * except .process-steps, which is improved site-wide.
     * ======================================================== */
    .home-products .grid,
    .home-industries .grid,
    .home-why .grid,
    #search-intent-map .grid,
    .process-steps {
        display: flex;
        flex-direction: row;   /* overrides components.css mobile column rule */
        flex-wrap: nowrap;
        gap: var(--space-4);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* room for the snap + the soft shadow not to clip */
        padding-bottom: var(--space-4);
        /* hide the scrollbar — the peeking card is the affordance */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .home-products .grid::-webkit-scrollbar,
    .home-industries .grid::-webkit-scrollbar,
    .home-why .grid::-webkit-scrollbar,
    #search-intent-map .grid::-webkit-scrollbar,
    .process-steps::-webkit-scrollbar {
        display: none;
    }

    /* Carousel items — fixed width so the next card peeks ~16% */
    .home-products .grid > *,
    .home-industries .grid > *,
    .home-why .grid > *,
    #search-intent-map .grid > * {
        flex: 0 0 84%;
        scroll-snap-align: start;
        min-width: 0;
    }

    /* Process steps are smaller — show ~1.5 at a time */
    .process-steps > * {
        flex: 0 0 62%;
        scroll-snap-align: start;
        min-width: 0;
    }

    /* Drop the connector line — irrelevant in carousel mode */
    .process-step:not(:last-child)::after {
        display: none;
    }

    /* ========================================================
     * 2. MODERN, SLIGHTLY-CURVED SURFACES
     * Larger corner radius + soft elevation = the "advanced
     * site" feel the brand is going for. Mobile only.
     * ======================================================== */
    .feature-card,
    .product-card,
    .app-tile,
    .process-step,
    .answer-box,
    .table-responsive {
        border-radius: var(--radius-2xl);
    }

    .feature-card,
    .product-card,
    .app-tile,
    .process-step {
        box-shadow: 0 6px 22px rgba(30, 41, 59, 0.08);
    }

    .gallery-item img {
        border-radius: var(--radius-xl);
    }

    /* Hero gets a softly curved bottom edge — premium app cue */
    .hero {
        border-bottom-left-radius: var(--radius-2xl);
        border-bottom-right-radius: var(--radius-2xl);
        overflow: hidden;
    }

    /* Subtle press feedback on tappable cards */
    .app-tile:active,
    .product-card:active,
    .feature-card:active {
        transform: scale(0.985);
        transition: transform var(--transition-fast);
    }

    /* ========================================================
     * 3. COMFORTABLE TOUCH TARGETS
     * 44px minimum tap height (accessibility standard) and a
     * friendlier button radius. Full-width primary actions in
     * the hero so the main CTAs are easy to hit.
     * ======================================================== */
    .btn {
        min-height: 44px;
        border-radius: var(--radius-lg);
    }

    .hero__actions {
        width: 100%;
    }

    .hero__actions .btn {
        flex: 1 1 100%;
    }

    /* A bit more breathing room between stacked sections */
    .section {
        padding: var(--space-12) 0;
    }

    /* ========================================================
     * 4. OVERFLOW CONTAINMENT
     * Stops wide components breaking past the viewport edge.
     * Main culprits: non-wrapping buttons with long labels,
     * and long unbreakable strings (emails / URLs) in columns.
     * ======================================================== */
    .btn {
        white-space: normal;   /* long labels wrap instead of overflowing */
        max-width: 100%;
    }

    .section-title,
    .section-subtitle,
    .feature-card__title,
    .feature-card__text,
    .product-card__title,
    .product-card__desc,
    .app-tile__title,
    .app-tile__desc,
    .answer-box__text,
    .illustration-caption,
    .footer-desc,
    .footer-links a,
    .footer-contact a,
    .utility-link,
    p, li, h1, h2, h3, h4, td, th {
        /* overflow-wrap only breaks a word when it genuinely cannot
           fit — unlike word-break, it never shatters normal words */
        overflow-wrap: break-word;
    }

    /* .feature-card is display:flex row (built for [icon][content]).
       Cards used without an icon — a bare title + paragraph as two
       flex children — crush the title into a tiny column on mobile
       ("Direct Contact" -> "Dire ct"). Stack the contents instead. */
    .feature-card {
        flex-direction: column;
        gap: var(--space-2);
    }

    /* Clip decorative absolutely-positioned shapes so they
       cannot push the layout sideways */
    .cta-section__card {
        overflow: hidden;
    }

    /* Defensive: a direct child of a container may not exceed it */
    .container > * {
        max-width: 100%;
    }

    /* ========================================================
     * 5. FOOTER — two columns instead of one tall stack
     * The 4-column desktop footer collapsed to a single very
     * long column on mobile. Two columns roughly halves its
     * height while keeping every link tappable.
     * ======================================================== */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8) var(--space-5);
    }
}