/* ===== DZIELNICE — duże panele z tekstem na obrazie ===== */
.dz-lista{display:flex;flex-direction:column;gap:0;margin-top:34px}

.dz-panel{position:relative;width:100%;height:clamp(360px,42vw,620px);overflow:hidden;
  display:flex;align-items:center;isolation:isolate;
  transition:height .5s cubic-bezier(.2,.8,.3,1)}
.dz-panel:hover{height:clamp(420px,50vw,700px)}
.dz-panel+.dz-panel{border-top:1px solid rgba(255,255,255,.05)}
.dz-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 42%;z-index:0;
  transform:scale(1.02);transition:transform 1.2s cubic-bezier(.2,.8,.3,1),
  object-position 1.2s ease}
.dz-panel:hover .dz-foto{transform:scale(1.05);object-position:center 50%}
@media(min-width:1500px){.dz-foto{object-position:center 45%}}

/* przyciemnienie od strony tekstu + wygaszenie góry i dołu */
.dz-cien{position:absolute;inset:0;z-index:1;pointer-events:none}
.dz-panel.lewa .dz-cien{background:
  linear-gradient(90deg,rgba(7,9,13,.95) 0%,rgba(7,9,13,.88) 26%,rgba(7,9,13,.45) 52%,transparent 78%),
  linear-gradient(180deg,rgba(7,9,13,.55) 0%,transparent 25%,transparent 72%,rgba(7,9,13,.75) 100%)}
.dz-panel.prawa .dz-cien{background:
  linear-gradient(270deg,rgba(7,9,13,.95) 0%,rgba(7,9,13,.88) 26%,rgba(7,9,13,.45) 52%,transparent 78%),
  linear-gradient(180deg,rgba(7,9,13,.55) 0%,transparent 25%,transparent 72%,rgba(7,9,13,.75) 100%)}

.dz-box{position:relative;z-index:2;width:min(46%,520px);padding:0 clamp(20px,5vw,64px)}
.dz-panel.prawa .dz-box{margin-left:auto}

.dz-etykieta{display:inline-block;margin-bottom:15px;padding:6px 14px;border-radius:20px;
  font-family:var(--naglowek,"Barlow Condensed",sans-serif);
  font-size:11px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;
  background:rgba(11,14,19,.7);border:1px solid rgba(255,179,71,.45);color:#FFC97A;
  backdrop-filter:blur(6px)}

/* czysty, ostry napis — bez poświat i rozmyć */
.dz-box h3{display:flex;align-items:center;gap:12px;margin:0 0 15px;
  font-family:var(--szyld,"Oswald","Arial Narrow",sans-serif);font-weight:700;
  font-size:clamp(26px,3.6vw,40px);line-height:1.05;letter-spacing:.6px;
  text-transform:uppercase;
  background:linear-gradient(180deg,#FFF6E6 0%,#FFD9A0 55%,#FFB347 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.95));-webkit-font-smoothing:antialiased}
.dz-ik{font-family:system-ui,"Segoe UI Emoji",sans-serif;font-size:.62em;line-height:1;
  text-shadow:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.8))}

.dz-box p{margin:0 0 18px;font-family:var(--tresc,system-ui,sans-serif);
  font-size:clamp(13.5px,1.35vw,15.5px);line-height:1.75;
  color:rgba(245,242,235,.9);text-shadow:0 1px 4px rgba(0,0,0,.95);max-width:44ch}
