/* =============================================================================
   contact.css — kontakt stranica, kanali i lepljiva traka za poziv.

   Isti obrazac kao footer.css: sve je skoulovano pod `.dm-contact` i
   `.dm-channels`, jer bi imena poput `.dm-field` ili `.dm-submit` inače
   stajala u globalnom cascade-u pored 6.900 linija Webflow stilova iz
   dm-deco-art.css.

   Ovaj fajl se učitava samo na kontakt stranici. Lepljiva traka za poziv
   (`.dm-callbar`) stoji u footer.css, jer se renderuje u podnožju na svakoj
   stranici, a footer.css je jedini koji se svuda učitava.

   Tokeni prate DESIGN.md: jedan tamni ton, jedno zlato (#C8A353), bez druge
   boje, bez gradijenata, radijusi 2–4px. Nigde `border-left` kao akcentna
   traka — DESIGN.md to izričito zabranjuje.
   ============================================================================= */

.dm-contact,
.dm-channels {
  --dm-gold: #C8A353;
  --dm-gold-hover: #D3B468;
  --dm-gold-active: #A9822F;
  --dm-ivory: #F5EFE1;
  --dm-ivory-secondary: #D9CBA3;
  --dm-muted: #8A8477;
  --dm-page: #0A0A0A;
  --dm-surface: #121110;
  --dm-surface-raised: #17150F;
  --dm-hairline: rgba(200, 163, 83, .22);
  --dm-hairline-strong: rgba(200, 163, 83, .4);
  --dm-success: #6E8F5C;
  --dm-error: #A8453A;
  --dm-ease: cubic-bezier(.645, .045, .355, 1);
  --dm-ui: var(--font--ui-font, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
}

.dm-contact {
  background-color: var(--dm-page);
  color: var(--dm-ivory);
}

/* --- Hero ------------------------------------------------------------------ */

/* Zaglavlje je lepljivo i providno — hero mu ostavlja vazduha, da nadnaslov
   "[ Kontakt ]" ne dodiruje donju ivicu navigacije. */
.dm-contact_hero {
  padding-top: var(--spacing--xxxl);
  padding-bottom: var(--spacing--xl);
}

/* Zlatna linija ispod naslova. Sopstvena klasa umesto Webflow-ovih
   `margin-top margin-m margin-bottom margin-m`: te dve kombinacije se u
   Webflow sistemu bore za isti razmak, pa je donji ispadao manji od gornjeg. */
.dm-contact_rule {
  margin: var(--spacing--m) 0;
}

/* Naslov su tri celine, svaka u svom redu (span-ovi u markupu). Globalnih
   4.5rem lomi "merimo prostor," na dva reda, pa je u hero-u spušten. */
.dm-contact_hero-text h1 {
  font-size: 3.5rem;
}

.dm-contact_hero-text h1 span {
  display: block;
}

.dm-contact_hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing--xl);
}

.dm-contact_hero-text > p {
  max-width: 34em; /* DESIGN.md: mera 65–75ch na telu teksta */
}

.dm-contact_hero-image {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(200, 163, 83, .08);
}

.dm-contact_hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 34rem;
  object-fit: cover;
}

.dm-contact_context {
  margin-top: var(--spacing--s);
  padding: var(--spacing--xs) var(--spacing--s);
  border: 1px solid var(--dm-hairline);
  border-radius: 4px;
  background-color: var(--dm-surface-raised);
  font-family: var(--dm-ui);
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--dm-ivory-secondary);
}

.dm-contact_context strong {
  color: var(--dm-gold);
  font-weight: 500;
}

.dm-contact_note {
  margin-top: var(--spacing--s);
  font-family: var(--dm-ui);
  font-size: .8125rem;
  line-height: 1.5;
  letter-spacing: .03em;
  color: var(--dm-muted);
}

.dm-contact_note a {
  color: var(--dm-ivory-secondary);
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color .3s var(--dm-ease);
}

.dm-contact_note a:hover {
  color: var(--dm-gold-hover);
}

/* --- Kanali (poziv / Viber / Instagram / WhatsApp) -------------------------- */

/* Red uzima celu širinu kolone, ali kartica ne prelazi 19rem: jedan jedini
   kanal inače postane kutija raspeta preko kolone, sa dve reči u levom uglu. */
.dm-channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing--xs);
  margin: var(--spacing--m) 0 0;
  padding: 0;
  list-style: none;
}

/* Stavka je i sama flex, pa se link rasteže na visinu najviše kartice u redu.
   Sa `height: 100%` na linku procenat se u prelomljenom redu računao prema
   celom omotaču, pa je poslednja kartica prekrivala onu iznad sebe. */
.dm-channels_item {
  display: flex;
  flex: 1 1 11rem;
  max-width: 19rem;
}

