/* ============================================================
   SoftwareStudio Sp. z o.o. - Awizacje VSS.net
   Plik: awizacje-vss-net/style.css | 2026-05
   Kolory: #1f2d3a, #334251, #ff6a13, #f59e1b + skala szarości
   ============================================================ */

/* ----------------------------------------------------------------
   ZMIENNE CSS
   ---------------------------------------------------------------- */
:root {
  --ss-orange:      #ff6a13;   /* CTA, akcenty, markery */
  --ss-amber:       #f59e1b;   /* złoty akcent pomocniczy */
  --ss-dark:        #1f2d3a;   /* bardzo ciemny granat - tła hero, footer */
  --ss-dark-mid:    #334251;   /* średni granat - pasy, hover w footer */
  --ss-navy:        #1b2d4f;   /* granat - nagłówki */
  --ss-blue:        #2b5fa3;   /* niebieski - linki */
  --ss-blue-light:  #e8f0fb;   /* jasne tło sekcji */
  --ss-text:        #1a202c;   /* tekst główny */
  --ss-muted:       #5a6a7e;   /* tekst pomocniczy */
  --ss-border:      #dde4ef;   /* obramowania */
  --ss-white:       #ffffff;
  --ss-bg-alt:      #f4f7fb;   /* tło alternatywne sekcji */
  --ss-radius:      6px;
  --ss-shadow:      0 2px 14px rgba(31,45,58,0.10);
  --ss-shadow-md:   0 6px 24px rgba(31,45,58,0.14);
  --ss-max-width:   1200px;
  --ss-font-head:   'Poppins', 'Segoe UI', Arial, sans-serif;
  --ss-font-body:   'Roboto', 'Open Sans', Arial, sans-serif;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Roboto:wght@400;500&display=swap');

/* ----------------------------------------------------------------
   RESET
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--ss-font-body);
  color: var(--ss-text);
  background: var(--ss-white);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ss-blue); text-decoration: none; }
a:hover { color: var(--ss-orange); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
p { margin-bottom: 1.1rem; }
ul, ol { padding-left: 1.5rem; margin-bottom: 1.1rem; }
li { margin-bottom: 0.45rem; }
strong { font-weight: 600; }

h1, h2, h3, h4 {
  font-family: var(--ss-font-head);
  color: var(--ss-navy);
  line-height: 1.3;
  margin-bottom: 0.85rem;
  font-weight: 700;
}
h1 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin-top: 2rem; }
h3 { font-size: clamp(1rem, 2vw, 1.2rem); margin-top: 1.25rem; font-weight: 600; }
h4 { font-size: 0.92rem; margin-top: 1rem; font-weight: 700; }

/* ----------------------------------------------------------------
   NAWIGACJA - .ss-nav
   HTML: header.ss-nav > div.ss-nav__inner > nav.ss-nav__menu > ul > li
   ---------------------------------------------------------------- */
.ss-nav {
  background: var(--ss-white);
  border-bottom: 3px solid var(--ss-orange);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(31,45,58,0.10);
}

.ss-nav__inner {
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 1rem;
}

/* Logo */
.ss-nav__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  line-height: 1;
}
.ss-nav__logo img { height: 42px; width: auto; }

/* Nav element - desktop widoczny */
.ss-nav__menu {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* UL pierwszego poziomu - poziomy flex */
.ss-nav__menu > ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 64px;
  gap: 0;
}

/* Elementy LI pierwszego poziomu */
.ss-nav__menu > ul > li {
  position: relative;
  margin: 0;
}

/* Linki pierwszego poziomu */
.ss-nav__menu > ul > li > a {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 0.85rem;
  font-family: var(--ss-font-head);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ss-dark);
  white-space: nowrap;
  transition: color 0.2s;
  gap: 0.25rem;
  text-decoration: none;
}
.ss-nav__menu > ul > li > a:hover {
  color: var(--ss-orange);
  text-decoration: none;
}
/* Strzałka dropdown (span aria-hidden) */
.ss-nav__menu > ul > li > a > span[aria-hidden] {
  font-size: 0.7rem;
  opacity: 0.5;
  display: inline-block;
}

