/* ==========================================================================
   Tukoder — components.css
   Reużywalne komponenty UI. Samodzielne sekcje strony noszą klasę
   component-NAZWA; drobne, powtarzalne elementy (przyciski, tagi, pola
   formularza, media) są współdzielone między komponentami.
   Tokeny i baza: base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Przyciski (.btn)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* pełny (akcent) — hover odwraca kolory */
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-text); }
.btn-primary:active { background: var(--color-neutral-200); color: var(--color-text); border-color: var(--color-text); }

/* obrysowany — hover wypełnia tuszem */
.btn-secondary { color: var(--color-text); border-color: var(--color-text); }
.btn-secondary:hover { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.btn-secondary:active { background: var(--color-neutral-800); color: var(--color-bg); border-color: var(--color-neutral-800); }

/* --------------------------------------------------------------------------
   Tagi (.tag)
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Pola formularza (.field / .input)
   -------------------------------------------------------------------------- */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }

/* --------------------------------------------------------------------------
   Media (.media / .media-frame / .media-placeholder)
   Zastępują <image-slot> z projektu — zwykłe <img> lub placeholder.
   Proporcje kadru nadaje komponent-rodzic.
   -------------------------------------------------------------------------- */
.media { display: block; width: 100%; background: var(--color-surface); object-fit: cover; height: auto;}
.media-frame { display: block; border: 2px solid var(--color-divider); transition: border-color 0.15s; }
.media-placeholder {
  display: grid; place-items: center; width: 100%;
  background: var(--color-neutral-200);
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; padding: var(--leading);
}

/* --------------------------------------------------------------------------
   Lista „ptaszków" (.checks) — punkty z kwadratowym markerem
   -------------------------------------------------------------------------- */
.checks { list-style: none; margin: var(--leading) 0 0; padding: 0; display: grid; gap: var(--half); }
.checks li { display: flex; gap: 12px; align-items: baseline; font-size: 15.5px; line-height: var(--leading); }
.checks li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--color-accent); align-self: center; }

/* --------------------------------------------------------------------------
   Link powrotny (.back-link)
   -------------------------------------------------------------------------- */
.back-link {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none; color: var(--color-accent-700); margin-bottom: var(--leading);
}
.back-link:hover { color: var(--color-accent-800); }

/* --------------------------------------------------------------------------
   component-nav — nawigacja główna
   -------------------------------------------------------------------------- */
.component-nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  padding-inline: max(var(--edge), calc((100% - 1200px) / 2 + var(--edge)));
  border-bottom: 2px solid var(--color-divider);
}
.component-nav a { color: inherit; text-decoration: none; font-size: 14px; white-space: nowrap; }
.component-nav a:hover, .component-nav a[aria-current='page'] { color: var(--color-accent); }
.nav-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav-brand img { display: block; }

/* checkbox-hack: menu mobilny bez JavaScriptu */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 26px; height: 26px; cursor: pointer; }
.nav-burger span { display: block; width: 100%; height: 2px; background: var(--color-text); }
.nav-links { display: contents; }

@media (max-width: 700px) {
  .component-nav { flex-wrap: wrap; }
  .nav-burger { display: flex; }
  .nav-links {
    display: none; order: 3; width: 100%;
    flex-direction: column; align-items: stretch; gap: var(--space-3);
    padding-top: var(--space-3);
  }
  .nav-links .btn-primary { justify-content: center; }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   lang-switch — dropdown przełącznika języka (PL/EN), CSS-only
   -------------------------------------------------------------------------- */
.lang-switch { position: relative; }
.lang-switch-toggle {
  background: none; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 4px 10px; font-size: 13px; font-weight: 600; color: inherit; cursor: pointer;
}
.lang-switch-menu {
  position: absolute; top: 100%; right: 0; margin: 0; padding: var(--space-1);
  padding-top: calc(var(--space-1) + 4px);
  list-style: none; min-width: 140px; background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease; z-index: 20;
}
.lang-switch-menu a { display: block; padding: 6px 10px; border-radius: var(--radius-md); font-size: 14px; }
.lang-switch-menu a[aria-current='true'] { font-weight: 700; color: var(--color-accent); }
.lang-switch:hover .lang-switch-menu,
.lang-switch:focus-within .lang-switch-menu { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 700px) {
  .lang-switch-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0; margin-top: var(--space-2);
  }
}

