/**
 * Region tour landing pages (/saigon-tours/ = shop archive, /danang-tours/
 * = page 16694) -- desktop two-column layout for the "Book Tour Now"
 * widget (div#brxe-89d9c7).
 *
 * The problem (reported 2026-09-01, laptop screenshots): the widget
 * rendered BELOW the tour grid (div#brxe-458265) with the right 35% of the
 * section empty all the way down, only lining up beside the Fast Track
 * promo banner near the bottom. Cause: the parent section is a wrapping
 * flex row and region-ft-banner.js inserts the banner (#kt-ft-banner,
 * 65% wide on desktop) BETWEEN the grid and the widget, so the grid fills
 * flex line 1 alone and the banner + widget pair up on line 2.
 *
 * The fix, desktop only (>= 992px -- the same Bricks breakpoint at which
 * the grid goes full width below):
 *   1. send the banner to the END of the flex order, so the grid and the
 *      widget pack side by side on line 1 again and the banner wraps to
 *      its own line under the grid -- exactly where region-ft-banner.css
 *      already sizes it (calc(65% - 15px), max 800px);
 *   2. make the widget sticky so it follows the scroll down the grid.
 *
 * Both ids are the prod-verified anchors already load-bearing in
 * region-ft-banner.js (same ids on both pages, verified 2026-07-31).
 * Fail-safe by construction: if either id is gone (template rebuilt) or
 * the parent is not a flex container, every declaration here is inert and
 * the page renders exactly as before -- nothing is hidden or removed.
 * Mobile/tablet (< 992px) is untouched: grid, banner, widget keep their
 * current stacked order.
 */

@media (min-width: 992px) {
  /* 1. Banner last in flex order. DOM order (grid, banner, widget) is
     unchanged, so screen readers and < 992px layouts see no difference.
     Inert when the banner JS no-ops (no banner element = nothing between
     the grid and the widget anyway). */
  #kt-ft-banner.kt-ftb {
    order: 1;
  }

  /* 2. Follow the scroll. 130px clears the sticky site header -- the same
     offset the FT product booking card ships with (ft-product-9824.css).
     align-self stops the flex default stretch, without which the item is
     as tall as the flex line and sticky has no room to move. */
  #brxe-89d9c7 {
    position: sticky;
    top: 130px;
    align-self: flex-start;
  }
}