/* ============================================================
   INTEBO v2 — Content pages: showroom, about, realizacje, marki, blog, services, status
   ============================================================ */

/* NOTE: .breadcrumbs and .page-hero now live in chrome-v2.css
   (single source of truth, loaded on every page). Do not redefine here. */

/* ===== Showroom ===== */
.showroom-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: var(--s-7);
  padding: var(--s-8) 0;
  align-items: start;
}
@media (max-width: 980px) { .showroom-grid { grid-template-columns: 1fr; } }

.showroom-info { display: flex; flex-direction: column; gap: var(--s-5); }
.info-card {
  background: #fff;
  border: 1px solid var(--line-100);
  padding: var(--s-5);
}
.info-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-900);
  margin-bottom: var(--s-4);
  display: flex; align-items: center; gap: 0.6rem;
}
.info-card h3 i { color: var(--ember); }
.info-list { display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.94rem; color: var(--text); }
.info-list__row { display: grid; grid-template-columns: 130px 1fr; gap: 1rem; }
.info-list__row dt { color: var(--text-muted); font-weight: 500; }
.info-list__row dd { color: var(--ink-900); font-weight: 500; }
.info-list__row dd b { font-weight: 600; }

.contact-row { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.4rem 0; }
.contact-row i { color: var(--ember); width: 18px; margin-top: 0.18rem; flex-shrink: 0; }
.contact-row a, .contact-row span { color: var(--ink-900); font-weight: 500; }
.contact-row a:hover { color: var(--ember); }

.showroom-map {
  position: relative;
  aspect-ratio: 4/3;
  background:
    linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
  overflow: hidden;
}
.showroom-map__pin {
  position: absolute;
  top: 45%; left: 52%;
  width: 44px; height: 44px;
  background: var(--ember);
  color: #fff;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(192,57,43,0.45);
}
.showroom-map__pin::after {
  content: ""; position: absolute;
  bottom: -10px; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--ember);
}
.showroom-map__hint {
  position: absolute; bottom: 1rem; left: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.5);
  padding: 0.4rem 0.7rem;
}

.showroom-photos {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 240px 240px;
  gap: 0.5rem;
  padding-bottom: var(--s-8);
}
@media (max-width: 760px) {
  .showroom-photos { grid-template-columns: 1fr; grid-template-rows: auto; }
  .showroom-photos > *:first-child { grid-row: span 1 !important; grid-column: span 1 !important; }
}
.showroom-photo {
  position: relative;
  background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
}
.showroom-photo:first-child { grid-row: span 2; }
.showroom-photo__hint {
  position: absolute; bottom: 0.7rem; left: 0.7rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.3rem 0.55rem;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
/* `1 / -1`, nie `span 2`: w jednokolumnowym gridzie (mobile) `span 2` dorabiał
   drugą, niejawną kolumnę i cały formularz rozjeżdżał się na dwie nierówne
   szpalty zamiast ustawić pola jedno pod drugim. */
.contact-form__field--full { grid-column: 1 / -1; }
@media (max-width: 660px) { .contact-form { grid-template-columns: 1fr; } }

/* Checkboxa i radia z tego wyłączamy — `width: 100%` i padding robiły
   z kwadracika zgody pustą, rozciągniętą ramkę. */
.contact-form input:not([type="checkbox"]):not([type="radio"]),
.contact-form select,
.contact-form textarea {
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.92rem;
  border: 1px solid var(--line-200);
  background: #fff;
  outline: none;
  width: 100%;
  transition: border-color var(--dur);
}
.contact-form input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--ink-900); }
.contact-form label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-800);
  margin-bottom: 0.4rem;
}
.contact-form__cta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
/* Selektor z `label`, bo zgoda też jest `<label>` — bez tego `.contact-form label
   { display: block }` wygrywa specyficznością i checkbox ląduje nad tekstem. */
.contact-form label.contact-form__terms {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 1 1 18rem;
  max-width: 34rem;
  margin-bottom: 0;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}
.contact-form__terms input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.15rem 0 0;
  accent-color: var(--ember);
  cursor: pointer;
}
.contact-form__terms a { color: var(--ink-900); text-decoration: underline; }
@media (max-width: 660px) {
  .contact-form__cta { align-items: stretch; }
  .contact-form__cta .btn { width: 100%; justify-content: center; }
}

/* ===== About ===== */
.about-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-7);
  padding: var(--s-8) 0;
  align-items: center;
}
@media (max-width: 880px) { .about-intro { grid-template-columns: 1fr; } }
.about-intro__text h2 {
  font-size: var(--t-h2);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin-bottom: var(--s-4);
}
.about-intro__text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: var(--s-4);
}
.about-intro__text strong { color: var(--ink-900); font-weight: 600; }
.about-intro__photo {
  aspect-ratio: 4/5;
  position: relative;
  background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
}
.about-intro__photo-hint {
  position: absolute; bottom: 1rem; left: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.3rem 0.55rem;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-100);
  border-top: 1px solid var(--line-100);
  border-bottom: 1px solid var(--line-100);
}
@media (max-width: 760px) { .about-stats { grid-template-columns: 1fr 1fr; } }
.about-stat {
  background: #fff;
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.about-stat__num {
  font-size: 3rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  line-height: 1;
}
.about-stat__num span { color: var(--ember); }
.about-stat__label {
  font-size: 0.86rem;
  color: var(--text);
}

.timeline {
  display: flex; flex-direction: column;
  position: relative;
  padding-left: var(--s-5);
  margin-top: var(--s-5);
}
.timeline::before {
  content: ""; position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 2px; background: var(--line-100);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--s-5);
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -19px; top: 8px;
  width: 12px; height: 12px;
  background: var(--ember);
  border: 3px solid var(--bg);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ember);
}
.timeline-item__year {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ember);
  margin-bottom: 0.3rem;
}
.timeline-item h4 { font-size: 1.1rem; font-weight: 600; color: var(--ink-900); margin-bottom: 0.4rem; }
.timeline-item p { font-size: 0.95rem; color: var(--text); line-height: 1.55; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}
@media (max-width: 980px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  background: #fff;
  border: 1px solid var(--line-100);
}
.team-card__photo {
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
  position: relative;
}
.team-card__photo::after {
  content: "Foto";
  position: absolute; bottom: 0.7rem; left: 0.7rem;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.25rem 0.5rem;
}
.team-card__body { padding: var(--s-4); }
.team-card__name { font-size: 1.05rem; font-weight: 600; color: var(--ink-900); }
.team-card__role { font-size: 0.82rem; color: var(--ember); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 0.2rem; }
.team-card__bio { font-size: 0.86rem; color: var(--text); margin-top: 0.6rem; line-height: 1.5; }

.partners-band {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--line-100);
  border-bottom: 1px solid var(--line-100);
  align-items: center;
  justify-content: center;
}
.partners-band__logo {
  padding: 0.8rem 1.4rem;
  border: 1px solid var(--line-100);
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-900);
  font-family: var(--font-mono);
}

