/* =========================================
   MOBILE UI — zgodne z desktopem (menu) + UX poprawek
   ========================================= */

/* ====== MOBILE CORE (≤768px) ====== */
@media (max-width: 768px) {

  /* Header / Hamburger */
  .header{ position: relative; }
  .header-inner{ position: relative; padding-right: 56px; }
  .menu-toggle{
    position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
    display: block; z-index: 10001 !important; pointer-events: auto;
  }
  .main-nav{ position: relative; z-index: 10000; }

  /* MENU — tło jak na desktopie (zmienne), z fallbackiem */
  #main-menu.menu{
    position: absolute; top: 100%; right: 8px; left: auto;
    width: 72vw; max-width: 320px;
    display: none !important; flex-direction: column; gap: 0;
    background: var(--gradient-main, linear-gradient(180deg,#1a2a4f 0%, #0f2443 100%));
    color: #fff;
    padding: .75rem; border-radius: 12px;
    box-shadow: 0 10px 28px rgba(2,6,23,.16); z-index: 10000 !important;
  }
  #main-menu.menu.show{ display: flex !important; }

  /* wiersze menu — wyrównanie do lewej + subtelne separatory */
  #main-menu.menu > li + li{ border-top: 1px solid rgba(255,255,255,.10); }
  #main-menu.menu > li > a,
  #main-menu.menu .dropdown > a{
    display: flex; align-items: center; justify-content: flex-start;
    padding: .75rem .875rem; line-height: 1.25; text-align: left;
    border-radius: 10px; color: #fff;
  }
  #main-menu.menu a:hover{ background: rgba(255,255,255,.10); }
  #main-menu.menu a:focus-visible{
    outline: 3px solid var(--ui-ring, #7dd3fc); outline-offset: 2px; border-radius: 10px;
  }

  /* Chevron submenu (bez dodatkowej kreski) */
  #main-menu.menu .dropdown > a{ position: relative; padding-right: 2rem; }
  #main-menu.menu .dropdown > a::after{
    content: "▾";
    position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
    font-size: 1rem; line-height: 1; opacity: .96;
    transition: transform .25s ease, color .25s ease, opacity .25s ease;
    pointer-events: none; color: rgba(255,255,255,.85);
  }
  #main-menu.menu li.dropdown.open > a{
    color: var(--accent, #60a5fa);
    background: rgba(255,255,255,.08);
  }
  #main-menu.menu li.dropdown.open > a::after{
    transform: translateY(-50%) rotate(180deg); color: var(--accent, #60a5fa);
  }

  /* SUBMENU — panel jak na desktopie (zmienna) */
  .menu, .menu ul, .menu li, .submenu, .submenu li{ list-style: none !important; margin: 0; padding: 0; }
  .menu .submenu{
    display: none !important; flex-direction: column; width: 100%;
    padding: .25rem 0;
  }
  .menu li.dropdown.open > .submenu{
    display: flex !important;
    margin: .35rem .35rem .5rem .35rem; padding: .25rem;
    border-radius: 10px;
    background: var(--gradient-submenu, linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  }
  #main-menu.menu .submenu li + li{ border-top: 1px solid rgba(255,255,255,.14); }
  #main-menu.menu .submenu a{ padding: .65rem .75rem; text-align: left; color: #e6eef7; }

  /* neutralizacja hover na mobile */
  .menu .dropdown:hover > .submenu{ display: none !important; }

  /* Tap targets w kontencie */
  #dynamic-content a, #dynamic-content button, #dynamic-content .btn{ min-height: 44px; }

  /* Przyciski pod filtrami (pełna szerokość) */
  .filter-row, .btn-row{ display: flex; flex-direction: column; gap: .75rem; }
  .filter-row .btn, .filter-row button, .btn-row .btn, .btn-row button, #drukZbiorczyBtn, .pdfBtn{
    width: 100% !important; padding: .75rem 1rem !important;
    white-space: normal; text-align: center; margin-left: 0 !important;
  }

  /* Content spacing */
  .content{ padding: 1rem 1.25rem !important; }
  .content h1, .content h2, .content h3{ margin-left: .05rem; margin-right: .05rem; }

  /* ===== Pola z „X” + listy podpowiedzi (Akty / Awarie / Sprzątanie) ===== */
  .akty-input-wrapper, .awaria-filter, .with-clear, .mawaria-input-wrapper{
    position: relative; width: 100%; max-width: 100%;
  }
  /* więcej miejsca na X — nie zachodzi na tekst */
  .akty-input-wrapper input,
  .awaria-filter input,
  .with-clear input,
  .mawaria-input-wrapper > input{
    width: 100%; height: 44px; line-height: 44px; font-size: 16px;
    padding: 0 3.5rem 0 1rem !important;  /* ← zwiększony prawy i lewy padding */
    box-sizing: border-box; -webkit-appearance: none; appearance: none;
    border-radius: 10px;
  }
  #clear-akty,
  .awaria-filter .clear-btn,
  .with-clear .clear-btn,
  .mawaria-input-wrapper > .clear-btn,
  .mawaria-input-wrapper > .clear-awaria,
  .mawaria-input-wrapper > #clear-budynek{
    position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
    width: 32px; height: 32px; display: none;
    align-items: center; justify-content: center;
    font-size: 1.1rem; line-height: 1;
    background: transparent; border: 0; padding: 0; margin: 0;
    cursor: pointer; opacity: .85; z-index: 30;
  }
  #clear-akty.show,
  .awaria-filter .clear-btn.show,
  .with-clear .clear-btn.show,
  .mawaria-input-wrapper > .clear-btn.show,
  .mawaria-input-wrapper > .clear-awaria.show,
  .mawaria-input-wrapper > #clear-budynek.show{ display: inline-flex; }
  .mawaria-input-wrapper .clear-btn:focus-visible{
    outline: 3px solid var(--ui-ring, #7dd3fc); border-radius: 6px;
  }

  /* Awarie – select = input (44px) i BEZ kapitalizacji */
  .page-root[data-page="mawaria"] .awaria-filter select,
  .page-root[data-page="mawaria"] #typAwarii,
  .page-root[data-page="mawaria"] #typ-awarii{
    width: 100% !important; max-width: 100% !important;
    height: 44px; line-height: 44px; font-size: 16px;
    padding: 0 1rem; box-sizing: border-box; display: block;
    border-radius: 10px; text-transform: none;
  }
  .page-root[data-page="mawaria"] .awaria-filter select option{ text-transform: none; font-size: 16px; }

  /* Awarie – karty jedna pod drugą */
  .emergency-list, .emergency-cards, .awaria-list, .awarie-list, .emergency-grid{
    display: grid; grid-template-columns: 1fr; gap: 1rem;
  }
  .emergency-card{ width: 100% !important; }

  /* Sugestie — panel */
  .suggestions-list, .suggestions-list-awaria, #adresy-lista{
    position: absolute; left: 0; top: 100%;
    width: 100%; margin-top: 4px; max-height: 320px; overflow: auto;
    border-radius: 10px; list-style: none !important; box-sizing: border-box;
    background: #fff; color: #0f172a; box-shadow: 0 8px 24px rgba(2,6,23,.18);
    z-index: 20;
  }
  .suggestions-list li, .suggestions-list-awaria li, #adresy-lista li{
    padding: .75rem 1rem; border-bottom: 1px solid rgba(15,23,42,.07);
  }
  .suggestions-list li:last-child, .suggestions-list-awaria li:last-child, #adresy-lista li:last-child{ border-bottom: 0; }
  .suggestions-list li.active, .suggestions-list-awaria li.active, #adresy-lista li.active{ background: rgba(29,78,216,.10); }

  /* Komunikat pomocniczy */
  #akty-wynik p[style*="opacity:.85"], .mawaria-hint{ font-size: .95rem; color: #475569; }

  /* ===== E-BOK — kafelki tylko w sekcji „Dokumenty do pobrania” =====
     (celujemy WYŁĄCZNIE listy, które zawierają przycisk .pdfBtn) */
  .page-root[data-page="ebok"] ul:has(.pdfBtn){
    list-style: none !important; margin: 0; padding: 0;
    display: grid; gap: 1rem;
  }
  .page-root[data-page="ebok"] ul:has(.pdfBtn) > li{
    background: #fff; border: 1px solid rgba(2,6,23,.08);
    border-radius: 12px; box-shadow: 0 2px 8px rgba(2,6,23,.06);
    padding: 1rem;
  }
  .page-root[data-page="ebok"] ul:has(.pdfBtn) > li .btn,
  .page-root[data-page="ebok"] ul:has(.pdfBtn) > li a.btn{
    width: 100%; display: inline-flex; justify-content: center;
  }
}

