:root { --red: #C31E3A; --text: #22242a; --muted: #626773; --border: #e5e8ed; }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body { font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; color: var(--text); background: #f8f9fb; display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
    button, input { font: inherit; }
    header { flex: 0 0 auto; min-height: 70px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; gap: 12px; flex-wrap: wrap; }
    .identity { display: flex; align-items: center; gap: 11px; }
    .brandmark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--red); color: white; font-size: 22px; }
    .identity strong { font-size: 17px; }
    .identity small { display: block; color: var(--muted); margin-top: 2px; font-size: 12px; }
    .langs { display: flex; gap: 5px; }
    .langs button { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; font-size: 12px; }
    .langs button[aria-pressed="true"] { background: var(--red); color: white; border-color: var(--red); }
    .layout { display: grid; grid-template-columns: minmax(290px, 360px) minmax(0, 1fr); flex: 1 1 auto; height: auto; min-height: 0; }
    aside { background: white; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
    .panel-top { padding: 20px 18px 14px; border-bottom: 1px solid var(--border); }
    .eyebrow { color: var(--red); text-transform: uppercase; font-size: 11px; letter-spacing: .08em; font-weight: 700; }
    h1 { font-size: 24px; line-height: 1.2; margin: 7px 0 8px; }
    .intro, .stat, .notice { font-size: 13px; line-height: 1.5; color: var(--muted); }
    .search { width: 100%; padding: 11px 13px; border: 1px solid #d7dbe3; border-radius: 9px; margin: 13px 0 10px; outline-color: var(--red); }
    .stat { margin: 0; }
    .category-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
    .filter-chip { display: inline-flex; gap: 6px; align-items: center; justify-content: center;
      min-height: 34px; padding: 6px 9px; background: #fff; color: #444b56;
      border: 1px solid #dce0e6; border-radius: 9px; cursor: pointer;
      font-size: 11px; font-weight: 680; line-height: 1.2; }
    .filter-chip:hover, .filter-chip:focus-visible { border-color: var(--red); background:#fff4f6; }
    .filter-chip[aria-pressed="true"] { background: #C31E3A; border-color:#C31E3A; color:white; }
    .filter-chip .category-symbol { width: 19px; height: 19px; flex: 0 0 19px; background:transparent; color:inherit; box-shadow:none; }
    .filter-chip .category-symbol svg { width: 19px; height: 19px; }
    .filter-chip strong { font-size:10px; font-weight:750; opacity:.8; }
    .filter-chip.filter-all { padding: 6px 12px; }
    .item-sub .cat-mini { color:var(--red); font-weight:700; }
    @media (max-width:700px) {
      .category-filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-top: 7px; scrollbar-width:thin; }
      .filter-chip { white-space:nowrap; flex-shrink:0; }
      .panel-top { min-width:0; }
    }
    .actions { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
    .data-freshness {display:flex;align-items:flex-start;gap:7px;margin-top:9px;color:#69717d;
      font-size:11px;line-height:1.45;min-height:16px;}
    .freshness-indicator {display:inline-block;flex:0 0 7px;width:7px;height:7px;
      margin-top:4px;border-radius:50%;background:#a2a9b3;}
    .data-freshness[data-state="fresh"] .freshness-indicator {background:#247C83;}
    .data-freshness[data-state="stale"] .freshness-indicator {background:#B66C38;}
    .refresh { color: var(--red); border: 1px solid #e7c7cf; border-radius: 8px; padding: 7px 10px; background: white; cursor: pointer; font-size: 12px; }
    .status { padding: 9px 18px 0; font-size: 12px; color: var(--muted); min-height: 29px; }
    .status.error { color: #a52b38; }
    .list { list-style: none; margin: 0; padding: 8px 10px 12px; overflow: auto; flex: 1; }
    .list li { border-bottom: 1px solid #eef0f2; }
    .show-more { flex:0 0 auto; padding:12px 14px; cursor:pointer; border:0;
      border-top:1px solid var(--border); background:#fff5f7; color:var(--red);
      font-size:13px; font-weight:700; }
    .show-more:hover, .show-more:focus-visible { background:#fce7ed; }
    .show-more[hidden] { display:none; }
    /* Dve nezavisne akcije za SVAKO dobro, čak i bez koordinata. */
    .item-row { display: flex; align-items: stretch; gap: 8px; padding: 5px 3px; }
    .list .item-open {
      flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 9px 8px;
      background: transparent; border: 0; border-radius: 8px;
      cursor: pointer; text-align: left; color: inherit;
      overflow-wrap: anywhere;
    }
    .list .item-open:hover, .list .item-open:focus-visible { background: #fff0f3; outline: 2px solid var(--red); outline-offset: -2px; }
    .item-upload {
      display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
      align-self: center; gap: 6px; min-height: 44px; min-width: 94px;
      padding: 8px 10px; border: 1px solid #df9aa8; border-radius: 9px;
      color: #A61833; background: #fff0f3;
      font-size: 12px; font-weight: 750; line-height: 1.2;
      text-decoration: none; white-space: nowrap;
    }
    .item-upload:hover, .item-upload:focus-visible {
      background: var(--red); color: #fff; border-color: var(--red);
      outline: 2px solid var(--red); outline-offset: 2px;
    }
    .item-upload svg { width: 19px; height: 19px; flex: 0 0 auto; }
    .item-upload span { display: inline-block; }

    .item-title { display: block; font-size: 13px; font-weight: 650; line-height: 1.4; }
    .item-sub { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; }
    .item-missing { color: #aa5d20; }

    .map-area { position:relative; min-width:0; min-height:0; height:100%; }
    #map { height:100%; width:100%; }
    .map-loading { position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
      z-index:4; background:#ffffffed; border:1px solid #e5e8ed; border-radius:999px;
      box-shadow:0 4px 18px #0002; padding:10px 15px; display:flex;
      align-items:center; gap:9px; font-size:12px; font-weight:600; color:#626773;
      max-width:calc(100% - 28px); white-space:nowrap; pointer-events:none; }
    .map-loading[hidden] {display:none!important;}
    .map-loading-dot {height:9px;width:9px;border-radius:50%;background:var(--red);
      animation:mapPulse 1.3s ease-in-out infinite; flex-shrink:0;}
    @keyframes mapPulse {50%{opacity:.3; transform:scale(.75);}}
    @media (prefers-reduced-motion:reduce) {.map-loading-dot{animation:none;}}
    #map { min-width: 0; height: 100%; }
    .maplibregl-popup-content { padding: 14px; border-radius: 13px; box-shadow: 0 5px 25px #0002; max-height: min(68dvh, 520px); overflow-y: auto; }
    .maplibregl-popup-close-button { font-size: 22px; padding: 2px 8px; }
    .site-card { width: 345px; max-width: calc(100vw - 94px); padding-top: 9px; }
    .site-upper { display: flex; gap: 13px; align-items: flex-start; }
    .upload-action { margin-top: 14px; }
    .site-info a.upload-button, .upload-button {
      display: flex; align-items: center; justify-content: center;
      gap: 8px; width: 100%; background: var(--red); color: #fff;
      padding: 12px 14px; border-radius: 9px; text-decoration: none;
      font-size: 14px; font-weight: 700; line-height: 1.35;
      text-align: center; transition: background-color .15s ease;
      margin: 0;
    }
    .upload-button:hover, .upload-button:focus-visible {
      background: #9F1631; color: #fff; text-decoration: none;
      outline-offset: 3px;
    }
    .upload-note { margin: 7px 0 0 !important; font-size: 10px !important;
      line-height: 1.45 !important; color: var(--muted) !important; text-align: center;
    }
    .site-image { width: 110px; height: 125px; flex: 0 0 110px; background: #f0f2f4; border: 1px solid #e9ecef; border-radius: 9px; overflow: hidden; display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 11px; }
    .site-image img { width: 100%; height: 100%; object-fit: cover; }
    .placeholder span { display: block; font-size: 29px; margin-bottom: 4px; }
    .placeholder .placeholder-icon { width: 38px; height: 38px; margin: 0 auto 9px;
      background: transparent; color: #9097a3; border-radius: 0; }
    .placeholder .placeholder-icon svg { width: 34px; height: 34px; }
    .site-info { min-width: 0; flex: 1; }
    .site-info h2 { font-size: 16px; margin: 0 14px 7px 0; line-height: 1.35; }
    .site-info h2 a { display: inline; margin: 0; font: inherit; color: var(--text); text-decoration: none; }
    .site-info h2 a:hover, .site-info h2 a:focus-visible { color: var(--red); text-decoration: underline; }
    .site-image a { display: block; width: 100%; height: 100%; }
    .site-image a:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
    .site-links { display: flex; flex-direction: column; align-items: start; margin-top: 5px; }
    .site-links a { margin-top: 5px; }
    .site-info .muted-link { color: var(--muted); font-weight: 500; font-size: 11px; }
    .credit a { display: inline; font-weight: 500; font-size: inherit; text-decoration: underline; }
    .site-info p { margin: 5px 0; color: #555b65; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
    .site-info a { display: block; margin: 7px 0 0; color: var(--red); font-size: 12px; text-decoration: none; font-weight: 600; }
    .site-info a:hover { text-decoration: underline; }
    .site-info .credit { font-size: 10px; line-height: 1.4; margin-top: 6px; }
    .panel-note { border-top: 1px solid var(--border); background: #fafafb; font-size: 11px; color: var(--muted); padding: 11px 18px; line-height: 1.45; }
    .panel-note a { color: var(--red); }
    @media (max-width: 700px) {
      header { padding: 10px 12px; min-height: 60px; }
      .identity strong { font-size: 14px; }
      .identity small { font-size: 11px; }
      .brandmark { width: 31px; height: 31px; font-size: 18px; }
      .langs button { padding: 5px 7px; }
      .layout { display: flex; flex-direction: column; height: auto; min-height: 0; }
      aside { flex: 0 0 min(56dvh, 485px); height: min(56dvh, 485px); min-height: 0; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--border); }
      .panel-top { padding: 9px 12px; }
      h1 { font-size: 19px; margin: 3px 0; }
      .intro { display: none; }
      .search { margin: 6px 0; padding: 9px 10px; }
      .actions { margin-top: 5px; }
      .status { padding: 4px 12px 0; min-height: 20px; }
      .list { min-height: 0; max-height: none; overflow-y: auto; flex: 1 1 auto; }
      .list { padding-top: 3px; }
      .panel-note { display: none; }
      .map-area { height: auto; min-height: 0; flex: 1; }
      .site-card { gap: 9px; width: 282px; }
      .site-image { width: 85px; height: 105px; flex-basis: 85px; }
      .site-info h2 { font-size: 14px; }
      .list { padding-left: 6px; padding-right: 6px; }
      .item-row { gap: 5px; }
      .item-upload { min-width: 87px; padding: 7px 8px; font-size: 11px; }
    }
    @media (max-height: 550px) and (max-width: 700px) {
      aside { flex-basis: 62%; }
      .panel-top { padding-top: 5px; padding-bottom: 5px; }
    }


    /* Veliki detaljni prikaz: uz mapu na desktopu, zasebna stranica na telefonu. */
    [hidden] { display: none !important; }
    .layout.details-open { grid-template-columns: minmax(310px, 39%) minmax(0, 61%); }
    .layout.details-open aside { display: none; }
    .layout.details-open .map-area { grid-column: 1; }
    .details-panel {
      grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto;
      background: #fff; border-left: 1px solid var(--border);
    }
    .details-toolbar {
      position: sticky; top: 0; z-index: 5; display: flex; align-items: center;
      justify-content: space-between; gap: 10px; padding: 13px 20px;
      border-bottom: 1px solid var(--border); background: rgba(255,255,255,.97);
    }
    .back-button {
      border: 0; background: transparent; cursor: pointer; color: var(--red);
      font-size: 14px; font-weight: 750; min-height: 44px; padding: 7px 10px;
      border-radius: 8px; text-align: left;
    }
    .back-button:hover, .back-button:focus-visible { background: #fff0f3; }
    .details-counter { color: var(--muted); font-size: 12px; }
    .detail-body { padding: 23px clamp(15px, 2.8vw, 34px) 34px; }
    .detail-header { margin-bottom: 19px; }
    .detail-header h2 { margin: 7px 0; font-size: clamp(24px,2.5vw,34px); line-height: 1.2; letter-spacing: -.025em; }
    .detail-header h2 a { color: var(--text); text-decoration: none; }
    .detail-header h2 a:hover { color: var(--red); text-decoration: underline; }
    .detail-kicker { color: var(--red); font-size: 12px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
    .detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .detail-tag { background: #f3f4f6; border-radius: 25px; padding: 8px 12px; font-size: 12px; color: #4b5361; }
    .detail-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
    .detail-main, .detail-side { min-width: 0; }
    .detail-hero {
      width: 100%; height: clamp(215px,27vw,410px); border-radius: 14px;
      background: #edf0f3; overflow: hidden; display: grid; place-items: center;
      text-decoration: none; color: #5c6571;
    }
    /* Uvek prikazuje CELU fotografiju — bez nasilnog odsecanja spomenika. */
    .detail-hero img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
    .detail-hero:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
    .detail-photo-credit { color: var(--muted); font-size: 11px; line-height: 1.5; margin: 8px 0 18px; overflow-wrap: anywhere; }
    .detail-photo-credit a { color: var(--red); }
    .detail-block { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 18px; }
    .detail-block h3 { margin: 0 0 10px; font-size: 17px; }
    .detail-block p { margin: 0 0 10px; color: #505766; font-size: 14px; line-height: 1.75; }
    .detail-muted { color: var(--muted); }
    .detail-link { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 0; color: #A61833; font-weight: 700; font-size: 13px; text-decoration: none; }
    .detail-link:hover { text-decoration: underline; }
    .detail-box { border: 1px solid var(--border); border-radius: 13px; padding: 16px; margin-bottom: 14px; background: #fff; }
    .detail-box h3 { font-size: 16px; margin: 0 0 10px; }
    .detail-box p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0; }
    .detail-box .upload-button { margin-top: 12px; min-height: 48px; }
    .detail-nav { display: flex; gap: 8px; flex-wrap: wrap; }
    .detail-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; flex: 1 1 auto; border: 1px solid #d9dde5; border-radius: 8px; padding: 9px 10px; text-align: center; text-decoration: none; color: #303743; font-size: 12px; font-weight: 700; }
    .detail-nav a:hover { background: #f6f7f9; }
    .detail-credits-label { font-weight: 600; }
    @media (min-width: 1250px) {
      .detail-columns { grid-template-columns: minmax(0,1fr) minmax(218px,300px); gap: 20px; }
      .detail-hero { height: clamp(230px,23vw,385px); }
    }
    @media (min-width: 701px) and (max-width: 1000px) {
      .layout.details-open { grid-template-columns: minmax(240px, 38%) minmax(0,62%); }
    }
    @media (max-width: 700px) {
      .layout.details-open { display: flex; flex-direction: column; }
      .layout.details-open aside, .layout.details-open .map-area { display: none; }
      .layout.details-open .details-panel { display: block; flex: 1 1 auto; min-height: 0; width: 100%; border-left: none; overflow-y: auto; }
      .details-toolbar { padding: 6px 10px; }
      .detail-body { padding: 16px 14px 28px; }
      .detail-header h2 { font-size: 23px; }
      .detail-hero { height: clamp(210px,60vw,310px); }
      .detail-columns { gap: 12px; }
      .detail-nav a { flex-basis: 45%; }
    }


    /* Proveren zaglavni logo i glavni navigacioni meni */
    .brandmark { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; background: transparent; text-decoration: none; border-radius: 8px; }
    .brandmark img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .header-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 18px; }
    .header-nav button, .header-nav a {
      display: inline-flex; gap: 7px; align-items: center; justify-content: center;
      text-decoration: none; color: #424956; cursor: pointer; background: transparent;
      border: 0; border-radius: 9px; padding: 10px 11px; font-size: 13px; font-weight: 650;
      min-height: 42px;
    }
    .header-nav button:hover, .header-nav a:hover, .header-nav button[aria-current="page"] { background: #fff0f3; color: var(--red); }
    .details-toolbar { gap: 6px; flex-wrap: wrap; }
    .breadcrumbs { font-size: 12px; color: var(--muted); display: flex; align-items: center; min-width: 0; gap: 5px; flex-wrap: wrap; }
    .breadcrumbs button { border: 0; padding: 4px; color: var(--red); background: transparent; cursor: pointer; font-size: inherit; }
    .breadcrumbs .trail { overflow: hidden; text-overflow: ellipsis; max-width: 320px; white-space: nowrap; }
    .detail-title-row { display: flex; align-items: center; gap: 14px; }
    .category-symbol {
      width: 52px; height: 52px; border-radius: 50%; flex: 0 0 52px;
      background: var(--red); color: #fff; display: grid; place-items: center;
      box-shadow: 0 4px 12px #c31e3a24;
    }
    .category-symbol svg { width: 27px; height: 27px; }
    .wiki-source-box { display: flex; align-items: center; gap: 12px; background: #f7f8fa; border-radius: 11px; padding: 13px 15px; margin-top: 15px; }
    .wiki-w { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 9px; background: white; font: 700 30px/1 Georgia, serif; color: #242424; flex: 0 0 43px; }
    .wiki-source-box a { font-size: 13px; font-weight: 700; color: #1c64b5; text-decoration: none; }
    .wiki-source-box small { display: block; color: var(--muted); margin-top: 3px; font-size: 10px; }
    .commons-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: 10px 0 12px; }
    .commons-thumb { display: flex; flex-direction: column; min-width: 0; text-decoration: none; color: inherit; border-radius: 8px; border: 1px solid #e7e8eb; overflow: hidden; }
    .commons-thumb img { width: 100%; height: 84px; object-fit: contain; background: #f2f4f6; display:block; }
    .commons-thumb:hover, .commons-thumb:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
    .thumb-credit { font-size: 9px; line-height: 1.25; padding: 5px; color: #65707c; overflow-wrap: anywhere; }
    .commons-hint { font-size: 11px !important; line-height: 1.4; }
    .detail-hero { position: relative; }
    .detail-hero::after { content: ''; pointer-events: none; position: absolute; inset: 0; border: 1px solid #e3e6ea; border-radius: inherit; }
    @media(max-width: 1020px) { .header-nav { margin: 0; gap: 0; } .header-nav button, .header-nav a { font-size: 12px; padding: 8px; } }
    @media(max-width: 700px) {
      header { gap: 8px; padding: 8px 11px; }
      .brandmark { width: 34px; height: 34px; flex-basis: 34px; }
      .header-nav { order: 3; width: 100%; justify-content: flex-start; border-top: 1px solid #eee; padding-top: 5px; }
      .header-nav button, .header-nav a { min-height: 36px; }
      .header-nav .external-site { margin-left: auto; }
      .detail-title-row { align-items: flex-start; gap: 10px; }
      .category-symbol { width: 40px; height: 40px; flex-basis: 40px; }
      .category-symbol svg { width: 21px; height: 21px; }
      .breadcrumbs { font-size: 11px; }
      .breadcrumbs .trail { max-width: 180px; }
      .commons-thumbs { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
      .commons-thumb img { height: 72px; }
      .detail-hero { height: clamp(220px,65vw,375px); }
    }
    @media(max-width: 410px) { .langs button { font-size: 11px; padding: 5px 5px; } .header-nav button, .header-nav a { padding: 6px; } }


    /* v3: The main photograph is fitted by its full natural height, never cropped. */
    .detail-hero {
      height: auto !important;
      min-height: 180px;
      max-height: none !important;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1f3f5;
      overflow: hidden;
    }
    .detail-hero img {
      width: auto !important;
      height: auto !important;
      max-width: 100%;
      max-height: min(68dvh, 650px);
      object-fit: contain !important;
      object-position: center;
      display: block;
      flex: none;
    }
    .detail-kicker-link {
      appearance: none;
      border: 0;
      padding: 5px 0;
      background: transparent;
      font: inherit;
      cursor: pointer;
      text-align: left;
    }
    .detail-kicker-link:hover, .detail-kicker-link:focus-visible {
      text-decoration: underline;
      outline-offset: 4px;
    }
    .mini-location-map {
      height: 158px;
      min-height: 158px;
      width: 100%;
      border: 1px solid #e5e8ed;
      border-radius: 10px;
      overflow: hidden;
      background: #ecf0eb;
      margin: 8px 0;
    }
    .mini-location-map .maplibregl-ctrl-attrib {
      font-size: 9px;
    }
    .service-heading {
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .service-icon {
      display: inline-block;
      width: 22px;
      height: 24px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .service-source-link {
      border-top: 1px solid #e5e8ed;
      padding: 12px 0 2px;
      margin-top: 12px;
      display: flex !important;
      align-items: center;
      gap: 9px;
      color: #3a485e !important;
      font-weight: 600 !important;
      text-decoration: none !important;
    }
    .commons-gallery-link {
      display: inline-flex !important;
      align-items: center;
      gap: 9px;
      min-height: 44px;
      padding: 7px 9px;
      margin-top: 5px;
      border-radius: 8px;
      background: #f5f7fa;
      border: 1px solid #e6e9ef;
      font-weight: 650;
      color: #354358 !important;
      text-decoration: none !important;
      line-height: 1.35;
    }
    .commons-gallery-link:hover, .commons-gallery-link:focus-visible {
      color: var(--red) !important;
      background: #fff2f5;
      border-color: #ecc3cb;
    }
    .commons-gallery-link .service-icon { width: 27px; height: 27px; }
    .service-source-link:hover { color: var(--red) !important; }
    .service-source-link .service-icon {
      width: 31px;
      height: 24px;
    }
    .commons-thumbs {
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 7px;
    }
    .commons-thumb img { height: 68px; }
    .commons-thumb .thumb-credit {
      line-height: 1.15;
      font-size: 9px;
      padding: 4px;
      max-height: 30px;
      overflow: hidden;
    }
    @media (max-width: 700px) {
      .detail-hero img { max-height: min(60dvh, 480px); }
      .mini-location-map { height: 142px; min-height: 142px; }
      .commons-thumb img { height: 72px; }
    }
  
    /* Fotografija ostaje cela, ali opis ne potiskuje ispod ekrana. */
    .detail-hero {
      height: auto !important;
      min-height: 0 !important;
      max-height: min(340px, 38dvh) !important;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #f1f3f5;
      overflow: hidden;
    }
    .detail-hero img {
      width: auto !important;
      height: auto !important;
      max-width: 100% !important;
      max-height: min(340px, 38dvh) !important;
      object-fit: contain !important;
      object-position: center;
    }
    @media (min-width: 701px) and (max-width: 1100px) {
      .detail-hero, .detail-hero img {
        max-height: 300px !important;
      }
    }
    @media (max-width: 700px) {
      .detail-hero, .detail-hero img {
        max-height: min(240px, 40dvh) !important;
      }
    }


    /* v3: mapa i navigacija na ranije praznom mestu, uz naziv dobra. */
    .detail-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(215px, 275px);
      gap: 18px;
      align-items: start;
    }
    .detail-title-group { min-width: 0; }
    .detail-header .detail-location { margin: 0; padding: 10px 12px 12px; }
    .detail-header .detail-location h3 { font-size: 13px; margin-bottom: 5px; }
    .detail-header .mini-location-map {
      height: 108px; min-height: 108px; margin: 4px 0 5px;
    }
    .detail-header .detail-location p {
      margin: 3px 0 6px; font-size: 11px;
    }
    .detail-header .detail-nav { gap: 6px; }
    .detail-header .detail-nav a {
      min-height: 36px; padding: 6px 7px; font-size: 11px;
    }

    /* Nova logika: jedan skrol za DETALJE, mapa Srbije ostaje fiksirana levo.
       Nema odvojenih skrol-traka kroz fotografiju ili u desnoj galeriji. */
    .layout.details-open .details-panel {
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      overscroll-behavior-y: contain;
    }
    .layout.details-open .details-panel::-webkit-scrollbar { display: none; }
    .layout.details-open .detail-main,
    .layout.details-open .detail-side {
      overflow: visible;
      min-height: 0;
      scrollbar-gutter: auto;
      padding-right: 0;
    }
    .layout.details-open .detail-header {
      display: block;
      margin-bottom: 12px;
    }
    /* Desna mini-mapa se drzi uz naslov, ali u svojoj koloni.
       Naslov i fotografija su u .detail-primary, jedno ispod drugog. */
    .detail-primary { min-width: 0; }
    .layout.details-open .detail-primary .detail-header {
      margin-bottom: 14px;
      display: block;
    }
    @media (min-width: 1250px) {
      .layout.details-open .detail-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(218px, 300px);
        gap: 18px;
        align-items: start;
      }
      .layout.details-open .detail-hero,
      .layout.details-open .detail-hero img {
        max-height: min(340px, 38dvh) !important;
      }
    }
    @media (min-width: 1250px) and (max-height: 679px) {
      /* Ako je ekran nizak, skroluje se ceo detaljni prikaz umesto premalih kolona. */
      .detail-main, .detail-side { overflow: visible; }
    }
    @media (max-width: 1249px) {
      .detail-header { grid-template-columns: minmax(0, 1fr); }
      .detail-location { max-width: 100%; }
      .detail-header .mini-location-map { height: 126px; min-height: 126px; }
    }
    @media (max-width: 700px) {
      .detail-header { gap: 12px; }
      .detail-header .detail-location { padding: 10px; }
      .detail-header .mini-location-map { height: 100px; min-height: 100px; }
      .detail-header .detail-nav a { min-height: 44px; }
    }


    /* Zavrsni identitet mape: cetiri smirene boje, jedna jasna glavna akcija. */
    :root { --sk:#C31E3A; --an:#B66C38; --pkic:#247C83; --zm:#74629A; --mixed:#44546A; }
    .panel-top { padding: 14px 14px 12px; }
    .panel-top h1 { margin: 4px 0 6px; font-size: 21px; }
    .panel-top .eyebrow { display:none; }
    .panel-top .intro { font-size:12px; margin-bottom:5px; }
    .panel-top .search { margin: 7px 0 9px; }
    .category-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0 0 11px; }
    .filter-chip { justify-content:flex-start; text-align:left; padding:9px 8px; border:1px solid #e5e8ed; border-left:3px solid var(--filter-category-color, #9ca3af); min-height:55px; flex-wrap:wrap; gap:4px 5px; background:#fff; }
    .filter-chip:not(.filter-all) {
      background:var(--filter-category-bg,#f8f9fb);
      border-color:var(--filter-category-border,#e5e8ed);
      border-left-color:var(--filter-category-color,#9ca3af);
    }
    .filter-chip:not(.filter-all):hover,
    .filter-chip:not(.filter-all):focus-visible { filter:brightness(.975); outline-offset:2px; }
    .filter-chip:not(.filter-all)[aria-pressed="true"] {
      background:var(--filter-category-selected-bg,#fff2f5);
      border-color:var(--filter-category-color,var(--red));
      box-shadow:0 0 0 1px var(--filter-category-color,var(--red)) inset;
    }
    .filter-chip.filter-all { background:#f4f5f8; }
    .filter-chip:not(.filter-all) .category-symbol { color:var(--filter-category-color); }
    .filter-chip strong { margin-left:auto; font-size:13px; opacity:1; color:#292f39; }
    .filter-chip span:not(.category-symbol) {font-size:11px; flex:1 1 auto; }
    .filter-chip[aria-pressed="true"] {color:#20242b; border-left-color:var(--filter-category-color,var(--red)); }
    .filter-chip[aria-pressed="true"] strong { color:var(--red); }
    .filter-chip.filter-all { grid-column:1/-1; min-height:40px; padding:8px 11px; }
    .list .item-open { min-height:45px; }
    .map-legend { position:absolute; z-index:5; left:12px; bottom:13px; background:rgba(255,255,255,.96); border:1px solid #dfe4e8; border-radius:11px; padding:9px 12px; max-width:min(260px,calc(100% - 30px)); box-shadow:0 3px 14px #101b2c12; font-size:11px; }
    .map-legend summary { cursor:pointer; font-weight:700; color:#20242b; list-style:none; }
    .map-legend summary::-webkit-details-marker { display:none; }
    .map-legend summary:before { content:'▤'; margin-right:6px; color:#C31E3A; }
    .legend-items { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; padding-top:10px; }
    .legend-items span { display:flex; align-items:center; gap:6px; }
    .legend-dot { width:11px; height:11px; border-radius:50%; flex:0 0 11px; display:inline-block; }
    .map-tools { position:absolute; z-index:5; top:10px; left:12px; display:flex; gap:7px; flex-wrap:wrap; max-width:calc(100% - 110px); }
    .map-tools button { cursor:pointer; border:1px solid #e0e4e9; border-radius:8px; background:#fff; padding:8px 10px; font-size:11px; font-weight:650; color:#343944; box-shadow:0 2px 8px #0001; }
    .map-tools button:hover,.map-tools button:focus-visible { border-color:var(--red); }
    .header-nav { flex-wrap:wrap; }
    #nav-more { display:none; }
    .header-nav button,.header-nav a { white-space:nowrap; }
    .more-footer { display:flex; gap:8px 12px; flex-wrap:wrap; margin-bottom:5px; }
    .more-footer button {border:0; padding:0; background:transparent; color:var(--red); font-size:11px; cursor:pointer; text-decoration:underline;}
    .info-dialog { border:1px solid #e2e6ed; box-shadow:0 14px 55px #13203830; border-radius:15px; max-width:min(625px,calc(100% - 24px)); max-height:min(85dvh,850px); padding:0; color:#242731; }
    .info-dialog::backdrop {background:#18213688;}
    .info-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:16px 22px; border-bottom:1px solid #e7eaf0; position:sticky; top:0; background:#fff; z-index:1; }
    .info-dialog-head h2 {font-size:21px; margin:0;}
    .info-dialog-head button { font-size:23px; background:#f3f4f6; border:0; border-radius:8px; cursor:pointer; width:35px; height:35px; }
    .info-dialog-body { padding:6px 22px 24px; font-size:14px; line-height:1.65; }
    .info-dialog-body h3 {font-size:16px; margin:18px 0 5px;}
    .info-dialog-body p {margin:8px 0;}
    .info-dialog-body a {color:#B31E3B;}
    .report-button { display:flex; gap:7px; align-items:center; justify-content:center; padding:10px; font-size:12px; border:1px solid #e1e5ea; border-radius:8px; background:#fff; color:#464c56; text-decoration:none; margin-top:10px; }
    .report-button:hover { background:#fff3f5; border-color:#dd8c9d; }
    @media(max-width:700px) {
      header {align-items:flex-start;}
      header { position:relative; z-index:10; }
      .identity small { display:none; }
      .header-nav {gap:8px; order:3; width:100%; justify-content:space-between; flex-wrap:nowrap;}
      .header-nav button,.header-nav a {font-size:11px;}
      #nav-more {display:inline-flex;}
      .header-nav .nav-secondary {display:none;}
      .header-nav.more-open .nav-secondary {display:block; position:absolute; top:100%; right:10px; z-index:12; padding:12px 18px; background:white; border:1px solid #e5e8ed; border-radius:8px; box-shadow:0 7px 22px #0002;}
      .header-nav.more-open #nav-about {top:calc(100% + 0px);}
      .header-nav.more-open #nav-help {top:calc(100% + 40px);}
      .header-nav.more-open #nav-contact {top:calc(100% + 80px);}
      .header-nav.more-open #nav-about,.header-nav.more-open #nav-help,.header-nav.more-open #nav-contact {min-width:165px;text-align:left;}
      .panel-top {padding:9px 12px 7px;}
      .category-filters {display:flex; flex-wrap:nowrap; gap:6px; margin:3px 0 7px; overflow:auto;}
      .filter-chip,.filter-chip.filter-all { flex:0 0 auto; min-height:36px; padding:6px 9px; border-left-width:2px; white-space:nowrap; }
      .filter-chip span:not(.category-symbol) {font-size:11px;}
      .filter-chip strong {font-size:11px;}
      .map-tools {left:7px; top:8px; max-width:calc(100% - 74px);}
      .map-tools button {font-size:10px; padding:7px;}
      .map-legend {left:7px; bottom:7px; font-size:10px; padding:6px 9px; max-width:min(242px,85%);}
      .map-legend:not([open]) {max-width:125px;}
    }


    /* Prva poseta: miran uvodni prozor, bez slajdova i suvisnih dekoracija. */
    .welcome-dialog {
      border:1px solid #e3e6ec; border-radius:17px; padding:0;
      width:min(510px, calc(100vw - 30px)); max-width:calc(100vw - 30px);
      max-height:min(90dvh, 730px); overflow-y:auto;
      color:var(--text); background:#fff; box-shadow:0 23px 70px #101a3040;
    }
    .welcome-dialog::backdrop {background:rgba(19,30,49,.57);}
    .welcome-top {display:flex; gap:12px; align-items:center; justify-content:space-between;
      padding:19px 22px 10px;}
    .welcome-brand {display:flex; gap:10px; align-items:center; font-size:12px; font-weight:700; color:#5c6472;}
    .welcome-mark {width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;background:transparent;}
    .welcome-mark img {width:100%;height:100%;object-fit:contain;display:block;}
    .welcome-close {width:38px;height:38px;flex:0 0 38px;border:0;border-radius:9px;
      background:#f3f4f6;color:#454b55;font-size:24px;line-height:1;cursor:pointer;}
    .welcome-close:hover,.welcome-close:focus-visible {background:#eaecef;outline-color:var(--red);}
    .welcome-content {padding:5px 25px 24px;}
    .welcome-content h2 {font-size:clamp(23px,3.2vw,29px);line-height:1.2;letter-spacing:-.025em;margin:7px 0 10px;}
    .welcome-lead {font-size:14px;line-height:1.7;color:#4e5664;margin:0 0 19px;}
    .welcome-steps {list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px;}
    .welcome-steps li {display:flex;align-items:flex-start;gap:11px;font-size:13px;line-height:1.5;color:#323946;}
    .welcome-step-icon {display:grid;place-items:center;flex:0 0 33px;width:33px;height:33px;
      border-radius:9px;background:#fff0f3;color:var(--red);}
    .welcome-step-icon svg {width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
    .welcome-primary {display:flex;align-items:center;justify-content:center;gap:10px;
      width:100%;min-height:47px;background:var(--red);border:1px solid var(--red);
      color:#fff;border-radius:9px;font-size:14px;font-weight:750;cursor:pointer;}
    .welcome-primary:hover,.welcome-primary:focus-visible {background:#9f1631;outline-offset:2px;}
    .welcome-secondary {display:flex;justify-content:center;align-items:center;gap:8px;
      width:100%;min-height:42px;margin-top:6px;background:transparent;border:0;
      border-radius:9px;color:var(--red);font-size:13px;font-weight:700;cursor:pointer;}
    .welcome-secondary:hover,.welcome-secondary:focus-visible {background:#fff0f3;}
    .welcome-bottom {border-top:1px solid #eef0f3;padding-top:10px;margin-top:3px;text-align:center;}
    .welcome-about {border:0;background:transparent;color:#586172;cursor:pointer;
      font-size:12px;min-height:34px;text-decoration:underline;text-underline-offset:3px;}
    @media(max-width:700px) {
      .welcome-dialog {width:min(440px,calc(100vw - 20px));max-width:calc(100vw - 20px); max-height:calc(100dvh - 20px);border-radius:13px;}
      .welcome-top {padding:12px 16px 5px;}
      .welcome-content {padding:4px 17px 15px;}
      .welcome-content h2 {font-size:22px;margin:5px 0 8px;}
      .welcome-lead {font-size:13px;line-height:1.55;margin-bottom:12px;}
      .welcome-steps {gap:9px;margin-bottom:12px;}
      .welcome-steps li {font-size:12px;gap:9px;}
      .welcome-step-icon {width:30px;height:30px;flex-basis:30px;}
      .welcome-primary {min-height:44px;}
    }
    @media(max-height:560px) {.welcome-dialog {max-height:calc(100dvh - 12px);}}
    @media(prefers-reduced-motion:reduce) {.welcome-dialog,.welcome-dialog *{scroll-behavior:auto!important;}}


    /* WLM mobile map-first: phone screen is map by default, list/search in one tap. */
    .mobile-view-switch { display: none; }
    @media (max-width: 700px) {
      header {
        display: grid; grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 4px 7px; padding: 5px 10px 4px;
        min-height: 0; align-items: center; flex-wrap: nowrap;
      }
      header .identity { grid-column: 1; grid-row: 1; min-width: 0; gap: 6px; }
      header .identity strong { font-size: clamp(11px, 3.2vw, 14px); line-height: 1.2; display: block; }
      header .brandmark { width: 29px; height: 29px; flex: 0 0 29px; }
      header .langs { grid-column: 2; grid-row: 1; flex: 0 0 auto; gap: 2px; }
      header .langs button { font-size: 10px; padding: 6px 4px; min-height: 32px; }
      header .header-nav {
        grid-column: 1 / -1; grid-row: 2; order: unset; margin: 0; padding: 2px 0 0;
        width: 100%; justify-content: flex-end; gap: 8px; border-top: 1px solid #f0f1f4;
      }
      header .header-nav #top-map, header .header-nav #top-list { display: none; }
      header .header-nav .external-site { margin-left: 0; }
      header .header-nav button, header .header-nav a { min-height: 29px; padding: 3px 8px; font-size: 11px; }
      main.layout { position: relative; }
      .layout:not(.details-open) { display: flex; flex-direction: column; min-height: 0; }
      .layout:not(.details-open):not(.mobile-list-view) > aside { display: none; }
      .layout:not(.details-open) .map-area { flex: 1 1 auto; height: 100%; min-height: 0; width: 100%; }
      .layout:not(.details-open).mobile-list-view > aside {
        display: flex; flex: 1 1 auto; width: 100%; min-height: 0; height: 100%;
        padding-bottom: 76px; overflow: hidden; border-bottom: none;
      }
      .layout:not(.details-open).mobile-list-view > .map-area { display: none; }
      .layout:not(.details-open) > .mobile-view-switch {
        display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2px;
        position: absolute; left: 50%; bottom: calc(9px + env(safe-area-inset-bottom, 0px));
        transform: translateX(-50%); z-index: 16;
        width: min(345px, calc(100% - 22px)); border: 1px solid #e4e5e9; border-radius: 15px;
        background: rgba(255,255,255,.98); padding: 5px;
        box-shadow: 0 5px 22px #10182738;
      }
      .mobile-view-switch button {
        min-width: 0; min-height: 48px; border: 0; border-radius: 10px;
        background: transparent; color: #515866; cursor: pointer;
        display: flex; align-items: center; justify-content: center; flex-direction: column;
        gap: 3px; font-size: 11px; font-weight: 750;
      }
      .mobile-view-switch button[aria-pressed="true"] { background: #fff0f3; color: #ad1833; }
      .mobile-view-switch button:focus-visible { outline: 2px solid #C31E3A; outline-offset: -2px; }
      .mobile-view-switch svg { width: 19px; height: 19px; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
      .layout:not(.details-open):not(.mobile-list-view) .map-legend { bottom: 82px; }
      .layout:not(.details-open):not(.mobile-list-view) .map-loading { bottom: 83px; }
      .layout:not(.details-open):not(.mobile-list-view) .maplibregl-ctrl-bottom-right,
      .layout:not(.details-open):not(.mobile-list-view) .maplibregl-ctrl-bottom-left { bottom: 71px; }
      .layout.details-open > .mobile-view-switch { display: none !important; }
    }