/* ===========================================================================
   Wide-screen ladder — LOADED LAST.

   This has to be its own sheet at the end of the chain: a later `:root` block
   anywhere else would silently win and the whole ladder would do nothing.

   A wide grid gains COLUMNS; it does not stretch its cards. Letting a 1760px
   container simply make every card 580px wide reads as a zoomed-in mockup.
   =========================================================================== */

@media (min-width:1600px){
  :root{
    --container:1440px;
    --section-y:clamp(5.5rem,4rem + 3vw,8rem);
  }
  html{font-size:17px}
}
@media (min-width:2000px){
  :root{--container:1600px;--section-y:8.5rem}
  html{font-size:18px}
  .svc-grid{grid-template-columns:repeat(3,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .gal{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:2400px){
  :root{--container:1780px;--section-y:9.5rem}
  html{font-size:19px}
  .vals{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:2800px){
  :root{--container:1960px;--section-y:10.5rem}
  html{font-size:20px}
}

/* Boxed Elementor sections are pinned to the kit's max-width, so without this
   every builder-managed page stays narrow on a 27" display while the theme's
   own templates widen — and the two then disagree, which reads as a bug. */
@media (min-width:1600px){
  body .elementor .elementor-section.elementor-section-boxed > .elementor-container,
  .container{max-width:var(--container)}
}

/* Ultra-wide: pin the hero's pieces so the two columns do not drift apart,
   and hold every prose block to a readable measure. */
@media (min-width:2000px){
  body .elementor .hero-copy > .elementor-widget-wrap{padding-right:6rem}
  body .elementor .hero-lede > .elementor-widget-container{max-width:48ch}
  body .elementor .hero-side > .elementor-widget-wrap{margin-left:auto;max-width:28rem}
  body .elementor .sec-lede > .elementor-widget-container,
  body .elementor .sec-body > .elementor-widget-container{max-width:min(66ch,100%)}
  .cta-panel{grid-template-columns:1.35fr 1fr}
  .cta-act{max-width:24rem;margin-left:auto}
  .plate{max-width:40rem;margin-left:auto}
}

/* Short viewports (landscape phones): never let a hero's min-height clip the
   call-to-action off the bottom. */
@media (max-height:560px) and (orientation:landscape){
  body .elementor .hero{padding-block:4rem}
  .nav-drawer{padding-top:.75rem}
  .drawer-nav > a,.drawer-nav li > a{padding:.6rem 0;font-size:1.25rem}
}