/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablet (min-width: 768px) */
@media (min-width: 768px) {
    .container { padding: 0 var(--space-8); }
    
    .utility-inner { flex-wrap: nowrap; }
    
    .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    
    .footer-top {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .broken-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop (min-width: 1024px) */
@media (min-width: 1024px) {
    .hamburger { display: none; }
    .nav-links { display: flex; }
    
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    
    .footer-top {
        grid-template-columns: 2fr 1fr 1fr 1.5fr;
    }
}

/* Large Desktop (min-width: 1280px) */
@media (min-width: 1280px) {
    .container { padding: 0 var(--space-12); }
}

/* Default Mobile Rules (Mobile First fixes) */
@media (max-width: 1023px) {
    .nav-links { display: none; }
    .hamburger { display: block; }
    .d-none-mobile { display: none !important; }
    
    .nav-container { height: 5rem; }
    .logo img { height: 6rem; transform: none; }

    .section { padding: var(--space-16) 0; }
}

/* Revert grids to single column if less than 768px */
@media (max-width: 767px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
    .grid[style] { grid-template-columns: 1fr !important; }
    .footer-top { grid-template-columns: 1fr; }
    .broken-grid { grid-template-columns: 1fr; gap: var(--space-8); }
    
    /* Fix content-overlap overflow */
    .content-overlap { 
        margin-left: 0; 
        margin-top: -15%; 
        width: 100% !important; 
        padding: var(--space-6); 
        box-sizing: border-box; 
    }
    .image-offset::before { inset: -10px; }
    
    .utility-links { justify-content: flex-start; flex-direction: column; gap: var(--space-2); }
    .utility-bar { display: none; } /* Hide on very small screens to save space */
    .fab-contact { width: 3rem; height: 3rem; font-size: 1.5rem; bottom: var(--space-4); }
    .cookie-banner { bottom: 85px; } /* Prevent overlap with FAB */
    
    .blog-list-card { flex-direction: column !important; }
    .blog-list-img, .blog-list-content { width: 100% !important; }
    .blog-list-img { min-height: 200px !important; margin-bottom: var(--space-4); }
}

/* Touch Targets Fix */
@media (pointer: coarse) {
    .btn, a, button, input {
        min-height: 44px;
    }
    .social-links a {
        padding: var(--space-2);
    }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
@media (max-width: 767px) {
    .hero-bg {
        height: auto !important;
        min-height: 580px !important;
        padding: var(--space-16) 0 !important;
    }
    .hero-content {
        max-width: 100% !important;
        padding: 0 var(--space-2);
    }
    .hero-content h1 {
        font-size: clamp(1.75rem, 7vw, 2.5rem);
    }
    .hero-content p {
        font-size: 1rem !important;
    }
    /* Stack buttons vertically but make them full-width for easy tapping */
    .hero-content [style*="display: flex"] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3) !important;
    }
    .hero-content .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Landscape phones — very short screens (e.g. 658x320) */
@media (max-height: 480px) and (orientation: landscape) {
    .hero-bg {
        height: auto !important;
        min-height: 0 !important;
        padding: var(--space-8) 0 !important;
    }
    .hero-content h1 {
        font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
        margin-bottom: var(--space-3) !important;
    }
    .hero-content p {
        font-size: 0.875rem !important;
        margin-bottom: var(--space-4) !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Keep buttons side-by-side on landscape so they fit */
    .hero-content [style*="display: flex"] {
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: var(--space-3) !important;
    }
    .hero-content .btn {
        padding: var(--space-3) var(--space-6) !important;
        font-size: 0.8rem !important;
    }
    /* Reduce section padding globally on very short screens */
    .section { padding: var(--space-8) 0 !important; }
    .section-muted { padding: var(--space-4) 0 !important; }
}

/* ============================================================
   BENTO / ABOUT SECTION  (.grid-2 card with gap:0)
   ============================================================ */
@media (max-width: 767px) {
    /* The about section card stacks image on top of content */
    .grid-2[style*="gap: 0"],
    .grid-2[style*="gap:0"] {
        grid-template-columns: 1fr !important;
        border-radius: 1.25rem !important;
    }
    /* Ensure image pane has a fixed height when stacked */
    .grid-2[style*="gap: 0"] > div:first-child,
    .grid-2[style*="gap:0"] > div:first-child {
        min-height: 280px !important;
        height: 280px !important;
    }
    /* Pill badge on image — keep it within bounds */
    .grid-2[style*="gap: 0"] > div:first-child > div[style*="border-radius: 4rem"],
    .grid-2[style*="gap:0"] > div:first-child > div[style*="border-radius:4rem"] {
        top: var(--space-4) !important;
        left: var(--space-4) !important;
        font-size: 0.85rem !important;
        padding: var(--space-2) var(--space-4) !important;
    }
    /* Content pane padding */
    .grid-2[style*="gap: 0"] > div:last-child,
    .grid-2[style*="gap:0"] > div:last-child {
        padding: var(--space-8) var(--space-6) !important;
    }
    /* Feature sub-cards inside about section */
    .grid-2[style*="gap: 0"] > div:last-child div[style*="background: var(--clr-surface-container-low)"] {
        padding: var(--space-3) !important;
    }
}

/* ============================================================
   TESTIMONIAL CARDS — prevent overly tall cards on mid screens
   ============================================================ */
@media (max-width: 1023px) {
    .card[style*="padding: var(--space-8)"] {
        padding: var(--space-6) !important;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 767px) {
    .footer-top > div { 
        padding-bottom: var(--space-6);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .footer-top > div:last-child {
        border-bottom: none;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }
    /* Newsletter input & button full width on mobile */
    .newsletter-form {
        flex-direction: column !important;
    }
    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }
}

/* ============================================================
   CTA SECTION
   ============================================================ */
@media (max-width: 767px) {
    .section[style*="background-color: var(--clr-primary)"] p {
        max-width: 100% !important;
    }
}

/* ============================================================
   LOGO  —  prevent overflow on tablet
   ============================================================ */
@media (max-width: 1023px) {
    .logo img {
        height: 5rem !important;
        transform: none !important;
    }
}