/* ===== Realizacje ===== */
.proj-filter {
  display: flex; flex-wrap: wrap; gap: 0.55rem;
  margin: 0 0 var(--s-5);
}
.proj-filter__btn {
  padding: 0.55rem 1.05rem;
  border: 1px solid var(--line-200);
  background: #fff;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all var(--dur);
}
.proj-filter__btn:hover { border-color: var(--ink-900); color: var(--ink-900); }
.proj-filter__btn--active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }

.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
}
@media (max-width: 980px) { .proj-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; } }
.proj-card { display: block; background: #fff; }
.proj-card__photo {
  aspect-ratio: 4/5;
  background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
  position: relative;
  overflow: hidden;
}
.proj-card__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
  transition: background var(--dur);
}
.proj-card:hover .proj-card__photo::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
}
.proj-card__tag {
  position: absolute; top: 1rem; left: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  background: #fff;
  color: var(--ink-900);
  padding: 0.3rem 0.55rem;
  z-index: 2;
}
.proj-card__overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: var(--s-5);
  z-index: 2;
  color: #fff;
}
.proj-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.2;
}
.proj-card__meta {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.78);
  display: flex; gap: 0.7rem; flex-wrap: wrap;
}
.proj-card__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.proj-card__meta i { color: var(--ember); font-size: 0.78rem; }

/* Realizacje feature row (large) */
.proj-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: var(--s-7);
  background: #fff;
  border: 1px solid var(--line-100);
}
@media (max-width: 880px) { .proj-feature { grid-template-columns: 1fr; } }
.proj-feature__photo {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
  position: relative;
}
.proj-feature__photo::after {
  content: "Realizacja · foto";
  position: absolute; bottom: 1rem; left: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.3rem 0.55rem;
}
.proj-feature__body {
  padding: var(--s-7);
  display: flex; flex-direction: column; justify-content: center;
}
.proj-feature__body h2 { font-size: 1.7rem; margin-bottom: 0.6rem; }
.proj-feature__quote {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.7;
  font-style: italic;
  margin: var(--s-4) 0;
  border-left: 3px solid var(--ember);
  padding-left: var(--s-4);
}
.proj-feature__author { font-size: 0.86rem; color: var(--text-muted); margin-top: var(--s-3); }
.proj-feature__author b { color: var(--ink-900); font-weight: 600; }

/* ===== Marki ===== */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-100);
  border: 1px solid var(--line-100);
}
@media (max-width: 980px) { .brand-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .brand-grid { grid-template-columns: 1fr; } }
.brand-card {
  background: #fff;
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background var(--dur);
}
.brand-card:hover { background: var(--bg-alt); }
.brand-card__logo {
  height: 64px;
  display: flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-900);
}
.brand-card__country {
  font-size: 0.74rem;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.brand-card__count {
  margin-top: 0.4rem;
  font-size: 0.86rem;
  color: var(--text);
}
.brand-card__count b { color: var(--ember); font-weight: 600; }
.brand-card__cta {
  margin-top: 0.7rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-900);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.brand-card:hover .brand-card__cta { color: var(--ember); }

/* Brand landing — top hero with split */
.brand-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--ink-900);
  color: #fff;
  min-height: 460px;
}
@media (max-width: 880px) { .brand-hero { grid-template-columns: 1fr; min-height: 0; } }
.brand-hero__text {
  padding: var(--s-8);
  display: flex; flex-direction: column; justify-content: center;
}
.brand-hero__logo {
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: var(--s-3);
}
.brand-hero h1 { color: #fff; font-size: var(--t-h2); }
.brand-hero__sub { color: rgba(255,255,255,0.72); margin-top: var(--s-4); font-size: 1rem; line-height: 1.55; max-width: 50ch; }
.brand-hero__photo {
  background: linear-gradient(135deg, #44423f 0%, #2b2a28 100%);
  position: relative;
}
.brand-hero__photo::after {
  content: "Foto producenta";
  position: absolute; bottom: 1rem; right: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.3rem 0.55rem;
}
.brand-hero__meta {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid rgba(255,255,255,0.15);
}
.brand-hero__meta-item span {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.brand-hero__meta-item b { font-size: 1.05rem; color: #fff; font-weight: 600; }

/* ===== Blog ===== */
.blog-feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line-100);
  margin-bottom: var(--s-7);
}
@media (max-width: 880px) { .blog-feature { grid-template-columns: 1fr; } }
.blog-feature__photo {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
  position: relative;
}
.blog-feature__photo::after {
  content: "Foto · cover";
  position: absolute; bottom: 1rem; left: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.3rem 0.55rem;
}
.blog-feature__body {
  padding: var(--s-7);
  display: flex; flex-direction: column; justify-content: center;
}
.blog-feature__body h2 {
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin: 0.5rem 0;
  line-height: 1.15;
}
.blog-feature__excerpt { font-size: 1rem; color: var(--text); line-height: 1.6; margin-bottom: var(--s-4); }

.blog-meta {
  display: flex; gap: 0.7rem; align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.blog-meta__cat {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ember-100);
  color: var(--ember-700);
  padding: 0.25rem 0.5rem;
}
.blog-meta__sep { width: 3px; height: 3px; background: var(--text-muted); border-radius: 50%; }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}
@media (max-width: 980px) { .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }
.post-card { display: flex; flex-direction: column; gap: var(--s-3); }
.post-card__photo {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
  position: relative;
}
.post-card__photo::after {
  content: "Foto";
  position: absolute; bottom: 0.6rem; left: 0.6rem;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.25rem 0.5rem;
}
.post-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  line-height: 1.3;
  margin-top: 0.2rem;
}
.post-card:hover .post-card__title { color: var(--ember); }
.post-card__excerpt { font-size: 0.92rem; color: var(--text-muted); line-height: 1.55; }

