/* ==========================================================================
   Responsive Breakpoints — Envision Tattoo Studio
   Mobile-first: base styles are mobile, media queries layer upward.
   Breakpoints: 480px | 768px | 1024px | 1280px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile Base (< 480px)
   Everything below is the default state — single column, hamburger nav,
   compact spacing.
   -------------------------------------------------------------------------- */

/* Grids collapse to single column on mobile */
.grid--2,
.grid--3,
.grid--4 {
  grid-template-columns: 1fr;
}

/* Desktop elements hidden on mobile */
.desktop-only {
  display: none;
}

/* Mobile elements visible */
.mobile-only {
  display: block;
}

/* Mobile navigation: off-screen by default, slides in via components.css */
.nav-menu {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   480px — Small Phones → Larger Phones
   Slightly more breathing room; grids remain single-column.
   -------------------------------------------------------------------------- */
@media (min-width: 480px) {
  .container {
    padding-inline: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   768px — Phones → Tablets
   Navigation switches to horizontal bar. Two-column grids activate.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-8);
  }

  .section {
    padding-block: var(--space-20);
  }

  /* Switch from hamburger to horizontal nav */
  .nav-toggle {
    display: none;
  }

  .nav-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    height: 100%;
  }

  /* Two-column grids activate */
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Three-column grid gets two columns at tablet */
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Show desktop elements, hide mobile-only */
  .desktop-only {
    display: block;
  }

  /* Allow flex containers to remain flex when shown */
  .desktop-only.desktop-only--flex {
    display: flex;
  }

  .mobile-only {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   1024px — Tablets → Desktop
   Full three-column grids. Slightly larger section headings.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  /* Three-column grid reaches full width */
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Four-column grid gets three columns at this breakpoint */
  .grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Scale up section headings for larger screens */
  .section__heading,
  .section h2 {
    font-size: clamp(2rem, 2.5vw + 1rem, 3rem);
  }

  .section__subheading,
  .section h3 {
    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.75rem);
  }
}

/* --------------------------------------------------------------------------
   1280px — Desktop → Wide Screens
   Four-column grids. Extra container padding. Max-width guardrails.
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
  .container {
    padding-inline: var(--space-10);
  }

  /* Four-column grid at full capacity */
  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Prevent content from stretching on ultra-wide displays */
  .container--narrow {
    max-width: 960px;
  }

  .container--wide {
    max-width: 1440px;
  }
}