/* ============================================================
   PHOTO SQUARE — Layout Utilities
   ============================================================ */

/* ── Grid ── */
.grid { display: grid; }
.grid--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-xl); }
.grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }

/* ── Flex ── */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--gap-sm { gap: var(--space-sm); }
.flex--gap-md { gap: var(--space-md); }
.flex--gap-lg { gap: var(--space-lg); }
.flex--wrap { flex-wrap: wrap; }
.flex--column { flex-direction: column; }

/* ── Position ── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* ── Display ── */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* ── Alignment ── */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* ── Overflow ── */
.overflow-hidden { overflow: hidden; }