/* ==========================================================================
   MatNet-IT — Design System "Modern B2B Tech 2026"
   Wklej w: Wygląd → Dostosuj → Dodatkowy CSS
   --------------------------------------------------------------------------
   Kolor marki #0067b8 zachowany bez zmian (zgodnie z obecnymi przyciskami).
   Sekcja 2 PRZEPINA istniejące zmienne --mn-* na nowe tokeny, dzięki czemu
   jedno wklejenie odświeża całą witrynę, a usunięcie tego CSS cofa zmianę.
   ========================================================================== */

/* --- 0. FONTY (self-hosted, bez CDN Google — wymóg RODO) -------------- */
/* Oba kroje to fonty zmienne: jeden plik obsługuje cały zakres grubości. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jakarta-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/jakarta-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}

/* --- 1. TOKENY ---------------------------------------------------------- */
:root {
  /* Marka */
  --tech-primary:        #0067b8;   /* NIEZMIENIONY kolor marki */
  --tech-primary-hover:  #00559a;
  --tech-primary-active: #00427a;
  --tech-primary-bright: #0090dd;   /* partner gradientu i poświaty */
  --tech-primary-050:    #eff6fc;
  --tech-primary-100:    #d8e8f6;

  /* Neutralne — chłodne, z domieszką błękitu (nie czysta szarość) */
  --tech-bg:          #ffffff;
  --tech-bg-alt:      #f7f9fc;
  --tech-surface:     #ffffff;
  --tech-surface-alt: #f2f6fa;
  --tech-ink:         #0e1a26;   /* nagłówki   — 17.6:1 na bieli (AAA) */
  --tech-body:        #41505f;   /* tekst      —  8.3:1 na bieli (AAA) */
  --tech-muted:       #5e6b79;   /* pomocniczy —  5.5:1 na bieli (AA)  */
  --tech-border:      #e4eaf1;
  --tech-border-mid:  #cfd9e4;

  /* Semantyczne */
  --tech-warn: #e0a800;
  --tech-ok:   #1a8754;

  /* Cienie — wielowarstwowe, chłodne, nigdy czarne */
  --tech-sh-1: 0 1px 2px rgba(14,26,38,.05);
  --tech-sh-2: 0 1px 3px rgba(14,26,38,.06), 0 1px 2px rgba(14,26,38,.04);
  --tech-sh-3: 0 4px 14px rgba(14,26,38,.07), 0 2px 5px rgba(14,26,38,.04);
  --tech-sh-4: 0 14px 34px rgba(14,26,38,.10), 0 5px 10px rgba(14,26,38,.05);
  --tech-glow: 0 10px 28px rgba(0,103,184,.24);

  /* Promienie */
  --tech-r-sm: 8px;
  --tech-r-md: 12px;
  --tech-r-lg: 18px;
  --tech-r-xl: 26px;

  /* Rytm pionowy (baza 4 px) */
  --tech-sp-2: 8px;   --tech-sp-3: 12px;  --tech-sp-4: 16px;
  --tech-sp-6: 24px;  --tech-sp-8: 32px;  --tech-sp-12: 48px;
  --tech-sp-16: 64px; --tech-sp-24: 96px;

  /* Typografia */
  --tech-font-display: "Plus Jakarta Sans", "Libre Franklin", system-ui, sans-serif;
  --tech-font-body:    "Inter", "Libre Franklin", system-ui, sans-serif;

  /* Szerokości */
  --tech-wide:    1280px;  /* maks. szerokość treści w sekcji */
  --tech-measure: 46rem;   /* kolumna czytelna */

  --tech-ease: cubic-bezier(.4, 0, .2, 1);
}

/* --- 2. MOSTEK DO ISTNIEJĄCEGO SYSTEMU --------------------------------- */
/* Przepięcie zmiennych z mu-plugins/matnet-assets/theme.css.
   Dzięki temu podstrony, tabele, ramki i CTA dziedziczą nową paletę
   bez edytowania plików motywu. */
