/* ============================================================
   Hero početne strane
   Tekst iz varijante "Tipografija", raspored iz varijante "Tri ulaza".
   Bez fotografije.
   Bez ijedne heks vrednosti. Sve boje dolaze iz tokeni.css
   ============================================================ */

.hero-v{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg, var(--pozadina), var(--pozadina-2));
  padding:clamp(52px,7vw,96px) 0 clamp(40px,5vw,64px);
}
.hero-v::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:linear-gradient(90deg, var(--ivica) 1px, transparent 1px);
  background-size:calc(100% / 6) 100%;opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 72%);
  mask-image:linear-gradient(to bottom, black, transparent 72%);
}
.hero-v .omot{position:relative;z-index:2}

.hero-mreza{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:start}
.hero-v h1{
  font-size:clamp(2rem,3.8vw,3.05rem);line-height:1.06;letter-spacing:-.02em;
  margin:0 0 20px;max-width:19ch;
}
.hero-v .podnaslov{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.3vw,1.85rem);line-height:1.2;
  color:var(--boja-toplo);margin:0 0 20px;
}
.hero-v h1 em{font-style:italic;color:var(--boja-toplo);font-weight:400}
.hero-v .uvod{color:var(--tekst-blag);font-size:1.12rem;line-height:1.66;margin:0;max-width:52ch}
.hero-v .red-dugmadi{margin-top:30px}

/* desna strana: kome se obraća */
.hero-ulazi{display:flex;flex-direction:column}
.hero-naslovcic{
  font-family:var(--sans);font-size:.73rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--boja-akcenat);margin:0 0 12px;
  padding-bottom:12px;border-bottom:1px solid var(--ivica-jaca);
}
.hero-ulaz{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:22px 4px;border-bottom:1px solid var(--ivica-jaca);color:inherit;transition:.22s ease;
}
.hero-ulaz:hover{padding-left:14px;padding-right:0}
.hero-ulaz .ik{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--boja-osnovna-ivica);
  background:var(--boja-osnovna-najblaza);display:grid;place-items:center;flex:none;transition:.22s ease;
}
.hero-ulaz .ik svg{width:21px;height:21px;color:var(--boja-osnovna)}
.hero-ulaz:hover .ik{background:var(--boja-osnovna);border-color:var(--boja-osnovna)}
.hero-ulaz:hover .ik svg{color:var(--na-tamnom)}
.hero-ulaz b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--boja-osnovna);line-height:1.25}
.hero-ulaz span{display:block;font-size:.87rem;color:var(--tekst-blag);margin-top:5px;line-height:1.45}
.hero-ulaz .str{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--ivica-jaca);
  display:grid;place-items:center;flex:none;transition:.22s ease;
}
.hero-ulaz .str svg{width:17px;height:17px;color:var(--boja-osnovna)}
.hero-ulaz:hover .str{background:var(--boja-akcenat);border-color:var(--boja-akcenat)}
.hero-ulaz:hover .str svg{color:var(--na-tamnom)}

/* red sa dokazima ispod */
.hero-dokazi{
  margin-top:clamp(38px,5vw,62px);padding-top:26px;border-top:1px solid var(--ivica);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);
}
.hero-dokazi .stavka{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.hero-dokazi svg{width:22px;height:22px;color:var(--boja-akcenat);margin-top:2px;flex:none}
.hero-dokazi b{display:block;font-family:var(--serif);font-size:1.02rem;color:var(--boja-osnovna);line-height:1.3}
.hero-dokazi span{display:block;font-size:.86rem;color:var(--tekst-blag);line-height:1.45;margin-top:3px}

/* ---------------- responzivno ---------------- */
@media(max-width:1000px){
  .hero-mreza{grid-template-columns:1fr;gap:38px}
}
@media(max-width:760px){
  .hero-v::before{display:none}
  .hero-dokazi{grid-template-columns:1fr;gap:20px}
}
@media(max-width:520px){
  .hero-v .dugme{width:100%;justify-content:center}
  .hero-ulaz{grid-template-columns:auto 1fr;gap:14px}
  .hero-ulaz .str{display:none}
}