/* =========================================================
   GRUPA AUTO CZĘŚCI — grupa-ac.pl
   Kierunek: industrial editorial — wielka typografia,
   techniczne mono-detale, linie siatki, odważna czerwień.
   Kolory: #FB2B14 · #343A40
   ========================================================= 1 */

:root {
  color-scheme: light;

  --red: #fb2b14;
  --red-dark: #cf210f;
  --red-soft: rgba(251, 43, 20, 0.08);

  --ink: #343a40;      /* ciemne tło — panele i sekcje */
  --ink-2: #252a2f;
  --text: #343a40;
  --muted: #6b6b69;
  --faint: #979795;

  --paper: #ffffff;
  --paper-2: #f2f3f4;

  --line: #e2e2df;       /* hairline na jasnym */
  --line-strong: #c9c9c6;
  --line-dark: rgba(255, 255, 255, 0.16);

  --sans: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;

  --maxw: 1600px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; overflow-x: hidden; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.02rem;
  background: var(--paper);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Zabezpieczenie przed rozpychaniem siatek przez treść, która nie może
   się złamać (domyślnie elementy grid/flex nie kurczą się poniżej
   szerokości swojej zawartości) — patrz: błąd .hero-stat strong. */
.hero-stats-grid > *,
.trust-grid > *,
.footer-grid > *,
.branch-grid > *,
.cat-index > *,
.brands-grid > *,
.steps > *,
.offer-panels > * {
  min-width: 0;
}

a { color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); }
p { margin: 0; }
img { max-width: 100%; display: block; height: auto; }
ul, ol, dl, dd { margin: 0; padding: 0; }

.container { width: min(100% - 3rem, var(--maxw)); margin-inline: auto; }

::selection { background: var(--red); color: #fff; }

/* =========================================================
   Typografia — skala edytorska
   ========================================================= */
.display, h1, .sec-head h2 {
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: -0.015em;
}
h1 em, h2 em, .cta-band em, .footer-wordmark em {
  font-style: normal;
  color: var(--red);
}

.kicker {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.kicker span { color: var(--red); }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); transform: translateY(-0.2em); }
.kicker--light { color: rgba(255, 255, 255, 0.85); margin-bottom: 1rem; }
.kicker--light span { color: inherit; }
.kicker--light::after { display: none; }

/* =========================================================
   Placeholdery zdjęć — techniczny panel, znika po dodaniu pliku
   ========================================================= */
.img-slot { position: relative; margin: 0; overflow: hidden; background: var(--ink-2); }
.img-slot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img-slot.img-missing > img { display: none; }
.img-slot.img-missing {
  background:
    radial-gradient(ellipse at 20% 15%, rgba(251, 43, 20, 0.2), transparent 55%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 12px),
    linear-gradient(160deg, #343a40, var(--ink));
}
.img-slot.img-missing::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.img-slot.img-missing::after {
  content: "[ FOTO ] " attr(data-src);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  position: absolute;
  left: 24px;
  bottom: 20px;
}
.img-slot--tall { aspect-ratio: 4 / 5; }
.img-slot--small { aspect-ratio: 3 / 2; }
.img-slot--wide { aspect-ratio: 8 / 5; }

/* =========================================================
   Przyciski — ostre, edytorskie
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms, border-color 180ms, transform 150ms var(--ease);
}
.btn span { font-family: var(--mono); font-weight: 400; }
.btn-sm { padding: 0.65rem 1.15rem; font-size: 0.76rem; }
.btn-lg { padding: 1.15rem 2rem; font-size: 0.86rem; }

.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--ink); }

.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--red); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn-line-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn-line-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* =========================================================
   Strony podrzędne (np. polityka prywatności) — proste layouty
   ========================================================= */
.legal { max-width: 780px; margin-inline: auto; }
.legal h1 { margin-bottom: 1.5rem; }
.legal h2 { font-family: var(--sans); font-size: 1.2rem; font-weight: 700; margin: 2rem 0 0.7rem; }
.legal p, .legal li { color: var(--muted); margin-bottom: 0.8rem; }
.legal ul { padding-left: 1.2rem; }