/* ==========================================================================
   HS CONSTRUCTION — DESIGN SYSTEM
   Tokeny odwzorowane 1:1 z szablonu Gacor (Rometheme) — odczytane z jego
   arkusza produkcyjnego elementor/css/post-3.css.
   Zasada nadrzędna: zero zaokrągleń, DM Sans, pomarańcz TYLKO jako akcja/akcent.
   ========================================================================== */

:root {
  /* --- Kolory ---------------------------------------------------------- */
  --hs-ink: #141414;          /* nagłówki, tekst mocny, ciemne tła          */
  --hs-body: #757575;         /* tekst podstawowy                          */
  --hs-accent: #F77223;       /* CTA, linki, akcenty                       */
  --hs-accent-soft: #F7722359;/* 35% — podkłady i obwódki                  */
  --hs-white: #FFFFFF;
  --hs-grey: #EEEEEE;         /* tło sekcji przemiennych                   */
  --hs-dark: #333333;         /* hover przycisku                           */
  --hs-line: #E0E0E0;         /* linie i ramki na jasnym tle               */
  --hs-line-dark: rgba(255, 255, 255, 0.12);

  /* --- Kształt ---------------------------------------------------------- */
  --hs-radius: 0;             /* kanciasto — kluczowa cecha szablonu       */
  --hs-container: 1200px;
  --hs-gutter: 24px;
  --hs-section-y: clamp(64px, 8vw, 120px);
  --hs-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Baza ---------------------------------------------------------------- */
body {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--hs-body);
  background: var(--hs-white);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--hs-ink);
  margin: 0;
  /* długie polskie złożenia („ogólnobudowlane") potrafią rozepchnąć layout */
  overflow-wrap: break-word;
}

h1 { font-size: 7.5rem; line-height: 1.1; }
h2 { font-size: 4rem;   line-height: 1.1; }
h3 { font-size: 3.3rem; line-height: 1.2; }
h4 { font-size: 1.5rem; line-height: 1.2; }
h5 { font-size: 1.3rem; line-height: 1.2; }
h6 { font-size: 1.1rem; line-height: 1.2; }

a { color: var(--hs-accent); text-decoration: none; transition: color 0.25s ease; }
a:hover { color: var(--hs-ink); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--hs-accent); color: var(--hs-white); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Punkty łamania szablonu: 1024 px i 767 px --------------------------- */
@media (max-width: 1024px) {
  body { font-size: 1.1rem; }
  h1 { font-size: 5.7rem; }
  h2 { font-size: 3.5rem; }
  h3 { font-size: 2.5rem; }
}
@media (max-width: 767px) {
  body { font-size: 1rem; }
  /* clamp zamiast sztywnych rozmiarów Gacora — polskie nagłówki są dłuższe
     od angielskich i przy 360–390 px wychodziły poza ekran */
  h1 { font-size: clamp(1.9rem, 7.8vw, 3rem); }
  h2 { font-size: clamp(1.7rem, 6.6vw, 2.5rem); }
  h3 { font-size: clamp(1.5rem, 5.4vw, 2rem); }
  h4 { font-size: 1.3rem; }
  h5 { font-size: 1.2rem; }
}

/* --- Przyciski ----------------------------------------------------------- */
.hs-btn,
.wpcf7 input[type="submit"],
.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 25px 50px;
  border: 0;
  border-radius: var(--hs-radius);
  background: var(--hs-accent);
  color: var(--hs-white);
  font: 700 0.9rem/1 'DM Sans', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.hs-btn:hover,
.wpcf7 input[type="submit"]:hover,
.elementor-button:hover {
  background: var(--hs-dark);
  color: var(--hs-white);
}

/* Wariant obrysowany — na ciemnym tle (hero, pasek CTA) */
.hs-btn--ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--hs-white);
}
.hs-btn--ghost:hover { background: var(--hs-white); color: var(--hs-ink); border-color: var(--hs-white); }

/* Wariant obrysowany na jasnym tle */
.hs-btn--outline {
  background: transparent;
  border: 1px solid var(--hs-ink);
  color: var(--hs-ink);
}
.hs-btn--outline:hover { background: var(--hs-ink); color: var(--hs-white); }

.hs-btn--sm { padding: 16px 32px; font-size: 0.8rem; }

@media (max-width: 767px) {
  .hs-btn, .wpcf7 input[type="submit"], .elementor-button { padding: 20px 32px; font-size: 0.8rem; }
}

/* Link ze strzałką (karty usług, „czytaj więcej") */
.hs-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 0.9rem/1 'DM Sans', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hs-ink);
}
.hs-link::after { content: "\2192"; transition: transform 0.3s var(--hs-ease); }
.hs-link:hover { color: var(--hs-accent); }
.hs-link:hover::after { transform: translateX(6px); }

/* --- Kicker / nagłówek sekcji -------------------------------------------- */
.hs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 600 0.9rem/1 'DM Sans', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hs-accent);
}
.hs-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--hs-accent);
}
@media (max-width: 767px) { .hs-kicker { font-size: 0.8rem; } }

/* --- Sekcje --------------------------------------------------------------- */
.hs-section { padding-block: var(--hs-section-y); }
.hs-section--grey { background: var(--hs-grey); }
.hs-section--ink,
.hs-section--ink h1, .hs-section--ink h2, .hs-section--ink h3,
.hs-section--ink h4, .hs-section--ink h5 {
  color: var(--hs-white);
}
.hs-section--ink { background: var(--hs-ink); }
.hs-section--ink p, .hs-section--ink li { color: rgba(255, 255, 255, 0.7); }

/* --- Siatki --------------------------------------------------------------- */
/* Kontener Elementora steruje wyświetlaniem zmienną --display */
.hs-grid { --display: grid; display: grid; gap: 32px; width: 100%; }
.hs-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hs-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hs-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hs-grid--6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) {
  .hs-grid { gap: 24px; }
  .hs-grid--3, .hs-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .hs-grid--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .hs-grid--2, .hs-grid--3, .hs-grid--4 { grid-template-columns: 1fr; }
  .hs-grid--6 { grid-template-columns: repeat(2, 1fr); }
}

/* Rząd równych kolumn z widgetów Elementora (kontener „boxed" trzyma dzieci
   w .e-con-inner, stąd drugi selektor) */
.hs-cols > .elementor-element,
.hs-cols > .e-con-inner > .elementor-element {
  flex: 1 1 0;
  min-width: 260px;
}