/* =====================================
   Utilities & Container Query Scaffolding
   Hanssen Agency — u-* utility layer
   ===================================== */

/* Utility spacing scale (fluid) */
:root {
  --u-space-0: 0;
  --u-space-1: clamp(0.25rem, 0.6vw, 0.5rem);
  --u-space-2: clamp(0.5rem, 1.2vw, 0.75rem);
  --u-space-3: clamp(0.75rem, 1.8vw, 1rem);
  --u-space-4: clamp(1rem, 2.4vw, 1.5rem);
  --u-space-5: clamp(1.5rem, 3.2vw, 2rem);
  --u-space-6: clamp(2rem, 4vw, 3rem);
}

/* Container Query opt-in */
.cq { container-type: inline-size; }

/* Layout utilities */
.u-container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
  width: 100%;
}

.u-flex { display: flex; }
.u-flex-col { flex-direction: column; }
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }
.u-justify-between { justify-content: space-between; }

.u-grid { display: grid; gap: var(--element-spacing); }
.u-grid-auto { grid-template-columns: 1fr; }

/* Gap utilities */
.u-gap-0 { gap: var(--u-space-0); }
.u-gap-1 { gap: var(--u-space-1); }
.u-gap-2 { gap: var(--u-space-2); }
.u-gap-3 { gap: var(--u-space-3); }
.u-gap-4 { gap: var(--u-space-4); }
.u-gap-5 { gap: var(--u-space-5); }
.u-gap-6 { gap: var(--u-space-6); }

/* Margin utilities */
.u-m-0 { margin: var(--u-space-0) !important; }
.u-m-1 { margin: var(--u-space-1) !important; }
.u-m-2 { margin: var(--u-space-2) !important; }
.u-m-3 { margin: var(--u-space-3) !important; }
.u-m-4 { margin: var(--u-space-4) !important; }
.u-m-5 { margin: var(--u-space-5) !important; }
.u-m-6 { margin: var(--u-space-6) !important; }

.u-mt-0 { margin-top: var(--u-space-0) !important; }
.u-mt-1 { margin-top: var(--u-space-1) !important; }
.u-mt-2 { margin-top: var(--u-space-2) !important; }
.u-mt-3 { margin-top: var(--u-space-3) !important; }
.u-mt-4 { margin-top: var(--u-space-4) !important; }
.u-mt-5 { margin-top: var(--u-space-5) !important; }
.u-mt-6 { margin-top: var(--u-space-6) !important; }

.u-mr-0 { margin-right: var(--u-space-0) !important; }
.u-mr-1 { margin-right: var(--u-space-1) !important; }
.u-mr-2 { margin-right: var(--u-space-2) !important; }
.u-mr-3 { margin-right: var(--u-space-3) !important; }
.u-mr-4 { margin-right: var(--u-space-4) !important; }
.u-mr-5 { margin-right: var(--u-space-5) !important; }
.u-mr-6 { margin-right: var(--u-space-6) !important; }

.u-mb-0 { margin-bottom: var(--u-space-0) !important; }
.u-mb-1 { margin-bottom: var(--u-space-1) !important; }
.u-mb-2 { margin-bottom: var(--u-space-2) !important; }
.u-mb-3 { margin-bottom: var(--u-space-3) !important; }
.u-mb-4 { margin-bottom: var(--u-space-4) !important; }
.u-mb-5 { margin-bottom: var(--u-space-5) !important; }
.u-mb-6 { margin-bottom: var(--u-space-6) !important; }

.u-ml-0 { margin-left: var(--u-space-0) !important; }
.u-ml-1 { margin-left: var(--u-space-1) !important; }
.u-ml-2 { margin-left: var(--u-space-2) !important; }
.u-ml-3 { margin-left: var(--u-space-3) !important; }
.u-ml-4 { margin-left: var(--u-space-4) !important; }
.u-ml-5 { margin-left: var(--u-space-5) !important; }
.u-ml-6 { margin-left: var(--u-space-6) !important; }

.u-mx-0 { margin-left: var(--u-space-0) !important; margin-right: var(--u-space-0) !important; }
.u-mx-1 { margin-left: var(--u-space-1) !important; margin-right: var(--u-space-1) !important; }
.u-mx-2 { margin-left: var(--u-space-2) !important; margin-right: var(--u-space-2) !important; }
.u-mx-3 { margin-left: var(--u-space-3) !important; margin-right: var(--u-space-3) !important; }
.u-mx-4 { margin-left: var(--u-space-4) !important; margin-right: var(--u-space-4) !important; }
.u-mx-5 { margin-left: var(--u-space-5) !important; margin-right: var(--u-space-5) !important; }
.u-mx-6 { margin-left: var(--u-space-6) !important; margin-right: var(--u-space-6) !important; }

