/* ====================================
   PromptGallery — Layout Styles
   ==================================== */

/* ── Masonry Grid ── */
.masonry-grid {
  column-count: 6;
  column-gap: var(--space-md);
}

@media (max-width: 1400px) {
  .masonry-grid { column-count: 5; }
}
@media (max-width: 1200px) {
  .masonry-grid { column-count: 4; }
}
@media (max-width: 900px) {
  .masonry-grid { column-count: 3; }
}
@media (max-width: 600px) {
  .masonry-grid { column-count: 2; }
}

/* ── Flex Grid (for categories, etc.) ── */
.flex-grid {
  display: grid;
  gap: var(--space-md);
}
.flex-grid-2 { grid-template-columns: repeat(2, 1fr); }
.flex-grid-3 { grid-template-columns: repeat(3, 1fr); }
.flex-grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex-grid-5 { grid-template-columns: repeat(5, 1fr); }
.flex-grid-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1200px) {
  .flex-grid-5, .flex-grid-6 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .flex-grid-3, .flex-grid-4, .flex-grid-5, .flex-grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .flex-grid-2, .flex-grid-3, .flex-grid-4, .flex-grid-5, .flex-grid-6 {
    grid-template-columns: 1fr;
  }
}

/* ── Section Layout ── */
.section {
  padding: var(--space-3xl) 0;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xl);
}
.section-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}
.section-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.section-link:hover {
  color: var(--color-primary);
}

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

/* ── Text Utilities ── */
.text-center { text-align: center; }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }

/* ── Spacing Utilities ── */
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* ── Two Column Layout (Photo detail) ── */
.two-col {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-2xl);
}
@media (max-width: 1000px) {
  .two-col {
    grid-template-columns: 1fr;
  }
}