/**
 * Sir Neko — Home Page Mobile Fixes
 * Targets WPBakery/Barberry elements on the home page
 * Mobile-first: base = mobile, media queries = desktop
 */

/* ==========================================================================
   1. HERO SLIDER — WPBakery adds 80px padding via vc_custom_* class
   On 375px screen this crushes the slider to 215px. Kill it on mobile.
   ========================================================================== */

.home-slider .vc_column-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.home-slider .shortcode_barberry_slider,
.home-slider .barberry_slider-wrapper,
.home-slider .flickity-viewport {
    width: 100% !important;
}

/* Hero: show full image without cropping on mobile.
   Banner is 1600x893 (~1.79:1). At 375px wide → ~209px tall.
   Use contain + fixed height so entire banner is visible. */
.home-slider .shortcode_barberry_slider.full_height,
.home-slider .flickity-viewport,
.home-slider .flickity-slider > * {
    height: 56vw !important;
    min-height: unset;
}

.home-slider .flickity-slider > * {
    width: 100% !important;
}

/* Must beat parent theme selector (5 levels in app.css):
   .shortcode_barberry_slider .barberry_slider-wrapper .carousel-cell .cell-img .bg-wrapper */
.home-slider .shortcode_barberry_slider .barberry_slider-wrapper .carousel-cell .cell-img .bg-wrapper {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    height: 100% !important;
}

/* ==========================================================================
   2. CONTENT CONTAINER — Remove side padding for full-bleed home sections
   .grid-container.content-page-wrapper adds 24px padding
   ========================================================================== */

body.home .grid-container.content-page-wrapper,
body.page-template-default.home .grid-container.content-page-wrapper {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}

body.home .grid-container.content-page-wrapper > .grid-x {
    margin-left: 0;
    margin-right: 0;
}

body.home .grid-container.content-page-wrapper .cell {
    padding-left: 0;
    padding-right: 0;
}

/* Re-add padding for text content inside sections */
body.home .wpb_text_column .wpb_wrapper,
body.home .vc_custom_heading {
    padding-left: 16px;
    padding-right: 16px;
}

/* ==========================================================================
   3. CATEGORY GRID — 4 WPBakery columns with 3 figures each
   On mobile they stack vertically (12 tall images in a row = terrible UX)
   Make each column a horizontal scroll row or 1-col with smaller images
   ========================================================================== */

/* Category section: make the 4 columns into a 2x2 grid */
.vc_column-gap-35.vc_row-flex {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.vc_column-gap-35 > .vc_col-sm-3 {
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    flex: 0 0 calc(50% - 4px) !important;
    padding: 0 !important;
}

/* Inside each column, stack the 3 category figures vertically */
.vc_column-gap-35 .vc_col-sm-3 .wpb_wrapper {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vc_column-gap-35 .vc_col-sm-3 figure {
    margin: 0 !important;
    width: 100% !important;
}

.vc_column-gap-35 .vc_col-sm-3 figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}

/* ==========================================================================
   4. BRAND LOGOS — 6 WPBakery columns with 5 logos each (30 logos!)
   On mobile each column stacks vertically with 300px wide logos = disaster
   Make the entire section a horizontal overflow scroll
   ========================================================================== */

/* Brand logos parent row — .vc_col-sm-2 are direct children of
   .vc_column-gap-35.vc_row-o-content-top (NOT inside .vc_inner)
   Need high specificity to beat .vc_column_container { width: 100% } */
body.home .vc_row.vc_row-o-content-top.vc_column-gap-35 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    padding: 8px !important;
}

body.home .vc_row.vc_row-o-content-top .wpb_column.vc_column_container.vc_col-sm-2 {
    flex: 0 0 33.333% !important;
    width: 33.333% !important;
    max-width: 33.333% !important;
    padding: 4px !important;
}

body.home .vc_row-o-content-top .vc_col-sm-2 .wpb_wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.home .vc_row-o-content-top .vc_col-sm-2 figure {
    width: 100% !important;
    margin: 0 !important;
}

body.home .vc_row-o-content-top .vc_col-sm-2 figure img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

body.home .vc_row-o-content-top .vc_col-sm-2 figure img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ==========================================================================
   5. REVIEWS/TRUSTINDEX — Broken shortcode shows empty <code> tag
   Hide the broken code block, keep the heading
   ========================================================================== */

code.ti-shortcode:empty,
code.ti-shortcode {
    display: none !important;
}

/* If TrustIndex loads properly it renders a div, not the code tag — that will show fine */

/* Give the reviews section some breathing room */
.home-slider .wpb_text_column {
    margin-top: 20px;
}

/* ==========================================================================
   6. PAYMENT ICONS — Loading from barberry.temash.dev (404 errors)
   Hide broken icons until replaced with working ones
   ========================================================================== */

img[src*="barberry.temash.dev"],
img[src*="payment-icon-visa"],
img[src*="payment-icon-mastercard"],
img[src*="payment-icon-amex"] {
    display: none !important;
}

/* ==========================================================================
   7. FOOTER — Clean up newsletter and spacing on mobile
   ========================================================================== */

body.home .site-footer,
body.home footer {
    padding-left: 16px;
    padding-right: 16px;
}

/* Newsletter form */
.widget_wysija .wysija-paragraph,
.mc4wp-form p {
    margin-bottom: 8px;
}

.widget_wysija input[type="text"],
.widget_wysija input[type="email"],
.mc4wp-form input[type="text"],
.mc4wp-form input[type="email"] {
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================================================
   8. GENERAL SPACING — Reduce excessive vertical gaps between sections
   ========================================================================== */

body.home .vc_row {
    margin-bottom: 24px;
}

body.home .vc_row .vc_row {
    margin-bottom: 0;
}

/* Shipping/info section */
body.home .vc_row:last-of-type {
    margin-bottom: 0;
}

/* ==========================================================================
   DESKTOP OVERRIDES — Restore normal layout above 768px
   ========================================================================== */

@media (min-width: 768px) {
    .home-slider .vc_column-inner {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .home-slider .shortcode_barberry_slider.full_height,
    .home-slider .flickity-viewport {
        height: 80vh !important;
    }

    body.home .grid-container.content-page-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }

    .vc_column-gap-35 > .vc_col-sm-3 {
        width: 25% !important;
        max-width: 25% !important;
        flex: 0 0 25% !important;
    }

    body.home .vc_row.vc_row-o-content-top .wpb_column.vc_column_container.vc_col-sm-2 {
        flex: 0 0 16.666% !important;
        width: 16.666% !important;
        max-width: 16.666% !important;
    }
}

@media (min-width: 1024px) {
    .home-slider .vc_column-inner {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }

    /* Desktop: restore original cover behavior */
    .home-slider .shortcode_barberry_slider.full_height,
    .home-slider .flickity-viewport,
    .home-slider .flickity-slider > * {
        height: 100vh !important;
        aspect-ratio: unset;
    }

    .home-slider .bg-wrapper {
        background-size: cover !important;
    }
}