/* ==========================================================================
   Tuinen Gheysens — Responsive Design
   Breakpoints match Tailwind: sm:640, md:768, lg:1024, xl:1280
   ========================================================================== */

/* --------------------------------------------------------------------------
   Desktop (>= 1024px)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .site-header__nav {
        display: block;
    }

    .site-header__phone {
        display: flex;
    }

    .site-header__cta {
        display: inline-flex;
    }

    .hamburger {
        display: none;
    }

    /* Services: 4 columns, first card spans 2 */
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .services-grid .service-card:first-child {
        grid-column: span 2;
    }

    /* Hero: left-aligned text */
    .hero__content {
        text-align: left;
    }

    /* Portfolio: 3 columns */
    .portfolio-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Features: 4 columns */
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Tablet (768px - 1023px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-block__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .service-block--image_right .service-block__grid {
        direction: ltr;
    }

    .story-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .contact-split {
        grid-template-columns: 1fr;
    }

    .contact-methods-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Hero: center text on tablet */
    .hero__content {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero__subtext {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__buttons {
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Mobile (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    :root {
        --section-padding: 48px;
    }

    body {
        padding-top: 64px;
    }

    body.home-page {
        padding-top: 0;
    }

    .site-header__inner {
        height: 64px;
    }

    .mobile-menu {
        top: 64px;
    }

    .services-grid,
    .portfolio-grid,
    .contact-methods-grid,
    .posts-grid {
        grid-template-columns: 1fr;
    }

    .features-grid,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Hero mobile */
    .hero__content {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero__heading {
        font-size: 2.5rem;
    }

    .hero__subtext {
        margin-left: auto;
        margin-right: auto;
    }

    .hero__buttons {
        flex-direction: column;
        justify-content: center;
    }

    .hero__buttons .btn {
        width: 100%;
        justify-content: center;
    }

    .project-hero {
        height: 300px;
    }

    .project-intro {
        font-size: 1.05rem;
    }

    .project-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header {
        padding: 8rem 0 2.5rem;
    }

    .footer-bottom__inner {
        flex-direction: column;
        text-align: center;
    }

    .cta-banner__buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-banner__buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Show floating CTA on mobile */
    .floating-cta {
        display: flex;
    }

    /* Adjust WhatsApp button for floating CTA */
    .whatsapp-float {
        bottom: 90px;
    }

    /* Add bottom padding for floating CTA */
    .site-footer {
        padding-bottom: 80px;
    }
}

/* --------------------------------------------------------------------------
   Very small screens (< 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    .features-grid,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .hero__heading {
        font-size: 2rem;
    }

    .footer-areas {
        grid-template-columns: 1fr;
    }
}