/* =========================================================
   Responsive — završni sloj (učitava se poslednji)
   Breakpointi: 1600+ · 1280 · 1140 · 860 · 540 · 380
   ========================================================= */

/* ---------- Osnova za sve uređaje ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; overflow-x: clip; }
a, button, label, summary, [role=button], input[type=checkbox], input[type=radio] { touch-action: manipulation; }
h1, h2, h3, h4, .single-title, .geo-card h4, .fcard h4 { overflow-wrap: break-word; hyphens: auto; }
[data-no-translit], .tbl td, code { overflow-wrap: anywhere; }
img, video, iframe { max-width: 100%; }

/* vidljiv fokus za tastaturu (ne prikazuje se na klik mišem) */
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 3px; }
.input:focus-visible, .rte-area:focus-visible { outline: 0; }
.btn:focus-visible, .icon-btn:focus-visible, .chip:focus-visible { outline-offset: 3px; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 5000; background: var(--bordo); color: #fff; padding: 10px 16px; border-radius: 4px; font-weight: 700; }
.skip-link:focus { top: 12px; color: #fff; }

/* visina ekrana bez skoka adresne trake na telefonu */
.offcanvas { height: 100vh; height: 100dvh; }
.modal, .modal-main { max-height: 94vh; max-height: 94dvh; }
.lightbox img { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
.auth-page { min-height: calc(100vh - 116px); min-height: calc(100dvh - 116px); }

/* tabele: nagoveštaj da se skroluje u stranu */
.table-wrap { -webkit-overflow-scrolling: touch; background:
  linear-gradient(90deg, #fff 30%, rgba(255,255,255,0)) left/40px 100% no-repeat local,
  linear-gradient(270deg, #fff 30%, rgba(255,255,255,0)) right/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%, rgba(13,21,38,.14), transparent) left/12px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%, rgba(13,21,38,.14), transparent) right/12px 100% no-repeat scroll; }

/* ---------- Veliki ekrani ---------- */
@media (min-width: 1600px) {
  .container { width: min(1400px, 100% - 64px); }
  .hero .container { padding: 140px 0 180px; }
  .map { height: 620px; }
}
@media (min-width: 2200px) {
  html { font-size: 17px; }
  .container { width: min(1560px, 100% - 64px); }
}

/* ---------- Laptop 1140–1280: zbijeniji header ---------- */
@media (max-width: 1280px) and (min-width: 1141px) {
  .header > .container { gap: 18px; }
  .nav > .nav-item > a { padding: 0 10px; font-size: 14px; }
  .logo-text small { display: none; }
  .header-actions .btn { padding: 0 14px; }
}

/* ---------- Tableti i laptopovi na dodir: nema hovera → bočni meni ---------- */
@media (hover: none) and (max-width: 1366px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .header-actions { margin-left: auto; }
  .fcard-cta { max-height: 60px; opacity: 1; }
  .svc svg.lucide.bg-ic { opacity: .07; transform: none; color: var(--bordo); }
}

/* ---------- Tablet ≤ 1140 ---------- */
@media (max-width: 1140px) {
  .hero .container { padding: 88px 0 130px; }
  .section { padding: 72px 0; }
  .with-side, .with-side.right { padding: 24px 0 48px; }
  .stats-strip .s { padding: 20px; }
  .profile-logo { width: 132px; height: 132px; }
  .profile-top .profile-title, .profile-top .profile-actions { padding-top: 76px; }
  .card-head { flex-wrap: wrap; }
  .card-head > .row, .card-head > .chips { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .card-head > .row::-webkit-scrollbar { display: none; }
}

/* ---------- Telefon ≤ 860 ---------- */
@media (max-width: 860px) {
  /* iOS ne zumira polja ako je font ≥ 16px */
  .input, select.input, textarea.input, .field input, .field select, .oc-search input, .rte-area, .ed-area, .chat-input .input, .nl-form .input { font-size: 16px; }
  .toolbar .input { min-width: 0; flex: 1 1 140px; }

  /* veće dodirne zone (min 44px) */
  .check { min-height: 44px; }
  .check input, .tbl input[type=checkbox], .perm-table input { width: 20px; height: 20px; }
  .footer a:not(.icon-btn):not(.logo) { padding: 9px 0; }
  .footer-bottom a { padding: 0; }
  .crumbs a { padding: 6px 0; }
  .up-x { width: 34px; height: 34px; }
  .icon-btn { width: 44px; height: 44px; }
  .tbl .acts .icon-btn { width: 40px; height: 40px; }
  .btn-sm { height: 40px; }
  .chip { padding: 9px 14px; }
  .g-nav { width: 40px; height: 40px; }
  .switch { width: 46px; height: 28px; }
  .switch i::before { width: 22px; height: 22px; }
  .switch input:checked + i::before { transform: translateX(18px); }

  /* minimalna veličina teksta */
  .ad-kicker, .field .f-label, .news-meta, .media-grid2 .mf small, .media-grid div small, .ev-date span, .hot-tag, .up-main, .today-tag, .fcard-flag, .dash-nav .sep, .tbl th, .eyebrow { font-size: 11px; }

  /* raspored */
  .row:not(.nowrap) { flex-wrap: wrap; }
  .card-pad { padding: 20px 18px; }
  .card-head { padding: 14px 18px; }
  .section-head { flex-wrap: wrap; align-items: flex-start; }
  .section-head > .btn { order: 2; }
  .ph .row { width: 100%; }
  .ph .row .btn { flex: 1 1 auto; }
  .row:has(> .qr) { flex-direction: column; }
  .profile-logo { width: 104px; height: 104px; padding: 10px; }
  .geonet-logo { font-size: 24px; }
  .profile-top { margin-top: -52px; gap: 14px; }
  .profile-top .profile-title, .profile-top .profile-actions { padding-top: 0; }
  .profile-actions { width: 100%; }
  .profile-actions .btn { flex: 1; }
  .profile-cover { height: 150px; }
  .info-row { flex-wrap: wrap; }
  .info-row span:last-child { text-align: left; }
  .hero h1 br { display: none; }
  .hero p.lead { font-size: 16.5px; margin-bottom: 28px; }
  .hero-tags { gap: 6px; }
  .hero-tags a { padding: 7px 11px; }
  .search-tabs button { padding: 11px 16px; }
  .stats-strip { margin-top: -44px; }
  .map-overlay { right: 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ad-slot::before { position: static; display: block; text-align: right; margin-bottom: 6px; }
  .newsletter h2 { font-size: 22px; }
  .post-body { padding: 18px; }
  .post-author { padding: 14px 18px; }
  .msg { max-width: 88%; }
  .inbox { height: auto; }
  .chat-msgs { min-height: 260px; }
  .event { flex-wrap: wrap; }
  .event .btn { margin-left: 74px; }
  .comm-stats div { margin-right: 22px; }
  .comm-stats b { font-size: 22px; }
  .article-layout { padding: 32px 0 56px; gap: 24px; }
  .prose { font-size: 16.5px; }
  .prose .lede { font-size: 18px; }
  .prose blockquote { font-size: 18px; }
  .seller-stats div { padding: 10px 6px; }
  .big-price { font-size: 32px; }
  .admin-user-head { padding: 18px; }
  .rating-big b { font-size: 44px; }
  .hours-edit > div { grid-template-columns: 1fr 1fr; }
  .hours-edit > div > span { grid-column: 1 / -1; font-weight: 700; }
  .modal-main { padding: 26px 18px; }
  .seg button { padding: 14px 8px; }
  .oc-tiles a { padding: 14px 12px; }
  .footer .grid { grid-template-columns: 1fr 1fr; }
  .footer .grid > div:first-child { grid-column: 1 / -1; }
}

/* ---------- Mali telefon ≤ 540 ---------- */
@media (max-width: 540px) {
  .container { width: calc(100% - 28px); }
  .hero .container { padding: 56px 0 104px; }
  h1 { font-size: clamp(28px, 9vw, 40px); }
  .section { padding: 56px 0; }
  .eyebrow::before { width: 18px; }
  .search-box { padding: 6px; }
  .field { height: 60px; padding: 0 12px; }
  .steps-nav { grid-template-columns: 1fr 1fr; gap: 6px; }
  .steps-nav a { flex-direction: row; text-align: left; padding: 8px 10px; background: #fff; border: 1px solid var(--line); }
  .steps-nav a span { width: 26px; height: 26px; font-size: 12px; }
  .stats-strip .s:nth-child(n) { border-left: 0; }
  .stats-strip .s:nth-child(even) { border-left: 1px solid var(--line); }
  .tile, .price-card { padding: 22px 18px; }
  .forum-cat { padding: 14px 16px; }
  .list-item { padding: 14px 16px; }
  .offer { padding: 16px; }
  .mod-item .mod-img { width: 100%; height: 150px; }
  .mod-item .acts { width: 100%; }
  .mod-item .acts .btn { flex: 1 1 auto; }
  .dash-main { padding: 16px 0 24px; }
  .kpi-row { gap: 10px; }
  .grid.g-4 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; }
  .stat b { font-size: 22px; }
  .stat-ic { width: 32px; height: 32px; }
  .pgallery { grid-template-columns: 1fr 1fr; }
  .pgallery img:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16/10; }
  .fcar-head h2 { font-size: 22px; }
  .news-big > div { padding: 22px; }
  .rating-sum { padding: 18px; gap: 16px; }
  .footer { padding-top: 56px; }
  .lightbox { padding: 56px 0 84px; }
  .lightbox img { border-radius: 0; }
  .event .btn { margin-left: 0; width: 100%; }
  .form-submit { padding: 16px; }
  .form-submit .row, .form-submit .btn { width: 100%; }
  .profile-title h1 { font-size: 22px; }
  .tabs a { padding: 12px 12px; font-size: 13.5px; }
  .chat-input { padding: 8px; }
}
/* g-4 statistike na početnim stranama ostaju jednokolonske u sadržaju (ne u panelima) */
@media (max-width: 540px) { .section .grid.g-4, .comm-hero + .container .grid.g-4 { grid-template-columns: 1fr; } }

/* ---------- Najmanji telefoni ≤ 380 (iPhone SE, mali Androidi) ---------- */
@media (max-width: 380px) {
  body { font-size: 15px; }
  .logo-text { font-size: 17px; }
  .logo-mark { width: 36px; height: 36px; }
  .menu-btn { width: 42px; height: 42px; }
  .header-actions .avatar { width: 34px; height: 34px; }
  .search-tabs button { padding: 10px 13px; }
  .stats-strip .inner { grid-template-columns: 1fr; }
  .stats-strip .s { flex-direction: row; align-items: center; border-left: 0 !important; border-top: 1px solid var(--line); }
  .stats-strip .s:first-child { border-top: 0; }
  .services { grid-template-columns: 1fr; }
  .svc { min-height: 0; flex-direction: row; align-items: center; gap: 14px; }
  .svc h3 { margin: 0; }
  .svc svg.lucide { margin: 0; }
  .grid.g-4 { grid-template-columns: 1fr; }
  .steps-nav { grid-template-columns: 1fr; }
  .tabbar a span { font-size: 10px; }
  .oc-tiles { grid-template-columns: 1fr 1fr; gap: 8px; }
  .footer .grid { grid-template-columns: 1fr; }
  .upload-grid { grid-template-columns: repeat(2, 1fr); }
  .seller-stats { grid-template-columns: 1fr 1fr 1fr; }
  .price-card .p-amount { font-size: 34px; }
}

/* ---------- Telefon položen (landscape, mala visina) ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero .container { padding: 40px 0 90px; }
  .tabbar { padding-top: 2px; padding-bottom: 2px; }
  .tabbar a span { display: none; }
  .tabbar .tab-plus { width: 44px; height: 44px; margin-top: -10px; }
  body { padding-bottom: 54px; }
  .offcanvas .oc-tiles { grid-template-columns: repeat(4, 1fr); }
  .auth-photo { display: none; }
  .lightbox { padding: 12px 70px; }
  .lb-nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lb-nav.prev { left: 10px; } .lb-nav.next { right: 10px; }
  .lightbox img { max-height: calc(100dvh - 50px); }
}

/* ---------- Štampa (npr. profil geometra ili oglas) ---------- */
@media print {
  .topbar, .header, .footer, .tabbar, .to-top, .screens-btn, .screens, .demo-bar, .ad-slot, .offcanvas, .oc-bg, .profile-actions, .g-nav, .map-wrap, .leaflet-container { display: none !important; }
  body { background: #fff; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #666; }
}

/* ---------- Ispravke posle automatske provere (320–1920 px) ---------- */
.auth-page { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.container[style*="place-items:center"] { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.container[style*="place-items:center"] > .card { max-width: 100%; }
input[type=range] { height: 32px; }
.boost input, .role-pick input { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .auth-page { grid-template-columns: minmax(0, 1fr); }
  .bars { gap: 4px; }
  .bars-labels { gap: 4px; font-size: 10.5px; }
  .bars-labels span:nth-child(even) { visibility: hidden; }
}
@media (max-width: 380px) {
  .tabbar a span { font-size: 11px; letter-spacing: -.01em; }
}
.crumbs { flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 1340px) { .how-badge { left: 16px; } }