/* ==========================================================================
   Responsive Helpers (v1.0)
   Purpose: Non-invasive overrides that target common anti-patterns found in
   legacy layouts. Safe to include after responsive-core.css.
   ========================================================================== */

/* Strip hard-coded widths/heights that break at extreme zooms */
[class*="col-"], [class*="span-"], [style*="width:"], img[style*="width:"],
div[style*="width:"], section[style*="width:"], aside[style*="width:"], article[style*="width:"],
header[style*="width:"], footer[style*="width:"], main[style*="width:"], nav[style*="width:"] {
  max-width: 100% !important;
}

[style*="height:"], img[style*="height:"], video[style*="height:"], iframe[style*="height:"] {
  height: auto !important;
}

/* Prevent absolute/fixed elements from overlapping content on zoom */
[class*="fixed"], [class*="sticky"], [class*="header"], [class*="footer"] {
  max-width: 100vw;
  left: 0;
  right: 0;
}

/* Common components */
.hero {
  display: grid;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) 0;
}
.hero > * { min-width: 0; }

/* Image galleries */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

/* Forms in two columns until they need to stack */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-3);
}

/* Utility to clamp overly long lines of text */
.measure { max-width: 65ch; }

/* Avoid text running to edges at high zoom */
.pad { padding: var(--space-3); }

/* Safe image frames */
.img-frame {
  border-radius: 0.5rem;
  overflow: hidden;
}