/* Stranica i kviz. Tokeni dolaze iz tokens.css. */

.omotac {
  width: min(100% - 2.5rem, var(--sirina-sadrzaj));
  margin-inline: auto;
}

.omotac--usko {
  width: min(100% - 2.5rem, 46rem);
}

.veza {
  color: inherit;
  text-underline-offset: 3px;
}

/* Kontakt u podnožju je meta za palac na mobitelu, ne samo tekst — kandidat
   koji ne želi ispunjavati anketu nazove izravno. */
.podnozje__sitno .veza {
  display: inline-flex;
  align-items: center;
  min-height: var(--dodir-min);
}

/* ── Zaglavlje ───────────────────────────────────────────────────────────*/

.zaglavlje {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--razmak-m);
  padding: var(--razmak-m) clamp(1.25rem, 4vw, 3rem);
}

.zaglavlje__logo {
  width: clamp(4.5rem, 9vw, 6.5rem);
  height: auto;
}

.zaglavlje__oznaka {
  font-size: var(--tekst-mali);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--abk-accent);
}

/* ── Hero ────────────────────────────────────────────────────────────────
   Dijagonalni rez preuzet s već odobrenih vizuala kampanje. */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(100svh, 46rem);
  padding: clamp(7rem, 16vh, 11rem) 0 var(--razmak-xl);
  background: var(--abk-deep);
  color: var(--abk-paper);
  overflow: hidden;
}

/* Dijagonala i plavi klin — nose vizual dok ne dođe prava fotografija s terena. */
.hero__pozadina {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(148deg, transparent 58%, rgb(41 89 141 / 0.55) 58.15%),
    radial-gradient(120% 90% at 85% 0%, rgb(123 179 220 / 0.16), transparent 62%),
    var(--abk-deep);
}

/* Tanke linije — inženjerski papir, ne dekoracija radi dekoracije. */
.hero__pozadina::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(123 179 220 / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(123 179 220 / 0.07) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: linear-gradient(160deg, black 10%, transparent 68%);
}

.hero__sadrzaj {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--sirina-sadrzaj));
  margin-inline: auto;
}

.hero__nadnaslov {
  margin: 0 0 var(--razmak-xs);
  font-size: var(--tekst-srednji);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--abk-accent);
}

.hero__naslov {
  font-size: var(--tekst-hero);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-block-end: var(--razmak-s);
}

/* Naziv pozicije u dva reda: "Monter" nosi udar, struka ga precizira bez
   da razbije veličinu naslova. */
.hero__naslov-dopuna {
  display: block;
  font-size: clamp(1.25rem, 0.7rem + 2.2vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--abk-accent);
}

.hero__struke {
  margin: 0 0 var(--razmak-l);
  padding-block-start: var(--razmak-s);
  border-block-start: 2px solid var(--abk-primary);
  display: inline-block;
  font-size: var(--tekst-srednji);
  font-weight: 500;
  letter-spacing: 0.01em;
}

.hero__struke span {
  color: var(--abk-accent);
  padding-inline: 0.15em;
}

.hero__cinjenice {
  display: flex;
  flex-wrap: wrap;
  gap: var(--razmak-l);
  margin: 0 0 var(--razmak-l);
  padding: 0;
}

.cinjenica dt {
  font-size: var(--tekst-mali);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--abk-mute-svijetli);
}

.cinjenica dd {
  margin: 0.15rem 0 0;
  font-family: var(--font-naslov);
  font-size: var(--tekst-osnovni);
  font-weight: 600;
}

.hero__potpis {
  margin: var(--razmak-s) 0 0;
  font-size: var(--tekst-mali);
  color: var(--abk-mute-svijetli);
}

/* ── Gumbi ───────────────────────────────────────────────────────────────*/

.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--dodir-min);
  padding: 0.9rem 2rem;
  border: 0;
  border-radius: var(--radijus-gumb);
  background: var(--abk-primary);
  color: var(--abk-bijela);
  font-family: var(--font-naslov);
  font-size: var(--tekst-osnovni);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--trajanje-brzo) ease,
    transform var(--trajanje-brzo) var(--ease-izlaz),
    box-shadow var(--trajanje-normalno) var(--ease-izlaz);
}

.gumb:hover {
  background: var(--abk-primary-tamna);
  transform: translateY(-2px);
  box-shadow: var(--sjena-podignuta);
}

