/* ===== LAYOUT ============================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 640px) {
  .container, .container-narrow { padding-inline: var(--sp-7); }
}

.section { padding-block: var(--sp-9); }
.section-tight { padding-block: var(--sp-7); }
@media (max-width: 640px) {
  .section { padding-block: var(--sp-8); }
  .section-tight { padding-block: var(--sp-6); }
}

.section-band {
  background: var(--violet-900);
  color: #fff;
}
.section-band p { color: var(--stone-300); }
.section-band-soft { background: var(--gradient-brand-soft); }

.grid { display: grid; gap: var(--sp-6); }
/* Grid items refuse to shrink below their content's intrinsic width by
   default (min-width:auto) — safe to lift globally: it only removes an
   artificial floor on shrinking, it never forces anything smaller than
   the space actually available. Without this, a wide child (a data
   table, a long unbroken string) anywhere inside any .grid can force
   the whole row — and the page — wider than the viewport. */
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  /* Several dashboard/product content fragments set their own two-column
     split directly via inline style (e.g. style="grid-template-columns:
     2fr 1fr") for a one-off ratio the .grid-2/3/4 utilities don't cover.
     Inline styles otherwise beat any external stylesheet rule regardless
     of selector specificity, so without this override none of those
     eleven instances would ever collapse on mobile — confirmed as the
     cause of a 383px horizontal overflow on the admin dashboard. */
  .grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }
@media (max-width: 900px) { .split-reverse { direction: ltr; } }
html[lang="ar"] .split-reverse, .rtl .split-reverse { direction: ltr; }
html[lang="ar"] .split-reverse > *, .rtl .split-reverse > * { direction: rtl; }

.stack { display: flex; flex-direction: column; }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-500);
  font-weight: 600;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--gold-500);
  border-radius: 2px;
  transform: rotate(45deg);
  flex: none;
}

.lede {
  font-size: var(--step-1);
  color: var(--stone-500);
  max-width: 54ch;
}

.dashboard-shell {
  display: grid;
  grid-template-columns: 264px 1fr;
  min-height: 100vh;
}
@media (max-width: 900px) {
  .dashboard-shell { grid-template-columns: 1fr; }
}
/* Grid items default to min-width:auto — they won't shrink below their
   own content's intrinsic width even inside a 1fr track. Without this,
   any wide-enough content in the sidebar or main column (long nav
   labels, a data table) forces the single mobile column past the
   viewport instead of wrapping/scrolling inside it. */
.dashboard-shell > * { min-width: 0; }

.app-main { padding: var(--sp-7) var(--sp-6) var(--sp-9); max-width: 1180px; }
@media (max-width: 640px) { .app-main { padding: var(--sp-6) var(--sp-4) var(--sp-8); } }

/* Floating decorative motifs (paw / QR-corner geometry) — kept subtle,
   always behind content, always aria-hidden. */
.motif-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.motif { position: absolute; opacity: 0.5; }