/* S4-T02 — RTL layout foundation. LOGICAL PROPERTIES ONLY.
   Forbidden in app CSS: margin-left/right, padding-left/right, left:, right:,
   border-left/right, text-align: left/right (use start/end). See docs/RTL_CONVENTIONS.md */

:root {
  /* spacing scale (4px base) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --container-max: 68rem;
  --container-wide: 80rem;
  --container-narrow: 42rem;
}

.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
.container-wide { max-inline-size: var(--container-wide); }
.container-narrow { max-inline-size: var(--container-narrow); }

/* stack: vertical rhythm that survives direction flips */
.stack > * + * { margin-block-start: var(--sp-4); }
.stack-sm > * + * { margin-block-start: var(--sp-2); }

/* flex + gap: direction handled by dir attribute, never by row-reverse hacks */
.row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.row-between { justify-content: space-between; }
.row-end { justify-content: flex-end; }
.row-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--sp-2); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* grid utilities */
.grid { display: grid; gap: var(--sp-4); }
.grid-auto { grid-template-columns: 1fr; }
.cols-2,
.cols-3 { grid-template-columns: 1fr; }
/* mobile-first: single column by default (see .grid-auto/.cols-* base),
   columns arrive at >=40em */
@media (min-width: 40em) {
  /* "auto" = fill the line, never a stranded single column */
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* inline spacing helpers (logical shorthands) */
.isize-start { margin-inline-start: auto; }
.isize-end { margin-inline-end: auto; }
.pis-2 { padding-inline-start: var(--sp-2); }
.pis-4 { padding-inline-start: var(--sp-4); }
.mis-4 { margin-inline-start: var(--sp-4); }
.mbs-4 { margin-block-start: var(--sp-4); }
.mbe-4 { margin-block-end: var(--sp-4); }

.text-start { text-align: start; }
.text-end { text-align: end; }
.text-center { text-align: center; }

/* LTR islands: numbers, URLs, Latin titles inside RTL flow.
   Use on spans wrapping a purely-LTR run; never for whole paragraphs. */
.ltr-island {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
/* unicode-bidi: isolate is the general tool; apply via class on any element */
[data-bidi="isolate"] { unicode-bidi: isolate; }

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* S4-T05 breakpoints: 320 base / 640 / 768 / 1024 / 1280.
   Prose measure ~70ch; containers widen with viewport. */
:root { --bp-sm: 40em; --bp-md: 48em; --bp-lg: 64em; --bp-xl: 80em; }
/* reading column: 70ch measure centered in the wider shell (otherwise RTL
   start-aligns the column and leaves half the viewport empty) */
.prose { max-inline-size: 70ch; margin-inline: auto; }
.site-main:has(> article.prose) > .breadcrumbs {
  max-inline-size: 70ch;
  margin-inline: auto;
}
@media (min-width: 48em) { .container { padding-inline: var(--sp-6); } }
@media (min-width: 64em) { .container-narrow { max-inline-size: 46rem; } }