/* ===========================================================================
   layout.css — containers, sections, section numbering, dividers
   =========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: 960px; }
.container--wide   { max-width: 1640px; }

/* Section wrapper — consistent vertical rhythm */
.section {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
}

.section--tight  { padding-block: var(--space-7); }
.section--dark   { background: var(--bg-secondary); }
.section--panel  { background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%); }

/* Section number badge — tiny mono label at top-left of sections */
.section-index {
  position: absolute;
  top: calc(var(--space-section) * 0.45);
  left: var(--container-pad);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  pointer-events: none;
}

.section-index::before {
  content: "";
  width: 1px;
  height: 48px;
  background: var(--border-strong);
  display: inline-block;
}

@media (max-width: 960px) {
  .section-index { display: none; }
}

/* Section header block — eyebrow + heading + intro */
.section-head {
  max-width: 820px;
  margin-bottom: var(--space-7);
}

.section-head__eyebrow { margin-bottom: var(--space-4); }
.section-head__title   { margin-bottom: var(--space-5); }
.section-head__intro {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  max-width: 60ch;
}

/* Red diagonal stripe — decorative accent at section breaks */
.red-stripe {
  position: absolute;
  width: 160px;
  height: 2px;
  background: var(--accent-red);
  transform: rotate(-35deg);
  pointer-events: none;
  opacity: 0.6;
}
.red-stripe--tl { top: 48px; left: -32px; }
.red-stripe--br { bottom: 48px; right: -32px; }

/* Divider — full-width thin line with centered label */
.divider {
  position: relative;
  height: 1px;
  background: var(--border-subtle);
  margin-block: var(--space-7);
}
.divider__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-primary);
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Grid primitives */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 960px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

/* Flex helpers */
.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { justify-content: space-between; align-items: center; }
.flex--col { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }

/* Decorative corner ticks — small L-shapes top-left/bottom-right of panels */
.corner-ticks {
  position: relative;
}
.corner-ticks::before,
.corner-ticks::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--accent-red);
  border-style: solid;
}
.corner-ticks::before {
  top: -2px; left: -2px;
  border-width: 1px 0 0 1px;
}
.corner-ticks::after {
  bottom: -2px; right: -2px;
  border-width: 0 1px 1px 0;
}