.u-my-0 { margin-top: var(--u-space-0) !important; margin-bottom: var(--u-space-0) !important; }
.u-my-1 { margin-top: var(--u-space-1) !important; margin-bottom: var(--u-space-1) !important; }
.u-my-2 { margin-top: var(--u-space-2) !important; margin-bottom: var(--u-space-2) !important; }
.u-my-3 { margin-top: var(--u-space-3) !important; margin-bottom: var(--u-space-3) !important; }
.u-my-4 { margin-top: var(--u-space-4) !important; margin-bottom: var(--u-space-4) !important; }
.u-my-5 { margin-top: var(--u-space-5) !important; margin-bottom: var(--u-space-5) !important; }
.u-my-6 { margin-top: var(--u-space-6) !important; margin-bottom: var(--u-space-6) !important; }

/* Padding utilities */
.u-p-0 { padding: var(--u-space-0) !important; }
.u-p-1 { padding: var(--u-space-1) !important; }
.u-p-2 { padding: var(--u-space-2) !important; }
.u-p-3 { padding: var(--u-space-3) !important; }
.u-p-4 { padding: var(--u-space-4) !important; }
.u-p-5 { padding: var(--u-space-5) !important; }
.u-p-6 { padding: var(--u-space-6) !important; }

.u-pt-0 { padding-top: var(--u-space-0) !important; }
.u-pt-1 { padding-top: var(--u-space-1) !important; }
.u-pt-2 { padding-top: var(--u-space-2) !important; }
.u-pt-3 { padding-top: var(--u-space-3) !important; }
.u-pt-4 { padding-top: var(--u-space-4) !important; }
.u-pt-5 { padding-top: var(--u-space-5) !important; }
.u-pt-6 { padding-top: var(--u-space-6) !important; }

.u-pr-0 { padding-right: var(--u-space-0) !important; }
.u-pr-1 { padding-right: var(--u-space-1) !important; }
.u-pr-2 { padding-right: var(--u-space-2) !important; }
.u-pr-3 { padding-right: var(--u-space-3) !important; }
.u-pr-4 { padding-right: var(--u-space-4) !important; }
.u-pr-5 { padding-right: var(--u-space-5) !important; }
.u-pr-6 { padding-right: var(--u-space-6) !important; }

.u-pb-0 { padding-bottom: var(--u-space-0) !important; }
.u-pb-1 { padding-bottom: var(--u-space-1) !important; }
.u-pb-2 { padding-bottom: var(--u-space-2) !important; }
.u-pb-3 { padding-bottom: var(--u-space-3) !important; }
.u-pb-4 { padding-bottom: var(--u-space-4) !important; }
.u-pb-5 { padding-bottom: var(--u-space-5) !important; }
.u-pb-6 { padding-bottom: var(--u-space-6) !important; }

.u-pl-0 { padding-left: var(--u-space-0) !important; }
.u-pl-1 { padding-left: var(--u-space-1) !important; }
.u-pl-2 { padding-left: var(--u-space-2) !important; }
.u-pl-3 { padding-left: var(--u-space-3) !important; }
.u-pl-4 { padding-left: var(--u-space-4) !important; }
.u-pl-5 { padding-left: var(--u-space-5) !important; }
.u-pl-6 { padding-left: var(--u-space-6) !important; }

.u-px-0 { padding-left: var(--u-space-0) !important; padding-right: var(--u-space-0) !important; }
.u-px-1 { padding-left: var(--u-space-1) !important; padding-right: var(--u-space-1) !important; }
.u-px-2 { padding-left: var(--u-space-2) !important; padding-right: var(--u-space-2) !important; }
.u-px-3 { padding-left: var(--u-space-3) !important; padding-right: var(--u-space-3) !important; }
.u-px-4 { padding-left: var(--u-space-4) !important; padding-right: var(--u-space-4) !important; }
.u-px-5 { padding-left: var(--u-space-5) !important; padding-right: var(--u-space-5) !important; }
.u-px-6 { padding-left: var(--u-space-6) !important; padding-right: var(--u-space-6) !important; }

.u-py-0 { padding-top: var(--u-space-0) !important; padding-bottom: var(--u-space-0) !important; }
.u-py-1 { padding-top: var(--u-space-1) !important; padding-bottom: var(--u-space-1) !important; }
.u-py-2 { padding-top: var(--u-space-2) !important; padding-bottom: var(--u-space-2) !important; }
.u-py-3 { padding-top: var(--u-space-3) !important; padding-bottom: var(--u-space-3) !important; }
.u-py-4 { padding-top: var(--u-space-4) !important; padding-bottom: var(--u-space-4) !important; }
.u-py-5 { padding-top: var(--u-space-5) !important; padding-bottom: var(--u-space-5) !important; }
.u-py-6 { padding-top: var(--u-space-6) !important; padding-bottom: var(--u-space-6) !important; }

/* Visibility & accessibility */
.u-hidden { display: none !important; }
.u-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Safe-area helper for iOS notch devices */
.u-safe-y {
  padding-top: max(var(--u-space-0), env(safe-area-inset-top));
  padding-bottom: max(var(--u-space-0), env(safe-area-inset-bottom));
}

/* Container-query responsive patterns for grids */
@container (min-width: 560px) {
  .cq .u-grid-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 840px) {
  .cq .u-grid-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}