/* CTA "Zamów DEMO" */
.ss-nav__cta > a,
.ss-nav__menu > ul > li.ss-nav__cta > a {
  background: var(--ss-orange);
  color: var(--ss-white) !important;
  border-radius: var(--ss-radius);
  padding: 0.5rem 1.1rem;
  height: auto;
  margin-left: 0.5rem;
  font-weight: 700;
  font-size: 0.86rem;
  transition: background 0.2s;
}
.ss-nav__cta > a:hover,
.ss-nav__menu > ul > li.ss-nav__cta > a:hover {
  background: #e55c0b;
  color: var(--ss-white) !important;
  text-decoration: none;
}

/* Podmenu - .ss-dropdown__menu */
.ss-dropdown__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-top: 3px solid var(--ss-orange);
  border-radius: 0 0 var(--ss-radius) var(--ss-radius);
  box-shadow: var(--ss-shadow-md);
  min-width: 240px;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  z-index: 300;
}
/* Pokaż dropdown na hover */
.ss-dropdown:hover .ss-dropdown__menu {
  display: block;
}
/* Pokaż dropdown na klasie .is-open (mobile JS) */
.ss-dropdown.is-open .ss-dropdown__menu {
  display: block;
}
.ss-dropdown__menu li { margin: 0; }
.ss-dropdown__menu a {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.86rem;
  color: var(--ss-text);
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.ss-dropdown__menu a:hover {
  background: var(--ss-blue-light);
  color: var(--ss-orange);
  text-decoration: none;
}

/* Hamburger - domyślnie ukryty */
.ss-nav__toggle {
  display: none;
  background: none;
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  cursor: pointer;
  padding: 0.5rem 0.55rem;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.ss-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ss-dark);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Animacja X przy otwartym menu */
.ss-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ss-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.ss-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ----------------------------------------------------------------
   BREADCRUMB
   ---------------------------------------------------------------- */
.ss-breadcrumb {
  background: var(--ss-bg-alt);
  border-bottom: 1px solid var(--ss-border);
  padding: 0.55rem 0;
  font-size: 0.82rem;
  color: var(--ss-muted);
}
.ss-breadcrumb ol {
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
.ss-breadcrumb li + li::before {
  content: '›';
  margin-right: 0.25rem;
  color: var(--ss-muted);
}
.ss-breadcrumb a { color: var(--ss-muted); }
.ss-breadcrumb a:hover { color: var(--ss-blue); text-decoration: none; }
.ss-breadcrumb [aria-current="page"] { color: var(--ss-navy); font-weight: 500; }

/* ----------------------------------------------------------------
   HERO - .ss-hero
   ---------------------------------------------------------------- */
.ss-hero {
  background: var(--ss-dark);
  color: var(--ss-white);
  position: relative;
  overflow: hidden;
}

/* Geometryczny akcent - pomarańczowy pasek po prawej */
.ss-hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 45%;
  height: 100%;
  background: linear-gradient(135deg,
    transparent 30%,
    rgba(255,106,19,0.07) 60%,
    rgba(245,158,27,0.05) 100%
  );
  clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}

/* Linia gradientowa na dole hero */
.ss-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ss-orange) 0%, var(--ss-amber) 60%, transparent 100%);
}

.ss-hero__inner {
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: 3.75rem 1.5rem 3.25rem;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 960px;
}

/* H1 z pomarańczowym akcentem lewym */
.ss-hero__inner h1 {
  color: var(--ss-white);
  font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  line-height: 1.22;
  margin: 0;
  padding-left: 1.1rem;
  border-left: 4px solid var(--ss-orange);
}

.ss-hero__lead {
  color: rgba(255,255,255,0.80);
  font-size: 1.3rem;
  line-height: 1.75;
  max-width: 700px;
  margin: 0 auto;
  padding-left: 1.1rem;
  border-left: 4px solid transparent; /* wyrównanie z h1 */
}

