/* ==========================================================================
   Lendumine — Layout, Grids & Utilities
   Mobile-first. Grids collapse to a single column on small screens.
   ========================================================================== */

/* Page container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: 760px; }

/* Section rhythm */
.section { padding-block: var(--space-8); }
.section--sm { padding-block: var(--space-7); }
.section--lg { padding-block: var(--space-9); }

.section-head { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); max-width: 60ch; }
.section-head--center { text-align: center; margin-inline: auto; align-items: center; }

/* --------------------------------------------------------------------------
   CARD GRID — auto-responsive marketplace grid
   Mobile: 1 col → fills to as many ~260px columns as fit.
   -------------------------------------------------------------------------- */
.grid-cards {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.grid-cards--tight { gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-cards--wide  { gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* Category grid — smaller tiles */
.grid-categories {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
}

/* --------------------------------------------------------------------------
   EXPLICIT 12-COLUMN GRID (desktop) → stacks on mobile
   -------------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(12, 1fr);
}
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .grid > [class*="col-"] { grid-column: auto !important; }
}
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* Simple responsive auto-fit columns */
.cols-2, .cols-3, .cols-4 { display: grid; gap: var(--space-5); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }

/* Flex helpers */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.stack   { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }

/* Spacing utilities */
.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); }
.mb-0 { margin-bottom: 0; }

/* Surfaces */
.surface { background: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.surface--accent { background: var(--color-accent); border-color: var(--color-accent-strong); }
.surface--sunken { background: var(--color-bg-sunken); }

/* Divider */
.divider { height: 1px; background: var(--color-border); border: 0; margin-block: var(--space-5); }

/* Text helpers */
.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-teal { color: var(--color-teal-ink); }
.text-on-brand { color: var(--color-ink-onbrand); }