/* ------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--s-4);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--s-6); }
}

.stack   { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-sm{ display: flex; flex-direction: column; gap: var(--s-2); }
.row     { display: flex; align-items: center; gap: var(--s-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.row-wrap    { flex-wrap: wrap; }
.grow    { flex: 1 1 auto; min-width: 0; }

.grid    { display: grid; gap: var(--s-4); }
.grid-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* Page shell */
.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.app-main {
  flex: 1;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + var(--s-4));
}
@media (min-width: 768px) {
  .app-main { padding-bottom: var(--s-8); }
}

/* Section */
.section { padding-block: var(--s-6); }
.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.section-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); }
.section-sub   { font-size: var(--fs-sm); color: var(--text-muted); }