/* === Responsive Patch (non-destructive) === */
:root{
  --container-max: 1200px;
  --gutter: clamp(12px, 2vw, 28px);
}

/* Prevent horizontal scroll from overflow */
html, body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
iframe, .w-embed { max-width: 100%; }

/* Fluid container (keeps style, avoids overflow) */
.w-container, .container {
  width: min(100% - 2*var(--gutter), var(--container-max));
  margin-inline: auto;
}

/* Generic row that wraps on small screens */
.row, .w-row, .grid, .columns {
  display: grid;
  gap: var(--gutter);
}

/* Make columns collapse gracefully */
@media (min-width: 992px){
  .row-3, .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row-4, .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 768px) and (max-width: 991px){
  .row-3, .grid-3, .row-4, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px){
  .row-3, .grid-3, .row-4, .grid-4 { grid-template-columns: 1fr; }
}

/* Typography scales slightly without changing your font choices */
:root{
  --step-0: clamp(0.95rem, 0.85rem + 0.5vw, 1.05rem);
  --step-1: clamp(1.10rem, 1.00rem + 0.8vw, 1.25rem);
  --step-2: clamp(1.35rem, 1.10rem + 1.2vw, 1.55rem);
  --step-3: clamp(1.62rem, 1.25rem + 1.8vw, 1.95rem);
  --step-4: clamp(1.95rem, 1.45rem + 2.6vw, 2.40rem);
}
body { font-size: var(--step-0); line-height: 1.55; }

/* === CARDWRAP: homepage cards responsive === */
.cardwrap, .card-wrap, .cards-wrap, .cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: var(--gutter);
  align-items: stretch;
}
.card, .card-item, .card_box, .w-dyn-item {
  min-width: 0;
  width: 100%;
}

/* Ensure large fixed-width elements don't cause overflow */
section, .section, .wf-section, .w-section, .hero, .footer, .nav, .navbar {
  max-width: 100vw;
}

/* Images inside cards keep aspect and don't overflow */
.card img, .card-item img, .card_box img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Buttons and inputs wrap instead of overflowing */
button, .button, .btn, input, select, textarea {
  max-width: 100%;
}

/* Utility to clamp hero headings (no style change, just size guard) */
.hero h1, .hero .heading, h1.hero-title {
  font-size: var(--step-4);
}