/* ===========================
   PRACOWNIA DP — STYLES (clean)
   =========================== */

/* --------- 1) BAZA TYPOGRAFII --------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body{
  font-family: "League Spartan", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  font-size: 18px;
  line-height: 1.6;
  color:#000;
}

a{ color:#000; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Logo */
.logo-brand{
  font-family:"League Spartan", sans-serif;
  font-weight:700;
  font-size:60px;
  color:#9F4D1E;
}

/* Nawigacja */
.navbar-nav .nav-link{
  font-family:"League Spartan", sans-serif;
  font-weight:400;
  font-size:17px;
}

/* Pasek z logo */
.pasek-logo-tlo{ background-color:#d7c38d; }

/* --------- 2) KOLORY STRON --------- */
/* (zachowane Twoje klasy; navbar dopasowany do tła strony) */
.tlo-o-nas, .tlo-o-nas .navbar{ background-color:#a9f4c2!important; }
.tlo-o-nas .stopka-tlo{ background-color:#5b5f31; color:#212529; }

.tlo-kontakt{ background-color:#ef7d7d; }
.tlo-kontakt .navbar{ background-color:#ef7d7d!important; }
.tlo-kontakt .stopka-tlo{ background-color:#5c2b2b!important; }

.tlo-realizacji, .tlo-realizacji .navbar{ background-color:#d75934!important; }
.tlo-realizacji .stopka-tlo{ background-color:#b4831a!important; }

.tlo-realizacji01, .tlo-realizacji01 .navbar{ background-color:#87adda!important; }
.tlo-realizacji01 .stopka-tlo{ background-color:#7a0f42!important; }

.tlo-realizacji02, .tlo-realizacji02 .navbar{ background-color:#63798c!important; }
.tlo-realizacji02 .stopka-tlo{ background-color:#00253f!important; }

.tlo-realizacji03, .tlo-realizacji03 .navbar{ background-color:#a18982!important; }
.tlo-realizacji03 .stopka-tlo{ background-color:#422d16!important; }

.tlo-realizacji04, .tlo-realizacji04 .navbar{ background-color:#46728d!important; }
.tlo-realizacji04 .stopka-tlo{ background-color:#894d12!important; }

.tlo-realizacji05, .tlo-realizacji05 .navbar{ background-color:#a29890!important; }
.tlo-realizacji05 .stopka-tlo{ background-color:#846d2e!important; }

.tlo-strony-realizacji06, .tlo-strony-realizacji06 .navbar{ background-color:#fcad94!important; }
.tlo-strony-realizacji06 .stopka-tlo{ background-color:#828e46!important; }

.tlo-realizacji07, .tlo-realizacji07 .navbar{ background-color:#b7a692!important; }
.tlo-realizacji07 .stopka-tlo{ background-color:#8f8d42!important; }

.tlo-realizacji08, .tlo-realizacji08 .navbar{ background-color:#d1b3bb!important; }
.tlo-realizacji08 .stopka-tlo{ background-color:#c89963!important; }

.tlo-realizacji09, .tlo-realizacji09 .navbar{ background-color:#73845d!important; }
.tlo-realizacji09 .stopka-tlo{ background-color:#ac7b4e!important; }

.tlo-realizacji10, .tlo-realizacji10 .navbar{ background-color:#898788!important; }
.tlo-realizacji10 .stopka-tlo{ background-color:#733512!important; }

.tlo-realizacji11, .tlo-realizacji11 .navbar{ background-color:#e4baa5!important; }
.tlo-realizacji11 .stopka-tlo{ background-color:#5e4d44!important; }

.tlo-realizacji12, .tlo-realizacji12 .navbar{ background-color:#d0d9d5!important; }
.tlo-realizacji12 .stopka-tlo{ background-color:#284377!important; }

.tlo-strony-realizacji13, .tlo-strony-realizacji13 .navbar{ background-color:#f8eccc!important; }
.tlo-strony-realizacji13 .stopka-tlo{ background-color:#828e46!important; }

/* --------- 3) PORTFOLIO — overlay i animacje (JEDYNA WERSJA) --------- */

/* Karta + obraz */
a.portfolio-item{ position:relative; display:block; overflow:hidden; }
a.portfolio-item img{ display:block; width:100%; height:auto; transition:transform .5s ease; }

/* Warstwa tekstowa — startowo ukryta, bez przyciemniania zdjęcia */
a.portfolio-item .overlay-text{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:flex-end;
  padding:clamp(12px, 3vw, 28px);
  pointer-events:none;
  z-index:2;
  background:none !important;   /* twardo — bez ciemnego tła */
  opacity:0; transition:opacity .25s ease;
}

/* Desktop: pokaż na :hover */
@media (min-width:768px){
  a.portfolio-item:hover .overlay-text{ opacity:1; }
  a.portfolio-item:hover img{ transform:scale(1.04); } /* delikatny zoom */
}

/* Mobile: pokaż, gdy JS doda .inview */
@media (max-width:767.98px){
  a.portfolio-item.inview .overlay-text{ opacity:1; }
}

/* Wewnątrz napisu */
a.portfolio-item .overlay-text .dp-inner{
  max-width:28ch;
  margin-left:auto;  /* wyrównanie do prawej krawędzi kafla */
  text-align:right;
  line-height:1.1;
  white-space:normal;
  text-wrap:balance;
}

/* Tytuł — białe, grube; KAŻDE słowo w nowej linii */
.dp-title{
  display:block; margin:0 0 .35rem 0;
  color:#fff; font-weight:800;
  /* BYŁO np. clamp(22px, 5.2vw, 36px) */
  font-size: clamp(24px, 7vw, 42px);   /* większy na mobile i trochę większy max */
  letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  line-height: 1.08;
}
@media (max-width: 575.98px){
  .dp-title{ font-size: clamp(26px, 8vw, 44px); }
}
.dp-title .dp-word{
  display:block;                     /* ← nowa linia dla każdego słowa */
  opacity:0; transform:translateX(-14px);
  transition:transform .45s cubic-bezier(.2,.65,.2,1), opacity .45s ease;
}

/* CTA „Zobacz” — zwykły tekst (nie link), biały */
.dp-cta{
  display:block;
  color:#fff;
  font-weight:700;
  font-size:clamp(14px, 3.8vw, 18px);
  letter-spacing:.12em;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
  opacity:0; transform:translateX(-14px);
  transition:transform .45s cubic-bezier(.2,.65,.2,1), opacity .45s ease;
}

/* Animacja: desktop (hover) */
@media (min-width:768px){
  a.portfolio-item:hover .dp-title .dp-word,
  a.portfolio-item:hover .dp-cta{
    opacity:1; transform:translateX(0);
  }
}

/* Animacja: mobile (po wejściu w viewport -> .inview) */
@media (max-width:767.98px){
  a.portfolio-item.inview .dp-title .dp-word,
  a.portfolio-item.inview .dp-cta{
    opacity:1; transform:translateX(0);
  }
}

/* Sekwencer opóźnień (słowa tytułu wjeżdżają po kolei) */
.dp-title .dp-word:nth-child(1){ transition-delay:.00s; }
.dp-title .dp-word:nth-child(2){ transition-delay:.05s; }
.dp-title .dp-word:nth-child(3){ transition-delay:.10s; }
.dp-title .dp-word:nth-child(4){ transition-delay:.15s; }
.dp-title .dp-word:nth-child(5){ transition-delay:.20s; }
.dp-cta{ transition-delay:.28s; }

/* Preferencje ograniczonego ruchu */
@media (prefers-reduced-motion:reduce){
  .dp-title .dp-word, .dp-cta{ transition:none; transform:none; opacity:1; }
  a.portfolio-item .overlay-text{ opacity:1; }
}

/* --------- 4) PUBLIKACJE --------- */
.publikacje .img-fluid{ display:block; }
.publikacje .mt-2 a{ display:inline-block; padding-bottom:20px; }
.projekt-publikacja{ padding-bottom:100px; }

/* --------- 5) STOPKA --------- */
.stopka-tlo{
  background-color:#895233;
  color:#fff;
  position:relative; overflow:hidden;
}
.stopka-tlo::before{
  content:'dp.';
  position:absolute; inset:0;
  margin:auto; width:max-content; height:max-content;
  top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:"League Spartan", sans-serif;
  font-size:28rem; font-weight:900; line-height:1;
  color:rgba(255,255,255,.04); z-index:0; pointer-events:none;
}
.stopka-tresc{ position:relative; z-index:1; }
.stopka-tlo, .stopka-tlo p, .stopka-tlo a, .stopka-tlo span{ color:#fff!important; }

/* --------- 6) FAQ (ogólne) --------- */
#faq h2{ font-weight:600; font-size:1.75rem; margin-bottom:1.5rem; }
#faq .accordion-item{ border:none; border-bottom:1px solid #ddd; border-radius:0; background:transparent; }
#faq .accordion-button{
  background:transparent; color:#000; font-weight:500; padding-left:0;
  box-shadow:none; border-radius:0; transition:color .2s ease;
}
#faq .accordion-button:hover,
#faq .accordion-button:focus{ color:#990000; background:transparent; box-shadow:none; }
#faq .accordion-button:not(.collapsed){ color:#990000; background:transparent; box-shadow:none; }
#faq .accordion-body{ padding-left:0; color:#333; line-height:1.6; font-size:1rem; }
#faq .accordion-button::after{
  filter: invert(20%) sepia(90%) saturate(7500%) hue-rotate(350deg) brightness(80%) contrast(90%);
}

/* --------- 7) FAQ (realizacje) — spójne z #c5cba2 --------- */
#faq-realizacje h2{ font-weight:600; font-size:1.25rem; margin-bottom:1.5rem; color:#000; }
#faq-realizacje .accordion-item{ border:none; border-bottom:1px solid #ddd; background:transparent; }
#faq-realizacje .accordion-button{
  background:transparent; color:#000; font-weight:500; padding-left:0;
  box-shadow:none; border-radius:0; transition:color .2s ease;
}
#faq-realizacje .accordion-button:hover,
#faq-realizacje .accordion-button:focus{ color:#815539; background:transparent; box-shadow:none; }
#faq-realizacje .accordion-button:not(.collapsed){ color:#815539; background:transparent; box-shadow:none; }
#faq-realizacje .accordion-body{ padding-left:0; color:#333; line-height:1.6; font-size:1rem; }
#faq-realizacje .accordion-button::after{
  filter: invert(73%) sepia(19%) saturate(236%) hue-rotate(34deg) brightness(92%) contrast(88%);
}

/* --------- 8) DROBIAZGI / PORZĄDKI --------- */
/* Jeśli stare tooltipy niepotrzebne – można odkomentować: */
/* .tooltip, .tooltip-inner, #cursor-tooltip{ display:none!important; } */

/* ===== MOBILE: overlay widoczny tylko gdy .inview, wjazd z lewej krawędzi ===== */
@media (max-width: 767.98px){
  /* Overlay ukryty dopóki kafel nie jest w kadrze */
  a.portfolio-item .overlay-text{
    opacity: 0 !important;
    transition: opacity .28s ease;
  }
  a.portfolio-item.inview .overlay-text{
    opacity: 1 !important;
  }

  /* Start naprawdę spoza ekranu — jednostki viewportu, nie px */
  .portfolio-item .dp-title .dp-word,
  .portfolio-item .dp-cta{
    opacity: 0;
    transform: translateX(-40vw);          /* wyjedź z lewej krawędzi ekranu */
    transition: transform .7s cubic-bezier(.2,.65,.2,1), opacity .7s ease;
    will-change: transform, opacity;
  }

  /* Po wejściu kafla w kadr */
  .portfolio-item.inview .dp-title .dp-word,
  .portfolio-item.inview .dp-cta{
    opacity: 1;
    transform: translateX(0);
  }

  /* Sekwencja – nie wszystkie naraz */
  .portfolio-item.inview .dp-title .dp-word:nth-child(1){ transition-delay: .00s; }
  .portfolio-item.inview .dp-title .dp-word:nth-child(2){ transition-delay: .10s; }
  .portfolio-item.inview .dp-title .dp-word:nth-child(3){ transition-delay: .20s; }
  .portfolio-item.inview .dp-title .dp-word:nth-child(4){ transition-delay: .30s; }
  .portfolio-item.inview .dp-title .dp-word:nth-child(5){ transition-delay: .40s; }
  .portfolio-item.inview .dp-cta{ transition-delay: .55s; }
}