/* kontakt.css — Kontakt stranica
 *
 * Source: portovan iz Razvoj/V3/Kontakt/design_handoff_kontakt/_preview_standalone.html
 * Sve klase i vars su scope-ovane pod body.page-kontakt da ne kolidiraju
 * sa drugim stranicama. Paleta „Šuma" — maslina/peščar sa brand crvenom.
 */

body.page-kontakt {
  --kp-bg:         #1c2420;
  --kp-bg-deeper:  #161d19;
  --kp-asphalt:    #11160f;
  --kp-asphalt-2:  #0c100a;
  --kp-fg:         #ece7d8;
  --kp-fg-soft:    #bcb5a2;
  --kp-fg-mid:     #8d8775;
  --kp-fg-haze:    #6c6757;
  --kp-fg-faint:   #4b4a40;
  --kp-gold:       #d4b896;
  --kp-gold-dim:   #a89167;
  --kp-road-paint: #ddc28a;
  --kp-red:        #9b1919;
  --kp-red-bright: #c43030;
  --kp-rule:        rgba(180,200,180,0.14);
  --kp-tag-border:  rgba(155,25,25,0.40);
  --kp-key-border:  rgba(212,184,150,0.26);

  background: var(--kp-bg);
  color: var(--kp-fg);
}

/* ============================================================
   HERO — statičan dark olive blok, kicker + H1 + sub
   ============================================================ */
body.page-kontakt .kontakt-hero {
  /* Dijagonalni gradient — gornji-levi tamniji ka srednjem, donji-desni
     pomalo svetliji (suptilno, da ne bude dosadan flat dark olive). */
  background: linear-gradient(
    118deg,
    #0c120e 0%,
    var(--kp-bg-deeper) 32%,
    var(--kp-bg) 62%,
    #232c25 100%
  );
  padding: 120px 24px 100px;
  border-bottom: 1px solid var(--kp-rule);
  position: relative;
  overflow: hidden;
}
/* Honeycomb watermark — pokriva ceo hero, full-width + full-height.
   Gold-faint stroke ostaje suptilan na olive gradient bg. */
body.page-kontakt .kontakt-hero__honeycomb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
body.page-kontakt .kontakt-hero__inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
body.page-kontakt .kontakt-hero__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--kp-gold-dim);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
}
body.page-kontakt .kontakt-hero__nut {
  color: var(--kp-red);
  font-size: 14px;
  line-height: 1;
}
body.page-kontakt .kontakt-hero__title {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.08;
  color: var(--kp-fg);
  margin: 0 0 32px;
  max-width: 880px;
}
body.page-kontakt .kontakt-hero__title em {
  color: var(--kp-gold);
  font-style: italic;
  font-weight: 500;
}
body.page-kontakt .kontakt-hero__sub {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.65;
  color: var(--kp-fg-soft);
  max-width: 640px;
  margin: 0;
}
@media (max-width: 920px) {
  body.page-kontakt .kontakt-hero { padding: 80px 24px 64px; }
  body.page-kontakt .kontakt-hero__sub { font-size: 16px; }
}

/* ============================================================
   PAGE BAND — tanak meta strip (bot only, ispod kanali liste)
   ============================================================ */
body.page-kontakt .kontakt-page-band {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--kp-fg-haze);
  text-transform: uppercase;
}
body.page-kontakt .kontakt-page-band.bot { border-top: 1px solid var(--kp-rule); }
body.page-kontakt .kontakt-page-band .tick {
  color: var(--kp-red);
  font-size: 13px;
  margin-right: 12px;
}
body.page-kontakt .kontakt-page-band b { color: var(--kp-fg-soft); font-weight: 500; }
body.page-kontakt .kontakt-page-band .sep { color: rgba(155,25,25,0.7); margin: 0 10px; }

/* ============================================================
   LANES SIGNAGE — gantry znak sa 4 kanala.
   ============================================================ */
body.page-kontakt .lanes-signage {
  position: relative;
  background: var(--kp-asphalt-2);
  border-top: 2px solid var(--kp-road-paint);
  border-bottom: 1px solid var(--kp-rule);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
body.page-kontakt .lanes-signage::before,
body.page-kontakt .lanes-signage::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 10px;
  height: 10px;
  background: var(--kp-road-paint);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(221, 194, 138, 0.45);
}
body.page-kontakt .lanes-signage::before { left: 12.5%; }
body.page-kontakt .lanes-signage::after  { right: 12.5%; }

