/*----------------------------------------------------------------
  Mile Away Stowe — Responsive layout smoothing
  Fixes abrupt, non-fluid resizing on the wide custom container
  classes, hero background crop, and a couple of decorative
  hero elements. Loads after main.css so these rules win by
  cascade order; nothing in main.css is deleted or modified.
------------------------------------------------------------------*/

/* ---------------------------------------------------------------
   Container widths.

   main.css only defines .container-XXXX (the oversized page-width
   variants) inside a single `@media (min-width: 1400px)` block, so
   below 1400px they fall back to plain Bootstrap .container
   (1140px at 1200-1399px). The result is a single-frame jump from
   1140px to the class's full target width right at 1400px — which
   lands inside common laptop viewports (1440/1512/1536px).

   Fix: replace the hard cutover with a two-point clamp() that
   ramps continuously from 1140px at a 1200px viewport up to the
   class's original target width at a 1400px viewport, then holds
   flat beyond that (matching today's behavior above 1400px) and
   flat at 1140px below 1200px (matching today's behavior at
   1200-1399px, just extended down slightly for a soft floor
   instead of falling through to Bootstrap's 992px/960px step).

   Formula (two-point clamp, anchors at 1200px->1140px and
   1400px->target): vw-coefficient = (target-1140)/2,
   intercept = 7980 - 6*target. Only the container widths actually
   used on the 9 real pages are covered here.
------------------------------------------------------------------*/
.container-1480 {
  max-width: clamp(1140px, -900px + 170vw, 1480px);
}
.container-1530 {
  max-width: clamp(1140px, -1200px + 195vw, 1530px);
}
.container-1630 {
  max-width: clamp(1140px, -1800px + 245vw, 1630px);
}
.container-1775 {
  max-width: clamp(1140px, -2670px + 317.5vw, 1775px);
}
.container-1800 {
  max-width: clamp(1140px, -2820px + 330vw, 1800px);
}
.container-1870 {
  max-width: clamp(1140px, -3240px + 365vw, 1870px);
}

/* ---------------------------------------------------------------
   About/FAQ inner hero background (data-background div).
   main.css steps padding-top across 4 breakpoints (220/210/200/
   160px), which shifts the photo's visible crop abruptly at each
   tier. Smooth it into one continuous ramp instead. padding-bottom
   was never overridden by breakpoint in main.css (always 220px);
   left as-is here too so the box doesn't change height unexpectedly.
------------------------------------------------------------------*/
.ab-inner-hero-bg,
.ab-inner-hero-faq {
  padding-top: clamp(160px, 136px + 6vw, 220px);
}

/* ---------------------------------------------------------------
   Home hero decorative elements (.tp-hero-shape-2 carries the
   "Historic charm. Modern luxury..." subtitle text, absolutely
   positioned relative to the hero title; .tp-hero-shape-1 wraps a
   currently-commented-out decorative image, kept in sync for when
   it's re-enabled). Both were pinned at discrete breakpoints only,
   drifting/overlapping at in-between widths.
------------------------------------------------------------------*/
.tp-hero-shape-2 {
  top: clamp(-75px, -56px - 1vw, -60px);
  right: clamp(-80px, -12px - 3.5vw, -25px);
}
.tp-hero-shape-1 {
  left: clamp(0%, -4% + 2.4vw, 27%);
}

/* ---------------------------------------------------------------
   Gallery grid horizontal padding on small phones.
   .container-1800.pl-50.pr-50 (mileaway-gallery.html) permanently
   eats 100px of a 320-375px viewport since spacing.css utilities
   carry no responsive variants. Scoped to this specific combo only
   (spacing.css itself is untouched — used 100+ places site-wide).
------------------------------------------------------------------*/
@media (max-width: 576px) {
  .container-1800.pl-50 {
    padding-left: 16px;
  }
  .container-1800.pr-50 {
    padding-right: 16px;
  }
}