/* Blog post (single) */
.blog-post {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-7) 0 var(--s-9);
}
.blog-post h1 {
  font-size: var(--t-h1);
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  margin: var(--s-3) 0 var(--s-4);
  line-height: 1.1;
}
.blog-post__lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: var(--s-5);
}
.blog-post__cover {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%);
  margin: var(--s-5) 0;
  position: relative;
}
.blog-post__cover::after {
  content: "Foto · cover (1600×900)";
  position: absolute; bottom: 1rem; left: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.3rem 0.55rem;
}
.blog-post__body { font-size: 1.05rem; line-height: 1.75; color: var(--text); }
.blog-post__body h2 {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin: var(--s-6) 0 var(--s-3);
}
.blog-post__body h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink-900);
  margin: var(--s-5) 0 var(--s-3);
}
.blog-post__body p { margin-bottom: var(--s-4); }
.blog-post__body strong { color: var(--ink-900); font-weight: 600; }
.blog-post__body ul { margin: 0 0 var(--s-4) 1.2rem; }
.blog-post__body li { margin-bottom: 0.4rem; list-style: disc; }
.blog-post__body blockquote {
  border-left: 3px solid var(--ember);
  padding: 0.5rem 0 0.5rem var(--s-5);
  margin: var(--s-5) 0;
  font-style: italic;
  color: var(--ink-900);
  font-size: 1.1rem;
}
.blog-post__share {
  display: flex; gap: 0.5rem; align-items: center;
  margin: var(--s-6) 0;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--line-100);
  border-bottom: 1px solid var(--line-100);
}
.blog-post__share span { font-size: 0.82rem; color: var(--text-muted); margin-right: 0.5rem; }
.blog-post__share a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-200);
  color: var(--ink-900);
}
.blog-post__share a:hover { background: var(--ink-900); color: #fff; }

/* TOC for posts */
.blog-toc {
  background: var(--bg-alt);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
  border-left: 3px solid var(--ember);
}
.blog-toc__title {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-900);
  margin-bottom: 0.6rem;
}
.blog-toc__list { display: flex; flex-direction: column; gap: 0.3rem; }
.blog-toc__list a {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}
.blog-toc__list a:hover { color: var(--ember); }

/* ===== Services / Sales pages ===== */
.service-hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  min-height: 520px;
}
@media (max-width: 880px) { .service-hero { grid-template-columns: 1fr; } }
.service-hero__text {
  padding: var(--s-9) var(--s-7);
  background: var(--ink-900);
  color: #fff;
  display: flex; flex-direction: column; justify-content: center;
}
.service-hero__text h1 { color: #fff; font-size: var(--t-h1); line-height: 1.08; margin-top: var(--s-3); }
.service-hero__text p { color: rgba(255,255,255,0.75); margin-top: var(--s-4); font-size: 1.1rem; line-height: 1.55; max-width: 50ch; }
.service-hero__cta { margin-top: var(--s-5); display: flex; gap: 0.7rem; flex-wrap: wrap; }
.service-hero__photo {
  background: linear-gradient(135deg, #44423f 0%, #2b2a28 100%);
  position: relative;
}
.service-hero__photo::after {
  content: "Foto kontekstowe";
  position: absolute; bottom: 1rem; right: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  background: rgba(0,0,0,0.4);
  padding: 0.3rem 0.55rem;
}

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-100);
  border: 1px solid var(--line-100);
  margin: var(--s-5) 0;
}
@media (max-width: 880px) { .process { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .process { grid-template-columns: 1fr; } }
.process-step {
  background: #fff;
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: 0.5rem;
  position: relative;
}
.process-step__num {
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ember);
  letter-spacing: -0.02em;
  line-height: 1;
}
.process-step h4 { font-size: 1.05rem; font-weight: 600; color: var(--ink-900); margin-top: 0.3rem; }
.process-step p { font-size: 0.88rem; color: var(--text); line-height: 1.55; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin: var(--s-5) 0;
}
@media (max-width: 880px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card {
  background: #fff;
  border: 1px solid var(--line-100);
  padding: var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.pricing-card--featured { border: 2px solid var(--ink-900); position: relative; }
.pricing-card--featured::before {
  content: "Polecane";
  position: absolute; top: -11px; left: var(--s-5);
  background: var(--ember); color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem;
}
.pricing-card__name { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); }
.pricing-card__price {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  line-height: 1;
}
.pricing-card__price small { font-size: 0.95rem; color: var(--text-muted); font-weight: 400; }
.pricing-card__desc { font-size: 0.94rem; color: var(--text); line-height: 1.55; }
.pricing-card__features { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--s-3) 0; border-top: 1px solid var(--line-100); }
.pricing-card__features li { font-size: 0.9rem; color: var(--text); display: flex; gap: 0.5rem; align-items: flex-start; }
.pricing-card__features i { color: var(--ember); margin-top: 0.18rem; flex-shrink: 0; }
.pricing-card .btn { width: 100%; justify-content: center; }

.faq {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-100);
}
.faq-item {
  border-bottom: 1px solid var(--line-100);
}
.faq-item__q {
  width: 100%;
  padding: var(--s-4) 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-900);
  text-align: left;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.faq-item__q i { color: var(--ember); transition: transform var(--dur); }
.faq-item.open .faq-item__q i { transform: rotate(45deg); }
.faq-item__a {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text);
  padding: 0 0 var(--s-4);
  max-width: 75ch;
  display: none;
}
.faq-item.open .faq-item__a { display: block; }

/* ===== Status pages (404, dziękujemy) ===== */
.status-page {
  padding: var(--s-9) 0;
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.status-page__icon {
  width: 96px; height: 96px;
  margin: 0 auto var(--s-5);
  background: var(--ember-100);
  color: var(--ember);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2.4rem;
}
.status-page__icon--success { background: rgba(45,93,58,0.12); color: #2d5d3a; }
.status-page__icon--error { background: var(--bg-alt); color: var(--text-muted); }
.status-page__num {
  font-family: var(--font-mono);
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink-900);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.status-page h1 {
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  margin-bottom: var(--s-3);
}
.status-page p { color: var(--text-muted); font-size: 1.05rem; line-height: 1.6; margin-bottom: var(--s-5); }
.status-page__actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

/* Order confirm box */
.order-confirm {
  background: #fff;
  border: 1px solid var(--line-100);
  padding: var(--s-6);
  text-align: left;
  margin-top: var(--s-5);
}
.order-confirm__row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line-100);
  font-size: 0.92rem;
}
.order-confirm__row:last-child { border-bottom: 0; }
.order-confirm__row dt { color: var(--text-muted); }
.order-confirm__row dd { color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }
.order-confirm__row dd.id { font-family: var(--font-mono); }

/* ============================================================
   SHARED UI PATTERNS — single source of truth.
   Extracted from page <style> blocks. Do NOT redefine inline.
   ============================================================ */

/* ===== Filter chip
   Markup: <button class="real-chip [is-active]">
             Label <span class="real-chip__count">12</span>
           </button>
   Used on: Marki (brand filter), Realizacje (gallery filter)  */
.real-chip {
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-200);
  background: #fff;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  transition: all var(--dur);
  display: inline-flex; align-items: center; gap: 0.4rem;
  white-space: nowrap;
}
.real-chip:hover { border-color: var(--ink-900); color: var(--ink-900); }
.real-chip.is-active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.real-chip__count {
  font-size: 0.74rem;
  background: rgba(0,0,0,0.06);
  color: var(--text-muted);
  padding: 0.1rem 0.45rem;
  margin-left: 0.1rem;
  font-variant-numeric: tabular-nums;
}
.real-chip.is-active .real-chip__count { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); }

/* ===== Filter toolbar
   Markup: <div class="real-toolbar">
             <button class="real-chip is-active">Wszystkie</button>
             …chips…
             <span class="real-toolbar__count">48 realizacji</span>
           </div>
   Used on: Realizacje. Reusable on any listing+filter page.   */