/* ===== Tablet gutters (768–1180px) — spójne wcięcia ===== */
@media (min-width: 768px) and (max-width: 1180px){
  :root{ --tablet-side-pad: clamp(24px, 5vw, 56px); }
  .header, .site-header, header,
  .content, #dynamic-content,
  .footer, .site-footer, footer{
    padding-left: calc(var(--tablet-side-pad) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--tablet-side-pad) + env(safe-area-inset-right, 0px));
  }
}

/* ===== Drobne siatki (downloads) ===== */
@media (max-width: 960px){ .downloads-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .downloads-grid{ grid-template-columns: 1fr; } }

/* =========================================
   MOBILE ≤768px — Unified CLEAR "X" module
   (mawaria + akty + sprzątanie)
   - input: full width + stały zapas na X
   - X: absolutnie po prawej, widoczny tylko z .show
   - wyłączony natywny clear z przeglądarek
   ========================================= */
@media (max-width: 768px){

  /* 0) WYŁĄCZ natywny "x" (WebKit/Edge/IE) — wspólne */
  .page-root[data-page="mawaria"] input[type="search"]::-webkit-search-cancel-button,
  .page-root[data-page="akty"]    input[type="search"]::-webkit-search-cancel-button,
  .page-root[data-page="internet-tv"]    input[type="search"]::-webkit-search-cancel-button,
  .page-root[data-page="sprzatanie"] input[type="search"]::-webkit-search-cancel-button{
    -webkit-appearance: none !important; appearance: none !important; width:0 !important; height:0 !important;
  }
  .page-root[data-page="mawaria"] input::-ms-clear,
  .page-root[data-page="akty"]    input::-ms-clear,
  .page-root[data-page="internet-tv"] input::-ms-clear,
  .page-root[data-page="sprzatanie"] input::-ms-clear{
    display:none !important; width:0 !important; height:0 !important;
  }

  /* 1) WRAPPERY (kotwica dla X) — spójne na wszystkich stronach */
  .page-root[data-page="mawaria"]     .mawaria-input-wrapper,
  .page-root[data-page="akty"]        .akty-input-wrapper,
  .page-root[data-page="internet-tv"] .mawaria-input-wrapper,
  .page-root[data-page="sprzatanie"]  .awaria-filter,
  .page-root[data-page="sprzatanie"]  .sprz-input-wrapper{
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2) INPUTY — pełna szerokość + zapas na nasz X */
  /* mawaria */
  .page-root[data-page="mawaria"] .mawaria-input-wrapper input.budynek-input-awaria,
  .page-root[data-page="mawaria"] .mawaria-input-wrapper #budynek-input,
  /* akty */
  .page-root[data-page="akty"] .amawaria-input-wrapper input,
  .page-root[data-page="akty"] .mawaria-input-wrapper #budynek-input,
  /* sprzątanie */
  .page-root[data-page="sprzatanie"] .awaria-filter input,
  .page-root[data-page="sprzatanie"] .sprz-input-wrapper input{
    width: 100% !important;
    display: block !important;
    height: 44px !important; line-height: 44px !important;
    font-size: 16px !important;
    box-sizing: border-box !important;
    padding: 0 3rem 0 .75rem !important;         /* stałe miejsce na X */
    border: 1px solid #c8d1dc; border-radius: 8px; background: #fff;
    -webkit-appearance: none !important; appearance: none !important;
  }
  /* fallback gdy placeholder znika */
  .page-root[data-page="mawaria"] .mawaria-input-wrapper input.budynek-input-awaria:not(:placeholder-shown),
  .page-root[data-page="mawaria"] .mawaria-input-wrapper #budynek-input:not(:placeholder-shown),
  .page-root[data-page="akty"]       .mawaria-input-wrapper input:not(:placeholder-shown),
  .page-root[data-page="akty"]       .mawaria-input-wrapper #budynek-input:not(:placeholder-shown),
   page-root[data-page="internet-tv"]       .mawaria-input-wrapper input:not(:placeholder-shown),
  .page-root[data-page="internet-tv"]       .mawaria-input-wrapper #budynek-input:not(:placeholder-shown),
  .page-root[data-page="sprzatanie"] .awaria-filter input:not(:placeholder-shown),
  .page-root[data-page="sprzatanie"] .sprz-input-wrapper input:not(:placeholder-shown){
    padding-right: 3rem !important;
  }

  /* 3) PRZYCISK „X” — domyślnie ukryty; widoczny z .show */
  /* mawaria: różne warianty */
  .page-root[data-page="mawaria"] .mawaria-input-wrapper #clear-budynek,
  .page-root[data-page="mawaria"] .mawaria-input-wrapper .clear-awaria,
  .page-root[data-page="mawaria"] .mawaria-input-wrapper .clear-btn,
  /* akty */
  .page-root[data-page="akty"] .mawaria-input-wrapper #clear-akty,
  .page-root[data-page="akty"] .mawaria-input-wrapper .clear-btn,
  .page-root[data-page="internet-tv"] .mawaria-input-wrapper #clear-budynek,
  .page-root[data-page="internet-tv"] .mawaria-input-wrapper .clear-btn,
  /* sprzątanie */
  .page-root[data-page="sprzatanie"] .awaria-filter .clear-btn,
  .page-root[data-page="sprzatanie"] .sprz-input-wrapper .clear-btn{
    position: absolute !important;
    right: .5rem !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 32px !important; height: 32px !important;
    display: none !important;                  /* pokaż .show */
    align-items: center !important; justify-content: center !important;
    border: 0 !important; background: transparent !important;
    cursor: pointer !important; opacity: .9 !important;
    z-index: 2147483647 !important;            /* ponad dropdownami */
    pointer-events: auto !important;
  }
  .page-root[data-page="mawaria"] .mawaria-input-wrapper #clear-budynek.show,
  .page-root[data-page="mawaria"] .mawaria-input-wrapper .clear-awaria.show,
  .page-root[data-page="mawaria"] .mawaria-input-wrapper .clear-btn.show,
  .page-root[data-page="akty"] .mawaria-input-wrapper #clear-akty.show,
  .page-root[data-page="akty"] .mawaria-input-wrapper .clear-btn.show,
  .page-root[data-page="internet-tv"] .mawaria-input-wrapper #clear-budynek.show,
  .page-root[data-page="internet-tv"] .mawaria-input-wrapper .clear-btn.show,
  .page-root[data-page="sprzatanie"] .awaria-filter .clear-btn.show,
  .page-root[data-page="sprzatanie"] .sprz-input-wrapper .clear-btn.show{
    display: inline-flex !important;
  }

  /* 4) LISTY PODPOWIEDZI — pod inputem, szerokość = input */
  .page-root[data-page="mawaria"] .suggestions-list-awaria,
  .page-root[data-page="akty"]   #adresy-lista,
  .page-root[data-page="akty"]   .suggestions-list,
  .page-root[data-page="internet-tv"]   #adresy-lista,
  .page-root[data-page="internet-tv"]   .suggestions-list,
  .page-root[data-page="sprzatanie"] .suggestions-list{
    position: absolute !important;
    left: 0 !important; top: 100% !important; width: 100% !important;
    margin-top: 4px !important;
    max-height: 280px !important; overflow: auto !important;
    z-index: 20 !important;
    list-style: none !important;
  }

  /* 5) SELECT „Typ awarii”/inne selecty — spójna wysokość */
  .page-root[data-page="mawaria"] .mawaria-select,
  .page-root[data-page="mawaria"] #typAwarii,
  .page-root[data-page="mawaria"] #typ-awarii,
  .page-root[data-page="sprzatanie"] select{
    width: 100% !important;
    height: 44px !important; line-height: 44px !important;
    font-size: 16px !important; padding: 0 .75rem !important;
    box-sizing: border-box !important; display: block !important;
  }
}
/* == MOBILE fix: warstwa "X" poniżej menu i auto-ukrycie przy otwartym menu == */
@media (max-width: 768px){
  /* 1) "X" ma być POD menu (menu ma z-index ~9000..10001) */
  .page-root[data-page="mawaria"]  .mawaria-input-wrapper  #clear-budynek,
  .page-root[data-page="mawaria"]  .mawaria-input-wrapper  .clear-awaria,
  .page-root[data-page="mawaria"]  .mawaria-input-wrapper  .clear-btn,
  .page-root[data-page="internet-tv"] .mawaria-input-wrapper #clear-budynek,
  .page-root[data-page="internet-tv"] .mawaria-input-wrapper .clear-btn,
  .page-root[data-page="akty"]     .mawaria-input-wrapper      #clear-akty,
  .page-root[data-page="akty"]     .mawaria-input-wrapper     .clear-btn,
  .page-root[data-page="sprzatanie"] .awaria-filter         .clear-btn,
  .page-root[data-page="sprzatanie"] .sprz-input-wrapper    .clear-btn{
    z-index: 800 !important; /* było zdecydowanie za wysoko */
  }

  /* 2) Gdy menu jest otwarte – ukryj "X" (obsługa nowoczesnych przeglądarek) */
  header:has(#main-menu.menu.show) ~ #dynamic-content
    .mawaria-input-wrapper .clear-btn,
  header:has(#main-menu.menu.show) ~ #dynamic-content
    .mawaria-input-wrapper #clear-budynek,
  header:has(#main-menu.menu.show) ~ #dynamic-content
    .akty-input-wrapper .clear-btn,
  header:has(#main-menu.menu.show) ~ #dynamic-content
    .akty-input-wrapper #clear-akty,
  header:has(#main-menu.menu.show) ~ #dynamic-content
    .awaria-filter .clear-btn,
  header:has(#main-menu.menu.show) ~ #dynamic-content
    .sprz-input-wrapper .clear-btn{
    display: none !important;
  }
}

/* === DRUKI (page=druki) — MOBILE ≤768px: wygląd jak desktop === */
@media (max-width: 768px){

  /* siatka kart */
  .page-root[data-page="druki"] .downloads-grid{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;   /* 1 kolumna na phone */
    gap: 1rem;
  }

  /* pojedyncza karta */
  .page-root[data-page="druki"] .download-card{
    background: #fff;
    border: 1px solid var(--ui-border, #e6eaf0);
    border-left: 1px solid var(--ui-border, #e6eaf0) !important; /* nadpisuje ewentualny pasek z lewej */
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(16,24,40,.06);
    padding: 1rem 1.25rem;
  }

  .page-root[data-page="druki"] .download-title{
    margin: 0 0 .75rem;
    font-weight: 600;
    line-height: 1.35;
  }

  /* przycisk PDF: pigułka jak na desktopie, nie na pełną szerokość */
  .page-root[data-page="druki"] .btn.btn-pdf{
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1rem;
    font-size: .95rem;
    line-height: 1.2;
    width: auto;           /* zamiast 100% */
    min-width: 9rem;
    border-radius: 999px;
  }

  /* obrazek PDF w przycisku */
  .page-root[data-page="druki"] .btn.btn-pdf img{
    width: 18px; height: 18px; flex: 0 0 auto;
  }

  /* wyłącz „układ awaryjny” jeśli gdzieś się nałożył */
  .page-root[data-page="druki"] .document.as-card{
    display: block;
    grid-template-areas: initial !important;
    grid-template-columns: initial !important;
  }
  .page-root[data-page="druki"] .document.as-card .document-cta{
    width: auto !important;
    align-self: auto !important;
  }
}

/* Opcjonalnie: od ~576px dwie kolumny jak na desktopie-lite */
@media (min-width: 576px) and (max-width: 768px){
  .page-root[data-page="druki"] .downloads-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   dok-akty — CLEAN & RESPONSIVE
   ========================= */

/* zmienna szerokości kolumny CTA (desktop) */
.page-root[data-page="dok-akty"]{ --cta-w: 240px; }

/* bazowe reset-y tylko dla tej podstrony */
.page-root[data-page="dok-akty"] #cards{ display:block; }
.page-root[data-page="dok-akty"] #cards .document{ display:none; }
.page-root[data-page="dok-akty"] #cards .document.visible{ display:grid !important; }
.page-root[data-page="dok-akty"] .doc-row::before,
.page-root[data-page="dok-akty"] .doc-dot,
.page-root[data-page="dok-akty"] .doc-badge{ display:none !important; }
.page-root[data-page="dok-akty"] [hidden]{ display:none !important; }

/* --------- KARTA (desktop domyślnie) --------- */
.page-root[data-page="dok-akty"] #cards .document.as-card{
  /* siatka: [tytuł | CTA] / [opis | CTA] / [pliki | CTA]  */
  display:grid !important;
  grid-template-columns: minmax(0,1fr) var(--cta-w);
  grid-template-rows: auto var(--desc-h, auto) auto;   /* wysokość opisu podaje JS */
  gap:14px 22px;

  margin:12px 0;
  padding:16px 18px;
  border:1px solid #c7d2e5; border-radius:12px;
  background:#fff; box-shadow:0 2px 8px rgba(23,38,55,.06);
  overflow: visible;               /* nic nie utnie się przypadkiem */
  align-items:start;
}
.page-root[data-page="dok-akty"] #cards .document.as-card > *{
  min-width:0 !important;          /* łamanie długich tytułów */
  position:static !important;
  float:none !important;
  transform:none !important;
  z-index:auto !important;
}

/* rozmieszczenie elementów po numerach kolumn/wierszy */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-head{  grid-column:1/2; grid-row:1/2; display:flex; gap:.5rem; margin:0 0 .4rem; }
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc{  grid-column:1/2; grid-row:2/3; margin:0; padding:.6rem 0 0; border-top:1px dashed #cfd6e4; color:#445; }
.page-root[data-page="dok-akty"] #cards .document.as-card .file-entries{   grid-column:1/2; grid-row:3/4; display:grid; gap:.4rem; }
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta{   grid-column:2/3; grid-row:1/4; width:var(--cta-w); max-width:var(--cta-w); display:flex; flex-direction:column; gap:.45rem; align-self:start; justify-self:end; }

/* tytuł */
.page-root[data-page="dok-akty"] #cards .document.as-card h3.document-title{
  margin:0; font-weight:700; color:#1a2a4f;
  font-size:clamp(1.1rem,1rem + .4vw,1.35rem);
  line-height:1.3;
  white-space:normal; overflow-wrap:anywhere; word-break:break-word;
}

/* opis — pełna wysokość, zero „pływania” wewnątrz */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc{
  display:flow-root !important;   /* BFC: łapie ewentualne floaty */
  position:static !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  clear:both !important;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc *{
  float:none !important; position:static !important; transform:none !important;
}

/* załączniki */
.page-root[data-page="dok-akty"] #cards .document.as-card .file-entry{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .file-entry .label{
  font-weight:600; color:#1a2a4f;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .file-entry .btn,
.page-root[data-page="dok-akty"] #cards .document.as-card .file-entry .btn-ghost{
  width:auto; min-height:36px; height:auto; padding:.35rem .75rem; font-size:.9rem; line-height:1.25;
}

/* CTA (po prawej / desktop) */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .btn,
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .btn-ghost{
  width:100%; min-height:36px; height:auto;
  padding:.35rem .75rem; font-size:.9rem; line-height:1.25;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}

/* --------- MOBILE (<=768px) --------- */
@media (max-width:768px){
  .page-root[data-page="dok-akty"]{ --cta-w: 100%; }

  .page-root[data-page="dok-akty"] #cards .document.as-card{
    grid-template-columns: 1fr;          /* jedna kolumna */
    grid-template-rows: auto auto var(--desc-h, auto) auto;
    gap:12px;
    padding:14px 14px;
  }
  /* kolejność: Head → CTA → Desc → Files */
  .page-root[data-page="dok-akty"] #cards .document.as-card .document-head{ grid-column:1/2; grid-row:1/2; }
  .page-root[data-page="dok-akty"] #cards .document.as-card .document-cta{  grid-column:1/2; grid-row:2/3; width:100%; max-width:none; justify-self:start; }
  .page-root[data-page="dok-akty"] #cards .document.as-card .document-desc{ grid-column:1/2; grid-row:3/4; }
  .page-root[data-page="dok-akty"] #cards .document.as-card .file-entries{  grid-column:1/2; grid-row:4/5; }

  /* lekko ciaśniejsze przyciski na telefonach */
  .page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .btn,
  .page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .btn-ghost{
    min-height:40px;
  }
}

/* === dok-akty — MOBILE FIX: pokaż tytuł, pokaż opis i ujednolić przyciski === */

/* 1) Tytuł i head — nie mogą być ukryte przez style listy */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-head,
.page-root[data-page="dok-akty"] #cards .document.as-card h3.document-title{
  display:block !important;
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  height:auto !important;
  max-height:none !important;
  text-indent:0 !important;
  clip:auto !important;
  clip-path:none !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* 2) Opis — gwarantujemy, że po zdjęciu [hidden] jest normalnie widoczny */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc{
  display:flow-root !important;      /* BFC → łapie ewentualne floaty */
  position:static !important;
  max-height:none !important;
  overflow:visible !important;
  clear:both !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc *{
  float:none !important;
  position:static !important;
  transform:none !important;
}

/* 3) Mobile – kolejność i pełna szerokość CTA (Head → CTA → Desc → Files) */
@media (max-width:768px){
  .page-root[data-page="dok-akty"] #cards .document.as-card{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto var(--desc-h, auto) auto !important;
    gap:12px !important;
  }
  .page-root[data-page="dok-akty"] #cards .document.as-card .document-head{ grid-column:1/2 !important; grid-row:1/2 !important; }
  .page-root[data-page="dok-akty"] #cards .document.as-card .document-cta{  grid-column:1/2 !important; grid-row:2/3 !important; width:100% !important; max-width:none !important; }
  .page-root[data-page="dok-akty"] #cards .document.as-card .document-desc{ grid-column:1/2 !important; grid-row:3/4 !important; }
  .page-root[data-page="dok-akty"] #cards .document.as-card .file-entries{  grid-column:1/2 !important; grid-row:4/5 !important; }
}

/* 4) „Ukryj/Pokaż opis” jak primary (jak „Otwórz PDF”) */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .toggle-opis{
  /* dopasuj do kolorystyki primary — jeśli masz zmienne, podstaw je tutaj */
  background:#0e2446 !important;       /* kolor jak primary */
  color:#fff !important;
  border-color:#0e2446 !important;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .toggle-opis:hover{
  filter:brightness(1.05);
}

/* dok-akty: CTA toggle jak primary */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .toggle-opis{
  background:#0e2446 !important;   /* dopasuj do koloru primary, jeśli używasz zmiennych – podstaw je tutaj */
  color:#fff !important;
  border:1px solid #0e2446 !important;
  border-radius:12px !important;   /* taki sam jak .btn */
  min-height:44px;                 /* jak standardowy przycisk */
  display:flex; align-items:center; justify-content:center;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .toggle-opis:hover{
  filter:brightness(1.05);
}
/* dok-akty: oddech między nazwami z listy */
.page-root[data-page="dok-akty"] .documents > *{
  margin: 6px 0;     /* delikatny odstęp pionowy */
}
.page-root[data-page="dok-akty"] .documents a{
  line-height: 1.55; /* czytelniejsza interlinia */
}
/* --- dok-akty: tytuł/opis zawsze normalnie widoczne, karta bez sztucznych minimów --- */
.page-root[data-page="dok-akty"] #cards .document.as-card{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
}

/* tytuł nigdy nie jest ukrywany trickami z listy */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-head,
.page-root[data-page="dok-akty"] #cards .document.as-card h3.document-title{
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  height:auto !important;
  max-height:none !important;
  text-indent:0 !important;
  clip:auto !important;
  clip-path:none !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* opis: gdy [hidden] – naprawdę znika; gdy widoczny – normalny block */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc[hidden]{
  display:none !important;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc:not([hidden]){
  display:block !important;        /* ważne na mobile */
  position:static !important;
  float:none !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}

/* opis – cały jego kontent bez floatów/pozycji (CSV bywa różne) */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc *,
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc::before,
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc::after{
  float:none !important;
  position:static !important;
  transform:none !important;
}

/* CTA toggle = primary (kształt/kolor jak „Otwórz PDF”) */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .toggle-opis{
  background:#0e2446 !important;
  color:#fff !important;
  border:1px solid #0e2446 !important;
  border-radius:12px !important;
  min-height:44px;
  display:flex; align-items:center; justify-content:center;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .document-cta .toggle-opis:hover{
  filter:brightness(1.05);
}

/* oddech między nazwami w liście nad kartą */
.page-root[data-page="dok-akty"] .documents > *{ margin:6px 0; }
.page-root[data-page="dok-akty"] .documents a{ line-height:1.55; }

/* --- dok-akty: bezpieczniki na końcu pliku --- */

/* karta nie ma sztucznych minimów ani overflow */
.page-root[data-page="dok-akty"] #cards .document.as-card{
  height:auto !important;
  min-height:0 !important;
  overflow:visible !important;
  align-items:start !important;
}

/* opis: gdy hidden – znika; gdy widoczny – zwykły block, bez floatów/pozycji 
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc[hidden]{
  display:none !important;
}*/
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc{
  display:block !important;
  position:static !important;
  float:none !important;
  clear:both !important;
  max-height:none !important;
  overflow:visible !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
}
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc *,
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc::before,
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc::after{
  float:none !important;
  position:static !important;
  transform:none !important;
  max-width:100% !important;
}

/* tytuł zawsze widoczny i łamany */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-head,
.page-root[data-page="dok-akty"] #cards .document.as-card h3.document-title{
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  height:auto !important;
  max-height:none !important;
  text-indent:0 !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
/* --- DOK-AKTY: rząd z opisem liczony zawsze z treści --- */

/* Desktop */
.page-root[data-page="dok-akty"] #cards .document.as-card{
  /* [tytuł | opis | pliki] w kolumnie 1 + CTA w kolumnie 2 */
  grid-template-rows: auto max-content auto !important;
}

/* Mobile: Head → CTA → Desc → Files */
@media (max-width:768px){
  .page-root[data-page="dok-akty"] #cards .document.as-card{
    grid-template-rows: auto auto max-content auto !important;
  }
}

/* Na wszelki wypadek – opis naprawdę znika, kiedy ma [hidden] */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc[hidden]{
  display:none !important;
}
/* …i jest zwykłym blokiem, gdy widoczny */
.page-root[data-page="dok-akty"] #cards .document.as-card .document-desc:not([hidden]){
  display:block !important;
  visibility:visible !important;
}

/* ===========================
   MOBILE TWEAKS (<= 768px)
   =========================== */
@media (max-width: 768px){

  /* Lista aktualności – ciaśniejsze odstępy i brak ryzyka overflow */
  .aktualnosci-list{ 
    padding-left: 0; 
    margin-left: 0;
  }
  .aktualnosci-list > li{ 
    margin-bottom: 10px; 
    min-width: 0;           /* ważne przy flex/grid */
  }

  /* Box ze zdjęciem – mniejsze marginesy na mobile */
  .info-jpg{
    margin: 1rem 0 1.25rem;
  }

  /* Wariant „połowa kolumny” wraca do pełnej szerokości – już masz, zostawiam dla kompletności */
  .info-jpg--half{ 
    max-width: 100%; 
    margin-left: 0; 
    margin-right: 0;
  }

  /* Sam obraz – delikatniejszy radius i cień, zero overflow */
  .info-jpg img{
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
  }

  /* Lepszy tap highlight na iOS/Android */
  .info-jpg a{
    display: block;
    -webkit-tap-highlight-color: rgba(13,110,253,.2);
  }

  /* Opcjonalny kadrowany wariant – przy bardzo wysokich grafikach */
  .info-jpg--crop img{
    height: 220px;
    object-fit: cover;  /* przytnie, nie rozciągnie */
  }

  /* Zabezpieczenie przed poziomym scrollem */
  body, .content{
    overflow-x: hidden;
  }
}

/* Jeszcze ciaśniejsze ekrany (<= 360px) – niższy kadr, trochę mniejsze marginesy */
@media (max-width: 360px){
  .info-jpg{ 
    margin: .85rem 0 1rem; 
  }
  .info-jpg--crop img{
    height: 180px;
  }
}

/* Wyłącz markery w kolumnie aktualności – także w zagnieżdżonych listach */
.aktualnosci-list,
.aktualnosci-list ul {
  list-style: none !important;
  padding-left: 0;
  margin-left: 0;
}

/* Bezpiecznik na markery (Chrome/Safari/Firefox) */
.aktualnosci-list li::marker,
.aktualnosci-list ul li::marker {
  content: "" !important;
}

/* Jeśli gdzieś był custom bullet z :before */
.aktualnosci-list li::before {
  content: none !important;
}

/* ===== e-BOK – layout kart i przycisków ===== */
.page-root[data-page="ebok"] .downloads { margin: 2rem 0; }
.page-root[data-page="ebok"] .downloads-grid {
  list-style: none;          /* usuwa kropki */
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr; /* mobile: 1 kolumna */
  gap: 18px;
}
.page-root[data-page="ebok"] .downloads-grid.is-single { grid-template-columns: 1fr; }

.page-root[data-page="ebok"] .download-card {
  background: #fff;
  border: 1px solid #e8edf5;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 4px 14px rgba(17,34,68,.06);
}

.page-root[data-page="ebok"] .download-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  color: #152a55;
}

/* wspólny wygląd przycisków */
.page-root[data-page="ebok"] .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  border-radius: 12px;
  background: #152a55;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: none;
  line-height: 1;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s;
  box-shadow: 0 2px 6px rgba(21,42,85,.18);
}
.page-root[data-page="ebok"] .btn:hover,
.page-root[data-page="ebok"] .btn:focus { background:#0f2146; transform: translateY(-1px); }

.page-root[data-page="ebok"] .btn-pdf img { height: 22px; width: 22px; }

/* rząd z filmem */
.page-root[data-page="ebok"] .video-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .75rem 0 1.25rem;
}

/* Uwaga box – wyrównanie do reszty */
.page-root[data-page="ebok"] .card-body {
  border-radius: 10px;
  border-left-width: 6px;
}

/* Desktop: 3 karty w rzędzie */
@media (min-width: 900px){
  .page-root[data-page="ebok"] .downloads-grid { grid-template-columns: repeat(3, 1fr); }
}
.page-root[data-page="ebok"] .btn-row {
  display:flex; gap:.5rem; flex-wrap:wrap;
}
/* === FIX: e-BOK kroki – wymuś ramkę/cień na mobile === */
.content.page-root[data-page="ebok"] ol.steps-grid{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr; /* 1 kolumna na mobile */
  gap: 18px;
}

.content.page-root[data-page="ebok"] ol.steps-grid > li.step-card{
  background: #fff !important;
  border: 1px solid #e8edf5 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  box-shadow: 0 4px 14px rgba(17,34,68,.06) !important;
}

/* nagłówek kroku + numer */
.content.page-root[data-page="ebok"] .step-head{
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
}
.content.page-root[data-page="ebok"] .step-no{
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #152a55; color:#fff; font-weight: 700;
  box-shadow: 0 2px 6px rgba(21,42,85,.18);
}

/* gdyby globalny CSS usuwał ramki <li> na mobile */
@media (max-width: 899px){
  .content.page-root[data-page="ebok"] ol.steps-grid > li.step-card{
    border: 1px solid #e8edf5 !important;
    box-shadow: 0 4px 14px rgba(17,34,68,.06) !important;
  }
}

/* ====== OFERTA mobile ====== */
.page-root[data-page="oferta"] .section-title{ margin:1.25rem 0 .75rem; }

.oferta-blok{ padding:1rem; border-radius:12px; }

.garage-table{ border-radius:12px; }
.garage-table{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.garage-table table{ min-width:560px; } /* przewijane w poziomie gdy wąsko */
.garage-table thead th{ padding:.6rem .7rem; font-size:.9rem; }
.garage-table tbody td{ padding:.6rem .7rem; font-size:.95rem; }

.last-updated{ font-size:.8rem; }

.modal-img img{ max-width:98vw; max-height:86vh; }

/* OFERTA (mobile) – przywróć znacznik po lewej w nagłówkach bloków */
.page-root[data-page="oferta"] .oferta-blok > h2{
  position: relative;
  padding-left: 14px;
  border-left: 6px solid var(--brand, #1c3b72) !important;
}

/* jeśli wolisz wersję niezależną od border-left (nie do ucięcia) */
.page-root[data-page="oferta"] .oferta-blok > h2{
  position: relative;
  padding-left: 18px;                 /* trochę więcej miejsca na „pasek” */
  border-left: 0 !important;          /* wyłącz klasyczny border */
}
.page-root[data-page="oferta"] .oferta-blok > h2::before{
  content:"";
  position:absolute;
  left:0; top:.25em; bottom:.25em;    /* ładne marginesy góra/dół */
  width:6px;
  background: var(--brand, #1c3b72);
  border-radius:3px;
}
/* tylko mobile */
@media (max-width: 899px){
  .content.page-root[data-page="ebok"] ol.steps-grid{
    list-style:none; margin:0; padding:0;
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* desktop – musi mieć ≥ taką samą specyficzność */
@media (min-width: 900px){
  .content.page-root[data-page="ebok"] ol.steps-grid{
    grid-template-columns:repeat(4,1fr);
  }
}