/* ============================================================
   Drampek Nekretnine — zajednički footer
   Ubacuje se na svaku stranicu. Sve je scope-ano na .dpk-ft
   da ne dira postojeći inline CSS pojedinih stranica.
   ============================================================ */

/* omotač drži tamnu pozadinu iza "plutajuće" kartice footera
   (naslovna ima svijetli body, podstranice tamni) */
.dpk-ft-wrap{position:relative;z-index:3;background:#0B1F33}

.dpk-ft{
  position:relative;
  z-index:3;
  margin:clamp(12px,2.2vw,32px);
  padding:0;
  border:1px solid rgba(250,251,252,.08);
  border-radius:clamp(16px,2vw,28px);
  background:#081827;
  overflow:hidden;
  isolation:isolate;
  font-family:Barlow,'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:rgba(250,251,252,.62);
}

/* radijalni gradijent u pozadini (zlatni, umjesto plavog iz originala) */
.dpk-ft-grad{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(125% 125% at 50% 8%, rgba(11,31,51,.0) 46%, rgba(201,162,39,.16) 100%),
    radial-gradient(80% 60% at 12% 100%, rgba(79,109,138,.18), rgba(11,31,51,0) 70%);
}

.dpk-ft-in{
  position:relative;z-index:2;
  max-width:1560px;margin:0 auto;
  padding:clamp(40px,6vw,72px) clamp(22px,4.2vw,64px) clamp(24px,3vw,36px);
}

.dpk-ft-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(34px,4.4vw,56px);
  padding-bottom:clamp(34px,4.4vw,52px);
}
@media(min-width:720px){
  .dpk-ft-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:1080px){
  .dpk-ft-grid{grid-template-columns:1.45fr 1fr 1fr 1fr 1.1fr;gap:clamp(24px,2.6vw,52px)}
}

/* ---------- brend kolona ---------- */
.dpk-ft-brand img{width:clamp(132px,13vw,168px);height:auto}
/* Pravni podaci firme idu odmah ispod logotipa — logotip nosi brend
   „Drampek Nekretnine", a ovo je pravni subjekt iza njega. */
