/*
 * Winejoy — Mobile fixes v2
 * Upload naar: /wp-content/themes/winejoy-child/mobile-fixes.css
 *
 * Fixes:
 *  1. Groene/sage Astra-achtergrond op WooCommerce productpagina's
 *  2. Elementor-kolommen die niet collapen op mobiel (proeverijen-pagina)
 *  3. Swipe-carousel voor reviews en proeverijen-kaarten
 *  4. Algemene mobiele leesbaarheid
 */

/* ============================================================
   PROEVERIJEN GRID — desktop layout (vervangt verwijderde inline style)
   ============================================================ */

.wj-proev-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    align-items: stretch;
}

/* ============================================================
   HOMEPAGE PROEVERIJEN SECTIE — desktop grid, mobiel carousel
   ============================================================ */

.wj-proeverijen-home { padding: var(--section-pad) 0; background: var(--wj-cream-warm); }

.wj-proev-home-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 48px;
}

.wj-proev-home-card {
    background: var(--wj-white);
    border: var(--border-warm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}
.wj-proev-home-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.wj-proev-home-card--featured { background: var(--wj-umber); border-color: var(--wj-gold); }

.wj-proev-home-card-header {
    padding: 32px 28px 20px;
    text-align: center;
    background: var(--wj-cream-warm);
    border-bottom: 1px solid rgba(201,161,74,0.25);
}
.wj-proev-home-card--featured .wj-proev-home-card-header { background: var(--wj-umber); border-bottom-color: rgba(201,161,74,0.3); }

.wj-proev-home-icon { color: var(--wj-terracotta); margin-bottom: 10px; display: inline-flex; }
.wj-proev-home-card--featured .wj-proev-home-icon { color: var(--wj-gold-light); }

.wj-proev-home-tier { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wj-umber-soft); margin: 0 0 8px; }
.wj-proev-home-card--featured .wj-proev-home-tier { color: var(--wj-gold-light); }

.wj-proev-home-price { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; color: var(--wj-umber); line-height: 1; margin: 0 0 6px; }
.wj-proev-home-price span { font-size: 0.72rem; color: var(--wj-umber-soft); letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-top: 4px; font-family: var(--font-body); font-weight: 400; }
.wj-proev-home-card--featured .wj-proev-home-price,
.wj-proev-home-card--featured .wj-proev-home-price span { color: var(--wj-cream); }

.wj-proev-home-tagline { font-style: italic; font-size: 0.9rem; color: var(--wj-umber-soft); line-height: 1.5; margin: 10px 0 0; }
.wj-proev-home-card--featured .wj-proev-home-tagline { color: var(--wj-cream-deep); }

.wj-proev-home-features { list-style: none; padding: 20px 28px; margin: 0; flex: 1; }
.wj-proev-home-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--wj-umber-light); padding: 6px 0; border-bottom: 1px solid rgba(61,43,31,0.06); }
.wj-proev-home-features li:last-child { border-bottom: none; }
.wj-proev-home-card--featured .wj-proev-home-features li { color: var(--wj-cream-deep); border-bottom-color: rgba(255,255,255,0.08); }
.wj-proev-home-features .wj-icon { color: var(--wj-terracotta); flex-shrink: 0; margin-top: 2px; }
.wj-proev-home-card--featured .wj-proev-home-features .wj-icon { color: var(--wj-gold-light); }

.wj-proev-home-card-footer { padding: 16px 28px 28px; }

@media (max-width: 768px) {
    .wj-proev-home-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 16px;
        padding: 8px 16px 24px;
        margin-left: -16px;
        margin-right: -16px;
        width: calc(100% + 32px);
        scrollbar-width: none;
    }
    .wj-proev-home-grid::-webkit-scrollbar { display: none; }
    .wj-proev-home-card {
        flex: 0 0 85vw;
        max-width: 300px;
        scroll-snap-align: start;
    }
}

/* ============================================================
   1. GROENE ACHTERGROND WEGWERKEN — HARDE OVERRIDE
   ============================================================ */

/* Astra's standaard groene body achtergrond op WooCommerce-pagina's */
body.woocommerce,
body.woocommerce-page,
body.single-product,
body.woocommerce.single-product,
html body.woocommerce,
html body.single-product {
    background: #F5EFE0 !important;
    background-color: #F5EFE0 !important;
}

/* Alle Astra inner wrappers */
body.single-product #page,
body.single-product .site,
body.single-product .hfeed,
body.single-product #content,
body.single-product #primary,
body.single-product .site-content,
body.single-product .ast-container,
body.single-product .content-area,
body.single-product main,
body.woocommerce-page #page,
body.woocommerce-page .site,
body.woocommerce-page #content,
body.woocommerce-page #primary,
body.woocommerce-page .site-content,
body.woocommerce-page .ast-container,
body.woocommerce-page .content-area {
    background: #F5EFE0 !important;
    background-color: #F5EFE0 !important;
}

/* De sage/groene before/after pseudo-elementen van Astra */
body.single-product::before,
body.single-product::after,
body.woocommerce-page::before,
body.woocommerce-page::after {
    background: transparent !important;
    display: none !important;
}