/* ----------------------------------------------------------------
   PRZYCISKI
   ---------------------------------------------------------------- */
.ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.6rem;
  border-radius: var(--ss-radius);
  font-family: var(--ss-font-head);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.15s, opacity 0.2s;
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
}
.ss-btn:hover { transform: translateY(-1px); text-decoration: none; }

/* Podstawowy - pomarańczowy */
.ss-btn--primary,
.ss-btn--orange {
  background: var(--ss-orange);
  color: var(--ss-white);
  border-color: var(--ss-orange);
	max-width: 400px;
    margin: 20px auto;
}
.ss-btn--primary:hover,
.ss-btn--orange:hover {
  background: #e55c0b;
  border-color: #e55c0b;
  color: var(--ss-white);
}

/* Outline - domyślnie na jasnym tle */
.ss-btn--outline {
  background: transparent;
  color: var(--ss-dark);
  border-color: var(--ss-border);
}
.ss-btn--outline:hover {
  border-color: var(--ss-orange);
  color: var(--ss-orange);
}

/* Outline na ciemnym tle (w .ss-hero lub .ss-cta) */
.ss-hero .ss-btn--outline,
.ss-cta .ss-btn--outline {
  color: var(--ss-white);
  border-color: rgba(255,255,255,0.5);
}
.ss-hero .ss-btn--outline:hover,
.ss-cta .ss-btn--outline:hover {
  border-color: var(--ss-white);
  color: var(--ss-white);
}

/* Rozmiary */
.ss-btn--lg { padding: 0.85rem 2rem; font-size: 0.97rem; }
.ss-btn--sm { padding: 0.45rem 1rem; font-size: 0.82rem; }

/* ----------------------------------------------------------------
   LAYOUT GŁÓWNY - artykuł + sidebar
   ---------------------------------------------------------------- */
.ss-layout {
  max-width: var(--ss-max-width);
  margin: 2.5rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  align-items: start;
}

/* ----------------------------------------------------------------
   ARTYKUŁ
   ---------------------------------------------------------------- */
.ss-article {
  min-width: 0;
}
.ss-article h2 {
  border-left: 4px solid var(--ss-orange);
  padding-left: 0.75rem;
  margin-top: 2.5rem;
  color: var(--ss-navy);
}
.ss-article h3 {
  color: var(--ss-dark-mid);
  margin-top: 1.5rem;
}
.ss-article ul li::marker { color: var(--ss-orange); }
.ss-article ol li::marker { color: var(--ss-blue); font-weight: 600; }

/* Box W skrócie */
.ss-summary {
  background: var(--ss-blue-light);
  border-left: 4px solid var(--ss-blue);
  border-radius: 0 var(--ss-radius) var(--ss-radius) 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  font-size: 0.97rem;
  line-height: 1.7;
}
.ss-summary strong { color: var(--ss-navy); }
.ss-summary ul { margin-bottom: 0; max-width: 500px;}
.ss-summary ul li::marker { color: var(--ss-blue); }

/* Blok obrazu */
.ss-figure {
  margin: 2rem 0;
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: var(--ss-shadow);
  border: 1px solid var(--ss-border);
}
.ss-figure img { width: 100%; height: auto; object-fit: cover; }
.ss-figure figcaption {
  padding: 0.65rem 1rem;
  font-size: 0.83rem;
  color: var(--ss-muted);
  background: var(--ss-bg-alt);
  border-top: 1px solid var(--ss-border);
  font-style: italic;
}

/* ----------------------------------------------------------------
   CTA BLOCK - .ss-cta
   ---------------------------------------------------------------- */
