/* ============================================================
   SERENZA · grid.css
   Grid systems, rows, filter bars, form grids.
   Requires colors_and_type.css + serenza-ui.css.
   ============================================================ */

/* ---------- LAYOUT UTILITIES ---------- */
.sz-row {
  display: flex;
  gap: 16px;
  align-items: center;
}
.sz-row--between { justify-content: space-between; }
.sz-row--end { justify-content: flex-end; }
.sz-row--wrap { flex-wrap: wrap; }
.sz-row--top { align-items: flex-start; }

.sz-filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.sz-filter-bar .sz-input { font-size: 13px; padding: 10px 12px 10px 34px; }
.sz-filter-bar .sz-dropdown { flex: 0 0 auto; }
.sz-filter-bar .sz-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-soft);
  border: 1px solid var(--paper-deep);
  border-radius: var(--radius);
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, box-shadow .2s;
}
.sz-filter-bar .sz-dropdown-trigger:hover { border-color: var(--sage-soft); }
.sz-filter-bar .sz-dropdown-trigger:focus-visible { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px rgba(94,107,90,.12); }
.sz-filter-bar .sz-dropdown-trigger svg { flex-shrink: 0; color: var(--ink-soft); }
.sz-filter-bar .sz-search { flex: 1; min-width: 0; }
.sz-filter-bar .sz-select { font-size: 13px; padding: 10px 12px; }

@media (max-width: 860px) {
  .sz-filter-bar { gap: 6px; }
  .sz-filter-bar .sz-search { flex: 1 1 100%; }
  .sz-filter-bar .sz-dropdown { flex: 1 1 100%; }
  .sz-filter-bar .sz-dropdown-trigger { width: 100%; justify-content: space-between; }
  .sz-filter-bar .sz-select { width: 100%; }
}

.sz-grid {
  display: grid;
  gap: clamp(20px, 2.5vw, 32px);
}
.sz-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sz-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sz-grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 860px) {
  .sz-grid--3, .sz-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .sz-grid--2, .sz-grid--3, .sz-grid--4 { grid-template-columns: 1fr; }
}

/* ---------- FORM GRID ---------- */
.sz-form-row {
  display: grid;
  gap: 16px;
}
.sz-form-row--2 { grid-template-columns: repeat(2, 1fr); }
.sz-form-row--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 640px) {
  .sz-form-row--2,
  .sz-form-row--3 { grid-template-columns: 1fr; }
}

/* ---------- FORM FIELD STYLES ---------- */
.sz-field-row {
  display: grid;
  gap: 16px;
}
.sz-field-row--2 { grid-template-columns: 1fr 1fr; }
.sz-field-row--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 640px) {
  .sz-field-row--2,
  .sz-field-row--3 { grid-template-columns: 1fr; }
}