/*
 * Responsive refinements
 * Keeps the existing desktop visual design intact while making layouts
 * adapt cleanly to tablets and phones.
 */

img, video, iframe { max-width: 100%; }

/* ========================= HOME ========================= */
@media (max-width: 1024px) {
  body.pocetna .logo { width: 140px; }
  body.pocetna .hero { height: 78vh; min-height: 560px; }
  body.pocetna .o_nama { top: 78vh; height: auto; min-height: 600px; padding: 100px 7% 120px; }
  body.pocetna .o_nama h2 { margin: 0 0 28px; font-size: 32px; }
  body.pocetna .o_nama p { margin: 0; font-size: 16px; line-height: 1.7; }
  body.pocetna .o_nama br { display: none; }
  body.pocetna .linija-gore { top: 60px; left: 15%; width: 70%; }
  body.pocetna .linija-dole { top: auto; bottom: 60px; left: 15%; width: 70%; }

  body.pocetna .evo_gde_nas_pronaci { top: calc(78vh + 600px); }
  body.pocetna #map { top: calc(78vh + 650px); margin: 0; height: 440px; }
  body.pocetna .drustvene_mreze { top: calc(78vh + 1090px); padding: 70px 20px; }
  body.pocetna .social-box { gap: 80px; }
  body.pocetna .box_slika { top: calc(78vh + 1420px); left: 4%; width: 92%; display: flex; gap: 3%; }
  body.pocetna .box_slika img { width: 31.33%; margin: 0; height: auto; object-fit: cover; }
  body.pocetna .brands { top: calc(78vh + 1740px); width: 100%; padding: 50px 0; }
  body.pocetna .brands h2 { font-size: 30px; }
  body.pocetna .brands-window { width: 72%; }
  body.pocetna .brand-item { min-width: 220px; }
  body.pocetna .footer { top: calc(78vh + 2040px); }
  body.pocetna .footer-box { flex-wrap: wrap; gap: 45px 5%; }
  body.pocetna .footer-kolona { width: 45%; }

  body.pocetna .profi_content,
  body.pocetna .tesla_content,
  body.pocetna .servis_content { max-width: 48%; }
  body.pocetna .profi_naslov,
  body.pocetna .tesla_naslov,
  body.pocetna .servis_naslov { font-size: clamp(30px, 4vw, 46px); }
  body.pocetna .profi_tekst,
  body.pocetna .tesla_tekst,
  body.pocetna .servis_tekst { font-size: 14px; }
  body.pocetna .dugme_saznaj_vise_profi,
  body.pocetna .kontakt_dugme_profi,
  body.pocetna .dugme_saznaj_vise_tesla,
  body.pocetna .kontakt_dugme_tesla,
  body.pocetna .dugme_saznaj_vise_servis,
  body.pocetna .kontakt_dugme_servis { width: 130px; height: 48px; font-size: 16px; }
}

