/* KONTAKT - „Večernja" (port redizajna, faza F3, 27.10.2026).
   Šablon: templates/site/kontakt.twig. Prvi ekran, pojasevi, forma (`.forma`, `.polje`,
   `.izbor`, `.uspeh`), `.podaci`, `.status` i pitanja su u site.css - ovde je samo
   raspored strane. Forma je ista kao u dijalogu „Zakaži merenje". */

/* ---------- prvi ekran ---------- */
.hero--kontakt { min-height: max(640px, min(86svh, 820px)); }
.k-red { list-style: none; margin: 0; padding: var(--s4) 0 0; border-top: 1px solid var(--linija-n2); display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); font-size: 16px; color: var(--mesec-2); }
.k-red li { display: inline-flex; align-items: center; gap: 10px; }
.k-red .i { width: 18px; height: 18px; color: var(--lampa); flex: none; }
.k-red a { color: var(--mesec); text-decoration: none; }
.k-red a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- zahtev ---------- */
.k-g { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s8); align-items: start; }
.k-karta { background: #fffdf8; border: 1px solid var(--linija-2); border-radius: var(--r); box-shadow: 0 30px 60px -40px rgba(18, 24, 38, .35); }
.k-karta .forma { padding: var(--s6); gap: 20px; }
.k-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.k-flash { display: flex; align-items: flex-start; gap: 10px; margin: var(--s6) var(--s6) 0; padding: 14px 16px; border-radius: var(--r); font-weight: 700; font-size: 16px; }
.k-flash .i { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.k-flash--ok { background: rgba(95, 207, 140, .16); color: #15603a; }
.k-flash--err { background: rgba(194, 14, 42, .08); color: var(--crvena-dd); }

.k-strana { display: grid; gap: var(--s5); position: sticky; top: calc(var(--hdr) + 24px); }
.k-direkt { padding: var(--s6); background: var(--noc); color: var(--mesec); border-radius: var(--r); box-shadow: 0 30px 60px -36px rgba(11, 17, 32, .7); }
.k-direkt .oznaka { color: var(--mesec-2); margin: 0 0 var(--s3); }
.k-veze { list-style: none; margin: 0; padding: 0; }
.k-veze li + li { border-top: 1px solid var(--linija-n); }
.k-veze a { display: flex; align-items: center; gap: 14px; padding: 14px 0; color: inherit; text-decoration: none; }
.k-veze .i { width: 20px; height: 20px; flex: none; color: var(--lampa); }
.k-veze span { display: grid; line-height: 1.25; min-width: 0; }
.k-veze b { font-family: var(--f-nasl); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.k-veze small { font-size: 15px; color: var(--mesec-2); }
.k-veze a:hover b { color: var(--lampa); }
.k-veze a:focus-visible { outline: 2px solid var(--lampa); outline-offset: 4px; }
.k-poruke { display: flex; flex-wrap: wrap; gap: 10px; margin: var(--s4) 0 0; }
.k-poruke a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--linija-n2); border-radius: var(--r); color: var(--mesec); text-decoration: none; font-weight: 700; font-size: 15.5px; transition: background var(--t), border-color var(--t); }
.k-poruke a:hover { background: var(--noc-3); border-color: var(--mesec-2); }
.k-poruke svg { width: 18px; height: 18px; fill: currentColor; color: var(--lampa); }

.k-posle { padding: var(--s5) var(--s6) var(--s6); background: var(--lan); border-radius: var(--r); }
.k-posle h3 { margin: 0 0 var(--s4); font-family: var(--f-nasl); font-size: 20px; font-weight: 600; }
.k-posle ol { list-style: none; margin: 0; padding: 0; counter-reset: k; display: grid; gap: var(--s4); }
.k-posle li { counter-increment: k; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 2px 14px; }
.k-posle li::before { content: counter(k); grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--noc); color: var(--lampa); font-weight: 800; font-size: 15px; }
.k-posle b { font-size: 16.5px; }
.k-posle span { font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- salon ---------- */
.k-salon { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
.k-salon__mapa { display: grid; gap: var(--s4); justify-items: start; }
.k-okvir { width: 100%; aspect-ratio: 16 / 11; border-radius: var(--r); overflow: hidden; background: var(--noc-3); box-shadow: 0 0 0 1px var(--linija-n2), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.k-okvir iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.02); }
.k-salon__t { display: grid; gap: var(--s5); }
.k-vazduh { margin: 0; }
.k-vazduh img { display: block; width: 100%; height: auto; border-radius: var(--r); box-shadow: 0 0 0 1px var(--linija-n2); }
.k-vazduh figcaption { margin-top: 10px; font-size: 15px; color: var(--mesec-2); }
.k-salon .podaci { grid-template-columns: 1fr; margin-top: 0; }
.k-salon .podaci > div:nth-child(2n) { padding-left: 0; border-left: 0; }
.k-salon .podaci p { margin: 0; }
.k-salon .podaci b { display: block; }

@media (max-width: 1080px) {
  .k-g, .k-salon { grid-template-columns: 1fr; gap: var(--s7); }
  .k-strana { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 720px) {
  .hero--kontakt { min-height: 0; }
  .k-karta .forma { padding: 20px; }
  .k-flash { margin: 20px 20px 0; }
  .k-par { grid-template-columns: 1fr; }
  .k-strana { grid-template-columns: 1fr; }
  .k-direkt, .k-posle { padding: 20px; }
  .k-okvir { aspect-ratio: 4 / 3; }
}