/* ============================================================
   MushSkins Home — mobile responsive fixes (child theme)
   ------------------------------------------------------------
   Loaded AFTER the plugin's mush-home.css so these overrides win.
   ALL rules live inside @media (max-width: …) — desktop (≥769px)
   is never touched. Selectors verified against the actual widget
   render() output (mush-hot-deals / mush-features / mush-categories
   / mush-cta widgets), not assumed.

   The base desktop layout positions several pieces absolutely
   (deal cards via inline style="left:…", feature images, category
   image wraps), so the un-stacking rules need !important to beat
   inline styles and the plugin's own ≤900/≤600 rules.
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   TASK 1 — Mush: Hot Deals — stack text над cards, no overlap
   Render: .mush-section-deals > .mush-deals-card
             > .mush-deals-left (title+sub)
             > .mush-deals-right (weapons + .mush-deal-slot[style=left])
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    /* Card stacks text-over-cards; !important + overflow:visible so nothing
       is clipped and the absolute children below are forced into flow.
       Extended to ≤1200px: the base/plugin layout keeps the text block
       absolutely positioned (overlapping the cards) until 1200px. */
    .mush-page .mush-section-deals .mush-deals-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        position: relative !important;
        height: auto !important;
        overflow: visible !important;
        padding: 40px;
    }
    .mush-page .mush-section-deals .mush-deals-left {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: auto !important;
        width: 100% !important;
        order: 0 !important;
        margin-bottom: 1.25rem !important;
        align-items: flex-start !important;
        text-align: left !important;
    }
    .mush-page .mush-section-deals .mush-deals-title { white-space: normal; }
    .mush-page .mush-section-deals .mush-deals-sub { max-width: none; }

    .mush-page .mush-section-deals .mush-deals-right {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        order: 1 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 12px !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px;
    }
    /* Decorative floating weapons make no sense in the stacked row. */
    .mush-page .mush-section-deals .mush-weapon-left,
    .mush-page .mush-section-deals .mush-weapon-center,
    .mush-page .mush-section-deals .mush-weapon-right { display: none; }

    /* Each card was absolutely positioned via inline style="left:…" — drop
       that (deals-mobile-fix.js also strips it) and lay them out as a
       horizontal scroll row. A width keeps the flex items from collapsing. */
    .mush-page .mush-section-deals .mush-deal-slot {
        position: static !important;
        left: auto !important;
        top: auto !important;
        flex: 0 0 auto !important;
        width: 240px !important;
        max-width: 80vw !important;
        height: auto;
    }
}

/* ════════════════════════════════════════════════════════════
   TASK 3 — Mush: Features — stack into a column on mobile
   Render: .mush-section-features (flex)
             > .mush-feature-card (--purple / --green)
                 > .mush-fstat-main   (stat number + label — in flow)
                 > .mush-feature-video                            [absolute]
                 > .mush-feature-img (--timer / --skins) > img    [absolute, optional]
   The visual ("photo") here is the absolute <video>, NOT an image — so the
   card must keep an explicit height (height:auto collapses it to the text
   height → thin strips). Give the card a height that fits text + video and
   anchor the video to the card bottom so it sits in the lower portion.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .mush-page .mush-section-features {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
    }
    /* Sized to text + video (not collapsed to text only). */
    .mush-page .mush-section-features .mush-feature-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: clamp(360px, 64vw, 480px) !important;
        padding: clamp(36px, 7vw, 56px) clamp(24px, 5vw, 40px) !important;
        overflow: hidden !important;
    }
    /* Video stays anchored at the bottom and is bounded by HEIGHT, so it
       never collapses out of (or overflows) the card. */
    .mush-page .mush-section-features .mush-feature-video {
        position: absolute !important;
        left: 50% !important;
        top: auto !important;
        bottom: 0 !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        height: 60% !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }
    /* Fallback: if an image variant is ever used, keep it in-flow & visible. */
    .mush-page .mush-section-features .mush-feature-img,
    .mush-page .mush-section-features .mush-feature-img--timer,
    .mush-page .mush-section-features .mush-feature-img--skins {
        left: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 58% !important;
        overflow: hidden !important;
    }
}

/* ── Desktop/tablet (≥901px): keep the feature video anchored & bounded so it
   doesn't drift down / clip out of the card. The base rule sizes the video by
   width (width:100%) and anchors it at bottom:-40% of the fixed 840px card
   height — across the whole desktop range that makes it slide below the card
   and get cut off. Bound it by HEIGHT and anchor to the card bottom → it stays
   put and just scales. (≤900px is handled by the mobile block above.) ── */
@media (min-width: 901px) {
    .mush-page .mush-feature-video {
        bottom: 0 !important;
        height: 70% !important;
        width: 100% !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }
}

/* ════════════════════════════════════════════════════════════
   TASK 4 — Mush: Categories — images scale down, fully visible
   Render: .mush-section-row (FLEX, not grid)
             > .mush-cat-card (--large / --flex)
                 > .mush-cat-title              [absolute]
                 > .mush-cat-img-wrap > img     [absolute, width:110%]
   Container is flex → use flex 2-up (the task's grid-template-columns
   does not apply to a flex parent). Card height becomes an aspect ratio
   so the absolutely-positioned title/image have a box to sit in. img
   uses object-fit:contain so the whole weapon image is visible (not
   cropped) and the wrap is 100% wide (was 110% → side-clipped).
   Scroll-reveal/hover from the categories task target .mush-cat-card /
   .mush-cat-title / .mush-cat-img-wrap img via translate/transform/color
   and are unaffected by these size/position rules.
   ════════════════════════════════════════════════════════════ */
