/* ============================================================
   Suzana Hrabrić - telo početne strane
   Hero je u zasebnom fajlu hero.css
   Bez ijedne heks vrednosti. Sve boje dolaze iz tokeni.css
   ============================================================ */

/* ---------------- nadnaslov sekcije ---------------- */
.b-oko{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.73rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--boja-akcenat);margin:0 0 22px;
}
.b-oko::before{content:"";width:30px;height:2px;background:currentColor;border-radius:2px}
.b-kredibilitet .b-oko{color:var(--boja-osnovna-meka)}

/* ---------------- naslov sekcije ---------------- */
.b-zaglavlje{margin-bottom:clamp(30px,4vw,52px)}
.b-zaglavlje h2{margin-bottom:14px;max-width:34ch}
.b-zaglavlje h2 em{font-style:italic;color:var(--boja-toplo)}
.b-zaglavlje .uvodni{margin-bottom:0;max-width:68ch}

/* ---------------- tri krovne usluge ---------------- */
.b-usluge{border-top:1px solid var(--ivica)}
.b-usluga{
  display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,54px);
  align-items:start;padding:clamp(28px,4vw,44px) 0;border-bottom:1px solid var(--ivica);
  color:inherit;transition:.22s ease;position:relative;
}
.b-usluga::before{
  content:"";position:absolute;inset:0 -24px;background:var(--boja-osnovna-najblaza);
  border-radius:var(--r);opacity:0;transition:.22s ease;z-index:0;
}
.b-usluga:hover::before{opacity:1}
.b-usluga>*{position:relative;z-index:1}
.b-broj{
  font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1;
  color:var(--boja-osnovna-meka);font-variant-numeric:tabular-nums;padding-top:4px;
}
.b-usluga h3{font-size:clamp(1.35rem,2.4vw,1.9rem);margin-bottom:10px}
.b-usluga .opis{color:var(--tekst-blag);max-width:60ch;margin-bottom:16px}
.b-cipovi{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.b-cipovi li{
  margin:0;font-size:.82rem;padding:6px 13px;border-radius:var(--r-pilula);
  background:var(--boja-akcenat-blaga);color:var(--boja-akcenat);
}
.b-strelica{
  width:52px;height:52px;border-radius:50%;border:1px solid var(--ivica-jaca);
  display:grid;place-items:center;flex:none;transition:.22s ease;background:var(--povrsina);
}
.b-strelica svg{width:19px;height:19px;color:var(--boja-osnovna)}
.b-usluga:hover .b-strelica{background:var(--boja-osnovna);border-color:var(--boja-osnovna)}
.b-usluga:hover .b-strelica svg{color:var(--na-tamnom)}

/* ---------------- teme ---------------- */
.b-teme{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ivica);border:1px solid var(--ivica);border-radius:var(--r);overflow:hidden}
.b-tema{
  background:var(--povrsina);padding:clamp(24px,3vw,34px);display:flex;gap:18px;
  align-items:flex-start;color:inherit;transition:.2s ease;
}
.b-tema:hover{background:var(--boja-osnovna-najblaza)}
.b-tema .slicica{width:74px;height:74px;border-radius:var(--r-s);overflow:hidden;flex:none;background:var(--pozadina-3)}
.b-tema .slicica img{width:100%;height:100%;object-fit:cover}
.b-tema .oznaka{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--boja-akcenat);margin-bottom:7px;
}
.b-tema h4{font-size:1.14rem;margin-bottom:6px}
.b-tema p{font-size:.9rem;color:var(--tekst-blag);margin:0}

/* ---------------- tamni blok sa kredibilitetom ---------------- */
.b-kredibilitet{background:var(--boja-osnovna-tamna);color:var(--na-tamnom);position:relative;overflow:hidden}
.b-kredibilitet::before{
  content:"";position:absolute;right:-140px;top:-140px;width:520px;height:520px;border-radius:50%;
  border:1px solid var(--na-tamnom-ivica);
}
.b-kredibilitet .omot{position:relative;z-index:2}
.b-kred-mreza{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,70px);align-items:center}
.b-kred-slika{position:relative}
.b-kred-slika img{width:100%;border-radius:var(--r-xl);aspect-ratio:1/1;object-fit:cover;object-position:50% 26%}
.b-kred-slika .potpis{
  position:absolute;left:18px;bottom:18px;right:18px;background:var(--veo-tamni-jak);
  border-radius:var(--r-s);padding:12px 16px;backdrop-filter:blur(6px);
}
.b-kred-slika .potpis b{display:block;font-family:var(--serif);font-size:1rem;color:var(--na-tamnom)}
.b-kred-slika .potpis span{display:block;font-size:.78rem;color:var(--na-tamnom-blag);margin-top:2px}
.b-kredibilitet h2{color:var(--na-tamnom);max-width:26ch}
.b-kredibilitet h2 em{color:var(--boja-osnovna-meka);font-style:italic}
.b-tacke{list-style:none;padding:0;margin:26px 0 0}
.b-tacke li{
  margin:0;padding:16px 0;border-top:1px solid var(--na-tamnom-ivica);
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
}
.b-tacke li:last-child{border-bottom:1px solid var(--na-tamnom-ivica)}
.b-tacke svg{width:21px;height:21px;color:var(--boja-osnovna-meka);margin-top:3px}
.b-tacke b{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--na-tamnom)}
.b-tacke span{display:block;font-size:.88rem;line-height:1.5;color:var(--na-tamnom-blag);margin-top:3px}