/* --------------------------------------------------------------------------
   component-hero — hero strony głównej
   component-page-hero — hero podstron (węższy nagłówek)
   -------------------------------------------------------------------------- */
.component-hero { padding: calc(4 * var(--leading)) 0 calc(3 * var(--leading)); }
.component-hero .badge-row { margin: 0 0 var(--half); }
.component-page-hero { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.component-page-hero .display { font-size: clamp(36px, 4.6vw, 64px); line-height: clamp(38px, 4.9vw, 68px); }
.component-hero .row, .component-page-hero .row { margin-top: var(--leading); }
.component-hero .tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--leading); }

/* metryka wpisu (data, autor, czas czytania) — w page-hero wpisu */
.post-meta {
  display: flex; flex-wrap: wrap; gap: var(--half) var(--leading); padding: var(--leading) 0;
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); font-feature-settings: "tnum" 1;
}

/* --------------------------------------------------------------------------
   component-stats — pas liczb
   -------------------------------------------------------------------------- */
.component-stats { padding: calc(2.5 * var(--leading)) 0; }
.component-stats .grid { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: calc(1.5 * var(--leading)) var(--leading); }
.stat-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 3.4vw, 48px); line-height: calc(2 * var(--leading));
  color: var(--color-accent); font-feature-settings: "tnum" 1;
  margin: 0; margin-left: -0.045em; text-box: trim-both cap alphabetic;
}
.stat-label {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: var(--half) 0 0; max-width: 24ch;
}
@media (max-width: 720px) { .component-stats .grid { grid-template-columns: repeat(2, 1fr); justify-content: start; } }

/* --------------------------------------------------------------------------
   component-values — atuty / filozofia pracy
   -------------------------------------------------------------------------- */
.component-values { padding: calc(2.5 * var(--leading)) 0; }
.component-values .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1.5 * var(--leading)) clamp(24px, 3vw, 48px); margin-top: var(--leading); }
.component-values .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.value svg { width: 28px; height: 28px; color: var(--color-accent); }
.value h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: var(--half) 0 0; text-box: trim-both cap alphabetic;
}
.value p {
  font-size: 15px; line-height: var(--leading); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
@media (max-width: 980px) { .component-values .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .component-values .grid, .component-values .grid--2 { grid-template-columns: 1fr; } }

/* wariant: komórki oddzielone liniami */
.grid-ruled { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 !important; margin-top: var(--leading); }
.grid-ruled > .value { padding: var(--leading) clamp(16px, 2vw, 32px) var(--leading) 0; }
.grid-ruled > .value + .value { border-left: 2px solid var(--color-divider); padding-left: clamp(16px, 2vw, 32px); }
@media (max-width: 980px) {
  .grid-ruled { grid-template-columns: 1fr; }
  .grid-ruled > .value + .value { border-left: 0; border-top: 2px solid var(--color-divider); padding-left: 0; }
}

/* --------------------------------------------------------------------------
   component-features — numerowane rzędy usług
   -------------------------------------------------------------------------- */
.component-features { padding: calc(3 * var(--leading)) 0 calc(2.5 * var(--leading)); }
.feature {
  display: grid; grid-template-columns: minmax(48px, 120px) minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--leading) clamp(24px, 4vw, 72px); align-items: baseline; padding: calc(1.5 * var(--leading)) 0;
}
.feature + .feature { border-top: 2px solid var(--color-divider); }
.f-num {
  position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--leading); color: var(--color-text);
  font-feature-settings: "tnum" 1; margin: 0; text-box: trim-both cap alphabetic;
}
.f-num::before {
  content: ""; position: absolute; left: -24px; top: calc(0.5cap - 5px);
  width: 10px; height: 10px; background: var(--color-accent);
}
@media (max-width: 1280px) { .f-num::before { display: none; } }
.f-title {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 24px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0; text-box: trim-both cap alphabetic;
}
.f-title a { color: inherit; text-decoration: none; }
.f-title a:hover { color: var(--color-accent-700); }
.f-icon { width: 26px; height: 26px; color: var(--color-accent); flex: none; }
.f-copy {
  font-size: 15.5px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 52ch; text-box: trim-both cap alphabetic;
}
@media (max-width: 760px) { .feature { grid-template-columns: 1fr; gap: var(--half); } .f-copy { max-width: var(--measure); } }

