/* ==========================================================
   MIKOLA — Galeria realizacji
   Wszystkie reguły zaczynają się od .mk-real, więc nic
   nie wycieka na nagłówek, stopkę ani resztę witryny.
   ========================================================== */

.mk-real{
  --r-primary:#024A93;
  --r-band:#004997;
  --r-bg:#fff;
  --r-surface:#F7FAFC;
  --r-surface-strong:#F0F4F9;
  --r-border:rgba(2,74,147,.12);
  --r-border-strong:rgba(2,74,147,.24);
  --r-text:#15161A;
  --r-muted:#545A63;
  --r-muted-soft:#6B7280;
  --r-radius:14px;
  --r-pill:999px;
  --r-container:1400px;
  --r-ease:cubic-bezier(.16,1,.3,1);
  color:var(--r-text);
  padding-bottom:96px;
  width:100%!important;max-width:none!important;float:none!important;
}
.mk-real *{box-sizing:border-box}
.mk-real img{display:block;max-width:100%;height:auto}
.mk-real p,.mk-real h1{margin:0}
.mk-real ul{margin:0;padding:0;list-style:none}
.mk-real a{text-decoration:none;color:inherit}
/* Atrybut hidden musi wygrywać z naszymi regułami display.
   Bez tego kontener z display:flex pozostaje widoczny mimo hidden. */
.mk-real [hidden]{display:none!important}

/* rodzic bloku bywa kolumną obok sidebara — neutralizujemy go */
div:has(> .mk-real), main:has(> .mk-real), section:has(> .mk-real),
article:has(> .mk-real), aside:has(> .mk-real),
div:has(> div > .mk-real), main:has(> div > .mk-real),
div:has(> main > .mk-real), main:has(> main > .mk-real),
div:has(> div > div > .mk-real), main:has(> div > div > .mk-real){
  width:100%!important;max-width:none!important;margin-inline:0!important;
  padding-inline:0!important;padding-block:0!important;float:none!important;
  flex:1 1 100%!important;grid-column:1/-1!important;
}
body:has(.mk-real) #secondary,
body:has(.mk-real) .widget-area,
body:has(.mk-real) .sidebar-main,
body:has(.mk-real) .site-sidebar{display:none!important}

.mk-real-wrap{width:100%;max-width:var(--r-container);margin-inline:auto;padding-inline:24px}

/* ---------- Pas nagłówkowy, 1:1 z pozostałymi podstronami ----------
   40px góra / H1 42px lh 1.4 / 20px / okruszki 14px lh 1.65 / 40px dół
   = 181,9px wysokości */
.mk-real-band{background:var(--r-band);padding-top:40px;padding-bottom:40px;text-align:center}
.mk-real-band h1{color:#fff!important;font-size:42px;font-weight:700;line-height:1.4;
  letter-spacing:normal;margin:0!important;text-align:center}
