/* =========================================================
   MOBILE ADAPTIVE — Stage 20B-1
   Scope: /menu item sections only
   ========================================================= */

/* Phone portrait */
@media (max-width: 480px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body.page-menu .promos.promos--compact,
  body.page-menu .menu-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-menu .promo.promo--compact,
  body.page-menu .menu-tile {
    min-width: 0 !important;
    width: auto !important;
  }

  body.page-menu .promo.promo--compact .promo-photo {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.page-menu .promo.promo--compact .promo-title {
    font-size: 11px !important;
    line-height: 1.12 !important;
  }

  body.page-menu .promo.promo--compact .promo-content {
    padding: 7px 7px 8px !important;
  }

  body.page-menu .promo.promo--compact .promo-price {
    font-size: 9px !important;
    min-height: 17px !important;
    padding: 0 6px !important;
  }
}

/* Large phone / small tablet */
@media (min-width: 481px) and (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body.page-menu .promos.promos--compact,
  body.page-menu .menu-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-menu .promo.promo--compact .promo-photo {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Tablet portrait / tablet landscape */
@media (min-width: 761px) and (max-width: 1100px) {
  body.page-menu .promos.promos--compact,
  body.page-menu .menu-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Phone landscape */
@media (max-width: 900px) and (orientation: landscape) {
  html,
  body {
    overflow-x: hidden !important;
  }

  body.page-menu .promos.promos--compact,
  body.page-menu .menu-tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body.page-menu .promo.promo--compact .promo-photo {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
  }
}

/* =========================================================
   MOBILE ADAPTIVE — Stage 20B-2 HOME
   Scope: home page only
   ========================================================= */

/* Phone portrait */
@media (max-width: 480px) {
  body.page-home {
    overflow-x: hidden !important;
  }

  body.page-home .categories-row,
  body.page-home .cards-primary,
  body.page-home .categories-row .cards-primary.categories,
  body.page-home .menu-hubs-grid,
  body.page-home .hub-grid,
  body.page-home .category-grid,
  body.page-home .pivska-showcase,
  body.page-home .pivska-cards-row,
  body.page-home .cards-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-home .cat-card,
  body.page-home .pivska-card,
  body.page-home .promo-banner,
  body.page-home .promo-card {
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  body.page-home .cat-card {
    aspect-ratio: 16 / 9 !important;
  }

  body.page-home .pivska-card {
    aspect-ratio: 3 / 4 !important;
  }

  body.page-home .pivska-title-block {
    min-height: 0 !important;
    padding: 16px 12px !important;
  }

  body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-home .promo-banner,
  body.page-home .promo-combo-card {
    min-height: 160px !important;
    height: auto !important;
  }

  body.page-home .promo-combo-card .promo-banner-content {
    max-width: 78% !important;
  }

  body.page-home .cat-title,
  body.page-home .beer-card-title,
  body.page-home .promo-title {
    font-size: clamp(16px, 5vw, 24px) !important;
    line-height: 1.05 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body.page-home .cat-subtitle,
  body.page-home .beer-card-meta,
  body.page-home .promo-copy {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

/* Large phone / small tablet */
@media (min-width: 481px) and (max-width: 760px) {
  body.page-home {
    overflow-x: hidden !important;
  }

  body.page-home .cards-primary,
  body.page-home .categories-row .cards-primary.categories,
  body.page-home .menu-hubs-grid,
  body.page-home .hub-grid,
  body.page-home .category-grid,
  body.page-home .pivska-showcase,
  body.page-home .pivska-cards-row,
  body.page-home .cards-secondary {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.page-home .pivska-card {
    aspect-ratio: 3 / 4 !important;
  }

  body.page-home .cat-card {
    aspect-ratio: 16 / 9 !important;
  }
}

/* Phone landscape */
@media (max-width: 900px) and (orientation: landscape) {
  body.page-home {
    overflow-x: hidden !important;
  }

  body.page-home .cards-primary,
  body.page-home .categories-row .cards-primary.categories,
  body.page-home .pivska-showcase,
  body.page-home .pivska-cards-row,
  body.page-home .cards-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.page-home .promo-banners {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}

/* Tablet */
@media (min-width: 761px) and (max-width: 1100px) {
  body.page-home .cards-primary,
  body.page-home .categories-row .cards-primary.categories,
  body.page-home .pivska-showcase,
  body.page-home .pivska-cards-row,
  body.page-home .cards-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   MOBILE ADAPTIVE — Stage 20B-2B HOME FLOW FIX
   Fix section flow: categories-row is NOT a grid
   ========================================================= */

@media (max-width: 760px) {
  body.page-home {
    overflow-x: hidden !important;
  }

  body.page-home .categories-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.page-home .cards-primary,
  body.page-home .categories-row .cards-primary.categories {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-home .cat-card {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
  }

  body.page-home .pivska-showcase {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.page-home .pivska-title-block {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 16px 14px !important;
    aspect-ratio: auto !important;
  }

  body.page-home .pivska-cards-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-home .pivska-card {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
  }

  body.page-home .promo-banners {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-home .promo-banner,
  body.page-home .promo-combo-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 170px !important;
    height: auto !important;
  }

  body.page-home .cards-secondary {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.page-home .cards-secondary .cat-card {
    aspect-ratio: 16 / 7 !important;
  }

  body.page-home .cat-title,
  body.page-home .beer-card-title,
  body.page-home .promo-title {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.page-home .categories-row {
    display: flex !important;
    flex-direction: column !important;
  }

  body.page-home .cards-primary,
  body.page-home .categories-row .cards-primary.categories,
  body.page-home .pivska-cards-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.page-home .pivska-showcase {
    display: flex !important;
    flex-direction: column !important;
  }

  body.page-home .cards-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   MOBILE ADAPTIVE — Stage 20B-3 MENU HUBS FIX
   Scope: /menu hubs only
   ========================================================= */

@media (max-width: 760px) {
  body.page-menu--hubs {
    overflow-x: hidden !important;
  }

  body.page-menu--hubs .categories,
  body.page-menu--hubs .categories.categories--rich,
  body.page-menu--hubs .menu-set-cards,
  body.page-menu--hubs .menu-hubs-grid,
  body.page-menu--hubs .hub-grid,
  body.page-menu--hubs .category-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  body.page-menu--hubs .cat-card,
  body.page-menu--hubs .cat-card--set-media {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 16px !important;
  }

  body.page-menu--hubs .cat-photo,
  body.page-menu--hubs .set-entry-media {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.page-menu--hubs .cat-title {
    font-size: clamp(20px, 6vw, 30px) !important;
    line-height: 1.05 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.page-menu--hubs .cat-sub {
    font-size: 12px !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }
}

@media (max-width: 420px) {
  body.page-menu--hubs .categories,
  body.page-menu--hubs .categories.categories--rich,
  body.page-menu--hubs .menu-set-cards,
  body.page-menu--hubs .menu-hubs-grid,
  body.page-menu--hubs .hub-grid,
  body.page-menu--hubs .category-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  body.page-menu--hubs .cat-card,
  body.page-menu--hubs .cat-card--set-media {
    aspect-ratio: 16 / 7 !important;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  body.page-menu--hubs .categories,
  body.page-menu--hubs .categories.categories--rich,
  body.page-menu--hubs .menu-set-cards,
  body.page-menu--hubs .menu-hubs-grid,
  body.page-menu--hubs .hub-grid,
  body.page-menu--hubs .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}