/**
 * Card / promo / news grids: Bootstrap md (768px) and lg (992px) leave a gap where
 * .row > * stays full width and many blocks use col-lg-* only.
 *
 * - 576px to 767.98px: apply md column widths (2-up for col-md-6 / col-md-4).
 * - 576px to 991.98px: 2-up for col-lg-3 / col-lg-4 in card grids (not col-lg-6 feature rows).
 * Stack below 576px only. Loaded after skin.css so it beats per-skin full-width grid rules.
 *
 * Tablet (<=991.98px): contain row bleed so negative .row margins do not eat the right gutter.
 */

@media (max-width: 991.98px) {
  body:not(.nav-open) {
    overflow-x: clip;
  }

  #content .layout__block > .container:not(.container-fluid):not(.px-0),
  #content > .container:not(.container-fluid):not(.px-0) {
    overflow-x: clip;
    box-sizing: border-box;
  }

  /* Match skin header gutter; beat row negative margin bleed on the right edge. */
  body[class*="skin-"] #content .layout__block > .container:not(.container-fluid):not(.px-0),
  body[class*="skin-"] #content > .container:not(.container-fluid):not(.px-0),
  body[class*="skin-"] .hero--bleed .hero__panel > .container,
  body[class*="skin-"] .hero--bleed .hero__booking > .container {
    padding-inline: var(--dv-gutter, var(--bs-gutter-x, 1.5rem));
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #content .row > [class*="col-md-6"],
  #content .row > .col-12[class*="col-md-6"],
  .layout__block .row > [class*="col-md-6"],
  .layout__block .row > .col-12[class*="col-md-6"],
  .layout__block .row .row > [class*="col-md-6"],
  .layout__block .row .row > .col-12[class*="col-md-6"],
  .promo-embed__grid > [class*="col-md-6"],
  .promo-index > [class*="col-md-6"],
  .promo-index > .col-12[class*="col-md-6"],
  .filter-results > [class*="col-md-6"],
  .filter-results > .col-12[class*="col-md-6"] {
    flex: 0 0 50% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  #content .row > .col-md-4,
  .layout__block .row > .col-md-4,
  .layout__block .row .row > .col-md-4,
  .promo-embed__grid > .col-md-4,
  .promo-index > .col-md-4,
  .filter-results > .col-md-4 {
    flex: 0 0 50% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  #content .row > .col-lg-4,
  #content .row > .col-lg-3,
  .layout__block .row > .col-lg-4,
  .layout__block .row > .col-lg-3,
  .promo-embed__grid > .col-lg-4,
  .promo-embed__grid > .col-lg-3,
  .promo-embed__grid > [class*="col-lg-4"],
  .promo-embed__grid > [class*="col-lg-3"],
  .promo-index > .col-lg-4,
  .promo-index > [class*="col-lg-4"],
  .promo-index > .col-lg-3,
  .promo-index > [class*="col-lg-3"],
  .filter-results > .col-lg-4,
  .filter-results > .col-lg-3,
  .filter-results > [class*="col-lg-4"],
  .filter-results > [class*="col-lg-3"] {
    flex: 0 0 50% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .layout__block .row > .col-lg-4.col-md-6,
  .layout__block .row > [class*="col-lg-4"][class*="col-md-6"] {
    flex: 0 0 50% !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }
}

/* Ironmonger index hubs: 3-up stacked tiles (768-991), not the default 2-up grid. */
@media (min-width: 768px) and (max-width: 991.98px) {
  body.skin-ironmonger .promo-index > [class*="col-"],
  body.skin-ironmonger .filter-results > [class*="col-"],
  body.skin-ironmonger .news-index .row.gx-lg-6 > [class*="col-"] {
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important;
  }
}

/*
 * Mid-desktop horizontal scroll (992px to ~container-max): layout blocks use
 * gx-lg-6/8 (4.5rem / 6rem) while .container padding follows --bs-gutter-x
 * (often calc(var(--dv-gutter) * 2) = 3rem when set in skin). Row negative
 * margins then exceed container padding. Worst when viewport width ~= container
 * width; Esplanade already sets container --bs-gutter-x in skin.css.
 *
 * Below 992px this file already clips #content containers; above 1245px extra
 * viewport margin often absorbs the bleed - this band needs an explicit fix.
 */
@media (min-width: 992px) {
  body[class*="skin-"] .container:not(.container-fluid):not(.px-0) {
    --bs-gutter-x: calc(var(--dv-gutter, 1.5rem) * 2);
    box-sizing: border-box;
  }

  body[class*="skin-"] .container:not(.container-fluid):not(.px-0) .row[class*="gx-lg"] {
    --bs-gutter-x: calc(var(--dv-gutter, 1.5rem) * 2);
  }

  body[class*="skin-"] .container:not(.container-fluid):not(.px-0) .row[class*="gx-lg"] > [class*="col-"] {
    min-width: 0;
  }
}

@media (min-width: 992px) and (max-width: 1244.98px) {
  body.skin-fell-fold,
  body.skin-nocturne,
  body.skin-tidewell {
    overflow-x: clip;
  }
}