:root {
  --mn-brand:      var(--tech-primary);
  --mn-brand-dark: var(--tech-primary-hover);
  --mn-brand-tint: var(--tech-primary-050);
  --mn-ink:        var(--tech-ink);
  --mn-body:       var(--tech-body);
  --mn-muted:      var(--tech-muted);
  --mn-line:       var(--tech-border);
  --mn-surface:    var(--tech-bg-alt);
  --mn-radius:     var(--tech-r-md);
  --mn-radius-lg:  var(--tech-r-lg);
  --mn-shadow:     var(--tech-sh-3);
  --mn-wrap:       var(--tech-wide);
  --mn-measure:    var(--tech-measure);
}

/* --- 3. TYPOGRAFIA ------------------------------------------------------ */
body { font-family: var(--tech-font-body); font-size: 1.0625rem; line-height: 1.7; }

h1, h2, h3, h4,
.entry-title, .page-title {
  font-family: var(--tech-font-display);
  color: var(--tech-ink);
  text-wrap: balance;
}

.entry-title, .page-title,
body .site-content .entry-title {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
}
.entry-content h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); font-weight: 700; letter-spacing: -.022em; line-height: 1.15; }
.entry-content h3 { font-size: clamp(1.2rem, 1.08rem + .5vw, 1.45rem); font-weight: 650; letter-spacing: -.012em; line-height: 1.3; }

