/*
 * SisuDent layout styles — container, grid, sections, stacks
 * Requires: design/tokens/tokens.css
 * Session 2.2 (Gate 2 proposal). Sources: Blueprint 4.3–4.9, 4.16; Design_System_Plan.md 6.
 * Breakpoints: mobile < 640px · tablet 640–1023px · desktop ≥ 1024px (literal values; see tokens.css header).
 * Session 3.3: tablet span set, fixed-count column rows (sd-cols), safe-area margins; rules in Responsive_Foundation.md.
 */

/* ---------- Container ---------- */

.sd-container {
  width: 100%;
  max-width: calc(var(--sd-container-max) + 2 * var(--sd-page-margin));
  margin-inline: auto;
  padding-inline: var(--sd-page-margin);
  /* Landscape phones with a notch: content stays outside the unsafe area (effective with viewport-fit=cover) */
  padding-inline: max(var(--sd-page-margin), env(safe-area-inset-left)) max(var(--sd-page-margin), env(safe-area-inset-right));
}

.sd-container--text {
  max-width: calc(var(--sd-container-text) + 2 * var(--sd-page-margin));
}

/* ---------- Grid (4 / 8 / 12 columns) ---------- */

.sd-grid {
  display: grid;
  grid-template-columns: repeat(var(--sd-grid-columns), minmax(0, 1fr));
  column-gap: var(--sd-grid-gutter);
  row-gap: var(--sd-space-5);
}

/* Spans: mobile spans are full width unless stated */
.sd-grid > * { grid-column: 1 / -1; }

/* Tablet spans (8 columns). Without a tablet span, an item with a desktop span stays full width on tablet. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .sd-span-t-2 { grid-column: span 2; }
  .sd-span-t-3 { grid-column: span 3; }
  .sd-span-t-4 { grid-column: span 4; }
  .sd-span-t-5 { grid-column: span 5; }
  .sd-span-t-6 { grid-column: span 6; }
  .sd-span-t-8 { grid-column: span 8; }
}

/* Desktop spans (12 columns); a desktop span replaces the tablet span from 1024px */
@media (min-width: 1024px) {
  .sd-span-3 { grid-column: span 3; }
  .sd-span-4 { grid-column: span 4; }
  .sd-span-5 { grid-column: span 5; }
  .sd-span-6 { grid-column: span 6; }
  .sd-span-7 { grid-column: span 7; }
  .sd-span-8 { grid-column: span 8; }
  .sd-span-12 { grid-column: span 12; }
  .sd-start-7 { grid-column-start: 7; }
  .sd-start-8 { grid-column-start: 8; }
}

/* Column rows with a fixed count per tier (Session 3.3) — for card rows whose number must be predictable.
   mobile / tablet / desktop:  --2 → 1 / 2 / 2   --3 → 1 / 2 / 3   --4 → 1 / 2 / 4   --4.sd-cols--pairs → 2 / 2 / 4 */
.sd-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sd-grid-gutter);
}

.sd-cols--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sd-cols--2,
  .sd-cols--3,
  .sd-cols--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .sd-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sd-cols--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Auto-fill card row: cards keep a minimum width and wrap */
.sd-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--sd-grid-gutter);
}

/* ---------- Sections (white / gray / blue) ---------- */

.sd-section {
  padding-block: var(--sd-section-space);
  background: var(--sd-color-surface);
}

.sd-section--subtle { background: var(--sd-color-surface-subtle); }

/* Blue band: intentional use only (Blueprint 3.10). Holds text and buttons only —
   cards, fields, and notices are not placed inside it (text tokens are white here). */
.sd-section--brand {
  background: var(--sd-color-surface-brand);
  color: var(--sd-color-text-on-brand);
  --sd-color-text-heading: var(--sd-color-white);
  --sd-color-text-default: var(--sd-color-white);
  --sd-color-text-muted: var(--sd-color-white);  /* gray-600 is never used on blue */
  --sd-color-link: var(--sd-color-white);
  --sd-color-link-hover: var(--sd-color-white);
  --sd-color-text-accent: var(--sd-color-white);
}

.sd-section--compact { padding-block: var(--sd-subsection-space); }

/* Divider between sections of the same surface */
.sd-divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--sd-border-width) solid var(--sd-color-border-subtle);
}

/* ---------- Section header: eyebrow + H2 + lead ---------- */

.sd-section-header {
  display: grid;
  gap: var(--sd-space-3);
  max-width: 46rem;
  margin-bottom: var(--sd-space-6); /* 48 (was 64; D-034) */
}

.sd-section-header--center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}

/* ---------- Stacks ---------- */

.sd-stack { display: grid; gap: var(--sd-space-3); }
.sd-stack--sm { gap: var(--sd-space-2); }
.sd-stack--lg { gap: var(--sd-space-5); }

.sd-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sd-space-3);
}