.dz-punkty{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.dz-punkty li{position:relative;padding-left:20px;font-size:13px;line-height:1.55;
  font-family:var(--tresc,system-ui,sans-serif);
  color:rgba(240,236,228,.78);text-shadow:0 1px 4px rgba(0,0,0,.95)}
.dz-punkty li::before{content:"▸";position:absolute;left:2px;top:0;color:#FFB347}

@media(max-width:820px){
  .dz-panel{height:auto;min-height:400px;align-items:flex-end}
  .dz-box{width:100%;padding:0 22px 30px}
  .dz-panel.prawa .dz-box{margin-left:0}
  .dz-panel.lewa .dz-cien,.dz-panel.prawa .dz-cien{background:
    linear-gradient(180deg,rgba(7,9,13,.5) 0%,rgba(7,9,13,.25) 30%,rgba(7,9,13,.88) 72%,rgba(7,9,13,.97) 100%)}
  .dz-foto{position:relative;height:230px}
  .dz-panel{display:block;padding-bottom:26px;background:#0b0e13}
  .dz-box{margin-top:-60px}
}

/* rozwijane szczegóły dzielnicy */
.dz-wiecej{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.2,.8,.3,1),opacity .4s ease,margin .4s}
.dz-panel:hover .dz-wiecej{max-height:260px;opacity:1;margin-top:18px}
.dz-liczby{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.dz-liczby span{padding:6px 12px;border-radius:8px;
  font-family:var(--naglowek,"Barlow Condensed",sans-serif);
  font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
  background:rgba(11,14,19,.72);border:1px solid rgba(255,255,255,.10);
  color:rgba(245,242,235,.82);backdrop-filter:blur(6px);white-space:nowrap}
.dz-dodatkowy{margin:0 !important;padding-top:14px;border-top:1px solid rgba(255,255,255,.10);
  font-size:13px !important;line-height:1.7 !important;font-style:italic;
  color:rgba(240,236,228,.72) !important;max-width:46ch}
.dz-panel::after{content:"▾ więcej";position:absolute;right:20px;bottom:16px;z-index:3;
  font-family:var(--naglowek,sans-serif);font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:rgba(255,179,71,.7);
  padding:6px 12px;border-radius:20px;background:rgba(11,14,19,.72);
  border:1px solid rgba(255,179,71,.28);backdrop-filter:blur(6px);
  transition:opacity .3s;pointer-events:none}
.dz-panel:hover::after{opacity:0}
@media(max-width:820px){
  .dz-panel,.dz-panel:hover{height:auto}
  .dz-wiecej{max-height:none;opacity:1;margin-top:16px}
  .dz-panel::after{display:none}
}

/* ===== NAPISY DZIELNIC — duże, po przeciwnej stronie niż opis ===== */
.dz-napis{position:absolute;z-index:2;margin:0;padding:0;line-height:0;pointer-events:none;
  top:50%;transform:translateY(-50%)}
/* opis po lewej → napis po prawej i odwrotnie */
.dz-panel.lewa .dz-napis{right:clamp(20px,4vw,60px);left:auto;text-align:right}
.dz-panel.prawa .dz-napis{left:clamp(20px,4vw,60px);right:auto;text-align:left}
.dz-napis img{display:block;width:auto;
  max-width:min(46vw,600px);max-height:clamp(90px,13vw,190px);
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.95));
  transition:transform .6s cubic-bezier(.2,.8,.3,1),filter .45s}
.dz-panel:hover .dz-napis img{transform:translateY(-4px) scale(1.03);
  filter:drop-shadow(0 10px 34px rgba(0,0,0,.95)) drop-shadow(0 0 30px rgba(255,179,71,.18))}
.dz-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* etykieta przenosi się nad napis, po tej samej stronie co on */
.dz-panel.lewa .dz-etykieta{position:absolute;right:clamp(20px,4vw,60px);
  top:clamp(24px,5vh,54px);margin:0;z-index:3}
.dz-panel.prawa .dz-etykieta{position:absolute;left:clamp(20px,4vw,60px);
  top:clamp(24px,5vh,54px);margin:0;z-index:3}

/* ===== NEON AMERYKI: przepalona litera ===== */
.neon-stos{position:relative;display:inline-block;line-height:0}
.neon-baza{position:relative;z-index:1}
.neon-litera{position:absolute;left:0;top:0;z-index:2;
  max-width:none !important;max-height:none !important;width:100%;height:100%;
  animation:literaPada 5.6s infinite steps(1,end)}
.dz-napis.neon .neon-baza{
  filter:drop-shadow(0 0 20px rgba(255,140,190,.32)) drop-shadow(0 0 46px rgba(255,179,71,.2))}
.dz-napis.neon .neon-litera{
  filter:drop-shadow(0 0 16px rgba(255,140,190,.5))}
.dz-panel:hover .dz-napis.neon .neon-litera{animation-duration:4.2s}
/* nierówny rytm zużytej rurki: gaśnie, wraca, mruga, gaśnie na dłużej */
@keyframes literaPada{
  0%,14%   {opacity:1}
  15%      {opacity:.06}
  16.4%    {opacity:.9}
  17.2%    {opacity:.06}
  19%      {opacity:1}
  46%      {opacity:1}
  46.6%    {opacity:.08}
  47.1%    {opacity:.75}
  47.6%    {opacity:.06}
  53%      {opacity:.06}
  53.6%    {opacity:1}
  78%      {opacity:1}
  78.4%    {opacity:.1}
  79%      {opacity:1}
  79.6%    {opacity:.06}
  80.4%    {opacity:1}
  100%     {opacity:1}
}
@media(prefers-reduced-motion:reduce){.neon-litera{animation:none}}

/* ===== NAPISY DZIELNIC JAKO GRAFIKA ===== */
.dz-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Ameryka: neon z przepaloną literą i nierównym rozruchem */

.dz-panel:hover 

/* dodatkowe, delikatne tętnienie poświaty */
.dz-napis.neon{position:relative}

50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  
  
}
@media(max-width:820px){
  .dz-napis img{max-width:70%;max-height:62px}
  
}

/* opis nie może wchodzić pod napis */
.dz-box{max-width:min(44%,480px)}
@media(max-width:1100px){.dz-napis img{max-width:44vw;max-height:clamp(70px,11vw,140px)}}
@media(max-width:820px){
  .dz-napis{position:relative;top:auto;transform:none;text-align:left !important;
    left:auto !important;right:auto !important;margin-bottom:14px}
  .dz-panel.lewa .dz-etykieta,.dz-panel.prawa .dz-etykieta{position:relative;
    left:auto;right:auto;top:auto;margin-bottom:12px}
  .dz-napis img{max-width:78%;max-height:80px}
  .dz-box{max-width:100%}
}