/*
 * Apothic UK — Responsive Breakpoint Overrides
 *
 * Bootstrap 4 breakpoints (captured from live da.min.css):
 *   xs:    0    – 575.98px   (base styles)
 *   sm:  576px – 767.98px
 *   md:  768px – 991.98px
 *   lg:  992px – 1199.98px
 *   xl: 1200px+
 *
 * Following the live site's media query pattern:
 *   - .container max-widths grow at each breakpoint
 *   - Header is responsive to lg (navbar-expand-lg)
 *   - Grid columns activate at md (.col-md-*)
 *   - Hero h1 grows at md (5rem) and xl (7.875rem)
 */

/* ================================================================
   CONTAINER MAX-WIDTHS  (Bootstrap .container responsive)
   ================================================================ */
@media (min-width: 576px) {
    .container { max-width: var(--container-sm); }
}

@media (min-width: 768px) {
    .container { max-width: var(--container-md); }

    /* Grid column activation at md.
     *
     * Only `.col-md-3` is actually emitted post-Step 7c — used by
     * footer.php's four-column layout at md+. The generic `.col-md`,
     * `.col-md-2`, and `.col-md-5` rules were absorbed into scoped
     * BEM rules (`.intro__copy`/`.intro__bottle`, `.our-wines__row
     * > .wine-card`, `.two-column-section__image`) in Steps 7c.1,
     * 7c.2, 7c.4 and are no longer emitted anywhere. */
    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    /* Homepage wine-card width at md+ — preserves the 3-across
     * layout inside `.our-wines__row` (was .col-md-2 on wine-cards
     * inside `.row`, pre Step 7c.1 / 7c.4). */
    .our-wines__row > .wine-card {
        flex: 0 0 16.666667%;
        max-width: 16.666667%;
    }

    /* Intro grid swaps to row at md+ with copy on right (order 2)
     * and bottle on left (order 1). Was `.col-md.order-md-2` /
     * `.order-md-1` on the child divs. */
    .intro__grid {
        flex-wrap: nowrap;
    }
    .intro__copy {
        flex: 1 1 0;
        order: 2;
    }
    .intro__bottle {
        flex: 1 1 0;
        order: 1;
    }

    /* Homepage intro — bigger hero type (da.min.css L4488–4490) */
    .intro__title {
        font-size: var(--font-size-hero-md);  /* 80px */
    }
    .intro__title span {
        font-size: 3.375rem;  /* 54px */
    }
    .intro__subtitle {
        margin-top: var(--spacing-2xl);
        font-size: 3.375rem;
    }

    /* Larger logo (da.min.css L4487) */
    #header .logo {
        max-width: var(--logo-width-desktop);  /* 200px */
    }

    /* Header nav becomes inline (navbar-expand-lg — still collapsed at md, expanded at lg) */
    /* Nothing at md — wait for lg */

    /* Product page two-column layout is handled by Bootstrap's
     * .col-md-8 / .col-md-4 classes emitted by single-product.php;
     * no extra rule needed at this breakpoint. */

    /* Blog listing 2 cols */
    .blog-listing {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Wine archive 3 cols */
    .our-wines-archive .wine-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Buy page grid */
    .page-buy .store-listing,
    .node-type-store-locator .store-listing,
    .buy-page__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Social block pulls up to overlap wines section (da.min.css L4491) */
    .social-block {
        margin-top: -40px;
    }
}

@media (min-width: 992px) {
    .container { max-width: var(--container-lg); }

    /* Bootstrap 4 .navbar-expand-lg kicks in at lg+ (bootstrap.min.css L831):
     *   flex-flow: row nowrap;  justify-content: flex-start;
     * Live da.min.css L4498 also sets `.nav-contain { width: 100% }` at
     * this breakpoint so the container fills the horizontal space left
     * after `.navbar-brand`. Combined with default `align-items: stretch`
     * on the flex container, this makes the CTA anchor stretch to match
     * the full nav-row height (46.59px) instead of shrinking to its own
     * text-line height (40.59px — the bug the user noticed). */
    #header .navbar.navbar-expand-lg {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

    #header .nav-contain {
        width: 100%;
    }

    /* Header expands — nav goes inline (navbar-expand-lg) */
    #header .navbar-toggler {
        display: none;
    }

    #header .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    #header .navbar-nav {
        flex-direction: row;
    }

    /* Live keeps the <li> at default `display: list-item` at lg+ — it does
     * NOT apply flex/align-items to each nav-item. The <a> inside gets its
     * natural block width from content + padding. Setting flex here shrinks
     * the <a>'s computed width (flex-item shrink-to-fit), which threw off
     * the "Our Wines" anchor by ~4.5 px relative to live.
     *
     * NOTE on padding: Bootstrap 4 would compact .nav-link horizontal
     * padding to 0.5rem at lg+, but live's da.min.css L4456 overrides
     * with `#header .nav-link { padding-left: 0.9375rem; padding-right:
     * 0.9375rem }` (15px) at ALL breakpoints. We inherit that from the
     * base rule in components.css — no lg override needed. */

    /* CTA nav-link gets larger horizontal padding on desktop (da.min.css L4498) */
    #header .nav-link.cta {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* Social block overlaps more (da.min.css L4499) */
    .social-block {
        margin-top: -75px;
    }

    /* Blog listing 3 cols at lg (da.min.css L4532) */
    .blog-listing {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .container { max-width: var(--container-xl); }

    /* Homepage intro — massive hero type at xl (da.min.css L4531) */
    .intro__title {
        font-size: var(--font-size-hero-xl);  /* 126px */
    }

    /* Reviews larger at xl (da.min.css L4530) */
    .reviews .quote,
    .review-quote {
        margin-top: var(--spacing-xl);
        margin-bottom: var(--spacing-xl);
        font-size: var(--font-size-hashtag);  /* 30px */
    }
}

