/* ============================================
   HLAPL - Mobile Optimization CSS (FINAL)
   ============================================ */

/* Mobile viewport (phones) */
@media (max-width: 768px) {
    
    /* ---------- HERO SECTION ---------- */
    .hero {
        padding: 40px 1rem 30px !important;
        flex-direction: column !important;
        text-align: center !important;
    }
    .hero h1 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
    .hero p {
        font-size: 14px !important;
    }
    .hero > div:first-child {
        min-width: auto !important;
        width: 100% !important;
    }
    .hero .hero-buttons,
    .hero > div:first-child > div:last-child {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: center !important;
    }
    .hero a {
        width: 80% !important;
        justify-content: center !important;
    }
    .hero > div:last-child {
        margin-top: 2rem !important;
    }
    
    /* ---------- TRUST BAR ---------- */
    .trust-bar,
    div[style*="border-top: 1px solid rgba(201,168,76,0.2)"] {
        padding: 12px 1rem !important;
        gap: 1rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .trust-item {
        font-size: 10px !important;
    }
    
    /* ---------- ABOUT SECTION – SINGLE COLUMN (TEXT AND STATS) ---------- */
    section[style*="background: #ffffff"] > div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: left !important;
    }
    /* Stats grid – force 1 column on mobile */
    section[style*="background: #ffffff"] .about-stats,
    section[style*="background: #ffffff"] > div > div:last-child > div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        background: transparent !important;
    }
    .stat-number-lg {
        font-size: 32px !important;
    }
    .stat-label-sm {
        font-size: 10px !important;
    }
    .about-quote {
        font-size: 18px !important;
        padding-left: 1rem !important;
        margin: 1.5rem 0 !important;
    }
    section[style*="background: #ffffff"] {
        padding: 40px 1rem !important;
    }
    
    /* ---------- PRACTICE AREAS GRID (3 columns → 1) ---------- */
    section[style*="background: #f8f7f5"] > div > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }
    .service-card {
        width: 100% !important;
    }
    
    /* ---------- COURTS SECTION (flex) ---------- */
    section[style*="padding: 60px 4rem; background: #ffffff;"] > div > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 1.5rem !important;
        align-items: center !important;
    }
    .court-item {
        text-align: center !important;
    }
    
    /* ---------- FAQ SECTION (2 columns → 1) ---------- */
    section[style*="background: #f8f7f5;"] > div > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
    }
    .faq-item {
        padding: 1rem !important;
    }
    
    /* ---------- QUICK ANSWERS SECTION (2 columns → 1) ---------- */
    section[style*="background: #f8f7f5;"] + section[style*="padding: 40px 4rem"] > div > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 0.8rem !important;
    }
    
    /* ---------- CTA SECTIONS (buttons stack) ---------- */
    section[style*="background: linear-gradient(135deg, #c9a84c"] > div[style*="display: flex"],
    section[style*="background: linear-gradient(135deg, #c9a84c"] > div > div[style*="display: flex"] {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    section[style*="background: linear-gradient(135deg, #c9a84c"] a {
        width: 80% !important;
        text-align: center !important;
    }
    
    /* ---------- GENERAL SECTION PADDING ---------- */
    section {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    section > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* ---------- BUTTONS (touch targets) ---------- */
    .btn-primary, .btn-outline, .btn-dark, button, .service-card,
    a[style*="border-radius: 40px"], a[style*="border-radius: 30px"] {
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* ---------- PREVENT HORIZONTAL SCROLL ---------- */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
    }
    img, iframe, video, table {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* ---------- FOOTER (compact, only 12 quick links) ---------- */
    .footer-premium {
        padding: 30px 1rem 20px !important;
        margin-top: 30px !important;
    }
    .footer-premium > div:first-child {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 !important;
    }
    .footer-premium p,
    .footer-premium li,
    .footer-premium a,
    .footer-premium div:not(.social-icons) {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    .footer-premium div[style*="font-size: 12px; font-weight: 600; letter-spacing: 3px"] {
        font-size: 13px !important;
        margin-bottom: 0.8rem !important;
    }
    .footer-premium div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"] {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
    .footer-premium div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"] a:nth-child(n+13) {
        display: none !important;
    }
    .footer-premium div[style*="font-size: 12px; font-weight: 600; letter-spacing: 2px; color: #c9a84c; text-align: center;"] {
        font-size: 13px !important;
        margin-bottom: 0.5rem !important;
    }
    .footer-premium div[style*="display: flex; gap: 1.2rem; align-items: center;"] {
        justify-content: center !important;
        gap: 1.2rem !important;
        margin: 0.5rem 0 !important;
    }
    .footer-premium .social-icon,
    .footer-premium a[href*="linkedin"],
    .footer-premium a[href*="facebook"],
    .footer-premium a[href*="x.com"],
    .footer-premium a[href*="instagram"] {
        font-size: 22px !important;
        padding: 4px !important;
    }
    .footer-premium a[href="/contact.php"][style*="display: block; text-align: center;"] {
        width: 100% !important;
        padding: 8px !important;
        font-size: 13px !important;
    }
    .footer-premium .copyright,
    .footer-premium > div:last-child p {
        font-size: 9px !important;
        text-align: center !important;
        padding: 0.5rem 0 !important;
    }
    .footer-premium ul {
        margin-bottom: 0 !important;
    }
    .footer-premium li {
        margin-bottom: 5px !important;
    }
}

/* Tablet view (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    section[style*="background: #f8f7f5"] > div > div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Keep About section as two columns on tablet (text left, stats right) */
    section[style*="background: #ffffff"] > div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr 1fr !important;
    }
    /* Stats remain 2x2 on tablet */
    section[style*="background: #ffffff"] .about-stats,
    section[style*="background: #ffffff"] > div > div:last-child > div[style*="display: grid"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .footer-premium > div:first-child {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
        padding: 0 2rem !important;
    }
    .footer-premium {
        padding: 50px 2rem 30px !important;
    }
    .footer-premium div[style*="grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Accessibility – improved contrast (kept from original) */
.content-box p, .service-card p, .stat-label {
    color: #4a4a4a !important;
}
.hero-section p {
    color: rgba(255,255,255,0.85) !important;
}
.btn-primary, .btn-dark {
    font-weight: 700 !important;
}