/* --------------------------------------------------------------------------
   component-split — sekcja tekst + obraz (wariant .rev odwraca kolumny)
   -------------------------------------------------------------------------- */
.component-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--leading) clamp(24px, 5vw, 96px); align-items: center;
  padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
}
.component-split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split-copy .note {
  font-size: 15.5px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
  margin: calc(var(--leading) - 1cap) 0 0; max-width: 48ch; text-box: trim-both cap alphabetic;
}
.split-copy .row { margin-top: var(--leading); }
.split-figure { margin: 0; }
.split-figure .media, .split-figure .media-placeholder { aspect-ratio: 951 / 665; }
@media (max-width: 720px) {
  .component-split, .component-split.rev { grid-template-columns: 1fr; }
  .split-figure { order: -1; }
}

/* wyszarzony numer sekcji (oferta) */
.ghost-num {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(64px, 8vw, 116px); line-height: 1; letter-spacing: -0.03em;
  color: var(--color-neutral-300); font-feature-settings: "tnum" 1;
  margin: 0 0 var(--leading); margin-left: -0.045em; text-box: trim-both cap alphabetic;
}

/* --------------------------------------------------------------------------
   component-work — siatka realizacji
   -------------------------------------------------------------------------- */
.component-work { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.5 * var(--leading)) var(--leading); margin-top: var(--leading); }
.work-item { display: block; text-decoration: none; color: inherit; }
.work-item .media, .work-item .media-placeholder { aspect-ratio: 4 / 3; }
.work-item .cat {
  display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent-700); margin: var(--leading) 0 0;
}
.work-item h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); letter-spacing: -0.01em; margin: var(--half) 0 0;
}
.work-item p {
  font-size: 15px; line-height: var(--leading); margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.work-item:hover .media-frame, a.work-item:focus-visible .media-frame { border-color: var(--color-accent); }
.work-item:hover h3 { color: var(--color-accent-700); }
.component-work .row { margin-top: calc(1.5 * var(--leading)); }
@media (max-width: 980px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   component-pricing — cennik (karty planów)
   -------------------------------------------------------------------------- */
.component-pricing { padding: calc(2.5 * var(--leading)) 0 calc(3 * var(--leading)); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--leading); margin-top: var(--leading); align-items: stretch; }
.plan {
  display: flex; flex-direction: column; gap: var(--half); border: 2px solid var(--color-divider);
  background: var(--color-neutral-100); padding: var(--leading) var(--leading) calc(1.5 * var(--half));
}
.plan.featured { border-color: var(--color-accent); }
.plan .plan-name {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: var(--leading); margin: 0;
}
.plan .price {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 30px; line-height: calc(1.5 * var(--leading)); color: var(--color-accent-700);
  font-feature-settings: "tnum" 1; margin: 0;
}
.plan .price small {
  display: block; font-family: var(--font-body); font-weight: 400; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.plan ul { list-style: none; margin: 0 0 var(--half); padding: 0; display: grid; gap: 8px; }
.plan ul li {
  display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 22px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.plan ul li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--color-accent); align-self: center; }
.plan .btn { margin-top: auto; }
.component-pricing .fine {
  font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: var(--leading) 0 0;
}
@media (max-width: 1100px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .plan-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   component-process — kroki współpracy
   -------------------------------------------------------------------------- */
.component-process { padding: calc(3 * var(--leading)) 0 calc(1.5 * var(--leading)); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 3vw, 48px); margin-top: calc(1.5 * var(--leading)); }
.step { border-top: 2px solid var(--color-divider); padding-top: var(--leading); }
.step .s-num {
  position: relative; font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 15px; line-height: var(--half); color: var(--color-accent-700);
  font-feature-settings: "tnum" 1; margin: 0; display: flex; gap: 10px; align-items: center;
}
.step .s-num::before { content: ""; width: 10px; height: 10px; background: var(--color-accent); }
.step h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; line-height: var(--leading); margin: var(--half) 0 0;
}
.step p {
  font-size: 14.5px; line-height: 22px; margin: var(--half) 0 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
@media (max-width: 980px) { .steps { grid-template-columns: repeat(2, 1fr); row-gap: var(--leading); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   component-cta — czerwony pas zamykający (call to action)
   -------------------------------------------------------------------------- */
.component-cta { background: var(--color-accent); color: var(--color-bg); }
.component-cta .wrap { padding-top: calc(3 * var(--leading)); padding-bottom: calc(3 * var(--leading)); }
.component-cta .cta-kicker {
  display: block; font-size: 13px; line-height: var(--half); letter-spacing: 0.08em;
  text-transform: uppercase; margin: 0 0 var(--leading);
}
.component-cta h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(34px, 4.2vw, 56px); line-height: clamp(36px, 4.45vw, 59.4px);
  letter-spacing: -0.015em; margin: 0; margin-left: -0.058em; text-box: trim-both cap alphabetic;
}
.component-cta h3 .line { display: block; }
.component-cta .row { margin-top: calc(1.5 * var(--leading)); }
.component-cta .btn-primary { border-color: var(--color-bg); }
.component-cta .btn-primary:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.component-cta .btn-primary:active { background: var(--color-neutral-200); color: var(--color-text); border-color: var(--color-neutral-200); }

/* --------------------------------------------------------------------------
   component-contact — formularz kontaktowy + karty informacyjne
   -------------------------------------------------------------------------- */
.component-contact {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: calc(2 * var(--leading)) clamp(24px, 5vw, 96px); padding: calc(2 * var(--leading)) 0 calc(3 * var(--leading));
}
.contact-form { display: grid; gap: var(--leading); }
.contact-form textarea.input { min-height: calc(6 * var(--leading)); }
.contact-aside h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); margin: 0 0 var(--half);
}
.contact-aside p {
  font-size: 15.5px; line-height: var(--leading); margin: 0 0 var(--leading);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.info-card {
  border: 2px solid var(--color-divider); background: var(--color-neutral-100);
  padding: var(--leading); margin-bottom: var(--leading);
}
.info-card h3 { margin-top: 0; }
.info-card p:last-child { margin-bottom: 0; }
@media (max-width: 880px) { .component-contact { grid-template-columns: 1fr; } }

/* honeypot — hidden from real users (bots fill every field, including this one) */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* inline submission feedback — populated by contact-handler.php (non-JS) or contact-form.js */
.form-status { padding: var(--half) var(--leading); border: 2px solid var(--color-divider); margin: 0 0 var(--leading); font-size: 15px; }
.form-status:empty { display: none; }
.form-status--success { border-color: var(--color-text); background: var(--color-neutral-100); }
.form-status--error { border-color: var(--color-accent); background: var(--color-accent-100); color: var(--color-accent-800); }

/* --------------------------------------------------------------------------
   component-map — mapa dojazdu
   -------------------------------------------------------------------------- */
.component-map { margin: calc(2 * var(--leading)) 0 calc(3 * var(--leading)); }
.component-map iframe { display: block; width: 100%; height: calc(14 * var(--leading)); border: 0; }

/* --------------------------------------------------------------------------
   component-case-* — studium przypadku (pojedyncza realizacja)
   -------------------------------------------------------------------------- */
.component-case-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 clamp(20px, 3vw, 48px); padding: calc(1.5 * var(--leading)) 0; }
.component-case-meta > div { border-top: 2px solid var(--color-divider); padding-top: var(--half); }
.component-case-meta h4 {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0 0 6px;
}
.component-case-meta p {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; line-height: var(--leading); margin: 0;
}
@media (max-width: 720px) { .component-case-meta { grid-template-columns: repeat(2, 1fr); row-gap: var(--leading); } }