/* ================================================================
   MOBILE NAV COLLAPSE  (max-width: 991.98px — navbar-expand-lg breakpoint)
   ================================================================ */
@media (max-width: 991.98px) {
    /* Navbar collapses to absolute-positioned dropdown (da.min.css L4464).
     * Live declares only position/top/left/right/z-index/background-color —
     * no padding. The 15px top/bottom padding we had added 30px of extra
     * height to the mobile menu relative to live; removed to match. */
    #header .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        background-color: var(--color-bg-section);   /* #212121 */
        display: none;
    }

    #header .navbar-collapse.show {
        display: block;
    }

    #header .navbar-nav {
        flex-direction: column;
    }

    /* Live has NO item dividers and uses the base 0.5rem 0.9375rem (8px 15px)
     * nav-link padding unchanged at mobile. Our previous rule added
     * 10px vertical padding + a thin white divider — both extras relative
     * to live. Remove them to match. */
    #header .navbar-nav > li > a {
        padding: 0.5rem var(--spacing-md);
    }

    #header .navbar-nav .sub-menu {
        position: static;
        background-color: transparent;
        box-shadow: none;
        display: none;
    }

    #header .navbar-nav > li:hover > .sub-menu,
    #header .navbar-nav > li:focus-within > .sub-menu {
        display: block;
    }

    #header .navbar-nav .sub-menu > li > a {
        padding-left: var(--spacing-xl);
        border-bottom: none;
    }

    /* Show the mobile toggle */
    #header .navbar-toggler {
        display: block;
    }
}

/* ================================================================
   SMALL SCREEN TWEAKS  (max-width: 767.98px — below md)
   ================================================================ */
@media (max-width: 767.98px) {
    /* Hero content stacks (order swaps are off below md) */
    .intro__grid {
        flex-direction: column;
    }

    .blog-listing {
        grid-template-columns: 1fr;
    }

    .our-wines-archive .wine-grid {
        grid-template-columns: 1fr;
    }

    .page-buy .store-listing,
    .node-type-store-locator .store-listing,
    .buy-page__grid {
        grid-template-columns: 1fr;
    }

    /* Product bottle on mobile: let the image render at its natural
     * size (265×975 for Apothic Red) — live doesn't cap the height;
     * an earlier `max-height: 420px` rule shrank the bottle to 114×420
     * on mobile, much smaller than live. Spacing above the bottle
     * keeps the stacked layout legible. */
    .product-page__image {
        margin-top: var(--spacing-md);
    }

    /* Footer stacks. Live apothic.co.uk keeps `text-align: left` in the
     * footer at mobile — only the logo column is visually centered (via
     * its own `margin: 0 auto` rule below). Centering the entire .row
     * was overriding the h2 "Company" / "Legal" headings, which live
     * renders left-aligned. */
    .site-footer .row {
        text-align: left;
    }

    .site-footer .col-6 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: var(--spacing-lg);
    }

    /* Drinkaware link column: at mobile col-6 widths (~188 px) the 200-px
     * hardcoded image width overflows the viewport by 44 px (anchor
     * including padding lands at right=419 in a 375 vw). Cap the anchor
     * and image to 100% of the column so nothing escapes. */
    .site-footer .d-inline-block,
    .site-footer .d-inline-block img,
    .site-footer .drinkaware {
        max-width: 100%;
        height: auto;
    }

    /* Reviews narrower padding */
    .reviews {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    /* Review quote no decorative marks extending outside (too cramped) */
    .review-quote:before {
        left: 5px;
        top: -20px;
        font-size: 36px;
    }

    .review-quote:after {
        right: 5px;
        bottom: -5px;
        font-size: 36px;
    }
}

/* ================================================================
   EXTRA-SMALL TWEAKS  (max-width: 575.98px)
   ----------------------------------------------------------------
   The live Drupal site does NOT shrink fonts at xs — it keeps the
   base mobile sizes (50px hero, 32px h2, 50px social h2, 30px
   hashtag) all the way down.

   Footer: live KEEPS the `col-6` 50% grid at xs (2×2 layout — Logo
   next to empty col 2, then Company next to Legal). Previous override
   here forced 100%, stacking all four cols, which didn't match live.
   Removed.
   ================================================================ */