/*
 * Hero-overflow fixes — additive overrides only, does not touch vendor
 * Elementor/theme CSS or public/wp-content/**. See investigation report for
 * the measured before/after numbers.
 *
 * FIX 1 — About Us hero (about-uss.blade.php)
 * Root cause: public/wp-content/uploads/elementor/css/post-9.css sets
 *   .elementor-element-e46e263 > .elementor-container { min-height: 100vh; }
 * on the hero's background-slideshow section. Since the site header sits in
 * normal document flow ABOVE the hero (not fixed/overlaid), the rendered
 * page height at the top of every page is (header height) + (hero's own
 * height) — forcing the hero to exactly 100vh means the combined total is
 * always ~100-118px (one header's worth) taller than the viewport, on every
 * breakpoint. The hero section itself carries no heading/CTA text (it's a
 * pure background-image slideshow), so shrinking it loses no content.
 * The vendor rule's real selector is more specific than it first looks
 * (`.elementor-9 .elementor-element.elementor-element-e46e263 > .elementor-container`)
 * — matched here in full, with an extra `body` ancestor added so this wins
 * on specificity regardless of <link> load order.
 */
body .elementor-9 .elementor-element.elementor-element-e46e263 > .elementor-container {
  min-height: min(80vh, 720px);
}

/*
 * FIX 2 — Home hero (.kzb-hero, kz-hero-modern.css)
 * Root cause: at tablet/mobile widths, kz-hero-modern.css's own
 * `@media (max-width: 980px)` rule switches .kzb-inner to a single stacked
 * column (image above text). .kzb-img img's max-height (640px) was never
 * reduced for this stacked layout, so image + text + hero padding together
 * exceed one viewport's height (measured ~145px over at 768x1024, ~142px
 * over at 390x844). Desktop/laptop widths (two-column layout) were not
 * affected and are left untouched.
 */
@media (max-width: 980px) and (min-width: 545px) {
  .kzb-hero { padding: 48px 0; }
  .kzb-img img { max-height: 340px; }
}

@media (max-width: 544px) {
  .kzb-hero { padding: 32px 0; }
  .kzb-img img { max-height: 220px; }
  .kzb-inner { gap: 20px; }
}

/* Desktop two-column layout is untouched above, but on shorter desktop
   viewports (e.g. 1200x800) the product photo's own 640px cap still pushes
   the combined header+hero past 100vh by a small amount (~40-70px measured).
   Only responds to viewport HEIGHT, so laptops/monitors with normal-height
   screens (1920x1080, 1440x900) are unaffected. */
@media (min-width: 981px) and (max-height: 820px) {
  .kzb-img img { max-height: 520px; }
}