/* ---------------- pitanja ---------------- */
.b-pitanja{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.b-pitanje{
  background:var(--povrsina);border:1px solid var(--ivica);border-radius:var(--r);
  padding:22px 24px;display:flex;flex-direction:column;color:inherit;transition:.2s ease;
}
.b-pitanje:hover{border-color:var(--boja-osnovna-ivica);box-shadow:var(--senka-s);transform:translateY(-2px)}
.b-pitanje .p{font-family:var(--serif);font-size:1.06rem;line-height:1.35;color:var(--boja-osnovna);margin-bottom:8px}
.b-pitanje .o{font-size:.88rem;color:var(--tekst-blag);margin:0 0 14px}
.b-pitanje .v{margin-top:auto;font-size:.83rem;font-weight:600;color:var(--boja-akcenat);display:inline-flex;align-items:center;gap:7px}
.b-pitanje .v::after{content:"\2192";transition:.2s}
.b-pitanje:hover .v::after{transform:translateX(4px)}

/* ---------------- citat ---------------- */
.b-citat{
  border-left:3px solid var(--boja-osnovna-ivica);padding:8px 0 8px clamp(20px,3vw,34px);
  margin:0;
}
.b-citat p{
  font-family:var(--serif);font-size:clamp(1.25rem,2.4vw,1.75rem);line-height:1.42;
  font-style:italic;color:var(--boja-osnovna);margin:0 0 14px;
}
.b-citat cite{font-style:normal;font-size:.85rem;font-weight:600;color:var(--tekst-blag)}
.citat-ispod{margin-top:clamp(30px,4vw,48px);max-width:74ch}

/* ---------------- zavrsni poziv ---------------- */
.b-poziv{
  background:var(--boja-osnovna);color:var(--na-tamnom);border-radius:var(--r-xl);
  padding:clamp(34px,5vw,62px);display:grid;grid-template-columns:1.2fr .8fr;
  gap:clamp(24px,4vw,50px);align-items:center;position:relative;overflow:hidden;
}
.b-poziv::before{
  content:"";position:absolute;left:-90px;bottom:-120px;width:340px;height:340px;
  border-radius:50%;border:1px solid var(--na-tamnom-ivica);
}
.b-poziv>*{position:relative;z-index:2}
.b-poziv h2{color:var(--na-tamnom);margin-bottom:12px;max-width:18ch}
.b-poziv h2 em{color:var(--boja-osnovna-meka);font-style:italic}
.b-poziv p{color:var(--na-tamnom-blag);margin:0}
.b-poziv .red-dugmadi{margin-top:0;justify-content:flex-end}

/* ---------------- responzivno ---------------- */
@media(max-width:1000px){
  .b-kred-mreza{grid-template-columns:1fr}
  .b-poziv{grid-template-columns:1fr}
  .b-poziv .red-dugmadi{justify-content:flex-start}
}
@media(max-width:820px){
  .b-teme{grid-template-columns:1fr}
  .b-pitanja{grid-template-columns:1fr}
}
@media(max-width:620px){
  .b-usluga{grid-template-columns:auto 1fr;gap:16px}
  .b-upisi .polje{flex-direction:column}
  .b-upisi .dugme{justify-content:center}
  .klipovi-traka{grid-auto-columns:minmax(240px,1fr)}
  .klipovi-strelice{display:none}
  .b-strelica{grid-column:1 / -1;margin-top:4px}
  .b-tema{flex-direction:column;gap:14px}
}


/* ---------------- polje za sopstveno pitanje ---------------- */
.b-upisi{
  margin-top:clamp(26px,3.4vw,42px);background:var(--povrsina);
  border:1px solid var(--ivica);border-radius:var(--r);padding:clamp(22px,3vw,30px);
  box-shadow:var(--senka-s);
}
.b-upisi label{
  display:block;font-family:var(--sans);font-size:.78rem;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--boja-akcenat);margin-bottom:12px;
}
.b-upisi .polje{display:flex;gap:12px;align-items:stretch}
.b-upisi input{
  flex:1;font-family:var(--sans);font-size:1rem;padding:15px 18px;
  border:1px solid var(--ivica-jaca);border-radius:var(--r-s);background:var(--pozadina);
  color:var(--tekst);min-width:0;
}
.b-upisi input::placeholder{color:var(--tekst-blag);opacity:.75}
.b-upisi input:focus{outline:none;border-color:var(--boja-osnovna-ivica);box-shadow:0 0 0 3px var(--boja-osnovna-blaga)}
.b-upisi .dugme{flex:none;white-space:nowrap}