.component-case-hero { margin: 0 0 calc(2 * var(--leading)); }
.component-case-hero .media, .component-case-hero .media-placeholder { min-height: 250px; }

.component-case-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--leading); margin: calc(1.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.component-case-gallery .media, .component-case-gallery .media-placeholder { aspect-ratio: 4 / 3; }
@media (max-width: 560px) { .component-case-gallery { grid-template-columns: 1fr; } }

.component-case-body { max-width: var(--measure); padding: calc(1.5 * var(--leading)) 0; }
.component-case-body .kicker:not(:first-child) { margin-top: var(--leading); }
.component-case-body h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.01em; margin: 0 0 var(--half);
}
.component-case-body p {
  font-size: 15.5px; line-height: var(--leading); margin: 0 0 var(--leading);
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
}

/* --------------------------------------------------------------------------
   component-post-list — lista wpisów bloga
   -------------------------------------------------------------------------- */
.component-post-list { padding-bottom: calc(2 * var(--leading)); }
.post-row {
  display: grid; grid-template-columns: 140px minmax(0, 2fr) minmax(0, 3fr) auto; gap: var(--half) clamp(20px, 3vw, 48px);
  align-items: baseline; padding: calc(1.5 * var(--half)) 0; text-decoration: none; color: inherit;
}
.post-row + .post-row { border-top: 2px solid var(--color-divider); }
.post-row .date {
  font-size: 13px; line-height: var(--leading); letter-spacing: 0.06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent); font-feature-settings: "tnum" 1; margin: 0;
}
.post-row h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); letter-spacing: -0.01em; margin: 0;
}
.post-row p.excerpt {
  font-size: 15px; line-height: var(--leading); margin: 0;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.post-row .go { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent-700); white-space: nowrap; }
