/* ============================================= */
/* WCC Homepage Responsive Styles                */
/* Version: 1.0 - Optimized December 2025        */
/* Load: Homepage only                           */
/* ============================================= */

/* ============================================= */
/* DESKTOP STYLES                                */
/* ============================================= */

/* Add gap to product category rows on homepage */
body.home .hostinger-ai-product-category-3 > .wp-block-columns {
    gap: 20px !important;
    column-gap: 20px !important;
    row-gap: 20px !important;
}

/* ============================================= */
/* SERVICE BLOCKS (APK, Algemene Reparaties, etc.) */
/* ============================================= */

/* No gap between gray box and image within each service block */
body.home .wp-block-column.is-vertically-aligned-center > .wp-block-columns {
    gap: 0 !important;
}

/* Add gap between the 3 service columns (the parent row) */
body.home .wp-block-columns:has(> .wp-block-column.is-vertically-aligned-center) {
    gap: 30px !important;
}

/* Image column (33.33%) - make image fill the column */
body.home .wp-block-column[style*="flex-basis:33.33%"] figure {
    width: 100% !important;
    margin: 0 !important;
}

body.home .wp-block-column[style*="flex-basis:33.33%"] figure img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ============================================= */
/* TABLET STYLES (@media max-width: 768px)       */
/* ============================================= */