.ss-cta {
  background: linear-gradient(135deg, var(--ss-dark) 0%, var(--ss-dark-mid) 100%);
  border-radius: var(--ss-radius);
  padding: 2.25rem 2rem;
  margin: 2.5rem 0;
  text-align: center;
}
.ss-cta p {
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  margin-bottom: 1.25rem;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.ss-cta__title {
  color: var(--ss-white);
  font-family: var(--ss-font-head);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.ss-cta__sub {
  color: rgba(255,255,255,0.75);
  font-size: 0.92rem;
  margin-bottom: 1.5rem;
}
.ss-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ----------------------------------------------------------------
   FAQ - .ss-faq
   HTML używa klasy .ss-faq-item__a dla odpowiedzi (nie __answer)
   ---------------------------------------------------------------- */
.ss-faq { margin: 2.5rem 0; }
.ss-faq h2 {
  border-left: 4px solid var(--ss-orange);
  padding-left: 0.75rem;
  margin-top: 0;
}

.ss-faq-item {
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  margin-bottom: 0.85rem;
  overflow: hidden;
}

/* Pytanie - h3 z klasą .ss-faq-item__q */
.ss-faq-item h3,
.ss-faq-item__q {
  background: var(--ss-bg-alt);
  padding: 0.9rem 1.25rem;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ss-dark);
  border-bottom: 1px solid var(--ss-border);
  cursor: default;
  line-height: 1.45;
}

/* Odpowiedź - div z klasą .ss-faq-item__a */
.ss-faq-item__a {
  padding: 1.1rem 1.25rem 1.1rem 1.5rem;
  background: var(--ss-white);
  border-left: 3px solid transparent;
  transition: border-color 0.2s;
}
.ss-faq-item:hover .ss-faq-item__a {
  border-left-color: var(--ss-amber);
}
.ss-faq-item__a div,
.ss-faq-item__a p {
  font-size: 0.92rem;
  color: var(--ss-text);
  line-height: 1.7;
  margin: 0;
}

/* Stary selector - zachowaj kompatybilność */
.ss-faq-item__answer {
  padding: 1.1rem 1.25rem 1.1rem 1.5rem;
}
.ss-faq-item__answer p {
  margin-bottom: 0;
  font-size: 0.92rem;
  color: var(--ss-text);
  line-height: 1.7;
}

/* ----------------------------------------------------------------
   SIDEBAR - .ss-sidebar
   ---------------------------------------------------------------- */
.ss-sidebar {
  min-width: 0;
  position: sticky;
  top: 80px;
}

/* Meta box "Studio VSS.net" */
.ss-meta-box {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-top: 3px solid var(--ss-orange);
  border-radius: 0 0 var(--ss-radius) var(--ss-radius);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.ss-meta-box strong {
  display: block;
  font-family: var(--ss-font-head);
  font-size: 0.97rem;
  color: var(--ss-dark);
  margin-bottom: 0.5rem;
}
.ss-meta-box p {
  font-size: 0.87rem;
  color: var(--ss-muted);
  line-height: 1.65;
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------------
   POWIĄZANE TEMATY W SIDEBAR - .ss-related
   ---------------------------------------------------------------- */
.ss-related {
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  overflow: hidden;
}
.ss-related h4,
.ss-related > h4 {
  background: var(--ss-dark);
  color: var(--ss-white);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.65rem 1rem;
  margin: 0;
}

/* Karty powiązanych artykułów */
.ss-related-card {
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 0 0.85rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--ss-border);
  text-decoration: none;
  transition: background 0.15s;
  position: relative;
}
.ss-related-card:last-child { border-bottom: none; }
.ss-related-card::before {
  content: '';
  display: block;
  border-radius: 2px;
  background: var(--ss-border);
  transition: background 0.2s;
  align-self: stretch;
}
.ss-related-card:hover { background: var(--ss-bg-alt); }
.ss-related-card:hover::before { background: var(--ss-orange); }
.ss-related-card:hover { text-decoration: none; }

.ss-related-card strong {
  display: block;
  font-size: 0.88rem;
  color: var(--ss-dark);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 0.2rem;
}
.ss-related-card span {
  display: block;
  font-size: 0.8rem;
  color: var(--ss-muted);
  line-height: 1.5;
    width: 200px;
    max-width: 400px;
    margin: 5px 10px 10px 17px;
}

/* ----------------------------------------------------------------
   SEKCJA POWIĄZANYCH ARTYKUŁÓW (w treści artykułu, na końcu)
   ---------------------------------------------------------------- */
.ss-related-section {
  background: var(--ss-bg-alt);
  border-top: 3px solid var(--ss-dark-mid);
  border-radius: 0 0 var(--ss-radius) var(--ss-radius);
  padding: 2rem 1.5rem;
  margin: 2.5rem 0;
}
.ss-related-section h2 {
  border-left: 4px solid var(--ss-orange);
  padding-left: 0.75rem;
  margin-top: 0;
}
.ss-related-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.ss-related-section ul li {
  margin: 0;
}
.ss-related-section ul li a {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--ss-white);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius);
  font-size: 0.88rem;
  color: var(--ss-dark);
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 0.2s, color 0.2s;
  text-decoration: none;
}
.ss-related-section ul li a::before {
  content: '→';
  color: var(--ss-orange);
  flex-shrink: 0;
  margin-top: 0.05em;
}
.ss-related-section ul li a:hover {
  border-color: var(--ss-orange);
  color: var(--ss-orange);
  text-decoration: none;
}