.real-toolbar {
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line-100);
  margin-bottom: var(--s-5);
}
.real-toolbar__count { font-size: 0.86rem; color: var(--text-muted); margin-left: auto; font-variant-numeric: tabular-nums; }

/* ===== Tab navigation
   Markup: <div class="uslugi-tabs">
             <button class="uslugi-tab is-active">Tab A</button>
             <button class="uslugi-tab">Tab B</button>
           </div>
           <section class="uslugi-block is-active">…</section>
           <section class="uslugi-block">…</section>
   Used on: Usługi. Reusable for any sectioned content page.   */
.uslugi-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line-100);
  margin-bottom: var(--s-7);
}
.uslugi-tab {
  padding: 1.1rem 1.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.uslugi-tab.is-active { color: var(--ink-900); border-bottom-color: var(--ember); font-weight: 600; }
.uslugi-block { display: none; }
.uslugi-block.is-active { display: block; }

/* ===== Process steps grid
   Markup: <div class="uslugi-steps">
             <div class="uslugi-step">
               <span class="uslugi-step__num">01 / Etap</span>
               <h3 class="uslugi-step__title">Tytuł</h3>
               <p class="uslugi-step__desc">Opis.</p>
             </div>
           </div>
   Used on: Usługi. Reusable for any step-by-step process.     */
.uslugi-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-100);
  border: 1px solid var(--line-100);
  margin-bottom: var(--s-7);
}
@media (max-width: 880px) { .uslugi-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .uslugi-steps { grid-template-columns: 1fr; } }
.uslugi-step { background: #fff; padding: 1.6rem 1.4rem; }
.uslugi-step__num { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ember); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; }
.uslugi-step__title { font-size: 1.05rem; font-weight: 600; margin: 0.7rem 0 0.5rem; color: var(--ink-900); }
.uslugi-step__desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.55; }

/* ===== Pricing cards grid
   Markup: <div class="uslugi-pricing">
             <div class="price-card [is-feature]">
               <span class="price-card__label">Pakiet</span>
               <h3 class="price-card__name">Nazwa</h3>
               <span class="price-card__from">od</span>
               <div class="price-card__price">1 200 zł</div>
               <span class="price-card__unit">netto / usługa</span>
               <ul class="price-card__list"><li>…</li></ul>
               <a class="btn btn--primary">Zamów</a>
             </div>
           </div>
   Used on: Usługi. Reusable for any pricing/package section.  */