.gumb:active {
  transform: translateY(0);
}

.gumb:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}

.gumb--glavni {
  padding-inline: clamp(2rem, 6vw, 3.5rem);
  font-size: var(--tekst-srednji);
}

.gumb--dalje,
.gumb--posalji {
  margin-block-start: var(--razmak-m);
}

/* ── Kviz ────────────────────────────────────────────────────────────────*/

.kviz {
  width: min(100% - 2.5rem, var(--sirina-kviz));
  margin-inline: auto;
  padding-block: var(--razmak-xl);
  scroll-margin-block-start: var(--razmak-m);
}

.kviz[hidden] {
  display: none;
}

/* Anketa je namjerno sama na ekranu: bez slike, bez videa, bez ičega uz
   pitanja. Kandidat je ovdje došao odgovarati, a svaki dodatni element na
   mobitelu gura pitanje ispod pregiba. */

.kviz__vrh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--razmak-s);
  min-height: var(--dodir-min);
}

.natrag {
  min-height: var(--dodir-min);
  padding: 0.5rem 0.75rem 0.5rem 0;
  border: 0;
  background: none;
  color: var(--abk-primary);
  font-size: var(--tekst-mali);
  font-weight: 500;
  cursor: pointer;
}

.natrag:hover {
  text-decoration: underline;
}

.kviz__brojac {
  margin-inline-start: auto;
  font-family: var(--font-naslov);
  font-size: var(--tekst-mali);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--abk-mute);
}

.traka {
  --napredak: 0%;
  height: 6px;
  margin-block: var(--razmak-s) var(--razmak-l);
  background: var(--abk-line-svijetla);
  border-radius: 999px;
  overflow: hidden;
}

.traka__ispuna {
  display: block;
  height: 100%;
  width: var(--napredak);
  background: var(--abk-primary);
  transition: width var(--trajanje-normalno) var(--ease-izlaz);
}

/* ── Korak ───────────────────────────────────────────────────────────────*/

.korak {
  animation: ulaz var(--trajanje-normalno) var(--ease-izlaz);
}

@keyframes ulaz {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.korak {
  animation: korak-ulaz var(--trajanje-normalno) var(--ease-izlaz) both;
}

@keyframes korak-ulaz {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

.korak__pitanje {
  font-size: var(--tekst-pitanje);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-block-end: var(--razmak-m);
}

.korak__pitanje:focus {
  outline: none;
}

.korak__pomoc {
  margin: calc(var(--razmak-m) * -1) 0 var(--razmak-m);
  font-size: var(--tekst-mali);
  color: var(--abk-mute);
}

.korak__podnozje {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--razmak-xs);
}

/* ── Opcije ──────────────────────────────────────────────────────────────*/

.opcije {
  display: grid;
  gap: 0.625rem;
}

.opcije--uski {
  gap: 0.5rem;
}

.opcija {
  display: flex;
  align-items: center;
  gap: var(--razmak-s);
  width: 100%;
  min-height: var(--dodir-min);
  padding: 0.875rem var(--razmak-m);
  border: 1.5px solid var(--abk-line-svijetla);
  border-radius: var(--radijus-m);
  background: var(--abk-bijela);
  text-align: start;
  cursor: pointer;
  transition:
    border-color var(--trajanje-brzo) ease,
    background var(--trajanje-brzo) ease,
    transform var(--trajanje-brzo) var(--ease-izlaz);
}

.opcija:hover {
  border-color: var(--abk-primary);
  transform: translateX(3px);
}

.opcija[aria-checked="true"] {
  border-color: var(--abk-primary);
  background: rgb(41 89 141 / 0.08);
  box-shadow: inset 3px 0 0 var(--abk-primary);
}

.opcija__tekst {
  font-size: var(--tekst-osnovni);
  line-height: 1.35;
}

.opcija__krug,
.opcija__kvadrat {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  border: 2px solid var(--abk-mute);
  display: grid;
  place-items: center;
  transition: border-color var(--trajanje-brzo) ease;
}

.opcija__krug {
  border-radius: 50%;
}

.opcija__kvadrat {
  border-radius: var(--radijus-s);
}

.opcija[aria-checked="true"] .opcija__krug,
.opcija[aria-checked="true"] .opcija__kvadrat {
  border-color: var(--abk-primary);
}

.opcija[aria-checked="true"] .opcija__krug::after {
  content: "";
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--abk-primary);
}

