/* Učilište Kalelarga, prijedlog novog weba
   Izrada: Tvornica bitova, listopad 2026. */

:root {
  --bijela: #FDFDFC;
  --siva: #EEF0F2;
  --siva-2: #E1E4E8;
  --crta: #D3D7DC;
  --tinta: #1F2328;
  --tinta-2: #5A6069;
  --crvena: #C62619;
  --crvena-tamna: #A11E13;
  --crvena-svijetla: #FBEAE7;

  --font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --r: 6px;
  --sirina: 1200px;
  --rub: clamp(16px, 4vw, 32px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --z-sticky: 20;
  --z-izbornik: 30;
  --z-dock: 40;
}

html.vece-slovo { font-size: 118.75%; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bijela);
  color: var(--tinta);
  font-family: var(--font);
  font-size: 1.1875rem;
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
h2 { font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 700; }
h3 { font-size: 1.375rem; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--crvena); text-underline-offset: 0.16em; }
a:hover { color: var(--crvena-tamna); }

:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.traka :focus-visible { outline-color: var(--bijela); }

.wrap { max-width: var(--sirina); margin: 0 auto; padding: 0 var(--rub); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.preskoci {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--tinta); color: var(--bijela); padding: 12px 18px; border-radius: var(--r);
  font-weight: 700; text-decoration: none;
}
.preskoci:focus { top: 12px; color: var(--bijela); }

.ph { font-size: 1.2em; line-height: 1; vertical-align: -0.16em; }