body.page-kontakt .sgn-cell {
  padding: 24px 28px 22px;
  border-right: 1px solid rgba(221, 194, 138, 0.22);
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: 8px;
  transition: background 0.35s ease;
}
body.page-kontakt .sgn-cell:last-child { border-right: none; }
body.page-kontakt .sgn-cell:hover { background: rgba(221, 194, 138, 0.05); }

body.page-kontakt .sgn-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.page-kontakt .sgn-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 500;
  color: var(--kp-gold);
  letter-spacing: 0.02em;
  line-height: 1;
}
body.page-kontakt .sgn-fast {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--kp-red-bright);
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid rgba(155, 25, 25, 0.45);
}
body.page-kontakt .sgn-fast.standard { color: var(--kp-gold-dim); border-color: rgba(212, 184, 150, 0.40); }
body.page-kontakt .sgn-fast.crypt    { color: rgba(150, 210, 220, 0.95); border-color: rgba(150, 210, 220, 0.42); }
body.page-kontakt .sgn-fast.slow     { color: var(--kp-fg-mid); border-color: rgba(184, 182, 176, 0.30); }

body.page-kontakt .sgn-name {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  color: var(--kp-fg);
  letter-spacing: -0.014em;
  line-height: 1;
  margin-top: 6px;
}
/* Contact value (telefon broj / email / Signal handle / sastanak) — inline
   nastavak imena kanala, posle ":" separatora. Isti font kao name (sans,
   28px), samo gold boja umesto cream-bele za vizuelni distinkt. */
body.page-kontakt .sgn-value {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 500;
  color: var(--kp-gold);
  letter-spacing: -0.014em;
}
body.page-kontakt .sgn-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--kp-fg-haze);
  text-transform: uppercase;
  margin-top: 4px;
}
body.page-kontakt .sgn-meta b { color: var(--kp-gold); font-weight: 500; letter-spacing: 0.14em; }

/* ============================================================
   CHAPTER BAND
   ============================================================ */
body.page-kontakt .kontakt-chapter-band {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 24px;
  background: var(--kp-bg-deeper);
  border-top: 2px solid var(--kp-red);
  border-bottom: 2px solid var(--kp-red);
  position: relative;
}
body.page-kontakt .kontakt-chapter-band::before,
body.page-kontakt .kontakt-chapter-band::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 6px; height: 6px;
  background: var(--kp-gold);
  transform: translateY(-50%) rotate(45deg);
}
body.page-kontakt .kontakt-chapter-band::before { left: 32px; }
body.page-kontakt .kontakt-chapter-band::after  { right: 32px; }
body.page-kontakt .kontakt-chapter-band .tick {
  font-family: var(--font-mono);
  color: var(--kp-red);
  font-size: 14px;
}
body.page-kontakt .kontakt-chapter-band .meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--kp-fg-soft);
  text-transform: uppercase;
}
body.page-kontakt .kontakt-chapter-band .meta.bright { color: var(--kp-fg); }
body.page-kontakt .kontakt-chapter-band .sep { color: rgba(155,25,25,0.85); font-size: 13px; }

/* ============================================================
   KANALI LIST — 4 reda kanala (Telefon, Email, Signal, Sastanak)
   ============================================================ */
body.page-kontakt .kanali-list {
  max-width: 1200px;
  margin: 80px auto 0;
  padding: 0 24px;
  /* border-top crvena linija uklonjena (P29.2) — desktop usklađen sa mobilnim,
     gde je već bila uklonjena (linija ispod, media query). */
}
body.page-kontakt .kanal-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr;
  gap: 56px;
  padding: 44px 0;
  border-bottom: 1px solid var(--kp-rule);
  align-items: start;
  transition: opacity 0.4s ease;
}
body.page-kontakt .kanal-row:last-child { border-bottom: none; }
/* Dim ostalih redova na hover SAMO na uređajima sa mišem — na dodiru bi tap
   „zaglavio" :hover (iOS) i ostavio ostale redove zatamnjene. */
@media (hover: hover) {
  body.page-kontakt .kanali-list:has(.kanal-row:hover) .kanal-row:not(:hover) { opacity: 0.42; }
}

