/* ==== Responsive Utilities (site-wide) ==== */
*, *::before, *::after { box-sizing: border-box; }

/* Fluid media */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* Containers */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.container-narrow { max-width: 860px; }

/* Layout helpers */
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; flex-wrap: wrap; gap: 16px; }
.col { flex: 1 1 0; min-width: 0; }
.text-wrap { word-wrap: break-word; overflow-wrap: anywhere; }

/* Table wrapper */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; max-width: 100%; }

/* Breakpoints */
@media (max-width: 992px) {
  .container { max-width: 940px; }
}

@media (max-width: 768px) {
  .container { padding: 0 12px; }
  .row { gap: 12px; }
  /* Form controls full-width on small */
  input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
  input[type="number"], input[type="datetime-local"], select, textarea {
    width: 100% !important;
  }
}

@media (max-width: 576px) {
  .container { max-width: 100%; padding: 0 10px; }
}