/* Gumbi */
.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 12px 24px;
  border: 2px solid transparent; border-radius: var(--r);
  font: inherit; font-size: 1.125rem; font-weight: 700; line-height: 1.2; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.gumb-glavni { background: var(--crvena); color: #FFFFFF; }
.gumb-glavni:hover { background: var(--crvena-tamna); color: #FFFFFF; }
.gumb-obrub { background: var(--bijela); color: var(--tinta); border-color: var(--tinta); }
.gumb-obrub:hover { background: var(--tinta); color: var(--bijela); }

/* Gornja traka */
.traka { background: var(--tinta); color: #E6E8EB; font-size: 0.9375rem; border-top: 4px solid var(--crvena); }
.traka .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.traka a { color: #E6E8EB; text-decoration: none; }
.traka a:hover { color: #FFFFFF; text-decoration: underline; }
.traka-lijevo, .traka-desno { display: flex; align-items: center; gap: 24px; }
.slova {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 1px 10px;
  background: transparent; color: #E6E8EB; border: 1px solid #5B6169; border-radius: 4px;
  font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.slova:hover { border-color: #FFFFFF; color: #FFFFFF; }
.slova[aria-pressed="true"] { background: #FFFFFF; color: var(--tinta); }
@media (max-width: 760px) { .traka .sakrij { display: none; } }

/* Zaglavlje i glavni izbornik */
.zaglavlje {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--bijela); border-bottom: 1px solid var(--crta);
}
.zaglavlje > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.logo { display: block; flex-shrink: 0; }
.logo img { width: 196px; height: auto; }
.nav { display: flex; align-items: center; gap: 20px; }
.nav-razina { list-style: none; display: flex; align-items: center; gap: 4px; }
.nav-razina > li > a, .nav-gumb {
  display: flex; align-items: center; gap: 4px; min-height: 80px; padding: 0 10px;
  background: none; border: 0; border-bottom: 3px solid transparent; border-top: 3px solid transparent;
  color: var(--tinta); font: inherit; font-size: 1.0625rem; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav-gumb .ph { font-size: 0.875rem; transition: transform 150ms var(--ease-out); }
.nav-gumb[aria-expanded="true"] .ph { transform: rotate(180deg); }
.nav-razina > li > a:hover, .nav-gumb:hover, .nav-gumb[aria-expanded="true"] { border-bottom-color: var(--crvena); color: var(--tinta); }
.nav-razina [aria-current="page"], .nav-gumb.aktivno { border-bottom-color: var(--crvena); }
.nav-razina > li > a:focus-visible, .nav-gumb:focus-visible { outline: 3px solid var(--tinta); outline-offset: -3px; border-radius: 4px; }
.nav-prijava { min-height: 46px; padding: 10px 20px; }

.podizbornik { display: none; }
.nav-gumb[aria-expanded="true"] + .podizbornik { display: block; }
.podizbornik ul { list-style: none; display: grid; gap: 2px; }
.podizbornik a { display: block; padding: 5px 0; line-height: 1.35; color: var(--tinta); text-decoration: none; }
.podizbornik a:hover { color: var(--crvena); text-decoration: underline; text-underline-offset: 0.16em; }
.pod-naslov { font-size: 1rem; font-weight: 700; color: var(--tinta-2); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--crta); }
.pod-sve { font-weight: 700; color: var(--crvena) !important; }
.pod-savjet img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: 12px; }
.pod-savjet p { color: var(--tinta-2); font-size: 1.0625rem; }
.pod-savjet strong { color: var(--tinta); }
.pod-savjet a { display: inline; padding: 0; color: var(--crvena); font-weight: 700; }

@media (min-width: 1181px) {
  .ima-pod { position: static; }
  .podizbornik {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bijela); border-top: 1px solid var(--crta); border-bottom: 1px solid var(--crta);
    box-shadow: 0 8px 8px rgba(31, 35, 40, 0.06);
  }
  .pod-mreza { display: grid; grid-template-columns: 0.9fr 1.7fr 0.9fr; gap: 56px; padding-top: 32px; padding-bottom: 36px; }
  .podizbornik .pod-dva-stupca { display: block; columns: 2; column-gap: 40px; }
  .pod-dva-stupca li { break-inside: avoid; }
  .ima-pod:has(.podizbornik-uski) { position: relative; }
  .podizbornik-uski { left: 0; right: auto; min-width: 260px; padding: 14px 22px; border: 1px solid var(--crta); border-radius: 0 0 var(--r) var(--r); }
}
.izbornik-gumb {
  display: none; align-items: center; gap: 8px; min-height: 46px; padding: 8px 14px;
  background: var(--bijela); border: 2px solid var(--tinta); border-radius: var(--r);
  font: inherit; font-weight: 700; color: var(--tinta); cursor: pointer;
}
@media (max-width: 1180px) {
  .izbornik-gumb { display: inline-flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-izbornik);
    max-height: calc(100vh - 120px); overflow-y: auto;
    background: var(--bijela); border-bottom: 1px solid var(--crta);
    padding: 4px var(--rub) 24px; flex-direction: column; align-items: stretch; gap: 16px;
  }
  .nav.otvoren { display: flex; }
  .nav-razina { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-razina > li { border-bottom: 1px solid var(--crta); }
  .nav-razina > li > a, .nav-gumb { width: 100%; min-height: 54px; padding: 0; justify-content: space-between; font-size: 1.25rem; border: 0; }
  .nav-razina > li > a:hover, .nav-gumb:hover, .nav-gumb[aria-expanded="true"] { color: var(--crvena); }
  .nav-razina [aria-current="page"] { color: var(--crvena); }
  .podizbornik { padding: 0 0 16px; }
  .pod-mreza { display: grid; gap: 18px; padding: 0; }
  .pod-savjet { display: none; }
}
@media (max-width: 400px) { .logo img { width: 160px; } }

/* Zaglavlje podstranice: crveni blok, uz fotografiju se preklapa preko nje */
.stranica-glava { background: var(--crvena); color: #FFFFFF; padding: 32px 0 clamp(44px, 5vw, 64px); }
.stranica-glava a { color: #FFFFFF; }
.stranica-glava .mrvice { padding-top: 0; margin-bottom: clamp(24px, 3vw, 36px); color: rgba(255, 255, 255, 0.85); }
.stranica-glava .mrvice a { color: #FFFFFF; }
.stranica-glava .mrvice li + li::before { color: rgba(255, 255, 255, 0.6); }
.stranica-glava h1 { font-size: clamp(2.375rem, 1.5rem + 2.8vw, 3.75rem); max-width: 20ch; }
.stranica-glava .uvod { color: #FFFFFF; font-size: 1.3125rem; max-width: 58ch; }
.stranica-glava :focus-visible { outline-color: #FFFFFF; }

.stranica-glava:has(.stranica-glava-slika) { background: linear-gradient(to bottom, var(--siva) 0 calc(100% - 56px), var(--bijela) calc(100% - 56px)); color: var(--tinta); padding: 0; }
.stranica-glava-slika { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; padding-left: 0; padding-right: 0; }
.stranica-glava-slika > figure { grid-column: 1 / -1; grid-row: 1; }
.stranica-glava-slika > figure img { width: 100%; height: 100%; min-height: 440px; max-height: 520px; object-fit: cover; border-radius: 0; }
.stranica-glava-slika > div {
  grid-column: 1; grid-row: 1; align-self: end; position: relative; z-index: 1;
  margin: 0 0 0 var(--rub); padding: clamp(28px, 3.5vw, 48px);
  background: var(--crvena); color: #FFFFFF;
}
.stranica-glava-slika h1 { max-width: 16ch; }
@media (max-width: 860px) {
  .stranica-glava:has(.stranica-glava-slika) { background: var(--crvena); }
  .stranica-glava-slika { grid-template-columns: 1fr; min-height: 0; }
  .stranica-glava-slika > figure img { min-height: 0; aspect-ratio: 16 / 9; max-height: none; }
  .stranica-glava-slika > div { grid-row: 2; margin: 0; padding: 28px var(--rub) 40px; }
}

/* Sadržaj podstranice s bočnim stupcem */
.raspored { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.raspored-lijevo { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.tekst { max-width: 70ch; }
.tekst h2 { font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); margin: 48px 0 14px; }
.tekst h2:first-child { margin-top: 0; }
.tekst h3 { margin: 28px 0 8px; }
.tekst p + p, .tekst ul + p, .tekst ol + p, .tekst dl + p, .tekst .tablica-omot + p { margin-top: 14px; }
.tekst ul:not([class]), .tekst ol:not([class]) { margin: 14px 0 0 1.25em; display: grid; gap: 8px; }
.okvir-bocni { position: sticky; top: 104px; display: grid; gap: 20px; }
.okvir {
  padding: 24px; background: var(--siva); border-radius: var(--r);
}
.okvir h2, .okvir h3 { font-size: 1.375rem; margin-bottom: 8px; }
.okvir p { color: var(--tinta-2); }
.okvir .gumb { margin-top: 16px; width: 100%; }
.okvir-telefon { display: block; margin-top: 12px; font-size: 1.5rem; font-weight: 700; color: var(--tinta); text-decoration: none; }
.okvir-telefon:hover { color: var(--crvena); }
@media (max-width: 960px) {
  .raspored, .raspored-lijevo { grid-template-columns: minmax(0, 1fr); }
  .okvir-bocni { position: static; }
}

/* Česta pitanja */
.pitanja { margin-top: 20px; border-top: 1px solid var(--crta); }
.pitanja details { border-bottom: 1px solid var(--crta); }
.pitanja summary {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-size: 1.25rem; font-weight: 700;
}
.pitanja summary::-webkit-details-marker { display: none; }
.pitanja summary::after { content: "+"; font-size: 1.75rem; font-weight: 400; line-height: 1; color: var(--crvena); }
.pitanja details[open] summary::after { content: "\2212"; }
.pitanja summary:hover { color: var(--crvena); }
.pitanja details > div { padding: 0 0 20px; color: var(--tinta-2); max-width: 70ch; }
.pitanja details > div p + p { margin-top: 10px; }

/* Dokumenti */
.dokumenti { list-style: none; margin-top: 16px; border-top: 1px solid var(--crta); }
.dokumenti li { border-bottom: 1px solid var(--crta); }
.dokumenti a { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; color: var(--tinta); text-decoration: none; }
.dokumenti a .ph { font-size: 1.5rem; color: var(--crvena); }
.dokumenti a span { color: var(--tinta-2); font-size: 1rem; }
.dokumenti a:hover strong { color: var(--crvena); text-decoration: underline; text-underline-offset: 0.16em; }
.dokumenti strong { font-weight: 600; }

/* Popis novosti */
.popis-novosti { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--crta); }
.popis-novosti li { border-bottom: 1px solid var(--crta); }
.popis-novosti a { display: grid; grid-template-columns: 180px 1fr; gap: 8px 32px; padding: 24px 0; color: var(--tinta); text-decoration: none; }
.popis-novosti time { color: var(--tinta-2); padding-top: 3px; }
.popis-novosti h2 { font-size: 1.5rem; }
.popis-novosti p { margin-top: 6px; color: var(--tinta-2); grid-column: 2; }
.popis-novosti a:hover h2 { color: var(--crvena); text-decoration: underline; text-underline-offset: 0.16em; }
.oznaka-vrsta { display: inline-block; margin-bottom: 6px; font-size: 1rem; font-weight: 600; color: var(--crvena); }
@media (max-width: 640px) { .popis-novosti a { grid-template-columns: 1fr; } .popis-novosti p { grid-column: 1; } }

/* Najave na početnoj */
.najave { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.najava { display: block; color: var(--tinta); text-decoration: none; }
.najava img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
.najava h3 { margin-top: 18px; font-size: 1.625rem; }
.najava p { margin-top: 8px; color: var(--tinta-2); }
.najava .dalje { display: inline-block; margin-top: 12px; color: var(--crvena); font-weight: 700; text-decoration: underline; text-underline-offset: 0.16em; }
.najava:hover h3 { color: var(--crvena); }
@media (max-width: 760px) { .najave { grid-template-columns: 1fr; } }
.naslov-red { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; margin-bottom: 32px; }
.naslov-red a { font-weight: 700; }
.traka-autoskola { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; padding: 28px 32px; border: 1px solid var(--crta); border-radius: var(--r); }
.traka-autoskola img { width: 190px; }
.traka-autoskola p { color: var(--tinta-2); }
.traka-autoskola strong { color: var(--tinta); }
@media (max-width: 860px) { .traka-autoskola { grid-template-columns: 1fr; } }

/* Katalog na stranici Programi */
.filteri { position: sticky; top: 104px; display: grid; gap: 24px; }
.filteri fieldset { margin: 0; padding: 0; border: 0; }
.filteri legend { font-weight: 700; margin-bottom: 8px; }
.filteri label.izbor { display: flex; gap: 10px; align-items: center; padding: 6px 0; cursor: pointer; }
.filteri input[type="radio"] { width: 20px; height: 20px; margin: 0; accent-color: var(--crvena); }
.filteri .broj-uz { margin-left: auto; color: var(--tinta-2); font-size: 1rem; }
.filteri-ponisti { justify-self: start; background: none; border: 0; padding: 0; color: var(--crvena); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 960px) { .filteri { position: static; } }

/* Hero: pitanje i mozaik zanimanja */
.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); }
.hero-glava { display: grid; grid-template-columns: 1fr minmax(320px, 520px); gap: 24px 56px; align-items: end; }
.hero-uvod { margin-top: 18px; font-size: 1.3125rem; color: var(--tinta-2); max-width: 36ch; }
.trazilica label { display: block; font-weight: 700; margin-bottom: 8px; }
.trazilica-red { display: flex; }
.trazilica-red .polje { border-right: 0; border-radius: var(--r) 0 0 var(--r); }
.trazilica-red .gumb { border-radius: 0 var(--r) var(--r) 0; }
.zanimanja {
  list-style: none; margin-top: clamp(36px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 20px;
}
.zanimanje { display: block; color: var(--tinta); text-decoration: none; }
.zanimanje-slika { overflow: hidden; border-radius: var(--r); background: var(--siva); }
.zanimanje img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 300ms var(--ease-out); }
.zanimanje strong { display: block; margin-top: 14px; font-size: 1.375rem; line-height: 1.2; }
.zanimanje span { display: block; margin-top: 2px; color: var(--tinta-2); font-size: 1.0625rem; }
.zanimanje:hover { color: var(--tinta); }
.zanimanje:hover strong { color: var(--crvena); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
@media (hover: hover) and (pointer: fine) { .zanimanje:hover img { transform: scale(1.03); } }
.zanimanja-dno { margin-top: 32px; font-size: 1.125rem; }
.zanimanja-dno a { font-weight: 700; }
@media (max-width: 960px) { .hero-glava { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .zanimanja { grid-template-columns: 1fr 1fr; gap: 24px 14px; } .zanimanje strong { font-size: 1.1875rem; } }
@media (max-width: 380px) { .trazilica-red { flex-direction: column; gap: 8px; } .trazilica-red .polje, .trazilica-red .gumb { border-radius: var(--r); border-right: 2px solid; } }

/* Polja */
.polje {
  width: 100%; min-height: 50px; padding: 10px 14px;
  background: #FFFFFF; color: var(--tinta);
  border: 2px solid #7D838C; border-radius: var(--r);
  font: inherit;
}
.polje::placeholder { color: #6B717A; }
.polje:hover { border-color: var(--tinta); }
.polje:focus-visible { outline: 3px solid var(--crvena); outline-offset: 1px; border-color: var(--tinta); }
select.polje {
  appearance: none; padding-right: 42px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta) 50%), linear-gradient(135deg, var(--tinta) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}

/* Odjeljci */
.odjeljak { padding: clamp(56px, 8vw, 104px) 0; }
.odjeljak-sivi { background: var(--siva); }
.uvod { margin-top: 14px; font-size: 1.25rem; color: var(--tinta-2); max-width: 56ch; }
.dvostupac { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.dvostupac > figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
@media (max-width: 860px) { .dvostupac { grid-template-columns: 1fr; } .dvostupac > figure { order: -1; } }

/* Razlika između vrsta programa */
.tablica-omot { margin-top: 36px; overflow-x: auto; }
.razlika { width: 100%; border-collapse: collapse; min-width: 640px; }
.razlika th, .razlika td { text-align: left; vertical-align: top; padding: 18px 20px 18px 0; border-bottom: 1px solid var(--crta); }
.razlika thead th { font-size: 1rem; color: var(--tinta-2); font-weight: 600; border-bottom: 2px solid var(--tinta); padding-top: 0; }
.razlika tbody th { width: 24%; }
.razlika tbody th a { font-size: 1.25rem; font-weight: 700; color: var(--tinta); }
.razlika tbody th a:hover { color: var(--crvena); }
.razlika td { color: var(--tinta-2); }

/* Katalog */
.kontrole { margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr 300px; gap: 16px; }
.kontrole label { display: block; font-weight: 700; margin-bottom: 6px; }
.rezultat-info { margin-top: 28px; font-size: 1.0625rem; color: var(--tinta-2); }
.programi { list-style: none; margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.program-red {
  display: block; padding: 14px 18px; height: 100%;
  background: #FFFFFF; border: 1px solid var(--crta); border-radius: var(--r);
  color: var(--tinta); text-decoration: none;
  transition: border-color 150ms var(--ease-out);
}
.program-red strong { display: block; font-size: 1.1875rem; line-height: 1.3; }
.program-red small { display: block; margin-top: 2px; font-size: 1rem; color: var(--tinta-2); }
.program-red:hover { border-color: var(--crvena); color: var(--tinta); }
.program-red:hover strong { color: var(--crvena); }
.oznaka { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 3px; background: var(--crvena-svijetla); color: var(--crvena-tamna); font-size: 0.875rem; font-weight: 700; vertical-align: 1px; }
.katalog-dno { margin-top: 28px; }
.prazno { margin-top: 20px; padding: 22px 24px; background: #FFFFFF; border: 1px solid var(--crta); border-radius: var(--r); max-width: 62ch; }
.prazno strong { display: block; font-size: 1.25rem; margin-bottom: 4px; }
@media (max-width: 860px) { .kontrole { grid-template-columns: 1fr; } .programi { grid-template-columns: 1fr; } }

/* Koraci (HZZ) */
.koraci { list-style: none; counter-reset: k; margin-top: 28px; display: grid; gap: 18px; }
.koraci li { counter-increment: k; display: grid; grid-template-columns: 36px 1fr; gap: 0 12px; }
.koraci li::before { content: counter(k) "."; grid-row: 1 / span 2; font-size: 1.375rem; font-weight: 700; color: var(--crvena); line-height: 1.3; }
.koraci strong { font-size: 1.1875rem; }
.koraci span { color: var(--tinta-2); }
.akcije { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Online */
.popis { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.popis li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; }
.popis .ph { color: var(--crvena); margin-top: 3px; }

/* Hrvatski za strance */
.dvojezicno { margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dvojezicno > div { padding: clamp(24px, 4vw, 40px); background: #FFFFFF; border: 1px solid var(--crta); border-radius: var(--r); }
.jezik { font-size: 1rem; font-weight: 600; color: var(--tinta-2); margin-bottom: 8px; }
.dvojezicno h3 { font-size: 1.5rem; margin-bottom: 12px; }
.podaci { margin: 22px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; }
.podaci dt { color: var(--tinta-2); }
.podaci dd { margin: 0; font-weight: 700; }
@media (max-width: 860px) { .dvojezicno { grid-template-columns: 1fr; } }

/* Autoškola */
.autoskola-logo { width: 210px; margin-bottom: 22px; }
.kategorije { width: 100%; margin-top: 24px; border-collapse: collapse; }
.kategorije th, .kategorije td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--crta); }
.kategorije th { width: 72px; font-size: 1.375rem; font-weight: 700; color: var(--crvena); }
.kategorije td { color: var(--tinta-2); }
.radno { margin-top: 20px; color: var(--tinta-2); }

/* Novosti */
.novosti { list-style: none; margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.novost { display: block; color: var(--tinta); text-decoration: none; }
.novost time { display: block; color: var(--tinta-2); font-size: 1rem; margin-bottom: 6px; }
.novost h3 { font-size: 1.3125rem; }
.novost p { margin-top: 8px; color: var(--tinta-2); }
.novost:hover { color: var(--tinta); }
.novost:hover h3 { color: var(--crvena); text-decoration: underline; text-underline-offset: 0.16em; }
.novosti-dno { margin-top: 32px; }
.novosti-dno a { font-weight: 700; }
@media (max-width: 860px) { .novosti { grid-template-columns: 1fr; gap: 24px; } }

/* Kontakt */
.kontakt { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.kontakt-podaci { margin-top: 28px; display: grid; gap: 18px; }
.kontakt-podaci div { display: grid; grid-template-columns: 30px 1fr; gap: 0 10px; }
.kontakt-podaci .ph { color: var(--crvena); font-size: 1.375rem; margin-top: 3px; }
.kontakt-podaci p { grid-column: 2; }
.kontakt-podaci .naslov { font-weight: 700; }
.kontakt-podaci a { color: var(--tinta); }
.karta { margin-top: 28px; border: 1px solid var(--crta); border-radius: var(--r); overflow: hidden; }
.karta iframe { display: block; width: 100%; height: 280px; border: 0; }
.obrazac { padding: clamp(24px, 4vw, 36px); background: var(--siva); border-radius: var(--r); }
.obrazac h2, .obrazac h3 { font-size: 1.75rem; font-weight: 700; }
.obrazac > p { margin-top: 6px; color: var(--tinta-2); }
.polje-grupa { margin-top: 18px; }
.polje-grupa label { display: block; font-weight: 700; margin-bottom: 6px; }
.polje-grupa .neobavezno { font-weight: 400; color: var(--tinta-2); }
.greska { display: none; margin-top: 6px; color: var(--crvena-tamna); font-weight: 700; font-size: 1.0625rem; }
.polje-grupa.ima-gresku .polje { border-color: var(--crvena); }
.polje-grupa.ima-gresku .greska { display: block; }
.privola { margin-top: 20px; display: flex; gap: 12px; align-items: flex-start; font-size: 1.0625rem; }
.privola input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--crvena); flex-shrink: 0; }
.obrazac .gumb { margin-top: 22px; width: 100%; }
.uspjeh { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--r); background: #E2F0E5; color: #1C5629; font-weight: 700; }
.uspjeh.vidljiv { display: block; }
.greska-slanja { margin-top: 18px; padding: 14px 16px; border-radius: var(--r); background: var(--crvena-svijetla); color: var(--crvena-tamna); font-weight: 700; }
.zamka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.obrazac { position: relative; }
.biljeska { margin-top: 12px; font-size: 1rem; color: var(--tinta-2); }
@media (max-width: 860px) { .kontakt { grid-template-columns: 1fr; } }

/* Podnožje */
.podnozje { background: var(--tinta); color: #BFC4CB; padding: 64px 0 28px; font-size: 1.0625rem; }
.podnozje a { color: #F2F3F5; text-decoration: none; }
.podnozje a:hover { color: #FFFFFF; text-decoration: underline; }
.podnozje-stupci { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
.podnozje-logo { width: 196px; margin-bottom: 18px; }
.podnozje h2 { font-size: 1.0625rem; letter-spacing: 0; color: #F2F3F5; margin-bottom: 12px; }
.podnozje ul { list-style: none; display: grid; gap: 6px; }
.podnozje-dno {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid #3A3F46;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; font-size: 1rem;
}
.podnozje-dno ul { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.credit { display: inline-block; white-space: nowrap; color: #BFC4CB !important; }
.credit:hover { text-decoration: none !important; }
.credit img { display: inline-block; height: 20px; width: auto; margin-left: 8px; vertical-align: -5.4px; transition: opacity 150ms var(--ease-out); }
.credit:hover img { opacity: 0.85; }
@media (max-width: 960px) { .podnozje-stupci { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .podnozje-stupci { grid-template-columns: 1fr; } }

/* Mobilni brzi kontakt */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--bijela); border-top: 1px solid var(--crta);
  }
  .dock .gumb { padding: 10px; }
  .podnozje { padding-bottom: 100px; }
}

/* Stranica programa */
.mrvice { padding-top: 24px; font-size: 1.0625rem; color: var(--tinta-2); }
.mrvice ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.mrvice li + li::before { content: "/"; margin-right: 10px; color: var(--crta); }
.mrvice a { color: var(--tinta-2); }
.program-glava { padding: 20px 0 40px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 24px 56px; align-items: center; }
.program-vrsta { font-size: 1.125rem; font-weight: 600; color: var(--crvena); margin-bottom: 10px; }
.program-glava h1 { font-size: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); }
.program-glava img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); }
.program-tijelo { display: grid; grid-template-columns: 1fr 400px; gap: clamp(32px, 5vw, 72px); align-items: start; padding-bottom: 96px; }
.cinjenice-programa { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--crta); }
.cinjenice-programa div { padding: 14px 14px 14px 0; }
.cinjenice-programa dt { font-size: 1rem; color: var(--tinta-2); }
.cinjenice-programa dd { margin: 2px 0 0; font-weight: 700; }
.blok { margin-top: 48px; }
.blok h2 { font-size: 1.875rem; margin-bottom: 16px; }
.blok-napomena { margin-top: 14px; color: var(--tinta-2); }
.literatura { list-style: none; display: grid; gap: 8px; }
.literatura li span { color: var(--tinta-2); }
.bocno { position: sticky; top: 100px; }
.bocno .ili { margin-top: 14px; text-align: center; color: var(--tinta-2); }
.bocno .ili a { color: var(--tinta); font-weight: 700; }
.napomena-primjer { margin-top: 24px; padding: 18px 20px; background: var(--crvena-svijetla); border-radius: var(--r); }
.srodni { list-style: none; display: grid; gap: 8px; }
@media (max-width: 960px) {
  .program-glava { grid-template-columns: 1fr; }
  .program-tijelo { grid-template-columns: 1fr; }
  .bocno { position: static; }
  .cinjenice-programa { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

@media print {
  .traka, .zaglavlje, .dock, .podnozje, .trazilica, .obrazac { display: none !important; }
}

/* Naslovna: fotografija preko cijele širine, crveni blok se preklapa preko njenog dna */
.naslovna { padding-bottom: 0; }
.naslovna-slika img { width: 100%; height: clamp(320px, 52vh, 560px); object-fit: cover; object-position: 60% 45%; }
.naslovna-mreza { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0 clamp(32px, 4vw, 64px); align-items: stretch; }
.naslovna-blok {
  position: relative; z-index: 1; margin-top: clamp(-150px, -10vw, -90px);
  padding: clamp(32px, 4vw, 56px); background: var(--crvena); color: #FFFFFF;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.naslovna-blok h1 { font-size: clamp(2.75rem, 1.8rem + 3.4vw, 4.75rem); }
.naslovna-blok > p { margin-top: 16px; font-size: 1.3125rem; max-width: 40ch; }
.naslovna-blok .trazilica { margin-top: 28px; }
.naslovna-blok .trazilica label { color: #FFFFFF; }
.naslovna-blok .polje { border-color: #FFFFFF; }
.naslovna-blok .trazilica-red .gumb { border: 2px solid var(--tinta); }
.naslovna-blok :focus-visible { outline-color: #FFFFFF; }
.naslovna-najava { display: flex; flex-direction: column; padding-top: 24px; }
.najava-kartica { display: grid; gap: 4px; padding: 18px 0; border-bottom: 1px solid var(--crta); color: var(--tinta); text-decoration: none; }
.najava-kartica:first-child { padding-top: 0; }
.najava-kartica strong { font-size: 1.375rem; line-height: 1.2; }
.najava-kartica > span:last-child { color: var(--tinta-2); }
.najava-kartica:hover strong { color: var(--crvena); text-decoration: underline; text-underline-offset: 0.16em; }
@media (max-width: 960px) {
  .naslovna-mreza { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; }
  .naslovna-blok { margin-top: 0; padding: 32px var(--rub) 40px; }
  .naslovna-najava { padding: 28px var(--rub) 0; }
}

.naslov-sredina { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.vrste-mreza { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; }
.vrste-mreza li { display: flex; }
.vrste-mreza a { display: block; flex: 1; padding: 22px 0; border-bottom: 2px solid var(--crta); color: var(--tinta); text-decoration: none; transition: border-color 150ms var(--ease-out); }
.vrste-mreza strong { display: flex; align-items: center; gap: 10px; font-size: 1.5rem; }
.vrste-mreza strong .ph { color: var(--crvena); transition: transform 150ms var(--ease-out); }
.vrste-mreza span { display: block; margin-top: 4px; color: var(--tinta-2); }
.vrste-mreza a:hover { border-bottom-color: var(--crvena); }
.vrste-mreza a:hover strong { color: var(--crvena); }
@media (hover: hover) and (pointer: fine) { .vrste-mreza a:hover strong .ph { transform: translateX(4px); } }
@media (max-width: 860px) { .vrste-mreza { grid-template-columns: 1fr; } }

/* Slojeviti blok: fotografija i crveni blok preko nje */
.sloj { position: relative; padding: clamp(56px, 7vw, 96px) 0; }
.sloj-slika { position: absolute; inset: 0 0 0 38%; }
.sloj-slika img { width: 100%; height: 100%; object-fit: cover; }
.sloj .wrap { position: relative; }
.sloj-blok { max-width: 620px; padding: clamp(32px, 4vw, 56px); background: var(--crvena); color: #FFFFFF; }
.sloj-blok h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.sloj-blok p { margin-top: 16px; font-size: 1.25rem; }
.sloj-blok :focus-visible { outline-color: #FFFFFF; }
.gumb-svijetli { background: #FFFFFF; color: var(--crvena-tamna); }
.gumb-svijetli:hover { background: var(--tinta); color: #FFFFFF; }
.gumb-obrub-svijetli { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.gumb-obrub-svijetli:hover { background: #FFFFFF; color: var(--crvena-tamna); }
@media (max-width: 860px) {
  .sloj { padding: 0; }
  .sloj-slika { position: static; }
  .sloj-slika img { aspect-ratio: 16 / 9; height: auto; }
  .sloj .wrap { padding: 0; }
  .sloj-blok { max-width: none; padding: 32px var(--rub) 40px; }
}

/* Novosti s fotografijom */
.novost img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); margin-bottom: 16px; }
.odjeljak-autoskola { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }

.filter-oznaka { display: block; font-weight: 700; margin-bottom: 6px; }
.tekst .podaci + .akcije, .okvir .podaci + p { margin-top: 18px; }
.okvir-engleski { margin-top: 56px; }
.okvir-engleski .gumb { width: auto; }
.okvir .dokumenti { margin-top: 8px; }
.rezultat-info-vrh { margin-top: 0; }
.okvir-razmak { margin-top: 48px; }
.okvir p + p { margin-top: 12px; }

/* Sadržaj preuzet sa sadašnjeg weba (stranice programa) */
.program-tekst .blok { margin-top: 44px; }
.program-tekst .blok h2 { font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem); margin: 0 0 14px; }
.izvorni { max-width: 70ch; }
.izvorni > * + * { margin-top: 12px; }
.izvorni ul, .izvorni ol { margin: 12px 0 0 1.25em; padding: 0; display: grid; gap: 6px; }
.izvorni li::marker { color: var(--crvena); }
.izvorni h3 { font-size: 1.1875rem; margin-top: 22px; }
.izvorni table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 1.0625rem; }
.izvorni td, .izvorni th { vertical-align: top; text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--crta); }
.izvorni td ul { margin-top: 0; }
.izvorni a { color: var(--crvena); }
.razine details > .izvorni { padding: 0 0 20px; color: var(--tinta); }
.cinjenice-programa dd { overflow-wrap: anywhere; }