body.page-kontakt .kanal-num {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 300;
  color: var(--kp-fg-faint);
  letter-spacing: -0.02em;
  line-height: 0.9;
  transition: color 0.4s ease;
}
body.page-kontakt .kanal-row:hover .kanal-num { color: var(--kp-gold); }
body.page-kontakt .kanal-num .sub {
  display: block;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--kp-fg-haze);
  text-transform: uppercase;
  margin-top: 14px;
  line-height: 1.6;
}

body.page-kontakt .kanal-head h3 {
  font-size: 26px;
  font-weight: 500;
  color: var(--kp-fg);
  margin: 0 0 14px;
  letter-spacing: -0.014em;
  line-height: 1.18;
  max-width: 380px;
}
body.page-kontakt .kanal-head h3 em {
  color: var(--kp-gold);
  font-style: italic;
  font-weight: 500;
}
body.page-kontakt .kanal-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--kp-red-bright);
  text-transform: uppercase;
  padding: 6px 10px;
  border: 1px solid var(--kp-tag-border);
}

body.page-kontakt .kanal-body { min-width: 0; }
body.page-kontakt .kanal-tempo {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kp-gold-dim);
  margin-bottom: 12px;
}
body.page-kontakt .kanal-body p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--kp-fg-mid);
  margin: 0;
}
body.page-kontakt .kanal-key {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--kp-key-border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--kp-gold-dim);
  text-transform: uppercase;
  line-height: 1.7;
}
body.page-kontakt .kanal-key b { color: var(--kp-gold); font-weight: 500; }
body.page-kontakt .kanal-contact {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--kp-fg);
  letter-spacing: 0.04em;
}
/* tel: i mailto: linkovi — bele kao plain text (Signal/Sastanak), nema
   color promene na visited/hover/active, bez underline-a. */
body.page-kontakt .kanal-contact a,
body.page-kontakt .kanal-contact a:link,
body.page-kontakt .kanal-contact a:visited,
body.page-kontakt .kanal-contact a:hover,
body.page-kontakt .kanal-contact a:active,
body.page-kontakt .kanal-contact a:focus {
  color: var(--kp-fg);
  text-decoration: none;
}

/* ============================================================
   FOOTER ROW — meta linija ispod kanali liste
   ============================================================ */
body.page-kontakt .kontakt-footer-row {
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 0 24px 64px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
body.page-kontakt .kontakt-footer-row .mono-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--kp-fg-haze);
  text-transform: uppercase;
}
body.page-kontakt .kontakt-footer-row .mono-meta b { color: var(--kp-fg-soft); font-weight: 500; }
body.page-kontakt .kontakt-footer-row .rhombus {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--kp-gold);
  transform: rotate(45deg);
  vertical-align: middle;
  margin-right: 12px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 920px) {
  body.page-kontakt .lanes-signage { grid-template-columns: 1fr 1fr; }
  body.page-kontakt .sgn-cell:nth-child(2) { border-right: none; }
  body.page-kontakt .sgn-cell:nth-child(1),
  body.page-kontakt .sgn-cell:nth-child(2) { border-bottom: 1px solid rgba(221, 194, 138, 0.22); }
  body.page-kontakt .sgn-name { font-size: 22px; }
  body.page-kontakt .kanal-row { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
  body.page-kontakt .kanal-num { font-size: 40px; }
}

@media (max-width: 720px) {
  /* Chapter band centriran u 2 reda: DETALJI / KO, KAD, KAKO. Crveni ⊢/⊣
     ticks, „·" i „ZA SVAKI KANAL —" van toka; ostaju samo žute kotvice
     (::before/::after dijamanti) — one su top:50% pa su centrirane po visini
     za oba reda. */
  body.page-kontakt .kontakt-chapter-band {
    height: auto;
    flex-direction: column;
    gap: 5px;
    padding: 16px 44px;
    text-align: center;
  }
  body.page-kontakt .kontakt-chapter-band .tick,
  body.page-kontakt .kontakt-chapter-band .sep,
  body.page-kontakt .kontakt-chapter-band .kb-pre { display: none; }

  /* Višak crvene linije iznad stavki: band već ima donji crveni rub; ukloni
     border-top liste (dvostruka linija sa razmakom je delovala zbijeno). */
  body.page-kontakt .kanali-list { border-top: 0; margin-top: 40px; }

  /* Poslednji blok pred footer (page-band): dve meta linije su bile zbijene
     (space-between na uskoj koloni); stack-uj ih centrirano sa vazduhom. */
  body.page-kontakt .kontakt-page-band {
    height: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 24px;
    text-align: center;
    line-height: 1.6;
  }
}