.dm-channel {
  display: flex;
  flex: 1;
  align-items: center;
  gap: .75rem;
  padding: .8125rem 1rem;
  border: 1px solid var(--dm-hairline);
  border-radius: 2px;
  background-color: var(--dm-surface-raised);
  color: var(--dm-ivory);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  transition: border-color .3s var(--dm-ease), background-color .3s var(--dm-ease),
              color .3s var(--dm-ease), transform .3s var(--dm-ease), box-shadow .3s var(--dm-ease);
}

/* Ikonica je nacrtana u istom jeziku kao ikonice u assets/icons: samo linija,
   bez ispune. Debljina stoji ovde, pa se sve ikonice menjaju na jednom mestu. */
.dm-channel_icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--dm-gold);
  transition: color .3s var(--dm-ease);
}

.dm-channel_icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dm-channel_text {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}

.dm-channel_label {
  font-family: var(--dm-ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
}

/* Meta nosi pravi podatak (broj, handle), pa ne ide na najsitniji stepen —
   DESIGN.md traži čitljive veličine i za mikrotekst. */
.dm-channel_meta {
  font-family: var(--dm-ui);
  font-size: .8125rem;
  line-height: 1.35;
  letter-spacing: .03em;
  text-wrap: balance; /* u uskoj kartici prelom ostavlja jednu reč u drugom redu */
  color: var(--dm-ivory-secondary);
}

.dm-channel.is-telefon .dm-channel_meta {
  font-variant-numeric: tabular-nums;
}

/* Klik na Viber kada šemu nema ko da otvori: contact-fallback.js upisuje broj
   u meta red i dodaje ovu klasu. Zlato je ovde jedina promena na ekranu, pa
   oko primeti da je kartica odgovorila, bez toasta i bez druge boje. */
.dm-channel.is-fallback .dm-channel_meta {
  font-variant-numeric: tabular-nums;
  color: var(--dm-gold);
}

/* Hover je zlatno pranje iz DESIGN.md (ghost dugme, 8%), ne nova boja: preko
   crne stranice ispod daje ton za stepen svetliji od mirne površine kartice. */
.dm-channel:hover {
  border-color: var(--dm-gold);
  background-color: rgba(200, 163, 83, .08);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(200, 163, 83, .06);
}

.dm-channel:hover .dm-channel_icon {
  color: var(--dm-gold-hover);
}

.dm-channel:focus-visible {
  outline: 2px solid var(--dm-gold);
  outline-offset: 2px;
}

/* Zlatnu ispunu nosi prvi kanal u redu, ne fiksno telefon. DESIGN.md: zlato
   ostaje manjina na ekranu, pa jedan kanal dobija boju, a ostali samo obris. */
.dm-channel.is-primary {
  border-color: var(--dm-gold);
  background-color: var(--dm-gold);
  color: var(--dm-page);
}

.dm-channel.is-primary .dm-channel_icon,
.dm-channel.is-primary:hover .dm-channel_icon {
  color: inherit;
}

.dm-channel.is-primary .dm-channel_meta {
  color: rgba(10, 10, 10, .72);
}

.dm-channel.is-primary:hover {
  border-color: var(--dm-gold-hover);
  background-color: var(--dm-gold-hover);
}

.dm-channel:active {
  transform: translateY(0) scale(.98);
}

/* --- Tri koraka ------------------------------------------------------------ */

.dm-contact_steps {
  background-color: var(--dm-surface);
  border-top: 1px solid var(--dm-hairline);
  border-bottom: 1px solid var(--dm-hairline);
}

.dm-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing--l);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.dm-step .heading-five {
  color: var(--dm-gold);
  margin-bottom: var(--spacing--xs);
}

.dm-step h2 {
  margin: 0 0 var(--spacing--s);
}

.dm-step p {
  margin: 0;
  color: var(--dm-ivory-secondary);
}

/* --- Forma ----------------------------------------------------------------- */

.dm-contact_form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(16rem, .8fr);
  gap: var(--spacing--xl);
  align-items: start;
}

.dm-contact_lead {
  max-width: 40em;
  margin: var(--spacing--s) 0 var(--spacing--l);
  color: var(--dm-ivory-secondary);
}

.dm-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing--s);
}

.dm-form_row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing--s);
}

/* Honeypot: van ekrana, ne `display:none` — deo botova preskače polja koja
   su skrivena na očigledan način. */
.dm-form_trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dm-field {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}

.dm-field label {
  font-family: var(--dm-ui);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .04em;
  color: var(--dm-ivory-secondary);
}

.dm-req {
  color: var(--dm-gold);
}

.dm-opt {
  font-weight: 400;
  color: var(--dm-muted);
}

/* Webflow-ovi `.w-input` defaulti ovde ne važe — polja su van te komponente,
   pa stilovi idu direktno na elemente unutar `.dm-form`. */