/* ----------------------------------------------------------------
   TAGI - .ss-tags
   ---------------------------------------------------------------- */
.ss-tags {
  border-top: 1px solid var(--ss-border);
  padding: 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-top: 1rem;
}
.ss-tags__label { font-weight: 600; color: var(--ss-muted); }
.ss-tags a {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  background: var(--ss-bg-alt);
  border: 1px solid var(--ss-border);
  border-radius: 50px;
  color: var(--ss-dark-mid);
  font-size: 0.81rem;
  font-weight: 500;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
}
.ss-tags a:hover {
  background: var(--ss-dark);
  color: var(--ss-white);
  border-color: var(--ss-dark);
  text-decoration: none;
}

/* ----------------------------------------------------------------
   STOPKA - .ss-footer
   ---------------------------------------------------------------- */
.ss-footer {
  background: var(--ss-dark);
  color: rgba(255,255,255,0.75);
  padding: 0;
  margin-top: 3.5rem;
  font-size: 0.88rem;
}

/* Pasek akcentu na górze stopki */
.ss-footer__top-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--ss-orange) 0%, var(--ss-amber) 50%, var(--ss-dark-mid) 100%);
}

.ss-footer__inner {
  max-width: var(--ss-max-width);
  margin: 0 auto;
  padding: 2.75rem 1.5rem 2.25rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
}

/* Kolumna marki */
.ss-footer__brand img {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: 1.1rem;
}
.ss-footer__brand address {
  font-style: normal;
  color: rgba(255,255,255,0.50);
  line-height: 1.85;
  font-size: 0.85rem;
}
.ss-footer__brand address a {
  color: var(--ss-amber);
  transition: color 0.2s;
}
.ss-footer__brand address a:hover {
  color: var(--ss-orange);
  text-decoration: none;
}

/* Kolumny linków - h4 (nie h3!) */
.ss-footer__col h4 {
  color: var(--ss-orange);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
/* Gdy jest wiele h4 w jednej kolumnie */
.ss-footer__col h4 + ul { margin-bottom: 1.5rem; }

.ss-footer__col ul { list-style: none; padding: 0; margin: 0; }
.ss-footer__col li { margin-bottom: 0.45rem; }
.ss-footer__col a {
  color: rgba(255,255,255,0.60);
  transition: color 0.2s;
  font-size: 0.87rem;
}
.ss-footer__col a:hover {
  color: var(--ss-amber);
  text-decoration: none;
}

/* Pasek dolny */
.ss-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.15);
  padding: 0.9rem 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.38);
  max-width: 100%;
}
.ss-footer__bottom a {
  color: rgba(255,255,255,0.50);
  margin-left: 1rem;
}
.ss-footer__bottom a:hover {
  color: var(--ss-amber);
  text-decoration: none;
}