/* ---------------- klipovi ---------------- */
.klipovi{position:relative}
.klipovi-traka{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);gap:18px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  padding-bottom:8px;scrollbar-width:thin;
}
.klipovi-traka::-webkit-scrollbar{height:6px}
.klipovi-traka::-webkit-scrollbar-thumb{background:var(--ivica-jaca);border-radius:6px}
.klip{
  scroll-snap-align:start;appearance:none;border:1px solid var(--ivica);background:var(--povrsina);
  border-radius:var(--r);overflow:hidden;padding:0;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;transition:.22s ease;font:inherit;color:inherit;
}
.klip:hover{border-color:var(--boja-osnovna-ivica);box-shadow:var(--senka);transform:translateY(-3px)}
.klip .slika{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--pozadina-3)}
.klip .slika img{width:100%;height:100%;object-fit:cover;transition:.4s ease}
.klip .slika::after{
  content:"";position:absolute;inset:0;background:var(--veo-tamni);transition:.22s ease;
}
.klip:hover .slika img{transform:scale(1.05)}
.klip:hover .slika::after{background:var(--veo-blagi)}
.klip .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:58px;height:58px;border-radius:50%;background:var(--boja-akcenat);color:var(--na-tamnom);
  display:grid;place-items:center;box-shadow:var(--senka);transition:.22s ease;
}
.klip .play svg{width:26px;height:26px;margin-left:3px}
.klip .play.play-veza svg{width:22px;height:22px;margin-left:0}
/* korice koje su same po sebi tamne ne trpe jos jedan veo */
.klip .slika.bez-vela::after{background:transparent}
.klip:hover .slika.bez-vela::after{background:transparent}
.klip{text-decoration:none}
.klip .naslov{text-decoration:none}
.klip:hover .play{transform:translate(-50%,-50%) scale(1.08);background:var(--boja-akcenat-hover)}
.klip .trajanje{
  position:absolute;right:10px;bottom:10px;z-index:2;font-size:.72rem;font-weight:600;
  color:var(--na-tamnom);background:var(--veo-tamni-jak);padding:4px 9px;border-radius:var(--r-s);
}
.klip .telo{padding:16px 18px 20px;display:block}
.klip .emisija{
  display:block;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--boja-akcenat);margin-bottom:7px;
}
.klip .naslov{display:block;font-family:var(--serif);font-size:1.02rem;line-height:1.3;color:var(--boja-osnovna)}
.klipovi-strelice{display:flex;gap:10px;justify-content:flex-end;margin-top:16px}
.klipovi-strelice button{
  appearance:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--ivica-jaca);
  background:var(--povrsina);cursor:pointer;display:grid;place-items:center;transition:.2s ease;
}
.klipovi-strelice button:hover{background:var(--boja-osnovna);border-color:var(--boja-osnovna)}
.klipovi-strelice svg{width:18px;height:18px;color:var(--boja-osnovna)}
.klipovi-strelice button:hover svg{color:var(--na-tamnom)}
.klip-nazad svg{transform:rotate(180deg)}
.klipovi-strelice button[disabled]{opacity:.35;cursor:default}
.klipovi-strelice button[disabled]:hover{background:var(--povrsina);border-color:var(--ivica-jaca)}
.klipovi-strelice button[disabled]:hover svg{color:var(--boja-osnovna)}

/* medij sa vezom */
.medij.ima-vezu{transition:.2s ease}
.medij.ima-vezu:hover{border-color:var(--boja-osnovna-ivica);transform:translateY(-2px);box-shadow:var(--senka-s)}
.medij.ima-vezu b{color:var(--boja-osnovna)}

/* ---------------- lajtboks ---------------- */
.lajtboks{
  position:fixed;inset:0;z-index:200;background:var(--veo-tamni-jak);
  display:grid;place-items:center;padding:20px;
}
.lajtboks[hidden]{display:none}
.lajtboks .okvir{width:min(1040px,100%)}
.lajtboks .video{
  position:relative;aspect-ratio:16/9;background:var(--boja-osnovna-tamna);
  border-radius:var(--r);overflow:hidden;box-shadow:var(--senka-jaka);
}
.lajtboks iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lajtboks .naziv{color:var(--na-tamnom);font-family:var(--serif);font-size:1.05rem;margin:16px 0 0;text-align:center}
.lajtboks .zatvori{
  position:absolute;right:18px;top:14px;appearance:none;background:transparent;border:0;
  color:var(--na-tamnom);font-size:2.4rem;line-height:1;cursor:pointer;padding:6px 12px;opacity:.8;
}
.lajtboks .zatvori:hover{opacity:1}