/* ═══════════════════════════════════════════════════════════════════
   SPL — GLOBAL MOBILE RESPONSIVE FIX
   Applies to all pages: index, about, services, projects, contact,
   certifications, testimonial, team, faq, blog, sitemap
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. BASE BOX MODEL — prevent horizontal overflow on every page ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    max-width: 100%;
}

img, video, iframe, embed, object {
    max-width: 100%;
}

/* ── 2. CONTAINER — never overflow on small screens ── */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ══════════════════════════════════════════════════
   BREAKPOINT ≤ 1024px — Tablet landscape
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Hero stats pills horizontal padding */
    .hero-stats-pills {
        padding: 0 20px;
        justify-content: center;
    }

    /* Feature & blog 3-col → 2-col */
    .features-grid,
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Footer 4-col → 2-col */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    /* About 2-col grid */
    .about-grid {
        gap: 50px;
    }
}

/* ══════════════════════════════════════════════════
   BREAKPOINT ≤ 900px — Tablet portrait / large phone
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* ── Navigation ── */
    .spl-nav-links {
        display: none !important;
    }

    .spl-hamburger {
        display: flex !important;
    }

    .spl-mobile-menu {
        display: block !important;
    }

    .spl-menu-overlay {
        display: block !important;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.35s;
    }

    .spl-menu-overlay.open {
        opacity: 1;
        pointer-events: all;
    }

    /* ── Hero section ── */
    .spl-hero {
        padding-bottom: 60px;
        min-height: 90vh;
    }

    .spl-hero-content {
        padding: 0 20px;
        padding-bottom: 80px;
        max-width: 100%;
    }

    .spl-hero-title {
        font-size: clamp(22px, 6vw, 34px);
    }

    .hero-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .hero-stats-pills {
        padding: 0 10px;
        gap: 8px;
    }

    .hero-stats-card {
        padding: 24px 18px;
    }

    /* ── About grid ── */
    .about-grid {
        grid-template-columns: 1fr;
        gap: 36px;
        text-align: center;
    }

    /* ── Feature/blog grids ── */
    .features-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* ── Projects extended ── */
    .projects-grid-extended {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* ── Services content ── */
    .service-content-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .service-tab-btn {
        flex: 0 0 auto;
        padding: 16px 20px;
        font-size: 14px;
    }

    /* ── Section vertical padding ── */
    .about-section,
    .services-section,
    .contact-section,
    .stem-section {
        padding: 60px 0;
    }

    .project-detail-section {
        padding: 50px 0;
    }

    /* ── Project detail grid ── */
    .project-detail-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .project-info h2 {
        font-size: 26px;
    }

    .project-description {
        font-size: 16px;
    }

    /* ── Stem grid ── */
    .stem-grid {
        grid-template-columns: 1fr;
    }

    .stem-image {
        min-height: 250px;
    }

    /* ── Contact grid ── */
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /* ── STEM content ── */
    .stem-content {
        padding: 28px;
    }
}