/* ----------------------------------------------------------------
   RESPONSYWNOŚĆ
   ---------------------------------------------------------------- */

/* Tablet: 2 kolumny footer, layout w jednej kolumnie */
@media (max-width: 1023px) {
  .ss-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ss-sidebar {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: start;
  }
  .ss-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .ss-footer__brand {
    grid-column: 1 / -1;
  }
}

/* Mobile: nav hamburger, layout single, stopka single */
@media (max-width: 767px) {

  /* Hamburger widoczny */
  .ss-nav__toggle { display: flex; }

  /* Nav element ukryty - pojawia się po kliknięciu hamburger */
  .ss-nav__menu {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--ss-white);
    border-bottom: 2px solid var(--ss-orange);
    box-shadow: var(--ss-shadow-md);
    z-index: 200;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .ss-nav__menu.is-open {
    display: block;
  }

  /* UL w menu mobilnym - kolumna pionowa */
  .ss-nav__menu > ul {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 0.5rem 0 1rem;
  }
  .ss-nav__menu > ul > li {
    position: static;
  }
  /* Linki główne na mobile */
  .ss-nav__menu > ul > li > a {
    height: auto;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--ss-border);
    font-size: 0.92rem;
  }
  /* CTA na mobile */
  .ss-nav__cta > a,
  .ss-nav__menu > ul > li.ss-nav__cta > a {
    margin: 0.75rem 1.25rem;
    display: flex;
    justify-content: center;
    width: calc(100% - 2.5rem);
    padding: 0.7rem 1rem;
    border-radius: var(--ss-radius);
  }

  /* Podmenu na mobile - statyczne pod linkiem */
  .ss-dropdown__menu {
    display: none;
    position: static;
    border: none;
    border-top: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0.25rem 0 0.25rem 1.5rem;
    background: var(--ss-bg-alt);
    border-left: 3px solid var(--ss-orange);
    margin: 0 1.25rem 0.25rem;
    min-width: auto;
  }
  .ss-dropdown.is-open .ss-dropdown__menu {
    display: block;
  }
  /* Na mobile NIE pokazuj na hover */
  .ss-dropdown:hover .ss-dropdown__menu {
    display: none;
  }
  .ss-dropdown.is-open .ss-dropdown__menu {
    display: block;
  }
  .ss-dropdown__menu a {
    padding: 0.5rem 0.75rem;
    font-size: 0.84rem;
  }

  /* Hero */
  .ss-hero::before { display: none; }
  .ss-hero__inner {
    padding: 2.5rem 1.25rem 2.25rem;
  }
  .ss-hero__inner h1 {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  /* Layout */
  .ss-layout {
    padding: 0 1rem;
    margin: 2rem auto;
  }

  /* Sidebar na mobile - jedna kolumna */
  .ss-sidebar {
    display: block;
  }
  .ss-meta-box { margin-bottom: 1rem; }

  /* FAQ */
  .ss-faq-item h3,
  .ss-faq-item__q { font-size: 0.9rem; }

  /* Stopka */
  .ss-footer__inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1.25rem 1.75rem;
  }
  .ss-footer__brand { grid-column: auto; }

  /* CTA */
  .ss-cta { padding: 1.75rem 1.25rem; }
  .ss-cta__buttons { flex-direction: column; align-items: center; }
  .ss-btn { width: 100%; max-width: 320px; }

  /* Related section */
  .ss-related-section { padding: 1.5rem 1rem; }
  .ss-related-section ul { grid-template-columns: 1fr; }

  /* Breadcrumb */
  .ss-breadcrumb ol { padding: 0 1rem; font-size: 0.78rem; }
}

/* ----------------------------------------------------------------
   HOW TO - .ss-howto
   ---------------------------------------------------------------- */

/* Kontener sekcji */
.ss-howto {
  margin: 3rem 0;
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: var(--ss-shadow-md);
  border: 1px solid var(--ss-border);
}