.uslugi-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-100);
  border: 1px solid var(--line-100);
  margin-bottom: var(--s-7);
}
@media (max-width: 900px) { .uslugi-pricing { grid-template-columns: 1fr; } }
.price-card { background: #fff; padding: 1.6rem; }
.price-card.is-feature { background: var(--ink-900); color: #fff; }
.price-card__label { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.price-card.is-feature .price-card__label { color: var(--ember); }
.price-card__name { font-size: 1.4rem; font-weight: 600; margin: 0.6rem 0 0.4rem; }
.price-card__from { font-size: 0.86rem; color: var(--text-muted); }
.price-card.is-feature .price-card__from { color: rgba(255,255,255,0.6); }
.price-card__price { font-size: 2.2rem; font-weight: 600; margin: 0.5rem 0 0.4rem; letter-spacing: -0.018em; }
.price-card__unit { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.price-card.is-feature .price-card__unit { color: rgba(255,255,255,0.6); }
.price-card__list { list-style: none; padding: 0; margin: 0 0 1.2rem; font-size: 0.88rem; line-height: 1.5; }
.price-card__list li { padding: 0.45rem 0; border-bottom: 1px solid var(--line-100); display: flex; gap: 0.6rem; align-items: flex-start; }
.price-card.is-feature .price-card__list li { border-color: rgba(255,255,255,0.1); }
.price-card__list i { color: var(--ember); margin-top: 0.2rem; }

/* ===== FAQ accordion
   Markup: <details class="faq-item">
             <summary>Pytanie?</summary>
             <p>Odpowiedź.</p>
           </details>
   Used on: Usługi. Reusable on any page with Q&A content.     */
.faq-item { border-bottom: 1px solid var(--line-100); padding: 1.1rem 0; }
.faq-item summary { cursor: pointer; font-weight: 500; color: var(--ink-900); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--ember); font-size: 1.4rem; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0.7rem 0 0; color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }

/* ===== Inline article CTA
   Used on: Wpis blog (in-article CTA box with serif heading).
   Note: uses Source Serif 4 — load that font on any page using this component.
   Markup: <div class="post-cta">
             <div>
               <h3>Nie chcesz liczyć sam?</h3>
               <p>Lead.</p>
             </div>
             <a class="btn btn--primary" href="#">CTA</a>
           </div>                                                              */
.post-cta {
  background: var(--ink-900);
  color: #fff;
  padding: var(--s-6);
  margin: var(--s-6) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-5);
  align-items: center;
}
@media (max-width: 700px) { .post-cta { grid-template-columns: 1fr; } }
.post-cta h3 {
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.post-cta p {
  color: rgba(255,255,255,0.72);
  font-size: 0.96rem;
  line-height: 1.5;
  margin: 0;
  font-family: var(--font-sans);
}

/* ============================================================
   BLOG LISTING components
   Used on: Blog v2.html
   ============================================================ */

/* Search bar
   Markup: <div class="blog-search">
             <input type="search" placeholder="…">
             <button>Szukaj</button>
           </div>                                              */
.blog-search { display: flex; gap: 0; border: 1px solid var(--line-100); background: #fff; }
.blog-search input { flex: 1; padding: 0.95rem 1rem; border: 0; outline: none; font-size: 0.95rem; font-family: inherit; }
.blog-search button { background: var(--ink-900); color: #fff; border: 0; padding: 0 1.4rem; font-size: 0.84rem; font-weight: 600; cursor: pointer; letter-spacing: 0.04em; transition: background var(--dur); }
.blog-search button:hover { background: var(--ember); }

/* Blog page header */
.blog-hero { padding: var(--s-7) 0 var(--s-6); border-bottom: 1px solid var(--line-100); }
.blog-hero__wrap { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-6); align-items: end; }
@media (max-width: 980px) { .blog-hero__wrap { grid-template-columns: 1fr; } }
.blog-hero h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); letter-spacing: -0.024em; line-height: 1.05; color: var(--ink-900); }
.blog-hero p { font-size: 1.05rem; color: var(--text-muted); margin-top: var(--s-3); max-width: 50ch; }

/* Category filter chips — blog variant
   Note: uses same visual as .real-chip but blog-specific naming
   Markup: <div class="blog-cats">
             <button class="blog-chip [blog-chip--active]">
               Kategoria <span class="blog-chip__count">12</span>
             </button>
           </div>                                              */
.blog-cats { display: flex; gap: 0.5rem; padding: var(--s-4) 0; flex-wrap: wrap; border-bottom: 1px solid var(--line-100); }
.blog-chip { padding: 0.45rem 0.95rem; border: 1px solid var(--line-100); font-size: 0.86rem; font-weight: 500; color: var(--text); transition: all var(--dur); cursor: pointer; display: inline-flex; align-items: center; background: #fff; }
.blog-chip:hover { border-color: var(--ink-900); color: var(--ink-900); }
.blog-chip--active { background: var(--ink-900); color: #fff; border-color: var(--ink-900); }
.blog-chip i { font-size: 0.7rem; margin-right: 0.4rem; opacity: 0.6; }
.blog-chip__count { color: var(--text-muted); font-size: 0.78rem; margin-left: 0.4rem; font-variant-numeric: tabular-nums; }
.blog-chip--active .blog-chip__count { color: rgba(255,255,255,0.6); }

/* Featured post card
   Markup: <div class="blog-featured"><div class="blog-featured__card">
             <div class="blog-featured__photo"><span class="badge">Wyróżniony</span></div>
             <div class="blog-featured__body">…</div>
           </div></div>                                        */
.blog-featured { padding: var(--s-7) 0; }
.blog-featured__card { display: grid; grid-template-columns: 1.2fr 1fr; gap: 0; border: 1px solid var(--line-100); background: #fff; }
@media (max-width: 880px) { .blog-featured__card { grid-template-columns: 1fr; } }
.blog-featured__photo { aspect-ratio: 4/3; background: linear-gradient(135deg, #b8b3ad 0%, #5a5651 100%); position: relative; }
.blog-featured__photo .badge { position: absolute; top: 1rem; left: 1rem; background: var(--ember); color: #fff; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; padding: 0.4rem 0.7rem; }
.blog-featured__body { padding: var(--s-6); display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); }
.blog-featured__body .eyebrow { color: var(--ember); }
.blog-featured__body h2 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 600; color: var(--ink-900); letter-spacing: -0.02em; line-height: 1.15; }
.blog-featured__body p { color: var(--text-muted); font-size: 1rem; line-height: 1.6; }
.blog-featured__meta { display: flex; gap: 1.2rem; align-items: center; color: var(--text-muted); font-size: 0.84rem; margin-top: var(--s-3); }
.blog-featured__meta i { color: var(--ember); margin-right: 0.3rem; }

/* Post cards grid
   Markup: <div class="blog-grid"><div class="blog-card">…</div></div> */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); padding-bottom: var(--s-6); }
@media (max-width: 980px) { .blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line-100); transition: border-color var(--dur), transform var(--dur); }
.blog-card:hover { border-color: var(--ink-900); transform: translateY(-2px); }
.blog-card__photo { aspect-ratio: 16/10; background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%); position: relative; }
.blog-card__cat { position: absolute; top: 0.7rem; left: 0.7rem; background: rgba(28,28,27,0.85); color: #fff; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 0.35rem 0.6rem; }
.blog-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.blog-card__date { font-size: 0.74rem; color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.04em; }
.blog-card__title { font-size: 1.15rem; font-weight: 600; color: var(--ink-900); line-height: 1.25; letter-spacing: -0.014em; text-wrap: balance; }
.blog-card__excerpt { font-size: 0.9rem; color: var(--text-muted); line-height: 1.55; flex: 1; }
.blog-card__foot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--s-3); border-top: 1px solid var(--line-100); font-size: 0.82rem; color: var(--text-muted); }
.blog-card__foot .read i { color: var(--ember); margin-left: 0.3rem; transition: transform var(--dur); }
.blog-card:hover .blog-card__foot .read i { transform: translateX(3px); }

/* Newsletter band
   Markup: <section class="blog-newsletter"><div class="container">
             <div class="blog-newsletter__wrap">
               <div><h2>…</h2><p>…</p></div>
               <div class="blog-newsletter__form"><input><button>Zapisz</button></div>
             </div>
           </div></section>                                    */
.blog-newsletter { background: var(--ink-900); color: #fff; padding: var(--s-7) 0; margin: var(--s-7) 0 0; }
.blog-newsletter__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
@media (max-width: 760px) { .blog-newsletter__wrap { grid-template-columns: 1fr; } }
.blog-newsletter h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 600; color: #fff; letter-spacing: -0.02em; line-height: 1.15; }
.blog-newsletter p { color: rgba(255,255,255,0.7); margin-top: var(--s-3); }
.blog-newsletter__form { display: grid; grid-template-columns: 1fr auto; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); }
.blog-newsletter__form input { background: transparent; border: 0; outline: none; color: #fff; font-family: inherit; font-size: 0.95rem; padding: 1rem 1.1rem; }
.blog-newsletter__form input::placeholder { color: rgba(255,255,255,0.5); }
.blog-newsletter__form button { background: var(--ember); color: #fff; border: 0; padding: 0 1.5rem; font-weight: 600; font-size: 0.86rem; cursor: pointer; letter-spacing: 0.04em; }
.blog-newsletter__perks { display: grid; gap: 0.4rem; margin-top: var(--s-4); color: rgba(255,255,255,0.65); font-size: 0.84rem; }
.blog-newsletter__perks i { color: var(--ember); margin-right: 0.5rem; width: 14px; }

/* Pagination
   Markup: <div class="pagination">
             <a href="#">1</a>
             <a href="#" class="is-active">2</a>
             <a class="dots">…</a>
           </div>                                              */
.pagination { display: flex; gap: 0.4rem; justify-content: center; padding: var(--s-6) 0; }
.pagination a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-100); background: #fff; color: var(--text); font-size: 0.9rem; font-weight: 500; transition: all var(--dur); }
.pagination a:hover { border-color: var(--ink-900); color: var(--ink-900); }
.pagination a.is-active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.pagination a.dots { border: 0; background: transparent; cursor: default; pointer-events: none; }

/* ============================================================
   ARTICLE / BLOG POST components
   Used on: Wpis blog v2.html
   Note: Requires Source Serif 4 font (Google Fonts)
   ============================================================ */

/* Article page hero
   Markup: <section class="post-hero"><div class="container">
             <div class="post-hero__inner">
               <span class="eyebrow">…</span>
               <h1>Tytuł artykułu.</h1>
               <p class="post-hero__lead">Lead.</p>
               <div class="post-meta">…</div>
             </div>
           </div></section>                                    */
.post-hero { padding: var(--s-7) 0 var(--s-5); border-bottom: 1px solid var(--line-100); background: #fff; }
.post-hero__inner { max-width: 760px; margin: 0 auto; }
.post-hero h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 600; color: var(--ink-900); letter-spacing: -0.018em; line-height: 1.1; text-wrap: balance; margin: var(--s-3) 0; }
.post-hero__lead { font-size: 1.2rem; line-height: 1.55; color: var(--text-muted); text-wrap: balance; }

/* Article meta bar */
.post-meta { display: flex; gap: 1.5rem; align-items: center; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-100); flex-wrap: wrap; }
.post-author { display: flex; gap: 0.7rem; align-items: center; }
.post-author__photo { width: 44px; height: 44px; background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%); border-radius: 50%; }
.post-author__name { font-size: 0.92rem; font-weight: 600; color: var(--ink-900); }
.post-author__role { font-size: 0.78rem; color: var(--text-muted); }
.post-meta__items { display: flex; gap: 1.2rem; color: var(--text-muted); font-size: 0.84rem; }
.post-meta__items i { color: var(--ember); margin-right: 0.3rem; }