.mk-real-crumbs{margin-top:20px!important;font-size:14px;font-weight:400;line-height:1.65;color:#fff!important}
.mk-real-crumbs a,.mk-real-crumbs a:link,.mk-real-crumbs a:visited,
.mk-real-crumbs a:hover,.mk-real-crumbs a:focus{color:#fff!important;
  text-decoration:none!important;border-bottom:0!important;box-shadow:none!important}

/* ---------- Filtry, poziom 1 ----------
   Motyw stylizuje element <button> własnymi regułami o wyższej
   specyficzności, stąd wymuszenia. Bez nich przyciski dostają
   niebieskie tło i obramowanie motywu. */
.mk-real .mk-real-filters{margin-top:40px}
.mk-real .mk-real-filters ul{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 30px}

.mk-real .mk-real-cat,
.mk-real a.mk-real-cat,
.mk-real a.mk-real-cat:link,
.mk-real a.mk-real-cat:visited{
  display:inline-block!important;text-decoration:none!important;
  appearance:none!important;-webkit-appearance:none!important;
  background:transparent!important;background-image:none!important;
  border:0!important;border-bottom:2px solid transparent!important;
  border-radius:0!important;box-shadow:none!important;text-shadow:none!important;
  margin:0!important;padding:6px 2px!important;min-height:0!important;height:auto!important;
  width:auto!important;cursor:pointer;
  font-family:inherit!important;font-size:16px!important;font-weight:500!important;
  line-height:1.55!important;letter-spacing:normal!important;text-transform:none!important;
  color:var(--r-muted)!important;
  transition:color .15s ease,border-color .15s ease}
.mk-real .mk-real-cat:hover,
.mk-real a.mk-real-cat:hover,
.mk-real .mk-real-cat:focus{background:transparent!important;color:var(--r-text)!important;
  text-decoration:none!important;
  border-bottom-color:rgba(2,74,147,.25)!important}
.mk-real .mk-real-cat.is-active,
.mk-real a.mk-real-cat.is-active,
.mk-real a.mk-real-cat.is-active:link,
.mk-real a.mk-real-cat.is-active:visited,
.mk-real .mk-real-cat.is-active:hover,
.mk-real .mk-real-cat.is-active:focus{background:transparent!important;
  color:var(--r-primary)!important;font-weight:700!important;
  border-bottom-color:var(--r-primary)!important}
.mk-real .mk-real-cat:focus{outline:none}
.mk-real .mk-real-cat:focus-visible{outline:2px solid var(--r-primary)!important;outline-offset:4px}

/* ---------- Filtry, poziom 2 ---------- */
.mk-real .mk-real-subs:not(:empty){margin-top:20px}
.mk-real .mk-real-subfilters ul{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}

.mk-real .mk-real-sub{
  appearance:none!important;-webkit-appearance:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  background:#fff!important;background-image:none!important;
  border:1px solid var(--r-border)!important;border-radius:999px!important;
  box-shadow:none!important;text-shadow:none!important;
  margin:0!important;padding:0 20px!important;min-height:40px!important;height:auto!important;
  width:auto!important;cursor:pointer;white-space:nowrap;
  font-family:inherit!important;font-size:14px!important;font-weight:500!important;
  line-height:1!important;letter-spacing:normal!important;text-transform:none!important;
  color:var(--r-text)!important;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.mk-real .mk-real-sub:hover,
.mk-real .mk-real-sub:focus{background:var(--r-surface)!important;
  border-color:var(--r-border-strong)!important;color:var(--r-text)!important}
.mk-real .mk-real-sub.is-active,
.mk-real .mk-real-sub.is-active:hover,
.mk-real .mk-real-sub.is-active:focus{background:var(--r-primary)!important;
  border-color:var(--r-primary)!important;color:#fff!important;font-weight:600!important}
.mk-real .mk-real-sub:focus{outline:none}
.mk-real .mk-real-sub:focus-visible{outline:2px solid var(--r-primary)!important;outline-offset:3px}

/* ---------- Siatka ---------- */
.mk-real-grid{margin-top:36px;display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
  transition:opacity .2s ease}
.mk-real-grid[aria-busy="true"]{opacity:.45;pointer-events:none}

.mk-real-tile{position:relative;display:block;overflow:hidden;border-radius:var(--r-radius);
  background:var(--r-surface);aspect-ratio:4/3;cursor:zoom-in}
.mk-real-tile img{width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--r-ease)}
.mk-real-tile:hover img{transform:scale(1.05)}
.mk-real-tile::after{content:"";position:absolute;inset:0;border-radius:var(--r-radius);
  background:linear-gradient(180deg,rgba(0,0,0,.22) 0,rgba(0,0,0,0) 38%);
  pointer-events:none}

.mk-real-tile__label{position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;max-width:calc(100% - 24px);
  padding:7px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.94);backdrop-filter:blur(6px);
  font-size:13px;font-weight:600;line-height:1.2;color:var(--r-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 1px 3px rgba(0,0,0,.10)}

.mk-real-tile:focus-visible{outline:2px solid var(--r-primary);outline-offset:4px}

/* ---------- Komunikaty i przycisk ---------- */
.mk-real .mk-real-empty{margin-top:44px;text-align:center;font-size:15px;line-height:1.6;
  color:var(--r-muted)!important}

.mk-real .mk-real-more{margin-top:44px;display:flex;justify-content:center}
.mk-real .mk-real-btn{
  appearance:none!important;-webkit-appearance:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:8px;background:#fff!important;background-image:none!important;
  border:1px solid var(--r-border-strong)!important;border-radius:10px!important;
  box-shadow:none!important;text-shadow:none!important;
  margin:0!important;padding:0 34px!important;min-height:50px!important;height:auto!important;
  cursor:pointer;
  font-family:inherit!important;font-size:14px!important;font-weight:600!important;
  line-height:1!important;letter-spacing:.02em!important;text-transform:none!important;
  color:var(--r-primary)!important;
  transition:background .15s ease,border-color .15s ease}
.mk-real .mk-real-btn:hover,
.mk-real .mk-real-btn:focus{background:var(--r-surface)!important;
  border-color:var(--r-primary)!important;color:var(--r-primary)!important}
.mk-real .mk-real-btn:active{background:var(--r-surface-strong)!important;color:var(--r-primary)!important}
.mk-real .mk-real-btn[disabled]{opacity:.5;cursor:default}
.mk-real .mk-real-btn:focus{outline:none}
.mk-real .mk-real-btn:focus-visible{outline:2px solid var(--r-primary)!important;outline-offset:3px}

/* ---------- Lightbox: podpis i przycisk oferty ---------- */
.pswp__mk-bar{position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  padding:18px 20px 26px;
  background:linear-gradient(0deg,rgba(0,0,0,.62) 0,rgba(0,0,0,0) 100%);
  pointer-events:none}
.pswp__mk-bar > *{pointer-events:auto}
.pswp__mk-name{font-size:16px;font-weight:600;line-height:1.3;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pswp__mk-offer{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 22px;
  border-radius:10px;background:var(--mk-real-primary,#024A93);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;transition:background .15s ease}
.pswp__mk-offer:hover{background:#023669;color:#fff}
.pswp__mk-offer[hidden]{display:none}
.pswp__mk-bar[hidden]{display:none}

/* ---------- Responsywność ---------- */
@media(max-width:1200px){
  .mk-real-grid{gap:18px}
}
@media(max-width:1024px){
  .mk-real{padding-bottom:80px}
  .mk-real-band{padding-top:34px;padding-bottom:34px}
  .mk-real-band h1{font-size:36px}
  .mk-real-crumbs{margin-top:18px!important}
  .mk-real .mk-real-filters{margin-top:32px}
  .mk-real .mk-real-filters ul{gap:6px 22px}
  .mk-real .mk-real-cat{font-size:15px!important}
  .mk-real-grid{grid-template-columns:repeat(3,1fr);margin-top:28px}
}
@media(max-width:767px){
  .mk-real{padding-bottom:64px}
  .mk-real-wrap{padding-inline:16px}
  .mk-real-band{padding-top:28px;padding-bottom:28px}
  .mk-real-band h1{font-size:28px}
  .mk-real-crumbs{margin-top:16px!important;font-size:13px}
  .mk-real .mk-real-filters{margin-top:24px}
  .mk-real .mk-real-filters ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;gap:6px 20px;padding-inline:16px;margin-inline:-16px}
  .mk-real .mk-real-filters ul::-webkit-scrollbar{display:none}
  .mk-real .mk-real-cat{white-space:nowrap;font-size:14px!important}
  .mk-real-subfilters ul{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scrollbar-width:none;padding-inline:16px;margin-inline:-16px}
  .mk-real-subfilters ul::-webkit-scrollbar{display:none}
  .mk-real .mk-real-sub{min-height:40px!important;padding:0 16px!important;font-size:13px!important}
  .mk-real-grid{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}
  .mk-real-tile__label{top:8px;left:8px;padding:5px 10px;font-size:11px;max-width:calc(100% - 16px)}
  .mk-real .mk-real-more{margin-top:32px}
  .mk-real .mk-real-btn{width:100%!important}
  .pswp__mk-bar{padding:14px 16px 20px;gap:12px}
  .pswp__mk-name{font-size:14px}
}
@media(max-width:400px){
  .mk-real-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  .mk-real-tile img{transition:none!important}
  .mk-real-tile:hover img{transform:none!important}
  .mk-real-grid{transition:none!important}
}