/* ==========================================================================
   Layout Utilities — Envision Tattoo Studio
   All values reference tokens from variables.css. No magic numbers.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Container
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}


/* --------------------------------------------------------------------------
   Section
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-16);
  scroll-margin-top: var(--header-height);
}

.section--dark {
  background-color: var(--color-ink);
  color: var(--color-text-on-dark);
}

.section--alt {
  background-color: var(--color-surface-alt);
}


/* --------------------------------------------------------------------------
   Grid System
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}


/* --------------------------------------------------------------------------
   Flexbox Utilities
   -------------------------------------------------------------------------- */

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }


/* --------------------------------------------------------------------------
   Page Layout
   -------------------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1;
}

/* Skip-link target — focusable but not visibly outlined, and offset
   so the fixed header doesn't cover it after the skip jump. */
#main {
  scroll-margin-top: var(--header-height);
}
#main:focus {
  outline: none;
}

/* No top padding needed — hero is full viewport height and goes under the transparent header */

.page__header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--header-height);
  background: transparent;
  transition: background-color 0.4s ease;
}

.page__header.scrolled,
.page--solid-header .page__header {
  background-color: var(--color-ink);
}

.page--solid-header .page__main {
  padding-top: var(--header-height);
}

.page__footer {
  background: var(--color-ink);
  color: var(--color-text-on-dark);
}


/* --------------------------------------------------------------------------
   Spacing Utilities — Margin Top
   -------------------------------------------------------------------------- */

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-14 { margin-top: var(--space-14); }
.mt-16 { margin-top: var(--space-16); }


/* --------------------------------------------------------------------------
   Spacing Utilities — Margin Bottom
   -------------------------------------------------------------------------- */

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-7 { margin-bottom: var(--space-7); }
.mb-8 { margin-bottom: var(--space-8); }


/* --------------------------------------------------------------------------
   Spacing Utilities — Padding Block (vertical)
   -------------------------------------------------------------------------- */

.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-5 { padding-block: var(--space-5); }
.py-6 { padding-block: var(--space-6); }
.py-7 { padding-block: var(--space-7); }
.py-8 { padding-block: var(--space-8); }


/* --------------------------------------------------------------------------
   Spacing Utilities — Padding Inline (horizontal)
   -------------------------------------------------------------------------- */

.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-5 { padding-inline: var(--space-5); }
.px-6 { padding-inline: var(--space-6); }
.px-7 { padding-inline: var(--space-7); }
.px-8 { padding-inline: var(--space-8); }


/* --------------------------------------------------------------------------
   Width Utilities
   -------------------------------------------------------------------------- */

.w-full {
  width: 100%;
}

.max-w-sm {
  max-width: 640px;
}

.max-w-md {
  max-width: 768px;
}

.max-w-lg {
  max-width: 1024px;
}