/* Article cover image */
.post-cover { aspect-ratio: 16/8; background: linear-gradient(135deg, #b8b3ad 0%, #5a5651 100%); margin: var(--s-6) 0; position: relative; }
.post-cover__caption { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; color: rgba(255,255,255,0.85); font-size: 0.84rem; font-style: italic; background: rgba(0,0,0,0.4); padding: 0.6rem 0.9rem; backdrop-filter: blur(4px); }

/* Article 3-column layout: TOC | body | share */
.post-layout { display: grid; grid-template-columns: 220px 1fr 220px; gap: var(--s-6); padding: 0 0 var(--s-7); align-items: start; }
@media (max-width: 1100px) { .post-layout { grid-template-columns: 1fr; } .post-toc, .post-share { display: none; } }

/* Table of contents */
.post-toc { position: sticky; top: 110px; }
.post-toc__title { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-900); border-bottom: 2px solid var(--ink-900); padding-bottom: 0.6rem; margin-bottom: var(--s-3); }
.post-toc ol { list-style: none; counter-reset: toc; padding: 0; margin: 0; }
.post-toc li { counter-increment: toc; }
.post-toc a { display: block; padding: 0.55rem 0; font-size: 0.86rem; color: var(--text); border-bottom: 1px solid var(--line-100); line-height: 1.35; transition: color var(--dur); }
.post-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--ember); font-family: var(--font-mono); font-size: 0.74rem; margin-right: 0.5rem; }
.post-toc a:hover, .post-toc a.is-active { color: var(--ink-900); }
.post-toc a.is-active { font-weight: 600; }

/* Prose body — Source Serif 4 */
.post-body { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.18rem; line-height: 1.7; color: var(--ink-900); max-width: 680px; }
.post-body p { margin-bottom: var(--s-4); }
.post-body h2 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.8rem; font-weight: 600; letter-spacing: -0.014em; color: var(--ink-900); margin: var(--s-6) 0 var(--s-3); line-height: 1.2; scroll-margin-top: 110px; }
.post-body h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.3rem; font-weight: 600; color: var(--ink-900); margin: var(--s-5) 0 var(--s-2); }
.post-body strong { font-weight: 600; }
.post-body a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-body a:hover { text-decoration-color: var(--ember); }
.post-body ul, .post-body ol { padding-left: 1.4rem; margin-bottom: var(--s-4); }
.post-body li { margin-bottom: 0.5rem; }
.post-body blockquote { border-left: 3px solid var(--ember); padding: 0.5rem 0 0.5rem var(--s-4); margin: var(--s-5) 0; font-style: italic; color: var(--ink-900); font-size: 1.25rem; line-height: 1.5; }

/* Callout boxes
   Markup: <div class="callout [callout--tip|callout--warn]">
             <i class="fa-solid fa-lightbulb"></i>
             <div><p class="callout__label">Wskazówka</p><p class="callout__body">…</p></div>
           </div>                                             */
.callout { background: var(--bg-alt); border-left: 3px solid var(--ink-900); padding: var(--s-4); margin: var(--s-5) 0; font-family: var(--font-sans); font-size: 0.96rem; line-height: 1.55; display: grid; grid-template-columns: 32px 1fr; gap: var(--s-3); align-items: start; }
.callout--tip { border-left-color: var(--ember); background: #fef6f1; }
.callout--warn { border-left-color: #b54708; background: #fef6ec; }
.callout i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--ink-900); color: #fff; font-size: 0.9rem; }
.callout--tip i { background: var(--ember); }
.callout--warn i { background: #b54708; }
.callout__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-900); margin-bottom: 0.3rem; }
.callout__body { color: var(--text); }
.callout__body strong { color: var(--ink-900); }

/* Data / calculation table */
.calc-table { font-family: var(--font-sans); width: 100%; border-collapse: collapse; margin: var(--s-5) 0; font-size: 0.94rem; }
.calc-table th, .calc-table td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--line-100); }
.calc-table th { background: var(--ink-900); color: #fff; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.calc-table tr:hover td { background: var(--bg-alt); }
.calc-table td:first-child { font-weight: 600; color: var(--ink-900); }
.calc-table td:last-child { font-variant-numeric: tabular-nums; color: var(--ember); font-weight: 600; }

/* Inline figure with caption */
.post-figure { margin: var(--s-5) calc(var(--s-4) * -1); }
.post-figure__img { aspect-ratio: 16/9; background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%); }
.post-figure__cap { font-family: var(--font-sans); font-size: 0.84rem; color: var(--text-muted); font-style: italic; padding: 0.7rem var(--s-4) 0.7rem; border-bottom: 1px solid var(--line-100); }

/* Share rail (sidebar) */
.post-share { position: sticky; top: 110px; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.post-share__title { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--ink-900); margin-bottom: 0.4rem; }
.post-share a { width: 40px; height: 40px; border: 1px solid var(--line-100); background: #fff; display: flex; align-items: center; justify-content: center; color: var(--text); transition: all var(--dur); }
.post-share a:hover { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

/* Author box */
.post-author-box { display: grid; grid-template-columns: 80px 1fr; gap: var(--s-4); align-items: center; background: var(--bg-alt); padding: var(--s-5); margin: var(--s-6) 0; }
.post-author-box__photo { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%); }
.post-author-box h4 { font-size: 1.1rem; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; }
.post-author-box .role { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.post-author-box p { font-family: var(--font-sans); font-size: 0.94rem; color: var(--text); line-height: 1.5; }

/* Avatar images (get_avatar) clipped to circle inside their photo wrappers */
.post-author__photo, .post-author-box__photo { overflow: hidden; }
.post-author__photo img, .post-author-box__photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* --- Komentarze (single post) --- */
.comments { margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line-200); font-family: var(--font-sans); }
.comments__title { font-family: var(--font-display, inherit); font-size: 1.4rem; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; margin-bottom: var(--s-5); }
.comments__title span { color: var(--ember); }

.comment-list { list-style: none; margin: 0 0 var(--s-6); padding: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.comment-list .children { list-style: none; margin: var(--s-5) 0 0; padding: 0 0 0 var(--s-5); border-left: 2px solid var(--line-200); display: flex; flex-direction: column; gap: var(--s-5); }

.comment__inner { display: grid; grid-template-columns: 56px 1fr; gap: var(--s-4); align-items: start; }
.comment__avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--bg-alt); flex-shrink: 0; }
.comment__avatar img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.comment__head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.comment__author { font-size: 0.96rem; font-weight: 600; color: var(--ink-900); }
.comment__author a { color: inherit; }
.comment__date { font-size: 0.78rem; color: var(--text-muted); }
.comment__moderation { font-size: 0.82rem; color: var(--ember); margin-bottom: 0.4rem; }
.comment__body { font-size: 0.94rem; line-height: 1.6; color: var(--text); }
.comment__body p { margin: 0 0 0.6rem; }
.comment__body p:last-child { margin-bottom: 0; }
.comment__actions { margin-top: 0.5rem; }
.comment-reply-link { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ember); }
.comment-reply-link:hover { color: var(--ember-700); }