@media (max-width: 700px) {
  body.pocetna .logo_box { top: 14px; left: 14px; }
  body.pocetna .logo { width: 105px; }
  body.pocetna .est1992 { font-size: 9px; }
  body.pocetna .hero { height: 72vh; min-height: 520px; }
  body.pocetna .slide > img { object-position: center; }
  body.pocetna .arrow { font-size: 28px; padding: 12px; }
  body.pocetna .controls { bottom: 20px; gap: 8px; }
  body.pocetna .dot { width: 9px; height: 9px; margin: 0 4px; }

  body.pocetna .profi_pocetna_tekst,
  body.pocetna .servis_pocetna_tekst { top: 23%; font-size: clamp(22px, 7vw, 34px); line-height: 1.05; }
  body.pocetna .profi_pocetna_tekst { left: 10%; }
  body.pocetna .servis_pocetna_tekst { left: auto; right: 8%; text-align: right; }
  body.pocetna .profi_pocetna_tekst span,
  body.pocetna .servis_pocetna_tekst span { padding: 0; }

  body.pocetna .profi_content,
  body.pocetna .tesla_content,
  body.pocetna .servis_content { left: 8%; top: 18%; width: 84%; max-width: none; }
  body.pocetna .profi_naslov,
  body.pocetna .tesla_naslov,
  body.pocetna .servis_naslov { font-size: 32px; }
  body.pocetna .profi_tekst,
  body.pocetna .tesla_tekst,
  body.pocetna .servis_tekst { font-size: 13px; line-height: 1.45; }
  body.pocetna .dugme_saznaj_vise_profi,
  body.pocetna .kontakt_dugme_profi,
  body.pocetna .dugme_saznaj_vise_tesla,
  body.pocetna .kontakt_dugme_tesla,
  body.pocetna .dugme_saznaj_vise_servis,
  body.pocetna .kontakt_dugme_servis { top: auto; bottom: 15%; width: 118px; height: 44px; font-size: 14px; }
  body.pocetna .kontakt_dugme_profi,
  body.pocetna .kontakt_dugme_tesla,
  body.pocetna .kontakt_dugme_servis { left: calc(50% - 125px); }
  body.pocetna .dugme_saznaj_vise_profi,
  body.pocetna .dugme_saznaj_vise_tesla,
  body.pocetna .dugme_saznaj_vise_servis { left: calc(50% + 7px); }

  body.pocetna .o_nama { top: 72vh; min-height: 700px; padding: 85px 24px 105px; }
  body.pocetna .o_nama h2 { font-size: 28px; }
  body.pocetna .o_nama p { font-size: 14px; line-height: 1.65; }
  body.pocetna .linija-gore { top: 48px; left: 10%; width: 80%; }
  body.pocetna .linija-dole { bottom: 48px; left: 10%; width: 80%; }

  body.pocetna .evo_gde_nas_pronaci { top: calc(72vh + 700px); font-size: 18px; }
  body.pocetna #map { top: calc(72vh + 750px); height: 360px; }
  body.pocetna #map::after { height: 90px; }
  body.pocetna .drustvene_mreze { top: calc(72vh + 1110px); padding: 55px 16px; }
  body.pocetna .drustvene_mreze h2 { margin-bottom: 45px; font-size: 32px; }
  body.pocetna .social-box { gap: 42px; }
  body.pocetna .social i { font-size: 50px; }
  body.pocetna .social p { font-size: 15px; }

  body.pocetna .box_slika { top: calc(72vh + 1410px); left: 16px; width: calc(100% - 32px); display: grid; grid-template-columns: 1fr; gap: 14px; }
  body.pocetna .box_slika img { width: 100%; max-height: 300px; object-fit: cover; }
  body.pocetna .brands { top: calc(72vh + 2370px); padding: 45px 0; }
  body.pocetna .brands h2 { font-size: 28px; margin-bottom: 30px; }
  body.pocetna .brands-window { width: calc(100% - 90px); }
  body.pocetna .brand-item { min-width: 180px; height: 120px; }
  body.pocetna .brand-item img { max-width: 145px; max-height: 60px; }
  body.pocetna .brand-arrow { font-size: 26px; padding: 8px; }
  body.pocetna .footer { top: calc(72vh + 2650px); }
  body.pocetna .footer-box { width: 86%; padding: 45px 0; gap: 35px; }
  body.pocetna .footer-kolona { width: 100%; }
  body.pocetna .footer-kolona h3 { margin-bottom: 15px; font-size: 21px; }
  body.pocetna .footer-kolona p { font-size: 15px; }
}

/* ======================= CONTACT ======================= */
@media (max-width: 900px) {
  body.contact-body { overflow-x: hidden; overflow-y: auto; }
  .contact-page { min-height: 100vh; height: auto; padding: 60px 6% 70px; display: grid; grid-template-columns: 1fr; gap: 35px; }
  .contact-left, .contact-right-top, .contact-map { position: relative; inset: auto; width: 100%; height: auto; }
  .contact-left { min-height: 650px; }
  .contact-label { width: auto; padding: 8px 14px; font-size: 13px; border-radius: 8px; }
  .contact-left h1 { font-size: clamp(42px, 8vw, 68px); }
  .contact-text { font-size: 16px; }
  .contact-icon { width: 56px; height: 56px; border-radius: 10px; font-size: 22px; }
  .contact-info-item h3 { font-size: 17px; margin-bottom: 5px; }
  .contact-info-item p, .contact-info-item a { font-size: 15px; }
  .call-button { position: relative; left: auto; bottom: auto; width: min(280px, 100%); height: 54px; margin-top: 30px; border-radius: 10px; font-size: 15px; }
  .call-button span { font-size: 20px; }
  .message-card { border-radius: 16px; }
  .message-summary h2 { font-size: 24px; }
  .dropdown-arrow { width: 40px; height: 40px; font-size: 22px; }
  .contact-form input, .contact-form textarea { padding: 14px 15px; border-radius: 8px; font-size: 15px; }
  .contact-form button { height: 52px; border-radius: 8px; font-size: 14px; }
  .contact-map { height: 380px; border-radius: 16px; }
}

@media (max-width: 560px) {
  .contact-page { padding: 35px 20px 50px; gap: 26px; }
  .contact-left { min-height: 620px; }
  .contact-left h1 { font-size: 44px; margin-bottom: 22px; }
  .contact-text { width: 100%; font-size: 15px; margin-bottom: 30px; }
  .contact-info { gap: 18px; }
  .contact-info-item { gap: 15px; }
  .contact-icon { width: 48px; height: 48px; font-size: 19px; }
  .form-row { flex-direction: column; gap: 12px; }
  .form-row input { width: 100%; }
  .message-summary { padding: 20px; }
  .message-content { padding: 0 20px 20px; }
  .contact-map { height: 300px; }
}

/* ===================== GENERAL PAGES ===================== */
@media (max-width: 700px) {
  .back-home { max-width: calc(100vw - 30px); }
  body.lg-page { overflow-x: hidden; }
}