.dpk-ft-legal{margin-top:18px}
.dpk-ft-legal b{
  display:block;
  font-size:14.5px;font-weight:500;letter-spacing:.005em;
  color:rgba(250,251,252,.9);
}
.dpk-ft-legal span{
  display:block;margin-top:5px;
  font-size:12.5px;font-weight:300;letter-spacing:.03em;
  color:rgba(250,251,252,.45);
  font-variant-numeric:tabular-nums;
}
.dpk-ft-brand p{
  margin:22px 0 0;
  font-weight:300;font-size:14px;line-height:1.7;
  color:rgba(250,251,252,.6);max-width:36ch;
}
/* Uz pravni blok iznad, puni razmak od 22px razdvaja predaleko. */
.dpk-ft-legal + p{margin-top:16px}
.dpk-ft-cta{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:26px;padding:13px 24px;
  border-radius:999px;
  background:var(--gold,#C9A227);color:#0B1F33 !important;
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;
  transition:transform 140ms cubic-bezier(.23,1,.32,1),box-shadow 180ms ease;
}
.dpk-ft-cta svg{transition:transform 300ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover){
  .dpk-ft-cta:hover{box-shadow:0 16px 34px -16px rgba(201,162,39,.75)}
  .dpk-ft-cta:hover svg{transform:translateX(4px)}
}
.dpk-ft-cta:active{transform:scale(.97)}

/* ---------- kolone s linkovima ---------- */
.dpk-ft h4{
  margin:0 0 22px;
  font-family:Jost,sans-serif;font-weight:400;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--gold,#C9A227);
}
.dpk-ft ul{margin:0;padding:0;list-style:none}
.dpk-ft li{margin:0 0 13px}
.dpk-ft li:last-child{margin-bottom:0}

.dpk-ft a.dpk-ft-l{
  display:inline-block;
  color:rgba(250,251,252,.62);text-decoration:none;
  font-weight:300;font-size:14.5px;line-height:1.45;
  transition:color 180ms ease,transform 180ms cubic-bezier(.23,1,.32,1);
}
@media(hover:hover){
  .dpk-ft a.dpk-ft-l:hover{color:var(--gold,#C9A227);transform:translateX(3px)}
}
.dpk-ft a.dpk-ft-l:focus-visible,
.dpk-ft a.dpk-ft-cta:focus-visible,
.dpk-ft a.dpk-ft-soc:focus-visible{outline:2px solid var(--gold,#C9A227);outline-offset:3px;border-radius:4px}

/* stavke koje još nemaju stranicu */
.dpk-ft .dpk-ft-wip{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-weight:300;font-size:14.5px;line-height:1.45;
  color:rgba(250,251,252,.34);
  cursor:default;
}
.dpk-ft .dpk-ft-tag{
  flex:0 0 auto;
  padding:3px 8px 2.5px;border-radius:999px;
  border:1px solid rgba(201,162,39,.32);
  background:rgba(201,162,39,.07);
  font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(201,162,39,.8);
}

/* ---------- kontakt kolona ---------- */
.dpk-ft .dpk-ft-c li{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.dpk-ft .dpk-ft-c svg{flex:0 0 auto;margin-top:2px;color:var(--gold,#C9A227)}

/* ---------- donja traka ---------- */
.dpk-ft-rule{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,rgba(250,251,252,.14),rgba(250,251,252,.04));
}
.dpk-ft-bot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;padding-top:clamp(22px,2.6vw,30px);
}
.dpk-ft-soc{display:flex;gap:12px}
.dpk-ft a.dpk-ft-soc{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(250,251,252,.13);
  color:rgba(250,251,252,.66);
  transition:color 180ms ease,border-color 180ms ease,background 180ms ease,transform 180ms cubic-bezier(.23,1,.32,1);
}
@media(hover:hover){
  .dpk-ft a.dpk-ft-soc:hover{
    color:var(--gold,#C9A227);
    border-color:rgba(201,162,39,.45);
    background:rgba(201,162,39,.08);
    transform:translateY(-2px);
  }
}
.dpk-ft a.dpk-ft-soc:active{transform:scale(.95)}
.dpk-ft-copy{
  margin:0;
  font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,251,252,.36);
  /* Gura sebe i potpis autora skroz desno, pa donja traka ostaje čitljiva kao
     „ikone lijevo — tekst desno". Bez ovoga bi space-between razbacao tri
     stavke na trećine i potpis bi visio u sredini. */
  margin-left:auto;
}
/* Potpis autora — tiši od autorskih prava, da ne otima pažnju. */
.dpk-ft-made{
  margin:0;
  font-size:11px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(250,251,252,.24);
}
.dpk-ft-made b{font-weight:500;color:rgba(250,251,252,.42)}
@media(max-width:720px){
  /* Na uskom ekranu red se lomi; potpis tada ide u svoj red ispod. */
  .dpk-ft-copy{margin-left:0}
  .dpk-ft-made{flex-basis:100%}
}

/* ---------- veliki wordmark s hover efektom ---------- */
.dpk-ft-word{
  position:relative;z-index:2;
  padding:0 clamp(18px,3vw,48px) clamp(14px,2vw,26px);
  line-height:0;
}
.dpk-ft-word svg{display:block;width:100%;height:auto;overflow:visible}

.dpk-ft-word .dpk-w-ghost{
  fill:transparent;
  stroke:rgba(250,251,252,.09);
  stroke-width:.7;
  opacity:0;
  transition:opacity .35s ease;
}
.dpk-ft-word.is-hover .dpk-w-ghost{opacity:1}

.dpk-ft-word .dpk-w-draw{
  fill:transparent;
  stroke:rgba(201,162,39,.42);
  stroke-width:.7;
  stroke-dasharray:var(--dpk-w-len,4200);
  stroke-dashoffset:var(--dpk-w-len,4200);
}
.dpk-ft-word.is-in .dpk-w-draw{
  animation:dpk-w-draw 3.4s cubic-bezier(.55,0,.25,1) forwards;
}
@keyframes dpk-w-draw{to{stroke-dashoffset:0}}

.dpk-ft-word .dpk-w-reveal{
  fill:transparent;
  stroke:url(#dpkWordGrad);
  stroke-width:.9;
  opacity:0;
  transition:opacity .32s ease;
}
.dpk-ft-word.is-hover .dpk-w-reveal{opacity:1}

/* Isti font kao u originalnoj komponenti: Helvetica Bold
   (na Windowsu se svodi na Arial Bold — identičan crtež slova). */
.dpk-ft-word text{
  font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  user-select:none;-webkit-user-select:none;
}

/* Na uskim ekranima natpis bi bio tanak i nečitljiv, a efekt traži miša.
   Zato ga skrivamo i vraćamo donji padding kartici. */
@media(max-width:899px){
  .dpk-ft-word{display:none}
  .dpk-ft-in{padding-bottom:clamp(34px,6vw,46px)}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .dpk-ft *{transition:none !important}
  .dpk-ft-word .dpk-w-draw{
    stroke-dashoffset:0 !important;
    animation:none !important;
  }
}


/* „Postavke kolačića" otvara modal pa je <button>, ali u koloni podnožja mora
   izgledati i ponašati se kao i poveznice oko sebe. */
/* `font:inherit` je nasljeđivao 16px s <li>, pa je dugme bilo krupnije od
   poveznica oko sebe (14.5px). Preuzimamo tipografiju .dpk-ft-l doslovno. */
.dpk-ft-ck{background:none;border:0;padding:0;cursor:pointer;color:inherit;text-align:left;
  font-family:inherit;font-weight:300;font-size:14.5px;line-height:1.45}

/* ================= MOBILNI EKRANI =================
   Na dodir je meta 44px (Apple HIG) / 48dp (Material). U podnožju su
   poveznice bile visoke 19–21px jer su `inline-block` bez vertikalnog
   paddinga — prst promaši susjedni red. Umjesto povećanja fonta (razbio bi
   ritam kolona) dajemo im vertikalni padding i skidamo razmak s <li>, pa
   ukupna visina reda ostaje ista, a dodirna ploha naraste na 44px. */
@media(max-width:720px){
  .dpk-ft li{margin-bottom:0}
  .dpk-ft li:last-child{margin-bottom:0}
  .dpk-ft a.dpk-ft-l,
  .dpk-ft .dpk-ft-ck{
    display:flex;align-items:center;
    min-height:44px;padding:5px 0;
    width:100%;
  }
  /* „U izradi" stavke nisu klikabilne, ali moraju držati isti ritam reda. */
  .dpk-ft .dpk-ft-wip{min-height:44px;padding:5px 0}

  /* 8.5px je ispod granice čitljivosti na telefonu. */
  .dpk-ft .dpk-ft-tag{font-size:10px;padding:3.5px 9px 3px}
  .dpk-ft h4{font-size:11px;letter-spacing:.2em;margin-bottom:14px}

  /* Verzal + .2em razmak na 11px se na telefonu čita kao šum; smanjujemo
     razmak i malo dižemo font umjesto da rastemo u širinu. */
  .dpk-ft-copy,.dpk-ft-made{font-size:11.5px;letter-spacing:.12em;line-height:1.6}

  /* Kontakt kolona: cijeli red (ikona + tekst) je dodirna ploha. */
  .dpk-ft .dpk-ft-c li{margin-bottom:6px}
  .dpk-ft .dpk-ft-c a{display:flex;align-items:center;min-height:44px}

  /* Puna širina dugmeta na uskom ekranu — palac ga hvata bilo gdje.
     10.5px verzal je za glavni poziv na akciju pretiho. */
  .dpk-ft-cta{width:100%;justify-content:center;min-height:48px;
    font-size:11.5px;letter-spacing:.12em}
}

/* ================= KRUPNIJI TEKST — SAMO DESKTOP =================
   Podnožje je bilo najsitniji dio stranice: naslovi kolona 10px, donja traka
   11px u verzalu s .2em razmakom, ikone 16px. Telefon se ne dira — tamo su
   veličine već podešene za dodir (blok „MOBILNI EKRANI" iznad). */
@media(min-width:721px){
  .dpk-ft h4{font-size:11.5px;letter-spacing:.22em}
  .dpk-ft a.dpk-ft-l,
  .dpk-ft .dpk-ft-wip,
  .dpk-ft .dpk-ft-ck{font-size:15.5px}
  .dpk-ft .dpk-ft-tag{font-size:9.5px}
  .dpk-ft-copy,.dpk-ft-made{font-size:12px;letter-spacing:.16em}
  .dpk-ft-cta{font-size:12px;letter-spacing:.13em}
  .dpk-ft-cta svg{width:17px;height:17px}
  /* Kontakt kolona: ikone uz telefon/e-mail/adresu. */
  .dpk-ft .dpk-ft-c svg{width:18px;height:18px}
  .dpk-ft .dpk-ft-c li{font-size:15.5px}
  .dpk-ft-legal b,.dpk-ft-legal span{font-size:13px}
  /* Društvene mreže. */
  .dpk-ft a.dpk-ft-soc svg{width:19px;height:19px}
}