.comments-pagination { display: flex; gap: 0.4rem; justify-content: center; margin: var(--s-6) 0; flex-wrap: wrap; }
.comments__closed { font-size: 0.86rem; color: var(--text-muted); margin-top: var(--s-4); }

/* Comment form — mirrors .contact-form */
.comment-respond { background: var(--bg-alt); padding: var(--s-5); margin-top: var(--s-6); }
.comment-reply-title { font-size: 1.2rem; font-weight: 600; color: var(--ink-900); letter-spacing: -0.01em; margin-bottom: var(--s-2); }
.comment-reply-title small { font-size: 0.8rem; font-weight: 500; margin-left: 0.6rem; }
.comment-reply-title small a { color: var(--ember); }
.comment-form__notes, .comment-form .comment-notes { font-size: 0.82rem; color: var(--text-muted); margin-bottom: var(--s-4); }
.comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.comment-form .comment-form-comment,
.comment-form .comment-form-url,
.comment-form .comment-form-cookies-consent,
.comment-form .form-submit { grid-column: 1 / -1; }
.comment-form label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--ink-800); margin-bottom: 0.4rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: 0.85rem 1rem; font-family: inherit; font-size: 0.92rem;
  border: 1px solid var(--line-200); background: #fff; outline: none; transition: border-color var(--dur);
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--ink-900); }
.comment-form textarea { min-height: 140px; resize: vertical; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; color: var(--text-muted); }
.comment-form .comment-form-cookies-consent input { width: auto; margin-top: 0.2rem; }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--text-muted); }
.comment-form .form-submit { margin: 0; }

@media (max-width: 660px) {
  .comment-form { grid-template-columns: 1fr; }
  .comment__inner { grid-template-columns: 44px 1fr; gap: var(--s-3); }
  .comment__avatar, .comment__avatar img { width: 44px; height: 44px; }
}

/* Post tags */
.post-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: var(--s-5) 0; border-top: 1px solid var(--line-100); margin-top: var(--s-6); font-family: var(--font-sans); }
.post-tags__label { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); align-self: center; margin-right: 0.5rem; }
.post-tags a { padding: 0.4rem 0.8rem; border: 1px solid var(--line-100); font-size: 0.82rem; color: var(--text); transition: all var(--dur); }
.post-tags a:hover { border-color: var(--ink-900); color: var(--ink-900); }

/* ============================================================
   PROJECT PAGE components
   Used on: Realizacja v2.html
   ============================================================ */

/* Spec strip — horizontal grid of key specs
   Markup: <div class="real-specs">
             <div class="real-spec">
               <span class="real-spec__label">Moc</span>
               <span class="real-spec__value">11 kW <small>nominalna</small></span>
             </div>
           </div>                                             */
.real-specs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-100); border-top: 1px solid var(--line-100); border-bottom: 1px solid var(--line-100); }
@media (max-width: 880px) { .real-specs { grid-template-columns: 1fr 1fr; } }
.real-spec { background: #fff; padding: var(--s-5); display: flex; flex-direction: column; gap: 0.3rem; }
.real-spec__label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.real-spec__value { font-size: 1.1rem; font-weight: 600; color: var(--ink-900); letter-spacing: -0.012em; }
.real-spec__value small { font-size: 0.78rem; color: var(--text-muted); font-weight: 400; }

/* Sans-serif prose (project pages, technical articles)
   Markup: <div class="real-text">…<h2>…</h2><p>…</p><blockquote>…</blockquote></div> */
.real-text { font-size: 1.05rem; line-height: 1.7; color: var(--text); }
.real-text h2 { font-size: 1.5rem; font-weight: 600; color: var(--ink-900); margin: var(--s-5) 0 var(--s-3); letter-spacing: -0.018em; }
.real-text p { margin-bottom: var(--s-4); }
.real-text strong { color: var(--ink-900); font-weight: 600; }
.real-text blockquote { border-left: 3px solid var(--ember); padding: 0.5rem 0 0.5rem var(--s-4); margin: var(--s-5) 0; font-style: italic; color: var(--ink-900); font-size: 1.1rem; }
.real-text blockquote cite { display: block; margin-top: 0.6rem; font-style: normal; font-size: 0.86rem; color: var(--text-muted); }
.real-text blockquote cite b { color: var(--ink-900); font-weight: 600; }
.real-text ul { margin: 0 0 1.2rem 1.4rem; }
.real-text li { margin-bottom: 0.4rem; list-style: disc; }

/* Sticky sidebar */
.real-aside { position: sticky; top: 110px; display: flex; flex-direction: column; gap: var(--s-4); }
.real-aside__title { font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--ink-900); border-bottom: 2px solid var(--ink-900); padding-bottom: 0.6rem; }

/* Product reference card (sidebar)
   Markup: <a class="used-product" href="#">
             <div class="used-product__photo"></div>
             <div>
               <div class="used-product__brand">Hitze</div>
               <div class="used-product__name">Albero 11 kW</div>
               <div class="used-product__price">3 490 zł</div>
             </div>
           </a>                                              */