.dm-form input[type="text"],
.dm-form input[type="tel"],
.dm-form input[type="email"],
.dm-form input[type="number"],
.dm-form select,
.dm-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--dm-hairline);
  border-radius: 2px;
  background-color: var(--dm-surface);
  color: var(--dm-ivory);
  font-family: var(--dm-ui);
  font-size: 1rem; /* ispod 16px iOS zumira polje pri fokusu */
  line-height: 1.4;
  transition: border-color .3s var(--dm-ease), box-shadow .3s var(--dm-ease);
  appearance: none;
}

.dm-form textarea {
  resize: vertical;
  min-height: 7rem;
}

.dm-form select {
  /* Strelica kao inline SVG (data URI), da select ne zavisi od dodatnog
     zahteva i da nasledi zlatnu boju sistema. */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23C8A353'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
  padding-right: 40px;
}

.dm-form option {
  background-color: var(--dm-surface);
  color: var(--dm-ivory);
}

.dm-form ::placeholder {
  color: var(--dm-muted);
}

/* DESIGN.md: fokus je pomeranje boje ivice, bez sjaja. Inset ring samo
   udvostručuje debljinu te iste ivice, da tanka linija zadovolji vidljivost. */
.dm-form input:focus,
.dm-form select:focus,
.dm-form textarea:focus {
  outline: none;
  border-color: var(--dm-gold);
  box-shadow: inset 0 0 0 1px var(--dm-gold);
}

.dm-form input[aria-invalid="true"],
.dm-form select[aria-invalid="true"],
.dm-form textarea[aria-invalid="true"] {
  border-color: var(--dm-error);
}

.dm-field_error {
  margin: 0;
  font-family: var(--dm-ui);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--dm-error);
}

.dm-field_help {
  margin: 0;
  font-family: var(--dm-ui);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--dm-muted);
}

/* Polje za fajlove bez JavaScripta — native izgled, ali u bojama sistema. */
.dm-form input[type="file"] {
  padding: 10px 0;
  font-family: var(--dm-ui);
  font-size: .875rem;
  color: var(--dm-ivory-secondary);
}

.dm-form input[type="file"]::file-selector-button {
  margin-right: .75rem;
  padding: 8px 16px;
  border: 1px solid var(--dm-hairline-strong);
  border-radius: 2px;
  background-color: transparent;
  color: var(--dm-gold);
  font-family: var(--dm-ui);
  font-size: .8125rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .3s var(--dm-ease), background-color .3s var(--dm-ease);
}

.dm-form input[type="file"]::file-selector-button:hover {
  border-color: var(--dm-gold);
  background-color: rgba(200, 163, 83, .08);
}

/* Kad skripta doda svoje dugme, original ostaje u DOM-u i u fokusu — samo se
   sklanja sa ekrana. `display:none` bi ga izbacio iz tabulacije. */
.dm-form input[type="file"].is-upgraded {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.dm-file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}

.dm-file_btn {
  padding: 10px 20px;
  border: 1px solid var(--dm-hairline-strong);
  border-radius: 2px;
  background-color: transparent;
  color: var(--dm-gold);
  font-family: var(--dm-ui);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .3s var(--dm-ease), background-color .3s var(--dm-ease);
}

.dm-file_btn:hover {
  border-color: var(--dm-gold);
  background-color: rgba(200, 163, 83, .08);
}

/* Fokus je na skrivenom <input>-u, pa se prsten crta na dugmetu — inače bi
   tabulacija kroz formu na ovom polju izgledala kao da je ništa ne prima. */
.dm-file.is-focus .dm-file_btn {
  border-color: var(--dm-gold);
  box-shadow: inset 0 0 0 1px var(--dm-gold);
}

.dm-file_count {
  font-family: var(--dm-ui);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--dm-muted);
}

/* Saglasnost: checkbox i tekst u jednom redu, poruka o grešci pun red ispod. */
.dm-field_check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
}

.dm-field_check input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .15rem;
  border: 1px solid var(--dm-hairline-strong);
  border-radius: 2px;
  background-color: var(--dm-surface);
  appearance: none;
  cursor: pointer;
  transition: border-color .3s var(--dm-ease), background-color .3s var(--dm-ease);
}

.dm-field_check input[type="checkbox"]:checked {
  border-color: var(--dm-gold);
  background-color: var(--dm-gold);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230A0A0A'%3E%3Cpath d='M6.5 11.4 2.9 7.8l-1.1 1.1 4.7 4.7 8-8-1.1-1.1z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}

.dm-field_check input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--dm-gold);
  box-shadow: inset 0 0 0 1px var(--dm-gold);
}

.dm-field_check label {
  cursor: pointer;
  font-weight: 400;
  letter-spacing: .02em;
}

.dm-field_check .dm-field_error {
  grid-column: 1 / -1;
}

