/*
 * utilities.css — TIG Lassen Design System
 * Containers, grids, spacing, display, flexbox, animations
 */

.container {
  width: 100%; margin-left: auto; margin-right: auto;
  padding-left: var(--container-padding-x); padding-right: var(--container-padding-x);
  max-width: var(--container-max);
}

.container-wide {
  width: 100%; margin-left: auto; margin-right: auto;
  padding-left: var(--container-padding-x); padding-right: var(--container-padding-x);
  max-width: var(--container-wide);
}

.container-narrow {
  width: 100%; margin-left: auto; margin-right: auto;
  padding-left: var(--container-padding-x); padding-right: var(--container-padding-x);
  max-width: var(--container-narrow);
}

.container-text {
  width: 100%; margin-left: auto; margin-right: auto;
  padding-left: var(--container-padding-x); padding-right: var(--container-padding-x);
  max-width: var(--container-text);
}

.section { padding-top: var(--section-padding-y); padding-bottom: var(--section-padding-y); }
.section-lg { padding-top: var(--section-padding-y-lg); padding-bottom: var(--section-padding-y-lg); }
.section-sm { padding-top: calc(var(--section-padding-y) * 0.6); padding-bottom: calc(var(--section-padding-y) * 0.6); }

.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
.grid-5-7 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .grid-5-7 { grid-template-columns: 5fr 7fr; }
}

.gap-sm { gap: var(--space-4); }
.gap-md { gap: var(--space-6); }
.gap-lg { gap: var(--space-8); }
.gap-xl { gap: var(--space-12); }

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }
.justify-start  { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-shrink-0  { flex-shrink: 0; }
.flex-1         { flex: 1; }

.block         { display: block; }
.inline-block  { display: inline-block; }
.inline-flex   { display: inline-flex; }
.hidden        { display: none; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }
.inset-0  { top: 0; right: 0; bottom: 0; left: 0; }

.overflow-hidden { overflow: hidden; }
.w-full    { width: 100%; }
.h-full    { height: 100%; }
.min-h-screen { min-height: 100vh; }

.mt-0  { margin-top: 0; }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }
.mb-0  { margin-bottom: 0; }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-4  { padding: var(--space-4); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }

.bg-primary   { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary  { background-color: var(--color-bg-tertiary); }
.bg-accent    { background-color: var(--color-accent); }

.border       { border: var(--divider-thickness) solid var(--color-border); }
.border-top   { border-top: var(--divider-thickness) solid var(--color-border); }
.border-bottom { border-bottom: var(--divider-thickness) solid var(--color-border); }

.divider { border: none; border-top: var(--divider-thickness) solid var(--color-border); margin: var(--space-8) 0; }
.divider-accent { border: none; border-top: 2px solid var(--color-accent); width: 3rem; margin: var(--space-4) 0; }

.object-cover  { object-fit: cover; }

.fade-in-up {
  opacity: 0; transform: translateY(2rem);
  animation: fadeInUp 0.6s ease forwards;
}
.fade-in-left {
  opacity: 0; transform: translateX(-2rem);
  animation: fadeInLeft 0.6s ease forwards;
}
.fade-in-right {
  opacity: 0; transform: translateX(2rem);
  animation: fadeInRight 0.6s ease forwards;
}

@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  to { opacity: 1; transform: translateX(0); }
}

.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }
.delay-500 { animation-delay: 500ms; }

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