/* 
 * LAYOUT SYSTEM - Container and grid patterns
 * 
 * Available layout classes:
 * Containers: .site-container (1280px max - for landing pages), .container (900px max - for prose content), .page-content (nav padding), .admin-bg
 * Grids: .cards-grid + .cards-grid--2/.cards-grid--3/.cards-grid--8, .form-grid-2, .gallery-grid
 * 
 * Use these for consistent spacing and responsive layouts
 */

/* Container System */
.container {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

@media (min-width: 640px) {
  .container {
    padding: 0 2rem;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 2.5rem;
  }
}

.site-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 640px) {
  .site-container {
    padding: 0 1.5rem;
  }
}

@media (min-width: 1024px) {
  .site-container {
    padding: 0 2rem;
  }
}

/* Page content container with top padding for sticky nav */
.page-content {
  padding-top: 5rem;
  padding-bottom: 3rem;
}

/* Adjust padding for mobile bottom navigation */
@media (max-width: 767px) {
  .page-content {
    padding-top: 2rem;
  }
}

/* Admin layout background */
.admin-bg {
  background: transparent;
}

/* Hover halos (comic panels, covers) reach past the edge; clip so phones never scroll sideways */
.site-main { overflow-x: clip; }

/* Grids */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

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

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

  .cards-grid.cards-grid--8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* Form Grid */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

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

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Responsive gallery */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* Link in bio (/social-links): no site header, photo + name + one stacked list of links */
.social-links .site-header, .social-links .portfolio-header { display: none; }
.link-bio { max-width: 420px; margin: 0 auto; padding-top: var(--space-4); text-align: center; }
.link-bio-photo { display: block; width: 120px; height: 120px; margin: 0 auto var(--space-6); border-radius: var(--radius-full); object-fit: cover; }
.link-bio h1 { margin: 0 0 var(--space-3); font-size: var(--h2-size); }
.link-bio-line { margin: 0 auto var(--space-10); color: var(--text-secondary); }
.link-bio-list { display: flex; flex-direction: column; gap: var(--space-3); }
.link-bio-list .btn { width: 100%; justify-content: center; --btn-soft-bg: var(--white); --btn-soft-bg-hover: var(--signal-yellow); border: var(--border-1) solid var(--border-light); }