/* Nagłówek h2 na ciemnym tle */
.ss-howto > h2 {
  background: linear-gradient(110deg, var(--ss-dark) 0%, var(--ss-dark-mid) 100%);
  color: var(--ss-white);
  padding: 1.4rem 1.75rem 1.4rem 1.5rem;
  margin: 0;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  border-left: none;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  letter-spacing: -0.01em;
}

/* Ikonka zębatki przy nagłówku */
.ss-howto > h2::before {
  content: '';
  display: inline-flex;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  background: var(--ss-orange);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 11 12 14 22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  box-shadow: 0 2px 8px rgba(255,106,19,0.40);
}

/* Opis pod nagłówkiem */
.ss-howto > p {
  background: var(--ss-dark);
  color: rgba(255,255,255,0.62);
  padding: 0 1.75rem 1.25rem 1.5rem;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  border-bottom: 3px solid var(--ss-orange);
}

/* Pasek metadanych (czas / koszt / narzędzia) */
.ss-howto__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0;
  background: var(--ss-bg-alt);
  border-bottom: 1px solid var(--ss-border);
}

.ss-howto__meta span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  font-size: 0.83rem;
  color: var(--ss-muted);
  border-right: 1px solid var(--ss-border);
  flex: 1 1 auto;
  min-width: 160px;
}

.ss-howto__meta span:last-child { border-right: none; }

.ss-howto__meta strong {
  color: var(--ss-navy);
  font-weight: 700;
  white-space: nowrap;
}

/* Ikony inline przed metadanymi (czas / PLN / narzędzie) */
.ss-howto__meta span:nth-child(1)::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}

.ss-howto__meta span:nth-child(2)::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cline x1='2' y1='10' x2='22' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}

.ss-howto__meta span:nth-child(3)::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
}

/* Lista kroków ol */
.ss-howto__steps {
  list-style: none;
  padding: 1.5rem 1.75rem 1.75rem 1.75rem;
  margin: 0;
  background: var(--ss-white);
  counter-reset: howto-counter;
}

/* Pojedynczy krok li */
.ss-howto__step {
  position: relative;
  padding: 0 0 1.75rem calc(44px + 1.25rem);
  counter-increment: howto-counter;
  margin-bottom: 0;
}

.ss-howto__step:last-child {
  padding-bottom: 0;
}

/* Kółko z numerem kroku */
.ss-howto__step::before {
  content: counter(howto-counter);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 44px;
  height: 44px;
  background: var(--ss-orange);
  color: var(--ss-white);
  font-family: var(--ss-font-head);
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(255,106,19,0.35);
  z-index: 1;
  line-height: 1;
  transition: background 0.2s, box-shadow 0.2s;
}

.ss-howto__step:hover::before {
  background: #e55c0b;
  box-shadow: 0 4px 14px rgba(255,106,19,0.50);
}

/* Pionowa linia łącząca kroki */
.ss-howto__step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px;
  top: calc(0.1rem + 44px + 6px);
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--ss-border) 60%, transparent 100%);
  z-index: 0;
}

/* Tytuł kroku h3 */
.ss-howto__step h3 {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--ss-navy);
  margin: 0.15rem 0 0.45rem;
  line-height: 1.35;
  transition: color 0.2s;
}

.ss-howto__step:hover h3 {
  color: var(--ss-orange);
}

/* Opis kroku p */
.ss-howto__step p {
  font-size: 0.87rem;
  color: var(--ss-muted);
  margin: 0;
  line-height: 1.7;
}

/* ----------------------------------------------------------------
   TABELE - .ss-article table oraz .ss-table
   ---------------------------------------------------------------- */

/* Responsywny wrapper - zapobiega poziomemu scrollowi na mobile */
.ss-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.75rem 0;
  border-radius: var(--ss-radius);
  box-shadow: var(--ss-shadow);
  border: 1px solid var(--ss-border);
}

.ss-table-wrap table {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  width: 100%;
}