.post-row:hover h3 { color: var(--color-accent-700); }
.post-row:hover .go { color: var(--color-accent-800); }
@media (max-width: 880px) { .post-row { grid-template-columns: 1fr; gap: 6px; } .post-row .go { display: none; } }

/* --------------------------------------------------------------------------
   component-prose — treść artykułu (wpis bloga)
   -------------------------------------------------------------------------- */
.component-prose { max-width: var(--measure); padding: calc(1.5 * var(--leading)) 0 calc(2 * var(--leading)); }
.component-prose h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 26px; line-height: calc(1.5 * var(--leading)); letter-spacing: -0.01em;
  margin: calc(1.5 * var(--leading)) 0 var(--half);
}
.component-prose h2:first-child { margin-top: 0; }
.component-prose p {
  font-size: 16px; line-height: var(--leading); margin: 0 0 var(--leading);
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.component-prose ul { margin: 0 0 var(--leading); padding: 0; list-style: none; display: grid; gap: var(--half); }
.component-prose ul li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; line-height: var(--leading); }
.component-prose ul li::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--color-accent); align-self: center; }
.component-prose blockquote {
  margin: calc(1.5 * var(--leading)) 0; padding-left: var(--leading);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: calc(1.25 * var(--leading)); letter-spacing: -0.01em;
}
.component-prose figure { margin: calc(1.5 * var(--leading)) 0; }
.component-prose figure .media, .component-prose figure .media-placeholder { aspect-ratio: 16 / 9; }
.component-prose figcaption {
  font-size: 13px; line-height: var(--leading); margin-top: var(--half);
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* --------------------------------------------------------------------------
   component-footer — stopka
   -------------------------------------------------------------------------- */
.component-footer { padding: calc(2.5 * var(--leading)) 0 calc(2 * var(--leading)); font-size: 15px; line-height: var(--leading); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: calc(1.5 * var(--leading)) clamp(24px, 4vw, 72px); }
.foot-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; margin: 0 0 var(--half); }
.foot-grid p { margin: 0; color: color-mix(in srgb, var(--color-text) 78%, transparent); max-width: 36ch; }
.foot-grid h4 {
  font-size: 13px; line-height: var(--half); letter-spacing: 0.08em; text-transform: uppercase;
  margin: 0 0 var(--half); color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-grid a { color: var(--color-text); text-decoration: none; }
.foot-grid a:hover { color: var(--color-accent-700); }
.copyline {
  margin-top: calc(2 * var(--leading)); padding-top: var(--leading);
  border-top: 2px solid var(--color-divider); font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
@media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   component-cookie-consent — baner zgody na cookies (Google Analytics)
   -------------------------------------------------------------------------- */
.component-cookie-consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--leading);
  padding: var(--half) var(--edge);
  background: var(--color-text); color: var(--color-bg);
  border-top: 2px solid var(--color-accent);
}
.component-cookie-consent p { margin: 0; max-width: 62ch; font-size: 14px; line-height: var(--half); }
.component-cookie-consent a { color: var(--color-accent-300); }
.component-cookie-consent a:hover { color: var(--color-accent-200); }
.component-cookie-consent .row { flex: none; margin: 0; }
.component-cookie-consent .btn-secondary { color: var(--color-bg); border-color: var(--color-bg); }
.component-cookie-consent .btn-secondary:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
.component-cookie-consent .btn-primary { border-color: var(--color-bg); }
.component-cookie-consent .btn-primary:hover { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); }
@media (max-width: 720px) {
  .component-cookie-consent { flex-direction: column; align-items: stretch; }
}