/* ══════════════════════════════════════════════════
   BREAKPOINT ≤ 768px — Mobile landscape / large phone
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Global section padding ── */
    section,
    .about-section,
    .services-section,
    .contact-section,
    .stem-section,
    .project-detail-section {
        padding: 44px 0;
    }

    /* ── Typography scale-down ── */
    h1 { font-size: clamp(24px, 7vw, 38px); }
    h2 { font-size: clamp(20px, 5vw, 30px); }
    h3 { font-size: clamp(17px, 4vw, 24px); }

    .section-title,
    .section-header h2 {
        font-size: clamp(22px, 5.5vw, 32px) !important;
    }

    /* ── Container padding ── */
    .container {
        padding: 0 16px;
    }

    /* ── Grids collapse to 1 col ── */
    .features-grid,
    .blog-grid,
    .projects-grid-extended,
    .about-grid,
    .project-detail-grid,
    .stem-grid,
    .contact-grid,
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    /* ── Footer ── */
    .footer-grid {
        gap: 28px !important;
    }

    .site-footer {
        padding: 50px 0 20px;
    }

    .footer-col h4 {
        margin-bottom: 14px;
        font-size: 15px;
    }

    /* ── Hero ── */
    .spl-hero-content {
        padding-bottom: 60px;
    }

    .hero-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-stat-val {
        font-size: 30px;
    }

    .hero-stats-pills {
        padding: 0;
        justify-content: center;
    }

    .hero-award-badge {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 12px 18px;
    }

    /* ── Project visuals ── */
    .gallery-thumbs {
        gap: 10px;
    }

    .gallery-thumb {
        height: 80px;
    }

    .yt-video-wrap {
        border-radius: 14px !important;
    }

    /* ── Details box ── */
    .details-box {
        padding: 20px;
    }

    /* ── Project tabs (projects page filter bar) ── */
    .project-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .project-tab-btn {
        flex-shrink: 0;
        font-size: 13px;
        padding: 8px 14px;
    }

    /* ── Service tab nav ── */
    .services-tab-nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .service-tab-content {
        padding: 30px 20px;
    }

    /* ── Form rows ── */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* ── Chat widget ── */
    .spl-chat-window {
        width: calc(100vw - 30px);
        right: -10px;
    }

    /* ── Portfolio cards ── */
    .spl-portfolio-grid {
        grid-template-columns: 1fr !important;
    }

    .spl-portfolio-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* ── Capabilities grid ── */
    .capabilities-grid {
        grid-template-columns: 1fr;
    }

    /* ── Luxury testimonials ── */
    .lt-cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Blog grid ── */
    .blog-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Team grid ── */
    .team-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    /* ── Certifications grid ── */
    .cert-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
    }

    /* ── Stats / trust bar ── */
    .stats-row,
    .trust-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* ── Partners logos ── */
    .partner-logo {
        height: 50px;
        margin: 0 20px;
    }

    /* ── Breadcrumb pages — hero padding ── */
    body.spl-page .spl-page-hero,
    .page-hero {
        padding: 40px 0 !important;
        min-height: unset !important;
    }

    /* ── Sitemap / rss grids ── */
    .sitemap-grid,
    .rss-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ══════════════════════════════════════════════════
   BREAKPOINT ≤ 560px — Small phones (iPhone SE etc.)
   ══════════════════════════════════════════════════ */
@media (max-width: 560px) {

    /* ── Nav: hide CTA on tiny screens ── */
    .spl-nav-right {
        display: none !important;
    }

    .spl-nav {
        padding: 0 14px;
    }

    /* ── Hero CTA buttons ── */
    .spl-hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .spl-btn {
        min-width: 220px;
        width: 100%;
        max-width: 320px;
        height: 48px;
        font-size: 14px;
    }

    /* ── Hero stats ── */
    .hero-stats-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hero-stat-val {
        font-size: 28px;
    }

    .hero-stats-card {
        padding: 22px 16px;
    }

    /* ── Gallery thumbs: 3 still fit, but tighter ── */
    .gallery-thumbs {
        gap: 8px;
    }

    .gallery-thumb {
        height: 70px;
        border-radius: 8px;
    }

    /* ── Team grid: one column on tiny phones ── */
    .team-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Certifications grid: 1 col ── */
    .cert-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Stats: 1 col ── */
    .stats-row,
    .trust-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Footer: single column ── */
    .footer-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Contact form: full-width inputs ── */
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* ── Service tab nav ── */
    .service-tab-btn {
        padding: 14px 16px;
        font-size: 13px;
    }

    /* ── Project tabs ── */
    .project-tab-btn,
    .tab-btn {
        padding: 7px 12px;
        font-size: 12px;
    }

    /* ── About section text ── */
    .about-text h2 {
        font-size: 24px;
    }

    /* ── Details box ── */
    .details-box {
        padding: 16px;
    }

    .details-list li {
        flex-direction: column;
        gap: 2px;
        padding: 10px 0;
    }

    .details-value {
        text-align: left;
        font-size: 14px;
    }

    /* ── Mobile menu width adjustment ── */
    .spl-mobile-menu {
        width: 280px;
    }

    /* ── Section padding: compact on small phones ── */
    section,
    .about-section,
    .services-section,
    .contact-section,
    .stem-section,
    .project-detail-section {
        padding: 36px 0;
    }

    /* ── Blog card, feature card padding ── */
    .feature-card,
    .blog-card,
    .faq-item {
        padding: 20px;
    }

    /* ── Service tab content ── */
    .service-tab-content {
        padding: 24px 16px;
    }

    /* ── FAQ accordion ── */
    .faq-question {
        font-size: 15px;
        padding: 16px;
    }

    /* ── Testimonial cards ── */
    .testimonial-card-new {
        padding: 24px 18px;
    }

    /* ── Chat widget: position adjustment ── */
    .spl-chat-widget {
        bottom: 12px;
        right: 12px;
    }

    .spl-chat-window {
        width: calc(100vw - 24px);
        right: -12px;
    }

    /* ── Scroll-reveal: disable on mobile to avoid flicker ── */
    .spl-reveal,
    .spl-reveal-left,
    .spl-reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ══════════════════════════════════════════════════
   PROJECTS PAGE — specific responsive fixes
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Project tabs filter bar */
    .projects-tabs-header,
    .tabs-filter,
    .filter-tabs {
        display: flex;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 8px;
        padding-bottom: 6px;
        scrollbar-width: none;
    }

    .projects-tabs-header::-webkit-scrollbar,
    .filter-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Project hero banner */
    .project-hero,
    .projects-hero {
        padding: 40px 0 !important;
    }

    /* YouTube embed on project page */
    .yt-video-wrap {
        border-radius: 14px;
    }
}