.opcija[aria-checked="true"] .opcija__kvadrat::after {
  content: "";
  width: 0.75rem;
  height: 0.4375rem;
  border: 2.5px solid var(--abk-primary);
  border-block-start: 0;
  border-inline-end: 0;
  transform: rotate(-45deg) translate(1px, -2px);
}

/* ── Polja ───────────────────────────────────────────────────────────────*/

.polje {
  margin-block-end: var(--razmak-m);
}

.polje--skupina {
  border: 0;
  padding: 0;
  margin-inline: 0;
}

.polje__oznaka {
  display: block;
  margin-block-end: var(--razmak-xs);
  font-size: var(--tekst-mali);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--abk-mute);
}

.polje__unos {
  width: 100%;
  min-height: var(--dodir-min);
  padding: 0.75rem var(--razmak-m);
  border: 1.5px solid var(--abk-line-svijetla);
  border-radius: var(--radijus-m);
  background: var(--abk-bijela);
  font-family: inherit;
  font-size: var(--tekst-osnovni);
  color: inherit;
  transition: border-color var(--trajanje-brzo) ease;
}

.polje__unos:hover,
.polje__unos:focus {
  border-color: var(--abk-primary);
}

/* ── Privola ─────────────────────────────────────────────────────────────*/

.privola {
  display: flex;
  gap: var(--razmak-s);
  align-items: flex-start;
  padding: var(--razmak-m);
  border: 1.5px solid var(--abk-line-svijetla);
  border-radius: var(--radijus-m);
  background: var(--abk-bijela);
  cursor: pointer;
}

.privola__kvacica {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--abk-primary);
  cursor: pointer;
}

.privola__tekst {
  font-size: var(--tekst-mali);
  line-height: 1.55;
  color: var(--abk-mute);
}

.greska {
  margin: 0;
  font-size: var(--tekst-mali);
  font-weight: 500;
  color: var(--abk-signal);
}

/* ── Hvala ───────────────────────────────────────────────────────────────*/

.korak--hvala {
  padding: var(--razmak-xl) 0;
  border-block-start: 4px solid var(--abk-primary);
}

.hvala__tekst {
  margin: 0 0 var(--razmak-s);
  font-size: var(--tekst-srednji);
}

.hvala__tekst--sitno {
  font-size: var(--tekst-osnovni);
  color: var(--abk-mute);
}

/* ── Sekcije ─────────────────────────────────────────────────────────────*/

.sekcija__naslov {
  font-size: var(--tekst-veliki);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin-block-end: var(--razmak-l);
}

.sekcija__naslov--svijetli {
  color: var(--abk-paper);
}

.posao {
  padding-block: var(--razmak-sekcija);
  border-block-start: 1px solid var(--abk-line-svijetla);
}

