/* MBF Fundraiser - responsive.css
   Tablet (≤1024px) and Mobile (≤600px) breakpoints
   ================================================== */

/* =======================================================
   WORDPRESS ADMIN BAR — 782px breakpoint
   WordPress shrinks the admin bar from 32px → 46px at this
   width. Must be its own block; unrelated to our layout BPs.
   ======================================================= */
@media screen and (max-width: 782px) {
  .admin-bar .mbf-header {
    top: 46px;
  }

  html:has(body.admin-bar) {
    scroll-padding-top: calc(46px + var(--header-height));
  }
}

/* =======================================================
   TABLET  ≤ 1024px
   ======================================================= */
@media (max-width: 1024px) {

  /* ---- Header ---- */
  .mbf-header__nav {
    display: none; /* replaced by mobile drawer */
  }

  .mbf-header__hamburger {
    display: flex;
  }

  .mbf-header__logo {
    font-size: 1.25rem;
    max-width: 200px;
  }

  /* ---- Hero ---- */
  .mbf-hero__inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .mbf-hero__content {
    padding: 3rem var(--content-padding);
    text-align: center;
    align-items: center;
  }

  .mbf-hero__body {
    max-width: 100%;
  }

  .mbf-hero__cta {
    align-self: center;
  }

  .mbf-hero__image-wrap {
    order: -1;
    max-height: 50vw;
  }

  /* ---- How It Works: stack steps vertically at tablet ---- */
  .mbf-steps {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* ---- Category tiles ---- */
  .mbf-category-tiles__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ---- Carousel ---- */
  .mbf-carousel__prev {
    left: -10px;
  }

  .mbf-carousel__next {
    right: -10px;
  }

  /* ---- Shop layout ---- */
  .mbf-shop-layout {
    grid-template-columns: 1fr;
  }

  /* Sidebar becomes a fixed overlay drawer on tablet */
  .mbf-shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(80vw, 300px);
    z-index: 1050;
    background-color: var(--color-surface);
    padding: 1.5rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    box-shadow: var(--shadow-md);
    max-height: 100vh;
  }

  .mbf-shop-sidebar.is-open {
    transform: translateX(0);
  }

  .mbf-shop-sidebar__close {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
    transition: color var(--transition);
  }

  .mbf-shop-sidebar__close:hover {
    color: var(--color-text);
  }

  /* Sidebar backdrop */
  .mbf-shop-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: var(--color-overlay);
    z-index: 1040;
  }

  .mbf-shop-sidebar-backdrop.is-visible {
    display: block;
  }

  .mbf-filter-toggle {
    display: flex;
  }

  /* Product grid: 2 columns on tablet */
  .mbf-product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Single product: single column; nothing sticky (gallery and summary scroll together) ---- */
  div.product {
    grid-template-columns: 1fr;
    column-gap: 0;
    gap: var(--space-md);
  }

  /* Reset explicit column placement so gallery + summary stack in 1-col grid */
  .mbf-gallery,
  .summary.entry-summary {
    grid-column: auto;
    grid-row: auto;
    position: relative; /* keep relative for sale badge */
    max-height: none;
    max-width: none;
    overflow-y: visible;
  }

  /* ---- Related products ---- */
  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ---- Cart: collapse 2-column desktop grid ---- */
  .woocommerce-cart .woocommerce {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .woocommerce-cart .cart-collaterals {
    position: static;
    grid-column: auto;
  }

  /* ---- Checkout: collapse 2-column desktop grid ---- */
  .woocommerce-checkout form.checkout {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .woocommerce-checkout #customer_details {
    grid-column: auto;
    grid-row: auto;
  }

  .woocommerce-checkout #order_review_heading {
    grid-column: auto;
    grid-row: auto;
  }

  .woocommerce-checkout #order_review {
    grid-column: auto;
    grid-row: auto;
    position: static;
  }

  /* ---- Footer ---- */
  .mbf-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .mbf-footer__brand {
    grid-column: 1 / -1;
  }

}

/* =======================================================
   MOBILE  ≤ 600px
   ======================================================= */
@media (max-width: 600px) {

  /* ---- Base ---- */
  body {
    padding-top: var(--header-height-mob);
  }

  /* ---- Header ---- */
  .mbf-header {
    height: var(--header-height-mob);
  }

  .mbf-header__logo {
    font-size: 1.125rem;
    max-width: 150px;
  }

  /* ---- Hero ---- */
  .mbf-hero__content {
    padding: 2.5rem var(--content-padding);
  }

  .mbf-hero__headline {
    font-size: 2rem;
  }

  .mbf-hero__image-wrap {
    max-height: 60vw;
  }

  /* ---- How It Works ---- */
  .mbf-steps {
    gap: var(--space-md);
  }

  /* ---- Category tiles ---- */
  .mbf-category-tiles__grid {
    grid-template-columns: 1fr;
  }

  .mbf-category-tiles__grid .mbf-category-tile:last-child {
    grid-column: auto;
  }

  /* ---- Carousel ---- */
  .mbf-carousel__prev,
  .mbf-carousel__next {
    display: none; /* arrows hidden on mobile, use swipe */
  }

  /* ---- Search overlay ---- */
  .mbf-search-overlay {
    padding-top: 8vh;
  }

  /* ---- Breadcrumbs ---- */
  .woocommerce-breadcrumb {
    display: none;
  }

  /* ---- Shop ---- */
  .mbf-shop-page {
    padding-top: var(--space-lg);
  }

  .mbf-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md) var(--space-sm);
  }

  /* ---- Cart ---- */
  .woocommerce-cart table.cart thead {
    display: none;
  }

  .woocommerce-cart table.cart td {
    display: block;
    padding: 0.5rem 0;
    border-bottom: none;
  }

  .woocommerce-cart table.cart tr {
    border-bottom: 1px solid var(--color-border);
    padding: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }

  .woocommerce-cart table.cart td.product-remove {
    order: -1;
    flex: 0 0 auto;
    padding: 0;
  }

  .woocommerce-cart table.cart td.product-thumbnail {
    flex: 0 0 auto;
    padding: 0;
    width: auto;
  }

  .woocommerce-cart table.cart td.product-name {
    flex: 1;
    padding: 0;
  }

  .woocommerce-cart table.cart td.product-price,
  .woocommerce-cart table.cart td.product-subtotal {
    flex: 0 0 auto;
    padding: 0;
  }

  .woocommerce-cart table.cart td.product-quantity {
    flex: 0 0 auto;
    padding: 0;
  }

  .cart_totals {
    max-width: 100%;
  }

  /* ---- Checkout ---- */
  .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .woocommerce-checkout #payment {
    padding: 1rem;
  }

  /* ---- My Account ---- */
  .woocommerce-MyAccount-navigation ul {
    gap: 0.25rem;
  }

  .woocommerce-MyAccount-navigation ul li a {
    font-size: 0.8rem;
    padding: 0.4rem 0.75rem;
  }

  /* ---- Footer ---- */
  .mbf-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .mbf-footer__brand {
    grid-column: auto;
  }

  /* ---- Related products ---- */
  .related.products ul.products {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* ---- FAQ ---- */
  .mbf-faq-container {
    padding-left: var(--content-padding);
    padding-right: var(--content-padding);
  }

  .mbf-faq__summary {
    padding: var(--space-md) 0;
    font-size: 0.9375rem;
  }

  .mbf-faq__answer {
    padding-left: var(--space-sm);
  }

}