.used-product { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--line-100); background: #fff; transition: border-color var(--dur); }
.used-product:hover { border-color: var(--ink-900); }
.used-product__photo { aspect-ratio: 1/1; background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%); }
.used-product__brand { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.used-product__name { font-size: 0.92rem; font-weight: 600; color: var(--ink-900); line-height: 1.25; margin-top: 0.1rem; }
.used-product__price { font-size: 0.92rem; font-weight: 700; color: var(--ember); margin-top: 0.4rem; font-variant-numeric: tabular-nums; }

/* Content prev/next navigation
   Markup: <div class="real-nav">
             <a class="real-nav__link" href="#">
               <div class="real-nav__link-photo"></div>
               <div>
                 <div class="real-nav__link-dir"><i class="fa-solid fa-arrow-left"></i> Poprzednia</div>
                 <div class="real-nav__link-title">Stodoła pod Zakopanem</div>
               </div>
             </a>
             <a class="real-nav__link real-nav__link--next" href="#">…</a>
           </div>                                            */
.real-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-100); border-top: 1px solid var(--line-100); border-bottom: 1px solid var(--line-100); }
@media (max-width: 660px) { .real-nav { grid-template-columns: 1fr; } }
.real-nav__link { background: #fff; padding: var(--s-5); display: flex; gap: var(--s-4); align-items: center; transition: background var(--dur); }
.real-nav__link:hover { background: var(--bg-alt); }
.real-nav__link--next { flex-direction: row-reverse; text-align: right; }
.real-nav__link-photo { width: 80px; height: 80px; background: linear-gradient(135deg, #d6d3d1 0%, #a8a6a2 100%); flex-shrink: 0; }
.real-nav__link-dir { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.2rem; }
.real-nav__link-dir i { color: var(--ember); }
.real-nav__link-title { font-size: 1rem; font-weight: 600; color: var(--ink-900); }

/* ============================================================
   REALIZACJE — galeria kategorii (podstrona /realizacje/{slug}/)
   Natywne galerie Gutenberga jako masonry (CSS columns), pelna szerokosc,
   stale 4 kolumny. Zdjecia dodawane przez API bez zmian — tylko prezentacja.
   ============================================================ */
.realizacje-galleries .entry-content { max-width: none; padding-top: var(--s-6); }

.realizacje-galleries .entry-content h2,
.realizacje-galleries .entry-content h3 {
  font-size: 1.4rem; font-weight: 600; color: var(--ink-900); letter-spacing: -0.012em;
  margin: var(--s-7) 0 var(--s-4); padding-bottom: 0.7rem; border-bottom: 1px solid var(--line-100);
}
.realizacje-galleries .entry-content > .wp-block-gallery:first-child,
.realizacje-galleries .entry-content > h2:first-child,
.realizacje-galleries .entry-content > h3:first-child { margin-top: 0; }

.realizacje-galleries .wp-block-gallery,
.realizacje-galleries .wp-block-gallery.has-nested-images {
  display: block; column-count: 4; column-gap: 6px; margin: var(--s-5) 0;
}
@media (max-width: 1100px) { .realizacje-galleries .wp-block-gallery, .realizacje-galleries .wp-block-gallery.has-nested-images { column-count: 3; } }
@media (max-width: 760px)  { .realizacje-galleries .wp-block-gallery, .realizacje-galleries .wp-block-gallery.has-nested-images { column-count: 2; } }
@media (max-width: 460px)  { .realizacje-galleries .wp-block-gallery, .realizacje-galleries .wp-block-gallery.has-nested-images { column-count: 1; } }

.realizacje-galleries .wp-block-gallery figure.wp-block-image,
.realizacje-galleries .wp-block-gallery .wp-block-image {
  display: block !important; width: auto !important; max-width: none !important;
  margin: 0 0 6px !important; break-inside: avoid;
}
/* Zabij flexowy "is-cropped" layout WP na wrapperach <a> i <img> — bez tego
   część zdjęć jest rozciągana (flex:1 0 0% + height:100%). Wracamy do naturalnych proporcji. */
.realizacje-galleries .wp-block-gallery figure.wp-block-image > a,
.realizacje-galleries .wp-block-gallery figure.wp-block-image > div {
  display: block !important; flex: none !important; width: 100% !important; height: auto !important;
}
.realizacje-galleries .wp-block-gallery figure.wp-block-image img,
.realizacje-galleries .wp-block-gallery .wp-block-image img {
  display: block; flex: none !important;
  width: 100% !important; height: auto !important;
  aspect-ratio: auto !important; object-fit: initial !important; cursor: zoom-in;
  /* WP 6.7 sizes="auto" regres: core daje lazy-img `contain:size` + intrinsic 3000x1500,
     co rozciaga je do 1500px gdy nadpiszemy wysokosc. Wylaczamy containment. */
  contain: none !important;
  contain-intrinsic-size: auto !important;
}


/* === Strony prawne (regulamin, polityka prywatności) ======================
   Długi tekst prawny + boczny spis treści. Treść wkleja się ze starego sklepu
   jako <p>/<h2>/<strong>/<br>, więc typografię trzeba zadać z poziomu kontenera
   — w środku nie ma żadnych klas, na których dałoby się zaczepić. */
.legal-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}
.legal-layout > .legal-doc:only-child { grid-column: 1 / -1; max-width: 760px; }
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* Spis treści — przykleja się przy przewijaniu, ale tylko na szerokich ekranach;
   na wąskich stoi nad treścią jako zwykła lista. */
.legal-toc {
  border-left: 2px solid var(--line-100);
  padding-left: var(--s-4);
}
@media (min-width: 901px) {
  .legal-toc { position: sticky; top: 110px; }
}
.legal-toc__title {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ember);
  margin-bottom: 0.9rem;
}
.legal-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.55rem;
  counter-reset: legal-toc;
}
.legal-toc__list li { counter-increment: legal-toc; }
.legal-toc__list a {
  display: flex;
  gap: 0.5rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur);
}
.legal-toc__list a::before {
  content: counter(legal-toc) ".";
  color: var(--line-200, #d6d3d1);
  flex-shrink: 0;
}
.legal-toc__list a:hover { color: var(--ember); }

.legal-doc {
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-900);
}
.legal-doc > *:first-child { margin-top: 0; }
.legal-doc p { margin: 0 0 var(--s-4); }
.legal-doc h2 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: var(--s-7) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-100);
  /* Sticky header nie może zasłonić nagłówka po skoku ze spisu treści. */
  scroll-margin-top: 120px;
}
.legal-doc h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc h3 { font-size: 1.08rem; font-weight: 600; margin: var(--s-5) 0 var(--s-2); }
.legal-doc strong { font-weight: 600; }
.legal-doc ul, .legal-doc ol { padding-left: 1.4rem; margin: 0 0 var(--s-4); }
.legal-doc li { margin-bottom: 0.45rem; }
.legal-doc a {
  color: var(--ember);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
}
.legal-doc table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s-4);
  font-size: 0.92rem;
}
.legal-doc th, .legal-doc td {
  border: 1px solid var(--line-100);
  padding: 0.6rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.legal-doc th { background: var(--bg-alt); font-weight: 600; }

.legal-doc__updated {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line-100);
  font-size: 0.82rem;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .legal-doc { font-size: 0.95rem; line-height: 1.7; }
  .legal-doc h2 { font-size: 1.2rem; }
}

/* Formularz kontaktowy — honeypot i komunikat po wysyłce. */
.contact-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__feedback { grid-column: 1 / -1; margin: 0.6rem 0 0; font-size: 0.88rem; line-height: 1.5; }
.contact-form__feedback:empty { display: none; }
.contact-form__feedback.is-ok { color: #1a7f37; }
.contact-form__feedback.is-error { color: #b32d2e; }