/* MDP Central HOME layout coherence
   Keep the map/agenda and services/commercial bands on the same desktop grid,
   remove dead space caused by fixed-height Waze fallback, and preserve natural
   stacking on smaller screens. */

@media (min-width: 1100px) {
  .product-home-shell .middle-grid,
  .product-home-shell .lower-grid.lower-grid-no-promotions {
    grid-template-columns: minmax(0, 1.86fr) minmax(340px, 1fr) !important;
    gap: 20px !important;
  }

  .product-home-shell .middle-grid {
    align-items: stretch !important;
  }

  .product-home-shell .middle-grid > .nearby,
  .product-home-shell .middle-grid > .agenda {
    min-width: 0;
    height: 100%;
  }

  .product-home-shell .middle-grid > .nearby {
    display: flex;
    flex-direction: column;
  }

  /* Waze is the common HOME fallback. Its old fixed 390px height left a
     visible hole whenever the agenda column was taller. Let it fill the row. */
  .product-home-shell .middle-grid .nearby > .waze-live-compact {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    margin: 0;
  }

  .product-home-shell .middle-grid .waze-live-compact .waze-live-frame {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 330px !important;
  }

  .product-home-shell .middle-grid .waze-live-compact .waze-live-frame iframe {
    width: 100%;
    height: 100% !important;
    min-height: 330px !important;
  }

  /* When there are no real promotions, this band must match the exact same
     columns as the map/agenda band instead of inheriting the old 3-col grid. */
  .product-home-shell .lower-grid.lower-grid-no-promotions {
    display: grid !important;
    align-items: stretch !important;
    margin-top: 20px !important;
  }

  .product-home-shell .lower-grid.lower-grid-no-promotions > .quick-services {
    grid-column: 1;
    min-width: 0;
    height: 100%;
  }

  .product-home-shell .lower-grid.lower-grid-no-promotions > .business-cta {
    grid-column: 2;
    min-width: 0;
    height: 100%;
  }

  .product-home-shell .lower-grid.lower-grid-no-promotions .business-cta,
  .product-home-shell .lower-grid.lower-grid-no-promotions .business-cta > div {
    min-height: 232px;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  .product-home-shell .middle-grid,
  .product-home-shell .lower-grid.lower-grid-no-promotions {
    grid-template-columns: minmax(0, 1.62fr) minmax(300px, 1fr) !important;
    gap: 16px !important;
  }

  .product-home-shell .middle-grid {
    align-items: stretch !important;
  }

  .product-home-shell .middle-grid > .nearby {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .product-home-shell .middle-grid .nearby > .waze-live-compact {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
  }

  .product-home-shell .middle-grid .waze-live-compact .waze-live-frame,
  .product-home-shell .middle-grid .waze-live-compact .waze-live-frame iframe {
    height: 100% !important;
    min-height: 310px !important;
  }

  .product-home-shell .lower-grid.lower-grid-no-promotions {
    display: grid !important;
    align-items: stretch !important;
    margin-top: 16px !important;
  }

  .product-home-shell .lower-grid.lower-grid-no-promotions > .quick-services {
    grid-column: 1;
  }

  .product-home-shell .lower-grid.lower-grid-no-promotions > .business-cta {
    grid-column: 2;
    display: block !important;
  }
}

@media (max-width: 767px) {
  .product-home-shell .middle-grid,
  .product-home-shell .lower-grid,
  .product-home-shell .lower-grid.lower-grid-no-promotions {
    gap: 18px !important;
    margin-top: 18px !important;
  }

  .product-home-shell .middle-grid .waze-live-compact .waze-live-frame,
  .product-home-shell .middle-grid .waze-live-compact .waze-live-frame iframe {
    min-height: 320px !important;
    height: 320px !important;
  }
}