.dm-submit {
  align-self: flex-start;
  margin-top: var(--spacing--xs);
  padding: 13px 28px;
  border: 1px solid transparent;
  border-radius: 2px;
  background-color: var(--dm-gold);
  color: var(--dm-page);
  font-family: var(--dm-ui);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .3s var(--dm-ease), transform .15s var(--dm-ease);
}

.dm-submit:hover {
  background-color: var(--dm-gold-hover);
}

.dm-submit:active {
  background-color: var(--dm-gold-active);
  transform: scale(.98);
}

.dm-submit:focus-visible {
  outline: 2px solid var(--dm-gold-hover);
  outline-offset: 3px;
}

/* --- Poruke posle slanja --------------------------------------------------- */

.dm-alert {
  margin-bottom: var(--spacing--l);
  padding: var(--spacing--s);
  border: 1px solid var(--dm-hairline);
  border-radius: 4px;
  background-color: var(--dm-surface-raised);
}

.dm-alert h3 {
  margin: 0 0 .5rem;
}

.dm-alert p {
  margin: 0;
  color: var(--dm-ivory-secondary);
}

/* Puna ivica u boji stanja, nikad traka sa strane (DESIGN.md, zabrana
   `border-left` kao akcenta). */
.dm-alert.is-success {
  border-color: var(--dm-success);
  background-color: rgba(110, 143, 92, .1);
}

.dm-alert.is-error {
  border-color: var(--dm-error);
  background-color: rgba(168, 69, 58, .1);
}

/* --- Podaci studija -------------------------------------------------------- */

.dm-contact_info {
  padding: 32px;
  border: 1px solid var(--dm-hairline);
  border-radius: 4px;
  background-color: var(--dm-surface-raised);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}

.dm-contact_info > h2 {
  margin: 0 0 var(--spacing--m);
}

.dm-info_item {
  padding-bottom: var(--spacing--s);
  margin-bottom: var(--spacing--s);
  border-bottom: 1px solid var(--dm-hairline);
}

.dm-info_item:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.dm-info_item .heading-five {
  margin-bottom: .35rem;
  color: var(--dm-gold);
}

.dm-info_item p {
  margin: 0;
  color: var(--dm-ivory-secondary);
}

.dm-info_item a {
  color: var(--dm-ivory);
  text-decoration: none;
  border-bottom: 1px solid var(--dm-hairline-strong);
  transition: color .3s var(--dm-ease), border-color .3s var(--dm-ease);
}

.dm-info_item a:hover {
  color: var(--dm-gold-hover);
  border-color: var(--dm-gold);
}

.dm-info_item.is-legal p {
  font-family: var(--dm-ui);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dm-muted);
}

/* --- Responsive ------------------------------------------------------------ */

@media screen and (max-width: 991px) {
  .dm-contact_hero-inner,
  .dm-contact_form-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing--l);
  }

  /* Slika ide ispod teksta: na tabletu i telefonu kanali moraju da ostanu
     iznad preloma, a fotografija to gura naniže. */
  .dm-contact_hero-image {
    order: 2;
  }

  .dm-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing--m);
  }

  /* NE spuštati ovo ispod 8rem. Zaglavlje je `position: fixed` sa
     `inset: .75rem` (dm-deco-art.css ~5039), pa mu donja ivica ovde pada na
     80px bez obzira na širinu ekrana — a nije u toku dokumenta, tako da ga
     hero mora obići sopstvenim paddingom. Raniji --spacing--xl (72px) je
     nadnaslov "[ Kontakt ]" ostavljao 8px IZNAD te ivice, to jest ispod
     providne navigacije. 8rem daje 48px vazduha, isti razmak koji hero na
     ostalim stranicama (npr. /o-nama/) ima na telefonu. */
  .dm-contact_hero {
    padding-top: 8rem;
  }
}

@media screen and (max-width: 767px) {
  /* Selektor sa klasom je specifičniji od globalnog `h1`, pa mobilne
     veličine naslova moraju da se ponove ovde. */
  .dm-contact_hero-text h1 {
    font-size: 2.25rem;
  }

  .dm-form_row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dm-channels_item {
    flex-basis: calc(50% - var(--spacing--xs));
  }

  .dm-contact_info {
    padding: 24px;
  }
}

@media screen and (max-width: 479px) {
  .dm-contact_hero-text h1 {
    font-size: 2rem;
  }

  /* Na telefonu kanal ide preko cele širine: prst traži veću metu od oka. */
  .dm-channels_item {
    flex-basis: 100%;
    max-width: none;
  }
}

/* Bez animacija za korisnike koji ih ne žele. */
@media (prefers-reduced-motion: reduce) {
  .dm-contact *,
  .dm-channels * {
    transition-duration: .01ms !important;
  }

  .dm-channel:hover,
  .dm-channel:active,
  .dm-submit:active {
    transform: none;
  }
}