/* ============================================================
   Czarna Nić - layout.css
   Siatka strony, sekcje, pasma kolorystyczne, stopka.
   Grid ZAWSZE minmax(0, 1fr) - nigdy goły 1fr (checklista).
   ============================================================ */

.container {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main { display: block; }

.section {
  position: relative;
  padding-block: var(--section-y);
  /* clip na sekcji, nie na body (checklista overflow) */
  overflow-x: clip;
}

.section--tight { padding-block: calc(var(--section-y) * 0.6); }

/* Pasma */
.band-dark  { background: var(--workshop-black); color: var(--thread-cream); }
.band-deep  { background: var(--workshop-deep);  color: var(--thread-cream); }
.band-espresso { background: var(--espresso-2); color: var(--thread-cream); }

.on-light {
  background: var(--thread-cream);
  color: var(--workshop-black);
}

.on-light .kicker { color: var(--cognac-deep); }
.on-light p { color: #3A342C; }

/* Nagłówek sekcji */
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  max-width: 880px;
  margin-bottom: clamp(40px, 6vw, 88px);
}

.section__head h2 { font-size: var(--step-3); }

.section__head .lead {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--muted-on-dark);
}

.on-light .section__head .lead { color: var(--steel); }

/* Siatki pomocnicze */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 26px);
}

/* ---------- Subhero podstron ---------- */

.subhero {
  padding-block: calc(var(--section-y) * 0.9) calc(var(--section-y) * 0.55);
  overflow-x: clip;
}

.subhero h1 {
  font-size: var(--step-4);
  max-width: 18ch;
  margin-block: 18px 22px;
}

.subhero .lead {
  font-size: var(--step-1);
  color: var(--muted-on-dark);
  max-width: 56ch;
}

/* ---------- Stopka ---------- */

.footer {
  background: var(--workshop-deep);
  color: var(--thread-cream);
  padding-block: clamp(56px, 7vw, 96px) 28px;
  overflow-x: clip;
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  padding-bottom: clamp(36px, 5vw, 64px);
}

.footer__brand p {
  margin-top: 14px;
  color: var(--muted-on-dark);
  font-size: var(--step--1);
  max-width: 34ch;
}

.footer h3 {
  font-family: var(--font-mono);
  font-weight: 400;
  font-stretch: 100%;
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  color: var(--copper);
  margin-bottom: 16px;
}

.footer ul { display: grid; gap: 10px; }

.footer a {
  color: var(--thread-cream);
  transition: color var(--dur-1) var(--ease-craft);
}

.footer a:hover { color: var(--copper); }

.footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  justify-content: space-between;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--muted-on-dark);
}

/* ---------- Mobile ---------- */

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
}