/* ==========================================================================
   VKS Garland and Decorations — mobile-fix.css (v3)
   Mobile-first 2-column split layout for all sections.
   Loaded LAST — overrides everything above it.
   ========================================================================== */

/* ── Baseline: prevent scroll bleed globally ────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ══════════════════════════════════════════════════════════════════════
   768px — ALL TARGETED FIXES
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── ISSUE 1: SEO keyword tag cloud — fix 1-per-row stacking ──────── */
    .seo-tags {
        padding: 32px 16px !important;
    }

    .seo-tags h3 {
        font-size: clamp(0.8rem, 3.5vw, 1.1rem) !important;
        letter-spacing: 0.08em !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        margin-bottom: 16px !important;
    }

    .seo-tag-cloud,
    .tag-container {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        padding: 0 !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .seo-tag {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: normal !important;
        word-break: break-word !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: unset !important;
        min-width: unset !important;
        padding: 6px 8px !important;
        border-radius: 999px !important;
        font-size: 0.65rem !important;
        line-height: 1.3 !important;
    }

    /* ── ISSUE 2: Footer — 2-col layout ─────────────────────────────── */
    .footer-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 28px 20px !important;
        align-items: start !important;
    }

    .footer-brand {
        grid-column: 1 / -1 !important;
        text-align: left !important;
        margin-bottom: 4px !important;
    }

    .footer-brand p {
        font-size: 0.82rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }

    .footer-col {
        text-align: left !important;
        margin-bottom: 0 !important;
    }

    .footer-col h4 {
        font-size: 0.8rem !important;
        letter-spacing: 0.1em !important;
        margin-bottom: 10px !important;
    }

    .footer-col a {
        display: block !important;
        padding: 3px 0 !important;
        font-size: 0.82rem !important;
        line-height: 1.7 !important;
    }

    .footer-social {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 14px !important;
        flex-wrap: wrap !important;
        margin-top: 12px !important;
    }

    .footer-bottom {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center !important;
        font-size: 0.78rem !important;
        padding: 16px !important;
    }

    /* ── ISSUE 3: Section spacing ─────────────────────────────────────── */
    .section,
    section {
        padding: 36px 16px !important;
    }

    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── ISSUE 4: Floating buttons ────────────────────────────────────── */
    .whatsapp-float {
        position: fixed !important;
        bottom: 80px !important;
        right: 16px !important;
        z-index: 999 !important;
        width: 48px !important;
        height: 48px !important;
    }

    .back-to-top {
        position: fixed !important;
        bottom: 20px !important;
        right: 16px !important;
        z-index: 998 !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* ── ISSUE 5: Navbar ──────────────────────────────────────────────── */
    .navbar .container,
    #navbar .container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding: 12px 16px !important;
        gap: 0 !important;
    }

    .nav-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .nav-logo span,
    .nav-logo h1,
    .nav-logo .logo-text {
        font-size: 1.1rem !important;
        letter-spacing: 0.05em !important;
    }

    .menu-toggle {
        display: flex !important;
        flex-shrink: 0 !important;
        margin-left: 12px !important;
    }

    .nav-links,
    .nav-cta {
        display: none !important;
    }

    /* ══════════════════════════════════════════════════════════════════
       SITE-WIDE 2-COLUMN SPLIT LAYOUT
       Text on left, Image on right. Magazine-style mobile layout.
    ══════════════════════════════════════════════════════════════════ */

    /* ── PROJECT BLOCKS (Signature Services section) ──────────────────
       Already a 2-col grid on desktop. Keep as 2-col on mobile but
       tighten spacing and reduce font sizes.
    ─────────────────────────────────────────────────────────────────── */
    .project-block,
    .project-block.reversed {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 20px 0 !important;
    }

    /* Normal block: text left, image right */
    .project-block .project-image {
        order: 2 !important;
    }

    .project-block .project-text {
        order: 1 !important;
    }

    /* Reversed block: image left, text right */
    .project-block.reversed .project-image {
        order: 1 !important;
    }

    .project-block.reversed .project-text {
        order: 2 !important;
    }

    .project-image img {
        aspect-ratio: 3/4 !important;
        border-radius: 10px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .project-text {
        padding: 8px 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .project-location {
        font-size: 0.55rem !important;
        letter-spacing: 0.1em !important;
        margin-bottom: 6px !important;
    }

    .project-text h3 {
        font-size: 0.95rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .project-text p {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
        margin-bottom: 10px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .project-link {
        font-size: 0.6rem !important;
        letter-spacing: 0.12em !important;
    }

    .project-link svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* ── ABOUT GRID (image + about text, 2-col) ───────────────────────── */
    .about-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        align-items: center !important;
    }

    .about-image img {
        aspect-ratio: 3/4 !important;
        border-radius: 10px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .about-text h2 {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }

    .about-text p {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
        margin-bottom: 8px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .stats-row {
        gap: 16px !important;
        margin-top: 12px !important;
        padding-top: 12px !important;
    }

    .stat-number {
        font-size: 1.2rem !important;
    }

    .stat-label {
        font-size: 0.6rem !important;
    }

    /* ── GARLAND CARD WRAP (image left + feature list right, 2-col) ─────── */
    .garland-card-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        align-items: start !important;
    }

    /* Strip the card box on mobile — just show image cleanly */
    .garland-card {
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    .garland-img-wrap img {
        aspect-ratio: 2/3 !important;
        border-radius: 10px !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    /* Badges: tiny pills in one row above image */
    .garland-badges {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .garland-badge {
        font-size: 0.5rem !important;
        letter-spacing: 0.06em !important;
        padding: 3px 6px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    /* Hide long caption on mobile to reduce clutter */
    .garland-caption {
        display: none !important;
    }

    /* Feature list: compact icon + text rows */
    .garland-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding-top: 4px !important;
    }

    .garland-feature-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
    }

    .garland-feature-icon {
        flex-shrink: 0 !important;
        width: 16px !important;
        height: 16px !important;
        margin-top: 2px !important;
    }

    .garland-feature-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .garland-feature-content h4 {
        font-size: 0.72rem !important;
        margin-bottom: 2px !important;
        line-height: 1.3 !important;
    }

    .garland-feature-content p {
        font-size: 0.65rem !important;
        line-height: 1.45 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* ── SERVICES GRID (2 cards per row) ──────────────────────────────── */
    .services-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .service-card {
        border-radius: 10px !important;
    }

    .service-card-image {
        aspect-ratio: 4/3 !important;
        overflow: hidden !important;
    }

    .service-card-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .service-card-body {
        padding: 10px !important;
    }

    .service-card-body h3 {
        font-size: 0.82rem !important;
        margin-bottom: 4px !important;
    }

    .service-card-body p {
        font-size: 0.7rem !important;
        line-height: 1.5 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* ── FEATURED GRID (portfolio cards, 2-col) ──────────────────────── */
    .featured-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .featured-card img {
        aspect-ratio: 3/4 !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    /* ── DETAIL GRID (service detail pages) ─────────────────────────── */
    .detail-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        align-items: start !important;
    }

    .detail-image img {
        aspect-ratio: 3/4 !important;
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 10px !important;
    }

    .detail-text h2 {
        font-size: 1rem !important;
        margin-bottom: 6px !important;
    }

    .detail-text p {
        font-size: 0.75rem !important;
        line-height: 1.6 !important;
        margin-bottom: 8px !important;
    }

    .detail-gallery {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ── GALLERY GRID (2-col on mobile) ──────────────────────────────── */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* ── PRICING GRID (1-col on mobile, cards don't split well) ─────── */
    .pricing-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ── PROCESS GRID (2-col on mobile) ──────────────────────────────── */
    .process-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px 12px !important;
    }

    .process-grid::before {
        display: none !important;
    }

    .process-number {
        width: 36px !important;
        height: 36px !important;
        font-size: 1.1rem !important;
        line-height: 34px !important;
    }

    .process-step h3 {
        font-size: 0.82rem !important;
        margin-bottom: 4px !important;
    }

    .process-step p {
        font-size: 0.7rem !important;
        line-height: 1.5 !important;
    }

    /* ── BLOG GRID (2-col) ────────────────────────────────────────────── */
    .blog-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .blog-card-body {
        padding: 12px !important;
    }

    .blog-card-body h3 {
        font-size: 0.82rem !important;
    }

    .blog-card-body p {
        font-size: 0.7rem !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* ── CONTACT PAGE: info + map side by side ─────────────────────────── */
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .contact-info-map-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    /* Contact info blocks: icon + text div side by side, compact */
    .contact-info-details {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .contact-info-block {
        display: flex !important;
        align-items: flex-start !important;
        gap: 8px !important;
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .contact-info-details .contact-info-block:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border-bottom: none !important;
    }

    .contact-info-icon {
        flex-shrink: 0 !important;
        width: 16px !important;
        height: 16px !important;
        margin-top: 2px !important;
    }

    .contact-info-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    /* The text div wraps h4 label + p value together cleanly */
    .contact-info-text {
        min-width: 0 !important;
        flex: 1 !important;
    }

    .contact-info-block h4 {
        font-size: 0.55rem !important;
        letter-spacing: 0.08em !important;
        margin-bottom: 2px !important;
        white-space: nowrap !important;
    }

    .contact-info-block p {
        font-size: 0.68rem !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }

    .contact-map-block {
        display: flex !important;
        flex-direction: column !important;
        min-height: 240px !important;
        border-radius: 12px !important;
        overflow: hidden !important;
    }

    .contact-map-block iframe {
        flex: 1 !important;
        min-height: 200px !important;
        width: 100% !important;
        border: 0 !important;
    }

    /* ── Grid children — prevent overflow ────────────────────────────── */
    [class*="grid"]>*:not(.seo-tag),
    .garland-card-wrap>*,
    .services-grid>*,
    .pricing-grid>* {
        min-width: 0 !important;
    }

    /* ── Hero buttons stack ───────────────────────────────────────────── */
    .hero-buttons,
    .cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .btn-primary,
    .btn-secondary {
        width: 100% !important;
        max-width: 320px !important;
        min-height: 44px !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* ── Typography ───────────────────────────────────────────────────── */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p {
        word-break: break-word !important;
        overflow-wrap: break-word !important;
    }

    .hero-content h1,
    .page-hero-content h1 {
        font-size: clamp(1.5rem, 7vw, 2.2rem) !important;
    }

    .section-header h2 {
        font-size: clamp(1.2rem, 5vw, 1.7rem) !important;
    }

    /* ── Gallery masonry: 2-col natural height ────────────────────────── */
    .masonry-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        grid-auto-rows: auto !important;
        gap: 8px !important;
    }

    .masonry-item,
    .masonry-item.small,
    .masonry-item.medium,
    .masonry-item.large,
    .masonry-item.tall,
    .masonry-item.wide {
        grid-row: auto !important;
        grid-column: span 1 !important;
    }

    .masonry-item img {
        height: auto !important;
        min-height: unset !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }

    /* ── iOS: prevent zoom on form field focus ───────────────────────── */
    .form-group input,
    .form-group select,
    .form-group textarea,
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   480px — very small phones
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .hero-content h1,
    .page-hero-content h1 {
        font-size: clamp(1.3rem, 8vw, 1.75rem) !important;
    }

    .section-header h2 {
        font-size: clamp(1.1rem, 6.5vw, 1.4rem) !important;
    }

    .masonry-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .seo-tag-cloud,
    .tag-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }

    .seo-tag {
        font-size: 0.6rem !important;
        padding: 5px 6px !important;
    }

    .whatsapp-float {
        bottom: 74px !important;
        right: 12px !important;
        width: 44px !important;
        height: 44px !important;
    }

    .back-to-top {
        bottom: 18px !important;
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
    }

    .nav-logo span,
    .nav-logo h1,
    .nav-logo .logo-text {
        font-size: 0.95rem !important;
    }
}