/* ==========================================================================
   Utilities API
   Runtime override utilities for shared layout contexts.

   Runtime contexts:
     --mw    max-width context
     --gap   spacing rhythm context
     --pi    inline padding context
     --pb    block padding context
     --ratio aspect-ratio context
   ========================================================================== */

/* max-width utilities */

.mw-xs {
  --mw: var(--mw-xs);
}

.mw-sm {
  --mw: var(--mw-sm);
}

.mw-md {
  --mw: var(--mw-md);
}

.mw-lg {
  --mw: var(--mw-lg);
}

.mw-xl {
  --mw: var(--mw-xl);
}

.mw-max {
  --mw: var(--mw-max);
}

.mw-full {
  --mw: var(--mw-full);
  --pi: 0rem;
  max-width: none;
}

/* text max-width utilities */

.mw-text-xs {
  --mw: var(--mw-text-xs);
}

.mw-text-sm {
  --mw: var(--mw-text-sm);
}

.mw-text-md {
  --mw: var(--mw-text-md);
}

.mw-text-lg {
  --mw: var(--mw-text-lg);
}

/* gap utilities */

.gap-0 {
  --gap: 0;
}

.gap-4 {
  --gap: var(--s-4);
}

.gap-8 {
  --gap: var(--s-8);
}

.gap-16 {
  --gap: var(--s-16);
}

.gap-24 {
  --gap: var(--s-24);
}

.gap-32 {
  --gap: var(--s-32);
}

.gap-40 {
  --gap: var(--s-40);
}

.gap-48 {
  --gap: var(--s-48);
}

.gap-60 {
  --gap: var(--s-60);
}

.gap-72 {
  --gap: var(--s-72);
}

.gap-96 {
  --gap: var(--s-96);
}

/* row-gap utilities — override vertical gap only (cols stay at --gap) */

.row-gap-0 {
  --row-gap: 0;
}

.row-gap-8 {
  --row-gap: var(--s-8);
}

.row-gap-16 {
  --row-gap: var(--s-16);
}

.row-gap-24 {
  --row-gap: var(--s-24);
}

.row-gap-32 {
  --row-gap: var(--s-32);
}

.row-gap-40 {
  --row-gap: var(--s-40);
}

.row-gap-48 {
  --row-gap: var(--s-48);
}

.row-gap-60 {
  --row-gap: var(--s-60);
}

.row-gap-72 {
  --row-gap: var(--s-72);
}

.row-gap-96 {
  --row-gap: var(--s-96);
}

/* inline padding utilities */

.pi-0 {
  --pi: 0;
}

.pi-8 {
  --pi: var(--s-8);
}

.pi-16 {
  --pi: var(--s-16);
}

.pi-24 {
  --pi: var(--s-24);
}

.pi-32 {
  --pi: var(--s-32);
}

.pi-40 {
  --pi: var(--s-40);
}

.pi-48 {
  --pi: var(--s-48);
}

.pi-60 {
  --pi: var(--s-60);
}

.pi-72 {
  --pi: var(--s-72);
}

.pi-96 {
  --pi: var(--s-96);
}

/* block padding utilities */

.pb-0 {
  --pb: 0;
}

.pb-8 {
  --pb: var(--s-8);
}

.pb-16 {
  --pb: var(--s-16);
}

.pb-24 {
  --pb: var(--s-24);
}

.pb-32 {
  --pb: var(--s-32);
}

.pb-40 {
  --pb: var(--s-40);
}

.pb-48 {
  --pb: var(--s-48);
}

.pb-60 {
  --pb: var(--s-60);
}

.pb-72 {
  --pb: var(--s-72);
}

.pb-96 {
  --pb: var(--s-96);
}

.pb-120 {
  --pb: var(--s-120);
}

.pb-144 {
  --pb: var(--s-144);
}

@media (min-width: 40rem) {
  .pb-24-md {
    --pb: var(--s-24);
  }
}

/* ratio utilities */

.ratio-1x1 {
  --ratio: 1;
}

.ratio-2x3 {
  --ratio: 2 / 3;
}

.ratio-3x4 {
  --ratio: 3 / 4;
}

.ratio-4x5 {
  --ratio: 4 / 5;
}

.ratio-2x1 {
  --ratio: 2 / 1;
}

.ratio-3x2 {
  --ratio: 3 / 2;
}

.ratio-4x3 {
  --ratio: 4 / 3;
}

.ratio-5x4 {
  --ratio: 5 / 4;
}

.ratio-5x3 {
  --ratio: 5 / 3;
}

/* No fixed ratio — image keeps its native aspect ratio / size. */
.ratio-none {
  --ratio: auto;
}

@media (min-width: 40rem) {
  .ratio-1x1-md {
    --ratio: 1;
  }

  .ratio-2x3-md {
    --ratio: 2 / 3;
  }

  .ratio-3x4-md {
    --ratio: 3 / 4;
  }

  .ratio-4x5-md {
    --ratio: 4 / 5;
  }

  .ratio-2x1-md {
    --ratio: 2 / 1;
  }

  .ratio-3x2-md {
    --ratio: 3 / 2;
  }

  .ratio-4x3-md {
    --ratio: 4 / 3;
  }

  .ratio-5x4-md {
    --ratio: 5 / 4;
  }

  .ratio-5x3-md {
    --ratio: 5 / 3;
  }
}

@media (min-width: 64rem) {
  .ratio-1x1-lg {
    --ratio: 1;
  }

  .ratio-2x3-lg {
    --ratio: 2 / 3;
  }

  .ratio-3x4-lg {
    --ratio: 3 / 4;
  }

  .ratio-4x5-lg {
    --ratio: 4 / 5;
  }

  .ratio-2x1-lg {
    --ratio: 2 / 1;
  }

  .ratio-3x2-lg {
    --ratio: 3 / 2;
  }

  .ratio-4x3-lg {
    --ratio: 4 / 3;
  }

  .ratio-5x4-lg {
    --ratio: 5 / 4;
  }

  .ratio-5x3-lg {
    --ratio: 5 / 3;
  }
}

@media (min-width: 90rem) {
  .ratio-1x1-xl {
    --ratio: 1;
  }

  .ratio-2x3-xl {
    --ratio: 2 / 3;
  }

  .ratio-3x4-xl {
    --ratio: 3 / 4;
  }

  .ratio-4x5-xl {
    --ratio: 4 / 5;
  }

  .ratio-2x1-xl {
    --ratio: 2 / 1;
  }

  .ratio-3x2-xl {
    --ratio: 3 / 2;
  }

  .ratio-4x3-xl {
    --ratio: 4 / 3;
  }

  .ratio-5x4-xl {
    --ratio: 5 / 4;
  }

  .ratio-5x3-xl {
    --ratio: 5 / 3;
  }
}

/* alignment utilities */

.self-start {
  align-self: start;
}

.self-center {
  align-self: center;
}

.self-end {
  align-self: end;
}

.self-stretch {
  align-self: stretch;
}

.justify-start {
  justify-self: start;
}

.justify-center {
  justify-self: center;
}

.justify-end {
  justify-self: end;
}

/* typography utilities */

.uppercase {
  text-transform: uppercase;
}

.bodoni {
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-style: normal;
  font-optical-sizing: none;
}

.bodoni-italic {
  font-family: var(--wp--preset--font-family--bodoni-moda);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* accessibility — visually hide but keep in the AT tree */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}