/* "How to order" page (/pl/jak-zamawiac/, /how-to-order/). Loaded after home.css;
   tokens come from common.css. Section heads, line cards and the form are shared components. */

/* ═══ HERO ═══ title cols 1–7, lead + CTAs cols 8–12, bottom-aligned. */
.order-hero {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gap); row-gap: 40px; align-items: end;
  padding: var(--section-space) var(--edge) clamp(40px, 6vw, 80px);
}
.order-hero-copy { grid-column: 1 / span 7; }
.order-hero-side { grid-column: 8 / -1; display: flex; flex-direction: column; gap: 28px; }
.order-hero .kicker { margin-bottom: 28px; }
.order-hero h1 {
  margin: 0; font-family: var(--font-display); font-weight: normal; text-transform: uppercase;
  font-size: clamp(56px, 9vw, 148px); line-height: 0.92; letter-spacing: 0.005em; color: var(--bone);
}
.order-hero h1 .l { display: block; }
.order-hero h1 .out { color: transparent; -webkit-text-stroke: var(--hero-stroke) var(--bone); }
.order-hero h1 .rust { color: var(--rust-2); -webkit-text-stroke: 0; }
.order-lead {
  font-family: var(--font-serif); font-size: clamp(19px, 17px + 0.4vw, 22px); line-height: 1.55;
  color: var(--bone); max-width: 44ch;
}
.order-hero .cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.order-hero .cta-row .btn { min-height: 52px; padding: 0 24px; }

/* Wide workshop detail under the hero (21:9, on the container). */
.order-figure { margin: 0; padding: 0 var(--edge); }
.order-figure-img { aspect-ratio: 21 / 9; min-height: 240px; overflow: hidden; background: var(--dirt); }
.order-figure-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--order-focus, 50% 50%);
  filter: saturate(0.8) contrast(1.05) brightness(0.85);
}
.order-figure figcaption {
  margin-top: 12px; font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--c-label-muted);
}
.order .order-figure + .section { border-top: 0; }

/* ═══ 01 · STEPS ═══ four columns, footnote pinned to the bottom of each. */
.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--soot);
}
.step {
  display: flex; flex-direction: column; gap: 14px;
  padding: 32px 28px 36px; border-right: 1px solid var(--mud);
}
.step:first-child { padding-left: 0; }
.step:last-child { border-right: 0; padding-right: 0; }
.step-label {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--rust-2);
}
.step h3 {
  margin: 0; font-family: var(--font-display); font-weight: normal; text-transform: uppercase;
  font-size: 34px; line-height: 1; color: var(--bone);
}
.step-items {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.45; color: var(--c-body);
}
.step-items li::before { content: "— "; color: var(--rust-2); }
.step-note {
  margin-top: auto; padding-top: 8px;
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--c-label-muted);
}

/* ═══ 02 · LINES ═══ (cards: .lines from home.css) */
.order-more {
  margin-top: 40px; padding: 28px 0;
  border-top: 1px solid var(--mud); border-bottom: 1px solid var(--mud);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap); row-gap: 16px;
}
.order-more-text {
  grid-column: 1 / span 7;
  font-family: var(--font-serif); font-size: clamp(18px, 16px + 0.3vw, 20px); line-height: 1.5; color: var(--bone);
}
.order-more-text strong { font-weight: 600; color: var(--paper); }
.order-more-factors {
  grid-column: 9 / -1;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7; letter-spacing: 0.04em; color: var(--c-label);
}

/* ═══ 03 · FIT ═══ */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fit-box { border: 1px solid var(--mud); padding: clamp(24px, 3vw, 40px); }
.fit-box--yes { background: var(--dirt); }
.fit-title {
  margin: 0 0 20px; font-family: var(--font-mono); font-weight: 400;
  font-size: 13px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--bone);
}
.fit-box--no .fit-title { color: var(--c-label); }
.fit-box ul { list-style: none; margin: 0; padding: 0; }
.fit-box li {
  padding: 14px 0; border-top: 1px solid var(--mud);
  font-family: var(--font-serif); font-size: clamp(18px, 16px + 0.3vw, 19px); line-height: 1.45; color: var(--bone);
}
.fit-box--no li { color: var(--c-label); }
.fit-footer {
  margin-top: 24px; font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-body);
}
.facts-row {
  margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--mud); border: 1px solid var(--mud);
}
.facts-row > div { background: var(--void); padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.facts-row dt {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--rust-2);
}
.facts-row dd { margin: 0; font-family: var(--font-serif); font-size: 18px; line-height: 1.45; color: var(--bone); }

/* ═══ 04 · ENQUIRY ═══ form + aside use the shared styles in home.css */
.order-enquiry { border-bottom: 0; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1100px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(2) { border-right: 0; padding-right: 0; }
  .step:nth-child(3) { padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--mud); }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .order-hero-copy, .order-hero-side { grid-column: 1 / -1; }
  .order-more-text, .order-more-factors { grid-column: 1 / -1; }
  .fit { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
  .step, .step:first-child, .step:nth-child(3) { padding: 28px 0; border-right: 0; }
  .step + .step { border-top: 1px solid var(--mud); }
  .facts-row { grid-template-columns: 1fr; }
  .order-figure-img { aspect-ratio: 4 / 3; }
}