@media (max-width: 768px) {
    
    /* ===== Customer Reviews - Tablet ===== */
    .hostinger-ai-customer-reviews-1,
    .hostinger-ai-customer-reviews-2,
    .hostinger-ai-customer-reviews-3,
    .hostinger-ai-customer-reviews-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }

    .hostinger-ai-customer-reviews-1 .wp-block-column,
    .hostinger-ai-customer-reviews-2 .wp-block-column,
    .hostinger-ai-customer-reviews-3 .wp-block-column,
    .hostinger-ai-customer-reviews-4 .wp-block-column {
        max-width: 100% !important;
        margin-bottom: 10px;
    }

    /* ===== Services/Solutions - Tablet ===== */
    .hostinger-ai-feature-1 .wp-block-columns,
    .hostinger-ai-feature-2 .wp-block-columns,
    .hostinger-ai-feature-3 .wp-block-columns,
    .hostinger-ai-services .wp-block-columns {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .hostinger-ai-feature-1 h3,
    .hostinger-ai-feature-2 h3,
    .hostinger-ai-feature-3 h3,
    .hostinger-ai-services h3 {
        font-size: 14px !important;
    }

    .hostinger-ai-feature-1 p,
    .hostinger-ai-feature-2 p,
    .hostinger-ai-feature-3 p,
    .hostinger-ai-services p {
        font-size: 12px !important;
    }

    .hostinger-ai-feature-1 .wp-block-button__link,
    .hostinger-ai-feature-2 .wp-block-button__link,
    .hostinger-ai-feature-3 .wp-block-button__link,
    .hostinger-ai-services .wp-block-button__link {
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* ===== Hero Section - Tablet ===== */
    .wp-block-cover,
    .wp-block-cover-image {
        height: 200px !important;
        max-height: 200px !important;
    }

    .wp-block-cover h1,
    .wp-block-cover h2,
    .wp-block-cover h3,
    .wp-block-cover h4 {
        font-size: 1.5em !important;
    }

    .wp-block-cover p {
        font-size: 1em !important;
    }

    /* ===== CTA Buttons - Tablet ===== */
    .wp-block-buttons {
        flex-direction: column;
        gap: 8px !important;
    }

    .wp-block-buttons .wp-block-button {
        width: 100%;
    }

    .wp-block-buttons .wp-block-button__link {
        padding: 10px 15px !important;
        font-size: 13px !important;
    }

    /* ===== Column Layout - Tablet ===== */
    .wp-block-column[style*="flex-basis:33.33%"],
    .wp-block-column[style*="flex-basis:66.66%"] {
        flex-basis: 100% !important;
        width: 100% !important;
        margin-bottom: 15px !important;
        min-height: auto !important;
        display: block !important;
    }
}

/* ============================================= */
/* MOBILE STYLES (@media max-width: 480px)       */
/* ============================================= */

@media (max-width: 480px) {
    
    /* ===== Customer Reviews - Mobile ===== */
    .hostinger-ai-customer-reviews-1,
    .hostinger-ai-customer-reviews-2,
    .hostinger-ai-customer-reviews-3,
    .hostinger-ai-customer-reviews-4 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .hostinger-ai-customer-reviews-1 .wp-block-column,
    .hostinger-ai-customer-reviews-2 .wp-block-column,
    .hostinger-ai-customer-reviews-3 .wp-block-column,
    .hostinger-ai-customer-reviews-4 .wp-block-column {
        max-width: 100% !important;
        margin-bottom: 15px;
    }

    .hostinger-ai-customer-reviews-1 img,
    .hostinger-ai-customer-reviews-2 img,
    .hostinger-ai-customer-reviews-3 img,
    .hostinger-ai-customer-reviews-4 img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .hostinger-ai-customer-reviews-1 .wp-block-group,
    .hostinger-ai-customer-reviews-2 .wp-block-group,
    .hostinger-ai-customer-reviews-3 .wp-block-group,
    .hostinger-ai-customer-reviews-4 .wp-block-group {
        padding: 12px !important;
    }

    .hostinger-ai-customer-reviews-1 h3,
    .hostinger-ai-customer-reviews-2 h3,
    .hostinger-ai-customer-reviews-3 h3,
    .hostinger-ai-customer-reviews-4 h3 {
        font-size: 16px !important;
        margin: 8px 0 !important;
    }

    .hostinger-ai-customer-reviews-1 p,
    .hostinger-ai-customer-reviews-2 p,
    .hostinger-ai-customer-reviews-3 p,
    .hostinger-ai-customer-reviews-4 p {
        font-size: 13px !important;
        margin: 6px 0 !important;
    }

    /* ===== Services/Solutions - Mobile ===== */
    .hostinger-ai-feature-1 .wp-block-columns,
    .hostinger-ai-feature-2 .wp-block-columns,
    .hostinger-ai-feature-3 .wp-block-columns,
    .hostinger-ai-services .wp-block-columns {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hostinger-ai-feature-1 .wp-block-column,
    .hostinger-ai-feature-2 .wp-block-column,
    .hostinger-ai-feature-3 .wp-block-column,
    .hostinger-ai-services .wp-block-column {
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hostinger-ai-feature-1 .wp-block-group,
    .hostinger-ai-feature-2 .wp-block-group,
    .hostinger-ai-feature-3 .wp-block-group,
    .hostinger-ai-services .wp-block-group {
        padding: 12px !important;
        margin: 0 !important;
        text-align: center;
    }

    .hostinger-ai-feature-1 img,
    .hostinger-ai-feature-2 img,
    .hostinger-ai-feature-3 img,
    .hostinger-ai-services img {
        max-width: 100%;
        width: auto;
        height: auto;
        margin: 0 auto 6px !important;
        display: block;
    }

    .hostinger-ai-feature-1 h3,
    .hostinger-ai-feature-2 h3,
    .hostinger-ai-feature-3 h3,
    .hostinger-ai-services h3 {
        font-size: 13px !important;
        margin: 4px 0 4px !important;
        padding: 0 !important;
        font-weight: 600;
    }

    .hostinger-ai-feature-1 p,
    .hostinger-ai-feature-2 p,
    .hostinger-ai-feature-3 p,
    .hostinger-ai-services p {
        font-size: 11px !important;
        margin: 3px 0 6px !important;
        padding: 0 !important;
        line-height: 1.4;
        min-height: 2.8em;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .hostinger-ai-feature-1 .wp-block-button,
    .hostinger-ai-feature-2 .wp-block-button,
    .hostinger-ai-feature-3 .wp-block-button,
    .hostinger-ai-services .wp-block-button {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hostinger-ai-feature-1 .wp-block-button__link,
    .hostinger-ai-feature-2 .wp-block-button__link,
    .hostinger-ai-feature-3 .wp-block-button__link,
    .hostinger-ai-services .wp-block-button__link {
        padding: 8px 12px !important;
        font-size: 11px !important;
        height: 24px !important;
        line-height: 1 !important;
    }

    .wp-block-group + .wp-block-group {
        margin-top: 0 !important;
    }

    /* ===== Reparaties/Services List - Mobile ===== */
    .wp-block-list,
    ul, ol {
        margin: 0 !important;
        padding: 0 0 0 16px !important;
    }

    .wp-block-list li,
    ul li, ol li {
        margin: 6px 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .wp-block-heading {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }

    figure {
        margin: 0 !important;
        padding: 0 !important;
    }

    figcaption {
        padding: 8px !important;
        font-size: 12px !important;
    }

    /* ===== Hero Section - Mobile ===== */
    .wp-block-cover,
    .wp-block-cover-image {
        height: 150px !important;
        max-height: 150px !important;
        min-height: 150px !important;
        position: relative;
        overflow: hidden !important;
    }

    .wp-block-cover::before {
        background: rgba(0, 0, 0, 0.2) !important;
        opacity: 0.2 !important;
    }

    .wp-block-cover[style*="background-color"] {
        background-color: rgba(0, 0, 0, 0.2) !important;
    }

    .hostinger-ai-product-category-3 .wp-block-cover {
        height: 250px !important;
        max-height: 250px !important;
        min-height: 250px !important;
        padding: 0 !important;
    }

    .hostinger-ai-product-category-3[style*="padding-right:15%"],
    .hostinger-ai-product-category-3[style*="padding-left:15%"] {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .hostinger-ai-product-category-3 .wp-block-cover[style*="padding"] {
        padding: 0 !important;
    }

    .hostinger-ai-product-category-3 .wp-block-cover__background {
        opacity: 0.3 !important;
    }

    .hostinger-ai-product-category-3 .wp-block-cover__background.has-background-dim {
        opacity: 0.3 !important;
    }

    .hostinger-ai-product-category-3 .wp-block-cover__image-background {
        width: 100% !important;
        height: 250px !important;
        max-width: 100% !important;
        max-height: 250px !important;
        object-fit: stretch !important;
        object-position: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    .wp-block-cover.has-black-background-color {
        height: 150px !important;
        max-height: 150px !important;
    }

    .wp-block-cover.has-black-background-color::before,
    .wp-block-cover.has-black-background-color::after {
        height: 150px !important;
        max-height: 150px !important;
    }

    .wp-block-cover .wp-block-cover__inner-container,
    .wp-block-cover .wp-block-column,
    .wp-block-cover-image .wp-block-cover__inner-container,
    .wp-block-cover-image .wp-block-column {
        position: relative;
        z-index: 2;
        padding: 15px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .wp-block-cover h1,
    .wp-block-cover h2,
    .wp-block-cover h3,
    .wp-block-cover h4 {
        font-size: 1.3em !important;
        line-height: 1.2 !important;
        margin: 8px 0 !important;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        color: white !important;
    }

    .wp-block-cover p {
        font-size: 0.9em !important;
        line-height: 1.3 !important;
        margin: 5px 0 !important;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        color: white !important;
    }

    .wp-block-cover ul,
    .wp-block-cover ol {
        margin: 5px 0 !important;
        padding-left: 20px !important;
    }

    .wp-block-cover li {
        margin: 3px 0 !important;
        font-size: 0.85em !important;
    }

    /* ===== CTA Buttons - Mobile ===== */
    .wp-block-buttons {
        flex-direction: column;
        gap: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wp-block-buttons .wp-block-button {
        width: 100%;
        margin: 0 !important;
    }

    .wp-block-buttons .wp-block-button__link {
        padding: 10px 12px !important;
        font-size: 12px !important;
        height: 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ===== Google Reviews Carousel - Mobile ===== */
    .wcc-google-reviews-wrapper {
        width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 5px !important;
    }

    .wcc-reviews-carousel {
        width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wcc-reviews-slider-wrapper {
        width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wcc-reviews-slider {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wcc-review-slide {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    .wcc-review-card {
        margin: 0 !important;
        padding: 8px !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
        aspect-ratio: auto !important;
    }

    img[style*="height:200px"],
    img[style*="aspect-ratio:9/16"] {
        height: 120px !important;
        max-height: 120px !important;
        aspect-ratio: auto !important;
    }

    .wp-block-image {
        margin: 10px 0;
    }

    .wp-block-image img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ===== Full Width Layout - Mobile ===== */
    .wp-block-group,
    .wp-block-cover,
    .wp-block-media-text,
    .wp-block-columns,
    .wp-block-template-part,
    [class*="reparation"],
    [class*="occasions"],
    [class*="diensten"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    .wp-site-blocks,
    .wp-block-group > * {
        max-width: 100% !important;
    }

    body {
        max-width: 100% !important;
    }

    /* ===== Padding Overrides - Mobile ===== */
    [style*="padding-right:15%"],
    [style*="padding-left:15%"],
    [style*="padding-right: 15%"],
    [style*="padding-left: 15%"] {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    [style*="--wp--preset--spacing--60"] {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    html, body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wp-block-group,
    .wp-block-columns,
    .wp-block-column {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ===== Service Blocks - Mobile ===== */
    .wp-block-column[style*="flex-basis:66.66%"] .wp-block-group p {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .wp-block-column[style*="flex-basis:66.66%"] .wp-block-buttons {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .wp-block-column[style*="flex-basis:33.33%"] figure,
    .wp-block-column[style*="flex-basis:33.33%"] img {
        min-height: 150px !important;
    }
}

/* ============================================= */
/* EXTRA SMALL PHONES (@media max-width: 320px) */
/* ============================================= */

@media (max-width: 320px) {
    .wp-block-group,
    .wp-block-cover,
    .wp-block-media-text,
    .wp-block-columns {
        max-width: 100% !important;
        width: 100% !important;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 0.9em !important;
        margin: 8px 0 !important;
    }

    p {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .wp-block-group {
        padding: 8px 5px !important;
        margin: 10px 0 !important;
    }
}

/* ============================================= */
/* END OF FILE                                   */
/* ============================================= */