/* ≥1201px: one row. Row-1 has three "large" cards at a fixed width:628px with
   flex-shrink:0, so below ~1900px they overflow and get clipped. Let them
   shrink to fit the row (basis 628, shrink allowed, never grow past 628), so
   they smoothly scale down as the page narrows toward 1200px. */
@media (min-width: 1201px) {
    .mush-page .mush-section-row .mush-cat-card--large {
        flex: 0 1 628px !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ≤1200px: wrap categories to 2-up rows. The plugin leaves the image wrap at
   its base size (top:205px; height:400px; width:110%), so on the shorter 2-up
   cards the photo overflowed — the rules below also resize the wrap to fit. */
@media (max-width: 1200px) {
    .mush-page .mush-section-row {
        flex-wrap: wrap;
        gap: 12px;
    }
    .mush-page .mush-section-row .mush-cat-card,
    .mush-page .mush-section-row .mush-cat-card--large,
    .mush-page .mush-section-row .mush-cat-card--flex {
        flex: 0 0 calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        min-width: 0 !important;
        height: auto !important;
        aspect-ratio: 3 / 4;
        overflow: hidden;
    }
    .mush-page .mush-section-row .mush-cat-title {
        font-size: clamp(20px, 5.4vw, 30px);
        top: 44px;
    }
    .mush-page .mush-section-row .mush-cat-img-wrap {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 64%;
    }
    .mush-page .mush-section-row .mush-cat-img-wrap img {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        object-fit: contain;
        display: block;
    }
}

@media (max-width: 480px) {
    /* Keep TWO per row (override the plugin's ≤600 one-per-row). */
    .mush-page .mush-section-row { gap: 10px; }
    .mush-page .mush-section-row .mush-cat-card,
    .mush-page .mush-section-row .mush-cat-card--large,
    .mush-page .mush-section-row .mush-cat-card--flex {
        flex: 0 0 calc(50% - 5px) !important;
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
    }
    .mush-page .mush-section-row .mush-cat-title {
        font-size: clamp(16px, 5vw, 24px);
        top: 32px;
    }
}

/* ════════════════════════════════════════════════════════════
   TASK 2 — CTA Subscribe CF7 form wrapper
   Visual parity with the old subscribe widget: lime panel, decorative
   art on the left, pill email input, dark pill submit. This styles a
   NEW element (.mush-cta-subscribe-form-wrap) inserted in place of the
   widget — it does not alter any existing desktop element, so the base
   (non-media) rules are the form's own design; the ≤768 block stacks it.
   ════════════════════════════════════════════════════════════ */
.mush-cta-subscribe-form-wrap {
    background: #CDE738;
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 3rem 2.5rem;
}
.mush-cta-subscribe-form-wrap .mush-cta-subscribe-img {
    width: 220px;
    max-width: 32%;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.28));
}
.mush-cta-subscribe-form-wrap .mush-cta-subscribe-body {
    flex: 1 1 auto;
    min-width: 0;
}
.mush-cta-subscribe-form-wrap .mush-cta-subscribe-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1;
    letter-spacing: -1px;
    color: #141415;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.mush-cta-subscribe-form-wrap .mush-cta-subscribe-sub {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(20, 20, 21, 0.78);
    margin: 0 0 22px;
    max-width: 560px;
}
/* CF7 renders <form> > <p> > spans; lay the field + button on one row. */
.mush-cta-subscribe-form-wrap .wpcf7-form > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0;
}
.mush-cta-subscribe-form-wrap .wpcf7-form-control-wrap { flex: 1 1 240px; }
.mush-cta-subscribe-form-wrap .wpcf7-text {
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    padding: 14px 24px;
    font-size: 15px;
    color: #111;
    width: 100%;
}
.mush-cta-subscribe-form-wrap .wpcf7-text::placeholder { color: rgba(17, 17, 17, 0.55); }
.mush-cta-subscribe-form-wrap .wpcf7-submit {
    border-radius: 999px;
    background: #111;
    color: #fff;
    border: none;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    flex: 0 0 auto;
}
.mush-cta-subscribe-form-wrap .wpcf7-spinner { margin: 0 0 0 8px; }

@media (max-width: 768px) {
    .mush-cta-subscribe-form-wrap {
        flex-direction: column;
        padding: 2rem 1.5rem;
        text-align: center;
    }
    .mush-cta-subscribe-form-wrap .mush-cta-subscribe-img { max-width: 60%; width: 220px; }
    .mush-cta-subscribe-form-wrap .mush-cta-subscribe-sub { margin-left: auto; margin-right: auto; }
    .mush-cta-subscribe-form-wrap .wpcf7-form > p { flex-direction: column; }
    .mush-cta-subscribe-form-wrap .wpcf7-submit { width: 100%; }
}