/* ================================================================
   SAS Theme — Mobile Fix V700.0
   ────────────────────────────────────────────────────────────────
   يصلح ضيق المحتوى علي الموبايل (single column + reduced padding)
   + يمنع تداخل FABs (Whatsapp/Call) مع نهاية الصفحة
   + يصلح duplicate areas grid via filter gating
   التحميل: بعد main.css مباشرة
================================================================ */

/* ── 1. Front-7 Tiles (الصفحة الرئيسية) ─────────────────────── */
@media (max-width: 900px) {
    .lw-grid,
    .lw-grid-4,
    .lw-grid-3 {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 12px 0 32px !important;
    }
    .lw-spotlight-card,
    .lw-svc-card {
        padding: 22px 18px !important;
        border-radius: 18px !important;
    }
    .lw-spotlight-card h3,
    .lw-svc-title { font-size: 1.15rem !important; line-height: 1.5 !important; }
    .lw-spotlight-card p,
    .lw-svc-desc { font-size: 0.98rem !important; line-height: 1.75 !important; }
    .lw-icon-box { font-size: 2rem !important; margin-bottom: 12px !important; }
    .lw-stat-card { padding: 24px 14px !important; }
    .lw-stat-num { font-size: 2.6rem !important; }
    .lw-section-header { margin-bottom: 28px !important; }
    .lw-section-header h2 { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
    .lw-section-header p { font-size: 1.02rem !important; }
}

/* ── 2. Single Service Page (V15 / Imperial) ───────────────── */
@media (max-width: 768px) {
    .sv-wrap { padding: 0 14px !important; }
    .imp-stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .imp-stats-grid .stat-card,
    .imp-stats-grid > * { padding: 16px 10px !important; }
    .sv-cities-pills { gap: 6px !important; padding: 8px !important; }
    .sv-cities-pills a { padding: 8px 12px !important; font-size: 12.5px !important; }
    .imp-main-content { padding: 0 !important; }
    .sv-cta-box { padding: 22px 16px !important; border-radius: 18px !important; }
    .sv-cta h2 { font-size: 1.4rem !important; }
    .sv-btn { padding: 12px 18px !important; font-size: 14px !important; }
}

/* ── 3. Plugin Silo Matrix (V57 — service pages) ───────────── */
@media (max-width: 768px) {
    .sas-silo-matrix,
    .titan-regions-window {
        padding: 14px !important;
        gap: 8px !important;
        border-radius: 16px !important;
    }
    .emirate-section,
    .sas-city-block {
        padding: 16px 12px !important;
        margin: 12px 0 !important;
        border-radius: 14px !important;
    }
    .areas-pills,
    .sas-area-pills {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        display: grid !important;
    }
    .area-pill,
    .sas-area-pill {
        padding: 9px 10px !important;
        font-size: 12px !important;
        min-height: 40px !important;
        border-radius: 10px !important;
    }
}

/* ── 4. Footer + Generic Cards ─────────────────────────────── */
@media (max-width: 768px) {
    .footer-glass-box { padding: 28px 16px !important; }
    .footer-grid { gap: 24px !important; }
    .footer-title { font-size: 16px !important; margin-bottom: 14px !important; }
    .sas-tag-footer { padding: 6px 11px !important; font-size: 11.5px !important; }
    .sas-cards { grid-template-columns: 1fr !important; gap: 14px !important; }
    .container { padding: 0 14px !important; }
}

/* ── 5. FABs (Whatsapp + Call) — منع التداخل علي الجوال ──── */
@media (max-width: 768px) {
    .sas-glass-fab,
    .fab-wa,
    .fab-cl {
        width: 48px !important;
        height: 48px !important;
        bottom: 14px !important;
    }
    .fab-wa { right: 12px !important; }
    .fab-cl { left: 12px !important; }
    body { padding-bottom: 70px !important; } /* مساحة آمنة أسفل المحتوي */
}

/* ── 6. Hero/Breadcrumbs/Headings ──────────────────────────── */
@media (max-width: 768px) {
    .sv-hero,
    .imp-hero {
        padding: 28px 16px !important;
        border-radius: 18px !important;
        margin: 14px 0 !important;
    }
    .sv-hero h1,
    .imp-hero h1 { font-size: 1.7rem !important; line-height: 1.3 !important; }
    .sv-hero p,
    .imp-hero p { font-size: 0.98rem !important; }
    h1 { font-size: 1.7rem !important; line-height: 1.3 !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.18rem !important; }
}

/* ── 7. Word break (Arabic long titles) ────────────────────── */
.lw-spotlight-card h3,
.lw-svc-title,
.sv-hero h1,
.emirate-section h2,
.emirate-section h3,
.area-pill,
.sas-area-pill {
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: none;
}