@media (max-width: 600px) {

    /* Stack project detail sections nicely */
    .project-detail-section .container {
        padding: 0 14px;
    }

    .project-info h2 {
        font-size: 22px;
        margin-bottom: 6px;
    }

    .project-location {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .project-description {
        font-size: 15px;
        margin-bottom: 20px;
    }

    /* Gallery thumbs height on tiny screens */
    .gallery-thumbs {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-top: 14px;
    }

    .gallery-thumb {
        height: 65px;
    }
}

/* ══════════════════════════════════════════════════
   INDEX PAGE HERO — specific responsive fixes
   ══════════════════════════════════════════════════ */
@media (max-width: 600px) {

    .spl-hero {
        min-height: 85vh;
    }

    .spl-hero-content {
        padding-bottom: 50px;
    }

    .spl-hero-eyebrow {
        font-size: 10px;
        letter-spacing: 0.15em;
    }

    .spl-hero-sub {
        font-size: 15px;
        margin-bottom: 28px;
    }

    /* Stats card below hero */
    .spl-hero-stats-wrap {
        margin-top: -60px;
        padding: 0 14px;
    }

    .hero-stat-lbl {
        font-size: 12px;
    }

    .hero-award-badge {
        padding: 10px 16px;
    }

    .hero-award-text {
        font-size: 12px;
    }
}

/* ══════════════════════════════════════════════════
   NAV FIX — ensure hamburger is always right-aligned
   and nav doesn't cause horizontal scroll
   ══════════════════════════════════════════════════ */
@media (max-width: 900px) {

    .spl-nav {
        padding: 0 16px;
        justify-content: space-between;
    }

    .spl-nav-links {
        display: none !important;
        position: static;
        transform: none;
    }

    .spl-hamburger {
        display: flex !important;
        margin-left: auto;
    }

    /* Mobile menu: full-width on very small screens */
    @media (max-width: 400px) {
        .spl-mobile-menu {
            width: 100%;
        }
    }
}

/* ══════════════════════════════════════════════════
   CERTIFICATIONS & TEAM PAGE — specific fixes
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Cert logos row */
    .cert-logos-row,
    .logo-row {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .cert-logos-row img,
    .logo-row img {
        height: 50px;
        width: auto;
    }
}

/* ══════════════════════════════════════════════════
   FOOTER — ensure proper stacking
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    .footer-bottom {
        text-align: center;
        font-size: 12px;
    }

    .social-links {
        justify-content: center;
    }

    .footer-logo-img {
        height: 32px;
    }
}

/* ══════════════════════════════════════════════════
   GLOBAL UTILITIES — helpful on all screen sizes
   ══════════════════════════════════════════════════ */

/* Horizontal scrollbar on tab navs */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Prevent text from spilling out of containers */
p, li, span, a {
    word-break: break-word;
    overflow-wrap: break-word;
}