.tech-eyebrow {
  color: var(--tech-primary);
  font-family: var(--tech-font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  margin-bottom: var(--tech-sp-3);
  text-transform: uppercase;
}

/* --- 4. SEKCJE NA PEŁNĄ SZEROKOŚĆ OKNA ---------------------------------- */
/* .entry-content jest wąską kolumną czytelną. Sekcja z klasą .tech-full
   rozpycha się do krawędzi okna — dzięki temu jej TŁO (gradienty, siatka,
   wideo) sięga brzegów, zamiast kończyć się białym marginesem po bokach.
   Treść wewnątrz zostaje ograniczona przez wrapper Gutenberga (niżej). */
.entry-content > .tech-full {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  position: relative;
  width: auto;
}

/* 50vw liczy też pasek przewijania, co dawałoby kilkanaście pikseli nadmiaru.
   overflow-x: clip przycina je, nie psując position: sticky w menu. */
.page-tech .site-content { overflow-x: clip; }

/* Treść sekcji wraca do siatki i dostaje marginesy boczne. */
.tech-full > .wp-block-group__inner-container,
.tech-hero > .wp-block-group__inner-container,
.tech-section > .wp-block-group__inner-container {
  margin-inline: auto;
  max-width: var(--tech-wide);
  padding-inline: clamp(1rem, 4vw, 3rem);
  width: 100%;
}

/* --- 5. HERO ------------------------------------------------------------ */
.tech-hero {
  background:
    radial-gradient(60rem 26rem at 18% -10%, rgba(0,144,221,.10), transparent 62%),
    radial-gradient(48rem 24rem at 92% 6%,  rgba(0,103,184,.09), transparent 60%),
    var(--tech-bg);
  border-bottom: 1px solid var(--tech-border);
  overflow: hidden;
  padding-block: clamp(var(--tech-sp-16), 9vw, 120px);
  position: relative;
}
/* delikatna siatka techniczna — 2 % krycia, czytelna tylko podświadomie */
.tech-hero::before {
  background-image:
    linear-gradient(var(--tech-primary) 1px, transparent 1px),
    linear-gradient(90deg, var(--tech-primary) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  inset: 0;
  mask-image: radial-gradient(70% 55% at 50% 0%, #000, transparent);
  opacity: .04;
  pointer-events: none;
  position: absolute;
}
.tech-hero__inner { position: relative; z-index: 1; }

/* Nagłówek hero jest zwykłym blokiem H1 w treści (tytuł strony chowamy),
   więc potrzebuje własnej reguły — nie łapie go selektor .entry-title. */
.tech-hero h1 {
  font-family: var(--tech-font-display);
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  margin: 0;
  max-width: 17ch;
}
.tech-hero h1::after { display: none; }

.tech-hero__lead {
  color: var(--tech-body);
  font-size: clamp(1.1rem, 1rem + .55vw, 1.35rem);
  line-height: 1.62;
  margin-block: var(--tech-sp-6) var(--tech-sp-8);
  max-width: 38rem;
}
.tech-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tech-sp-3); }

/* --- 5b. WIDEO W TLE HERO ---------------------------------------------- */
/* Ten sam plik MP4, który motyw odtwarza na stronie głównej, użyty jako
   subtelna faktura — przenika przez tło w kilku procentach, nie rywalizuje
   z tekstem. Atrybut muted MUSI być w HTML, inaczej Chrome blokuje autoplay. */
.tech-hero__video {
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: .07;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}
/* Treść hero zawsze ponad wideo i siatką techniczną. */
.tech-hero > *:not(.tech-hero__video),
.tech-hero > .wp-block-group__inner-container > *:not(.tech-hero__video) {
  position: relative;
  z-index: 1;
}
.tech-hero > .wp-block-group__inner-container { position: static; }

/* Na telefonach nie zmuszamy do pobrania 2,6 MB dla efektu tła. */
@media (max-width: 767px) {
  .tech-hero__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tech-hero__video { display: none; }
}

/* --- 6. PRZYCISKI ------------------------------------------------------- */
.entry-content a.tech-btn-primary,
.entry-content a.tech-btn-ghost,
.wp-block-button__link.tech-btn-primary,
.wp-block-button__link.tech-btn-ghost {
  border-radius: var(--tech-r-sm);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--tech-font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1;
  padding: 1em 1.75em;
  text-decoration: none;
  transition: transform .18s var(--tech-ease), box-shadow .18s var(--tech-ease), background .18s var(--tech-ease);
}

.entry-content a.tech-btn-primary,
.wp-block-button__link.tech-btn-primary {
  background: linear-gradient(135deg, var(--tech-primary) 0%, var(--tech-primary-bright) 100%);
  border: 0;
  box-shadow: var(--tech-glow);
  color: #fff;
}
.entry-content a.tech-btn-primary:hover,
.entry-content a.tech-btn-primary:focus-visible {
  box-shadow: 0 16px 36px rgba(0,103,184,.32);
  color: #fff;
  transform: translateY(-2px);
}
.entry-content a.tech-btn-primary:active { transform: translateY(0); }

.entry-content a.tech-btn-ghost,
.wp-block-button__link.tech-btn-ghost {
  background: var(--tech-surface);
  border: 1px solid var(--tech-border-mid);
  box-shadow: var(--tech-sh-1);
  color: var(--tech-ink);
}
.entry-content a.tech-btn-ghost:hover,
.entry-content a.tech-btn-ghost:focus-visible {
  border-color: var(--tech-primary);
  box-shadow: var(--tech-sh-3);
  color: var(--tech-primary);
  transform: translateY(-2px);
}

/* --- 7. SEKCJE --------------------------------------------------------- */
.tech-section { padding-block: clamp(var(--tech-sp-16), 7vw, 104px); }
.tech-section--alt { background: var(--tech-bg-alt); }
.tech-section__head { margin-bottom: var(--tech-sp-12); max-width: 46rem; }
.tech-section__head p { color: var(--tech-muted); margin-bottom: 0; }

/* --- 8. BENTO GRID ------------------------------------------------------ */
/* Szerokość kafla odpowiada liczbie usług w grupie — układ niesie informację.
   UWAGA: Twenty Seventeen nie ma theme.json, więc blok Grupa renderuje dodatkowy
   wrapper .wp-block-group__inner-container. Bez drugiego selektora siatka
   zadziałałaby na jednym dziecku i cały bento zwinąłby się do jednej kolumny. */
.tech-bento,
.tech-bento > .wp-block-group__inner-container {
  display: grid;
  gap: var(--tech-sp-6);
  grid-template-columns: repeat(12, 1fr);
}
/* Gdy wrapper istnieje, sam staje się elementem siatki nadrzędnej i bez tego
   zajmowałby 1 z 12 kolumn — musi rozpiąć się na całą szerokość. */
.tech-bento > .wp-block-group__inner-container { grid-column: 1 / -1; }
/* układ przepływowy WP dokłada marginesy między dziećmi — kolidują z gap */
.tech-bento > .wp-block-group__inner-container > * { margin-block: 0; }
.tech-bento__card { grid-column: span 12; }

/* Kolejność grup usług pozostaje jak w oryginale; szerokości dobrane tak,
   by każdy rząd sumował się do 12 kolumn:
   7+5  |  5+7  |  7+5 */
@media (min-width: 900px) {
  .tech-bento__card.is-wide   { grid-column: span 7; }
  .tech-bento__card.is-narrow { grid-column: span 5; }
}

/* Grupa o dwóch usługach dostaje szeroki kafel — listę łamiemy na dwie
   kolumny, żeby wypełniła szerokość zamiast zostawiać pustkę. */
@media (min-width: 900px) {
  .tech-bento__card.has-2col-list ul { columns: 2; column-gap: var(--tech-sp-8); }
  .tech-bento__card.has-2col-list li { break-inside: avoid; border-top: 0; }
}

/* Karta — bazowa */
.tech-bento__card {
  background: var(--tech-surface);
  border: 1px solid var(--tech-border);
  border-radius: var(--tech-r-lg);
  box-shadow: var(--tech-sh-2);
  padding: clamp(var(--tech-sp-6), 3vw, var(--tech-sp-8));
  position: relative;
  transition: transform .22s var(--tech-ease), box-shadow .22s var(--tech-ease), border-color .22s var(--tech-ease);
}
.tech-bento__card:hover {
  border-color: var(--tech-primary-100);
  box-shadow: var(--tech-sh-4);
  transform: translateY(-5px);
}

.tech-bento__card h2,
.tech-bento__card h3 {
  font-size: 1.3rem;
  letter-spacing: -.015em;
  margin: 0 0 var(--tech-sp-3);
}
.tech-bento__card h2::after { display: none; }  /* zdejmujemy kreskę z theme.css */

.tech-bento__card ul { list-style: none; margin: var(--tech-sp-4) 0 0; padding: 0; }
.tech-bento__card li {
  border-top: 1px solid var(--tech-border);
  padding: .7em 0 .7em 0;
}
.tech-bento__card li::before { display: none; }  /* zdejmujemy punktory z theme.css */
.tech-bento__card li a {
  box-shadow: none;
  color: var(--tech-ink);
  display: inline-flex;
  align-items: baseline;
  font-weight: 600;
  gap: .4em;
  text-decoration: none;
  transition: color .15s var(--tech-ease), gap .15s var(--tech-ease);
}
.tech-bento__card li a::after { content: "→"; color: var(--tech-primary); font-weight: 400; opacity: 0; transition: opacity .15s var(--tech-ease), transform .15s var(--tech-ease); }
.tech-bento__card li a:hover { box-shadow: none; color: var(--tech-primary); gap: .65em; }
.tech-bento__card li a:hover::after { opacity: 1; }

/* Kafel wyróżniony — Portal B2B (kanał sprzedaży). Wyróżnia go kolor, nie rozmiar. */
.tech-bento__card.is-feature {
  background:
    linear-gradient(140deg, rgba(0,144,221,.10), rgba(0,103,184,.05) 55%, transparent),
    var(--tech-primary-050);
  border-color: var(--tech-primary-100);
}
.tech-bento__card.is-feature:hover { border-color: var(--tech-primary); }

/* --- 9. IKONY (mask-image, bez uploadu SVG, bez wtyczek) ---------------- */
.tech-ico {
  background-color: var(--tech-primary);
  border-radius: var(--tech-r-sm);
  display: block;
  height: 22px;
  margin-bottom: var(--tech-sp-4);
  width: 22px;
  -webkit-mask: var(--ico) center / contain no-repeat;
          mask: var(--ico) center / contain no-repeat;
}
/* Ikona w kaflu — w kwadratowym „chipie" */
.tech-bento__card .tech-ico {
  background-color: var(--tech-primary);
  height: 20px; width: 20px;
}
.tech-ico-chip {
  align-items: center;
  background: var(--tech-primary-050);
  border: 1px solid var(--tech-primary-100);
  border-radius: var(--tech-r-md);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  margin-bottom: var(--tech-sp-4);
  width: 44px;
}
.tech-ico-chip .tech-ico { margin: 0; }

.tech-ico--cloud   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 19a4.5 4.5 0 0 0 .5-8.97A6 6 0 0 0 6.1 9.5 4.5 4.5 0 0 0 6.5 19z'/%3E%3C/svg%3E"); }
.tech-ico--code    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.tech-ico--shield  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3C/svg%3E"); }
.tech-ico--network { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='16' y='16' width='6' height='6' rx='1'/%3E%3Crect x='2' y='16' width='6' height='6' rx='1'/%3E%3Crect x='9' y='2' width='6' height='6' rx='1'/%3E%3Cpath d='M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3M12 12V8'/%3E%3C/svg%3E"); }
.tech-ico--support { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'/%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/%3E%3C/svg%3E"); }
.tech-ico--cart    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E"); }
.tech-ico--check   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }

/* --- 10. „DLACZEGO MATNET-IT" ------------------------------------------ */
.tech-why__grid,
.tech-why__grid > .wp-block-group__inner-container {
  display: grid; gap: var(--tech-sp-6); grid-template-columns: 1fr;
}
.tech-why__grid > .wp-block-group__inner-container { grid-column: 1 / -1; }
.tech-why__grid > .wp-block-group__inner-container > * { margin-block: 0; }
@media (min-width: 720px) {
  .tech-why__grid,
  .tech-why__grid > .wp-block-group__inner-container { grid-template-columns: repeat(2, 1fr); }
}
.tech-why__item {
  border-left: 2px solid var(--tech-primary-100);
  padding-left: var(--tech-sp-6);
}
.tech-why__item strong { color: var(--tech-ink); display: block; font-family: var(--tech-font-display); font-size: 1.05rem; margin-bottom: .35em; }

/* --- 11. PAS KONTAKTOWY (glassmorphism) -------------------------------- */
.tech-cta-band {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  background:
    linear-gradient(140deg, rgba(0,144,221,.16), rgba(0,103,184,.07) 60%, rgba(255,255,255,.6)),
    rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--tech-r-xl);
  box-shadow: var(--tech-sh-4);
  padding: clamp(var(--tech-sp-8), 5vw, var(--tech-sp-16));
  text-align: center;
}
.tech-cta-band h2 { margin-top: 0; }
.tech-cta-band h2::after { display: none; }
.tech-cta-band .tech-hero__actions { justify-content: center; }

/* --- 12. RESPONSYWNOŚĆ -------------------------------------------------- */
@media (max-width: 899px) {
  .tech-bento { gap: var(--tech-sp-4); }
  .tech-section { padding-block: var(--tech-sp-12); }
  .tech-section__head { margin-bottom: var(--tech-sp-8); }
}
@media (max-width: 599px) {
  .entry-content > .tech-full { width: calc(100vw - 2rem); }
  .tech-hero { padding-block: var(--tech-sp-12); }
  .tech-hero__actions { flex-direction: column; align-items: stretch; }
  .entry-content a.tech-btn-primary,
  .entry-content a.tech-btn-ghost { justify-content: center; width: 100%; }
  .tech-bento__card { border-radius: var(--tech-r-md); }
  .tech-cta-band { border-radius: var(--tech-r-lg); }
}

/* --- 13. DOSTĘPNOŚĆ ---------------------------------------------------- */
.entry-content a.tech-btn-primary:focus-visible,
.entry-content a.tech-btn-ghost:focus-visible,
.tech-bento__card li a:focus-visible {
  outline: 3px solid var(--tech-primary);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tech-bento__card,
  .entry-content a.tech-btn-primary,
  .entry-content a.tech-btn-ghost,
  .tech-bento__card li a { transition: none; }
  .tech-bento__card:hover,
  .entry-content a.tech-btn-primary:hover,
  .entry-content a.tech-btn-ghost:hover { transform: none; }
}

/* --- 14. SPÓJNOŚĆ PODSTRON --------------------------------------------- */
/* Kolory i typografia podstron zmieniają się same, bo sekcja 2 przepina
   zmienne --mn-*. Poniżej podnosimy jeszcze komponenty z theme.css do nowego
   języka wizualnego, żeby podstrony nie odstawały od strony głównej. */

/* Przyciski — ten sam gradient i uniesienie co .tech-btn-primary */
.entry-content a.mn-btn {
  background: linear-gradient(135deg, var(--tech-primary) 0%, var(--tech-primary-bright) 100%);
  border: 0;
  border-radius: var(--tech-r-sm);
  box-shadow: var(--tech-glow);
  color: #fff;
  font-family: var(--tech-font-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .005em;
  padding: 1em 1.75em;
  transition: transform .18s var(--tech-ease), box-shadow .18s var(--tech-ease);
}
.entry-content a.mn-btn:hover,
.entry-content a.mn-btn:focus-visible {
  box-shadow: 0 16px 36px rgba(0,103,184,.32);
  color: #fff;
  transform: translateY(-2px);
}
.entry-content a.mn-btn:active { transform: translateY(0); }

.entry-content a.mn-btn-alt {
  background: var(--tech-surface);
  border: 1px solid var(--tech-border-mid);
  box-shadow: var(--tech-sh-1);
  color: var(--tech-primary);
}
.entry-content a.mn-btn-alt:hover,
.entry-content a.mn-btn-alt:focus-visible {
  background: var(--tech-primary);
  border-color: var(--tech-primary);
  box-shadow: var(--tech-sh-3);
  color: #fff;
  transform: translateY(-2px);
}

/* Blok CTA — ten sam język co .tech-cta-band, tylko spokojniejszy */
.mn-cta {
  background:
    linear-gradient(140deg, rgba(0,144,221,.08), rgba(0,103,184,.04) 60%, transparent),
    var(--tech-bg-alt);
  border: 1px solid var(--tech-border);
  border-radius: var(--tech-r-xl);
  box-shadow: var(--tech-sh-2);
  padding: clamp(var(--tech-sp-8), 4vw, var(--tech-sp-12));
}
.mn-cta h2 { font-size: 1.5rem; }
.mn-cta h2::after { display: none; }

/* Tabele */
.mn-table {
  border: 1px solid var(--tech-border);
  border-radius: var(--tech-r-md);
  box-shadow: var(--tech-sh-1);
  overflow: hidden;
}
.mn-table thead th {
  background: var(--tech-surface-alt);
  color: var(--tech-ink);
  font-family: var(--tech-font-display);
  font-weight: 650;
}
.mn-table th, .mn-table td { border-bottom-color: var(--tech-border); }

/* Ramki z zastrzeżeniem */
.mn-note {
  border-radius: var(--tech-r-md);
  box-shadow: var(--tech-sh-1);
}

/* Akapit wiodący */
.mn-lead {
  border-left-width: 3px;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem);
  line-height: 1.62;
}

/* Okruszki */
.mn-crumbs { border-bottom-color: var(--tech-border); font-size: .82rem; }

/* Nawigacja i stopka */
.main-navigation a { font-family: var(--tech-font-body); font-weight: 550; }
.main-navigation li.mn-nav-cta > a {
  background: linear-gradient(135deg, var(--tech-primary) 0%, var(--tech-primary-bright) 100%);
  box-shadow: 0 4px 12px rgba(0,103,184,.25);
}
.site-footer { background: var(--tech-bg-alt); border-top-color: var(--tech-border); }

/* Listy wpisów na blogu — karta zamiast samej kreski */
body.blog .site-main > article,
body.archive .site-main > article {
  border-bottom-color: var(--tech-border);
}
body.blog .site-content .entry-title a:hover,
body.archive .site-content .entry-title a:hover { color: var(--tech-primary); }

/* --- 15. PODSTRONY: PASY NA PEŁNĄ SZEROKOŚĆ ---------------------------- */
/* Wąska kolumna tekstu jest poprawna typograficznie, ale sama pośrodku bieli
   sprawia wrażenie pustki po bokach. Pas nagłówka u góry i pas CTA u dołu
   sięgają krawędzi okna — marginesy zaczynają czytać się jako zamierzone,
   a nie jako brak treści. Sama kolumna tekstu zostaje wąska. */

.page-tech.page:not(.home) .site-content .entry-header,
.page-tech.single .site-content .entry-header,
.page-tech.blog .site-content .page-header,
.page-tech.archive .site-content .page-header,
.page-tech.search .site-content .page-header {
  background:
    radial-gradient(42rem 18rem at 22% 0%, rgba(0,144,221,.08), transparent 66%),
    var(--tech-bg-alt);
  border-bottom: 1px solid var(--tech-border);
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
  width: auto;
}
/* width: min() daje dokładnie tę samą krawędź co .entry-content (bez padding-inline,
   który rozjeżdżał tytuł względem tekstu), a na wąskich ekranach zostawia margines.
   display: block jest potrzebny, bo link "Edytuj" to element liniowy — bez tego
   margin-inline: auto go nie wyśrodkowuje i ląduje przy lewej krawędzi okna. */
.page-tech.page:not(.home) .site-content .entry-header > *,
.page-tech.single .site-content .entry-header > *,
.page-tech.blog .site-content .page-header > *,
.page-tech.archive .site-content .page-header > *,
.page-tech.search .site-content .page-header > * {
  display: block;
  margin-inline: auto;
  max-width: none;
  width: min(100% - 2rem, var(--tech-measure));
}

/* Blok CTA domyka podstronę pasem zamiast pływającej karty. */
.page-tech .entry-content > .mn-cta {
  border-left: 0;
  border-radius: 0;
  border-right: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(3rem, 6vw, 4.5rem);
  max-width: none;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  padding-inline: 0;
  width: auto;
}
.page-tech .entry-content > .mn-cta > * {
  margin-inline: auto;
  max-width: none;
  width: min(100% - 2rem, var(--tech-measure));
}

/* Stopka też na całą szerokość, żeby domknięcie strony było spójne. */
.page-tech .site-footer .wrap { max-width: var(--tech-wide); }

/* --- 16. STRONA GŁÓWNA: HERO W TREŚCI ZAMIAST PASKA MOTYWU ------------- */
/* Twenty Seventeen renderuje na stronie głównej wysoki pasek nagłówka z wideo,
   a pod nim treść. W nowym układzie hero jest już w treści (wraz z wideo),
   więc pasek motywu byłby drugim, zdublowanym hero. Wyłączamy go i układamy
   logo oraz menu normalnym przepływem — tak samo jak na podstronach. */
.page-tech.home .custom-header-media { display: none; }
.page-tech.home .custom-header {
  background: var(--tech-bg);
  height: auto;
  margin-bottom: 0 !important;
  min-height: 0;
}
.page-tech.home .site-branding {
  bottom: auto;
  left: auto;
  margin-bottom: 0 !important;
  padding: 1.15em 0;
  position: static;
  width: auto;
}
.page-tech.home .custom-logo-link img { max-height: 48px; }
/* Podtytuł witryny był podtytułem hero — teraz tę rolę pełni akapit w treści. */
.page-tech.home .site-description { clip-path: inset(50%); position: absolute; }
/* Tytuł strony jest w treści jako H1, więc cały nagłówek panelu znika
   (razem z kreską i linkiem "Edytuj", które zostawały nad hero). */
.page-tech.home .panel-content .entry-header { display: none; }
.page-tech.home .panel-content .wrap { padding-block: 0; }
.page-tech.home .site-content { padding-top: 0; }

@media (min-width: 48em) {
  .page-tech.home .navigation-top:not(.site-navigation-fixed) {
    bottom: auto;
    left: auto;
    position: static;
    right: auto;
  }
}

/* --- 17. OBRAZEK WYRÓŻNIAJĄCY JAKO FAKTURA W PASIE NAGŁÓWKA ------------ */
/* Motyw pokazuje obrazek wyróżniający osobnym, wysokim banerem. W nowym
   układzie trafia on w tło pasa nagłówka — przy niskim kryciu, tak samo jak
   wideo na stronie głównej. Obrazy na tych stronach są ciemne, więc jasna
   zasłona zamienia je w delikatną fakturę, a tytuł zostaje czytelny. */
.page-tech .single-featured-image-header { display: none; }

.page-tech.has-page-image .site-content .entry-header {
  overflow: hidden;
  position: relative;
}
.page-tech.has-page-image .site-content .entry-header::before {
  background: var(--tech-page-image) center / cover no-repeat;
  content: "";
  inset: 0;
  opacity: .10;
  position: absolute;
  z-index: 0;
}
/* Delikatne rozjaśnienie od dołu, żeby pas łagodnie przechodził w treść. */
.page-tech.has-page-image .site-content .entry-header::after {
  background: linear-gradient(180deg, transparent 45%, var(--tech-bg) 100%);
  content: "";
  inset: 0;
  opacity: .55;
  position: absolute;
  z-index: 0;
}
.page-tech.has-page-image .site-content .entry-header > * {
  position: relative;
  z-index: 1;
}