@charset "UTF-8";
/*
Theme: Erewhon - Conventional Grid (revised)
Description: Simple, dependable grid using media queries, with safe defaults and opt-in helpers.
*/
/* ================= Base ================= */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-m, 1rem));
  grid-template-columns: 1fr; /* mobile-first: 1 column */
  align-items: start; /* keep cards from stretching oddly */
}

/* Prevent overflow from long titles/URLs inside grid items */
.grid > * {
  min-width: 0;
}

/* ================= Responsive steps (viewport-based) ================= */
/* Override these with CSS vars if needed at block/page level */
:root {
  --grid-bp-2: 40rem; /* 640px  */
  --grid-bp-3: 60rem; /* 960px  */
  --grid-bp-4: 80rem; /* 1280px */
  --grid-bp-5: 100rem; /* 1600px */
}

/* ≥ 640px → 2 columns */
@media (min-width: var(--grid-bp-2)) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* ≥ 960px → 3 columns */
@media (min-width: var(--grid-bp-3)) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ≥ 1280px → 4 columns */
@media (min-width: var(--grid-bp-4)) {
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Optional: ≥ 1600px → 5 columns */
@media (min-width: var(--grid-bp-5)) {
  .grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
/* ================= Fixed-count helpers (force a layout) ================= */
.grid--1 {
  grid-template-columns: 1fr !important;
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

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

.grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.grid--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

/* ================= Modifiers ================= */
.grid--gap-none {
  gap: 0 !important;
}

.grid--gap-xs {
  gap: 0.5rem !important;
}

.grid--gap-s {
  gap: 0.75rem !important;
}

.grid--gap-m {
  gap: 1.25rem !important;
}

.grid--full {
  max-width: none;
}

.grid--content {
  max-width: var(--content-width, 72rem);
  margin-inline: auto;
}

.grid--narrow {
  max-width: var(--width-l, 56rem);
  margin-inline: auto;
}

.grid--wide {
  max-width: var(--width-xxl, 96rem);
  margin-inline: auto;
}

.grid--start {
  place-items: start;
}

.grid--center {
  place-items: center;
}

.grid--end {
  place-items: end;
}

.grid--stretch {
  place-items: stretch;
}

/* Optional: equal-height cards within a row (when children have internal layout) */
.grid--equal > * {
  height: 100%;
}

/* ================= Sidebar pattern (optional) ================= */
.grid--sidebar {
  grid-template-columns: var(--sidebar-width, 250px) 1fr;
  grid-template-areas: "sidebar main";
  gap: var(--grid-gap, var(--space-m, 1rem));
  align-items: start;
}

@media (max-width: 48rem) {
  .grid--sidebar {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "sidebar";
  }
}
/* ================= Auto-fit helper (optional, min-card width) ================= */
/* Example: <div class="grid grid--auto" style="--grid-col-min: 15rem"> */
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-col-min, 15rem), 1fr)) !important;
}