/* Astra Global Color Palette kan een groene kleur injecteren */
.ast-separate-container.single-product .site-content,
.ast-plain-container.single-product .site-content,
.ast-narrow-container.single-product .site-content {
    background: #F5EFE0 !important;
}

/* ============================================================
   2. ELEMENTOR KOLOMMEN — VOLLEDIG STAPELEN OP MOBIEL
   ============================================================
   Dit fix de proeverijen-pagina (en alle andere Elementor-pagina's)
   zodat kolommen op mobiel onder elkaar staan i.p.v. naast elkaar.
   ============================================================ */

@media (max-width: 767px) {

    /* Elementor v2/v3 kolom-structuur */
    .elementor-row,
    .elementor-section > .elementor-container > .elementor-row {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    .elementor-column,
    .elementor-col-25,
    .elementor-col-33,
    .elementor-col-50,
    .elementor-col-66,
    .elementor-col-75 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Elementor Flexbox Containers (v3.6+) */
    .e-con,
    .e-con-inner {
        flex-direction: column !important;
        width: 100% !important;
    }

    .e-con > .e-con,
    .e-con-inner > .e-con {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Elementor widget innerlijke padding reset */
    .elementor-widget-wrap {
        padding: 12px 16px !important;
    }

    /* Tekst in Elementor-blokken leesbaar maken */
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-text-editor p {
        font-size: 1rem !important;
        line-height: 1.65 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Elementor headings niet te groot */
    .elementor-widget-heading .elementor-heading-title {
        font-size: clamp(1.4rem, 5vw, 2rem) !important;
        line-height: 1.2 !important;
        word-break: break-word !important;
    }

    /* Elementen met vaste breedte in Elementor */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
        padding: 0 16px !important;
    }

    /* Elementor image widget */
    .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ============================================================
   3. PROEVERIJEN KAARTEN — SWIPE CAROUSEL OP MOBIEL
   ============================================================
   Exacte klasse-namen uit de HTML:
     Grid-wrapper:  .wj-proev-grid  (of direct parent van .wj-proev-card)
     Kaart:         .wj-proev-card
   ============================================================ */

@media (max-width: 767px) {

    /* Grid-wrapper — exacte klasse bevestigd via inspector */
    div.wj-proev-grid,
    .wj-proev-grid {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding-bottom: 24px !important;
        padding-top: 4px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        grid-template-columns: unset !important;
        grid-template-rows: unset !important;
        scrollbar-width: none !important;
        width: calc(100% + 32px) !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }

    div.wj-proev-grid::-webkit-scrollbar { display: none !important; }

    /* Elke kaart = 88% van het scherm, 1 tegelijk zichtbaar */
    div.wj-proev-grid > .wj-proev-card,
    .wj-proev-grid > .wj-proev-card {
        flex: 0 0 88vw !important;
        max-width: 340px !important;
        min-width: 240px !important;
        width: 88vw !important;
        scroll-snap-align: start !important;
        flex-shrink: 0 !important;
    }

    /* Reviews ook als carousel */
    .wj-reviews-grid {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 16px !important;
        padding-bottom: 24px !important;
        scrollbar-width: none !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        grid-template-columns: none !important;
    }

    .wj-reviews-grid::-webkit-scrollbar { display: none; }

    .wj-review-card {
        flex: 0 0 88vw !important;
        max-width: 340px !important;
        scroll-snap-align: start !important;
        width: 88vw !important;
    }
}

/* Dot-navigatie */
.wj-swipe-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.wj-swipe-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(61, 43, 31, 0.2);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.wj-swipe-dot.is-active {
    background: #C4612A;
    transform: scale(1.35);
}

/* ============================================================
   4. ALGEMENE MOBIELE LEESBAARHEID
   ============================================================ */

@media (max-width: 767px) {

    /* Spotlight / proeverij featured sectie */
    .wj-spotlight-inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }
    .wj-spotlight-img { order: -1; }
    .wj-spotlight-meta {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* Kleding-grid: 1 kolom */
    .wj-clothing-grid {
        grid-template-columns: 1fr !important;
    }
    .wj-clothing-card--feature {
        grid-column: span 1 !important;
    }

    /* Values grid */
    .wj-values {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* About strip */
    .wj-about-strip-inner {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
    }

    /* Product SEO-secties */
    .wj-contents-grid,
    .wj-forwho-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Blog grid */
    .wj-blog-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Hero */
    .wj-hero-left {
        padding: 48px 20px 40px !important;
    }

    /* Koopknop altijd zichtbaar */
    .wj-product-hero-inner {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }

    /* WooCommerce producten shortcode: 2 kolommen */
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    /* Geen horizontale overflow op de pagina */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* Containers nooit breder dan scherm */
    .wj-container,
    .elementor-container,
    .ast-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {

    /* Badges naast elkaar */
    .wj-hero-badge {
        flex: 1 1 calc(50% - 6px) !important;
        padding: 10px 12px !important;
    }

    /* Prijs beter leesbaar */
    .wj-product-price .price,
    .woocommerce-Price-amount {
        font-size: 1.5rem !important;
    }

    /* FAQ tekst leesbaar */
    .wj-faq-item summary {
        font-size: 0.95rem !important;
        padding: 14px 0 !important;
        line-height: 1.4 !important;
    }
}