.posao__mreza {
  display: grid;
  gap: var(--razmak-xl);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .posao__mreza {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}

.posao__tekst p {
  margin: 0 0 var(--razmak-m);
}

.uvod {
  font-family: var(--font-naslov);
  font-size: var(--tekst-srednji);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.posao__slika {
  margin: 0;
  background: var(--abk-bijela);
  border: 1px solid var(--abk-line-svijetla);
  border-block-start: 3px solid var(--abk-primary);
  border-radius: 0 0 var(--radijus-m) var(--radijus-m);
  overflow: hidden;
  box-shadow: var(--sjena-kartica);
}

.posao__video,
.posao__mirna {
  display: block;
  width: 100%;
  height: auto;
  background: var(--abk-bijela);
}

.posao__mirna {
  display: none;
}

.posao__slika figcaption {
  padding: var(--razmak-m);
  border-block-start: 1px solid var(--abk-line-svijetla);
  font-size: var(--tekst-mali);
  line-height: 1.5;
  color: var(--abk-mute);
}

/* Objekti — tamna traka razbija papirnati tok stranice. */
.objekti {
  padding-block: var(--razmak-sekcija);
  background: var(--abk-ink);
  color: var(--abk-paper);
}

.objekti__uvod {
  margin: calc(var(--razmak-l) * -1) 0 var(--razmak-l);
  color: var(--abk-accent);
}

.objekti__popis {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--abk-line);
}

.objekti__popis li {
  padding-block: var(--razmak-m);
  border-block-end: 1px solid var(--abk-line);
  font-family: var(--font-naslov);
  font-size: var(--tekst-srednji);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Benefiti — jedna mreža, jedan jezik dizajna, deset ravnopravnih stavki.
   Nema isticanja jedne nad drugom — sadržaj je namjerno kratak i jednak,
   pa to nosi i mreža. */
.benefiti {
  padding-block: var(--razmak-sekcija);
}

.benefiti__mreza {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--razmak-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.prednost {
  display: flex;
  align-items: center;
  padding: var(--razmak-m) var(--razmak-m) var(--razmak-l);
  background: var(--abk-bijela);
  border-block-start: 3px solid var(--abk-primary);
  border-radius: 0 0 var(--radijus-m) var(--radijus-m);
  box-shadow: var(--sjena-kartica);
  font-size: var(--tekst-osnovni);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* ── Poziv ───────────────────────────────────────────────────────────────*/

.poziv {
  padding-block: var(--razmak-sekcija);
  background: var(--abk-primary);
  color: var(--abk-bijela);
  text-align: center;
}

.poziv__naslov {
  font-size: var(--tekst-veliki);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-block-end: var(--razmak-m);
}

.poziv__tekst {
  margin: 0 auto var(--razmak-l);
  max-width: 34rem;
}

.poziv .gumb--glavni {
  background: var(--abk-bijela);
  color: var(--abk-primary);
}

.poziv .gumb--glavni:hover {
  background: var(--abk-paper);
}

/* ── Podnožje ────────────────────────────────────────────────────────────*/

.podnozje {
  padding-block: var(--razmak-l);
  background: var(--abk-ink);
  color: var(--abk-paper);
}

.podnozje__mreza {
  display: flex;
  flex-wrap: wrap;
  gap: var(--razmak-m) var(--razmak-xl);
  justify-content: space-between;
}

.podnozje__ime {
  margin: 0;
  font-family: var(--font-naslov);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.podnozje__sitno {
  margin: 0.25rem 0 0;
  font-size: var(--tekst-mali);
  color: var(--abk-mute-svijetli);
}

.podnozje__sitno .veza {
  color: var(--abk-accent);
}

/* ── Vlastiti odgovor ──────────────────────────────────────────────────────
   Polje ispod ponuđenih opcija, otvara se tek kad kandidat odabere
   "Nešto drugo". Uvučeno je da se vidi da pripada toj opciji. */

.opcije__omotac {
  display: grid;
  gap: var(--razmak-s);
}

.slobodno {
  padding-inline-start: var(--razmak-m);
  border-inline-start: 3px solid var(--abk-primary);
}

.slobodno[hidden] {
  display: none;
}

/* ── Postupak prijave ──────────────────────────────────────────────────────
   Numeracija je ovdje stvarna informacija — koraci se odvijaju tim redom,
   pa brojevi nose značenje, a ne ukras. */

.postupak {
  padding-block: var(--razmak-xl);
  background: var(--abk-bijela);
  border-block: 1px solid var(--abk-line-svijetla);
}

.postupak__uvod {
  margin: 0 0 var(--razmak-l);
  max-width: 40ch;
  font-size: var(--tekst-srednji);
  color: var(--abk-mute);
}

.postupak__koraci {
  display: grid;
  gap: var(--razmak-l);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.postupak__korak {
  padding-block-start: var(--razmak-s);
  border-block-start: 3px solid var(--abk-primary);
}

.postupak__broj {
  display: block;
  font-family: var(--font-naslov);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--abk-line-svijetla);
}

.postupak__korak h3 {
  margin: var(--razmak-xs) 0 0.35rem;
  font-size: var(--tekst-osnovni);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.postupak__korak p {
  margin: 0;
  font-size: var(--tekst-mali);
  line-height: 1.6;
  color: var(--abk-mute);
}

/* ── Zamka za robote ──────────────────────────────────────────────────────
   Polje koje čovjek ne vidi i ne može ga dohvatiti tipkovnicom. Roboti koji
   ispunjavaju sva polja odaju se time što ga popune. Ne koristi se
   display:none — dio robota preskače skrivena polja. */
.zamka {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}