/* Tabela bez wrappera - z własnym cieniem */
.ss-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.75rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  border-radius: var(--ss-radius);
  overflow: hidden;
  box-shadow: var(--ss-shadow);
  border: 1px solid var(--ss-border);
}

/* Nagłówek tabeli - ciemne tło */
.ss-article table thead tr {
  background: var(--ss-dark);
}

.ss-article table thead th {
  background: var(--ss-dark);
  color: var(--ss-white);
  font-family: var(--ss-font-head);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.85rem 1.1rem;
  text-align: left;
  border: none;
  white-space: nowrap;
  vertical-align: middle;
}

/* Pomarańczowy akcent na pierwszej kolumnie nagłówka */
.ss-article table thead th:first-child {
  border-left: 4px solid var(--ss-orange);
  padding-left: 0.9rem;
}

/* Wiersze tbody */
.ss-article table tbody tr {
  border-bottom: 1px solid var(--ss-border);
  transition: background 0.15s;
  background: var(--ss-white);
}

.ss-article table tbody tr:last-child {
  border-bottom: none;
}

/* Parzyste wiersze - zebra */
.ss-article table tbody tr:nth-child(even) {
  background: var(--ss-bg-alt);
}

/* Hover wiersza */
.ss-article table tbody tr:hover {
  background: var(--ss-blue-light);
}

/* Komórki td */
.ss-article table tbody td {
  padding: 0.75rem 1.1rem;
  color: var(--ss-text);
  vertical-align: top;
  border-right: 1px solid var(--ss-border);
  line-height: 1.6;
}

.ss-article table tbody td:last-child {
  border-right: none;
}

/* Pierwsza kolumna - wyróżniona jako etykieta */
.ss-article table tbody td:first-child {
  font-weight: 600;
  color: var(--ss-navy);
  border-left: 4px solid transparent;
  white-space: nowrap;
  transition: border-left-color 0.15s;
}

.ss-article table tbody tr:hover td:first-child {
  border-left-color: var(--ss-orange);
}

/* Tabela dwukolorowa z akcentem - wariant kompaktowy */
.ss-article table.ss-table--compact tbody td {
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
}

/* Responsywność tabel */
@media (max-width: 900px) {
  .ss-article table {
    font-size: 0.88rem;
  }
  .ss-article table thead th {
    padding: 0.75rem 0.85rem;
    font-size: 0.78rem;
  }
  .ss-article table tbody td {
    padding: 0.65rem 0.85rem;
  }
}

@media (max-width: 600px) {
  .ss-article table {
    font-size: 0.83rem;
    display: block;
    overflow-x: auto;
    white-space: normal;
  }
  .ss-article table thead th {
    padding: 0.65rem 0.7rem;
    font-size: 0.75rem;
    white-space: normal;
  }
  .ss-article table tbody td {
    padding: 0.55rem 0.7rem;
    white-space: normal;
  }
  .ss-article table tbody td:first-child {
    white-space: normal;
  }
}

/* --- Responsywność HOW TO --- */

@media (max-width: 767px) {

  .ss-howto {
    margin: 2rem 0;
  }

  .ss-howto > h2 {
    padding: 1.1rem 1.25rem;
    font-size: 1rem;
    gap: 0.65rem;
  }

  .ss-howto > h2::before {
    width: 32px;
    height: 32px;
    background-size: 15px;
  }

  .ss-howto > p {
    padding: 0 1.25rem 1.1rem;
    font-size: 0.84rem;
  }

  .ss-howto__meta {
    flex-direction: column;
  }

  .ss-howto__meta span {
    border-right: none;
    border-bottom: 1px solid var(--ss-border);
    padding: 0.6rem 1.25rem;
    min-width: 0;
  }

  .ss-howto__meta span:last-child {
    border-bottom: none;
  }

  .ss-howto__steps {
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .ss-howto__step {
    padding: 0 0 1.5rem calc(36px + 1rem);
  }

  .ss-howto__step::before {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }

  .ss-howto__step:not(:last-child)::after {
    left: 17px;
    top: calc(0.1rem + 36px + 5px);
  }
}