/* =========================================================
   ONE STEP PROGRESS — Utilities
   ========================================================= */

/* ---- Container ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--container-pad-lg); }
}

/* ---- Grid ---- */
.grid { display: grid; gap: var(--gap); }
@media (min-width: 1024px) { .grid { gap: var(--gap-lg); } }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---- Flex ---- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }

/* ---- Spacing ---- */
.mt-1 { margin-top: var(--s-1); }  .mb-1 { margin-bottom: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }  .mb-2 { margin-bottom: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }  .mb-3 { margin-bottom: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }  .mb-4 { margin-bottom: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }  .mb-5 { margin-bottom: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }  .mb-6 { margin-bottom: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }  .mb-7 { margin-bottom: var(--s-7); }
.pt-1 { padding-top: var(--s-1); } .pb-1 { padding-bottom: var(--s-1); }
.pt-2 { padding-top: var(--s-2); } .pb-2 { padding-bottom: var(--s-2); }
.pt-3 { padding-top: var(--s-3); } .pb-3 { padding-bottom: var(--s-3); }
.pt-4 { padding-top: var(--s-4); } .pb-4 { padding-bottom: var(--s-4); }
.pt-5 { padding-top: var(--s-5); } .pb-5 { padding-bottom: var(--s-5); }
.pt-6 { padding-top: var(--s-6); } .pb-6 { padding-bottom: var(--s-6); }
.pt-7 { padding-top: var(--s-7); } .pb-7 { padding-bottom: var(--s-7); }

/* ---- Text alignment ---- */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.uppercase { text-transform: uppercase; }

/* ---- Color utilities ---- */
.fg-paper   { color: var(--paper); }
.fg-red     { color: var(--red-brand); }
.fg-red-deep{ color: var(--red-deep); }
.fg-acid    { color: var(--acid-yellow); }
.fg-muted   { color: var(--fg-muted); }
.bg-ink     { background: var(--black-ink); }
.bg-soft    { background: var(--black-soft); }
.bg-paper   { background: var(--paper); color: var(--black-ink); }
.bg-red     { background: var(--red-brand); color: var(--paper); }

/* ---- Sections ---- */
section { position: relative; }
.section { padding-block: var(--s-6); }
.section-lg { padding-block: var(--s-7); }
@media (min-width: 1024px) {
  .section { padding-block: var(--s-7); }
  .section-lg { padding-block: var(--s-8); }
}

/* ---- Visibility ---- */
.hidden { display: none !important; }
@media (max-width: 767px)  { .hide-mobile { display: none !important; } }
@media (min-width: 768px)  { .show-mobile { display: none !important; } }
@media (max-width: 1023px) { .hide-tablet { display: none !important; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }

/* ---- Aspect ratios ---- */
.ratio-1\/1   { aspect-ratio: 1 / 1; }
.ratio-4\/3   { aspect-ratio: 4 / 3; }
.ratio-3\/4   { aspect-ratio: 3 / 4; }
.ratio-16\/9  { aspect-ratio: 16 / 9; }
.ratio-9\/16  { aspect-ratio: 9 / 16; }

/* ---- Rotations (street tilt) ---- */
.tilt-l-1 { transform: rotate(-1deg); }
.tilt-l-2 { transform: rotate(-2deg); }
.tilt-l-3 { transform: rotate(-3deg); }
.tilt-r-1 { transform: rotate(1deg); }
.tilt-r-2 { transform: rotate(2deg); }
.tilt-r-3 { transform: rotate(3deg); }
.tilt-r-5 { transform: rotate(5deg); }

/* ---- z layering ---- */
.layer-bg     { z-index: var(--z-bg); }
.layer-content{ z-index: var(--z-content); position: relative; }
.layer-sticky { z-index: var(--z-sticky); }
.layer-nav    { z-index: var(--z-nav); }
.layer-modal  { z-index: var(--z-modal); }

/* ---- Decorative full-bleed ---- */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---- Image cover/contain ---- */
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.img-contain { width: 100%; height: 100%; object-fit: contain; }

/* ---- B/W to color on hover ---- */
.bw-hover { filter: grayscale(1) contrast(1.05); transition: filter var(--dur-base) var(--ease-street); }
.bw-hover:hover { filter: grayscale(0) contrast(1); }