/* ==========================================================================
   Podrinje info — Regionalni vodič s obe strane Drine
   Lokalni fontovi (PT Serif + Source Sans 3, SIL OFL 1.1) i sistem dizajna
   ========================================================================== */

@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pt-serif-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pt-serif-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pt-serif-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/pt-serif-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/pt-serif-700-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/pt-serif-700-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-var-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-var-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. Tokeni dizajna (bez postavljanja font-size na :root ili html!)
   ========================================================================== */
:root {
  --bg-paper: #F7F4EE;
  --bg-surface: #FCFBF8;
  --bg-tint: #EDE7DA;
  --bg-river-band: #E6EFEA;
  --bg-footer: #153631;
  --ink-primary: #172925;
  --ink-secondary: #374B46;
  --brand-green: #1F544D;
  --brand-green-strong: #143B36;
  --accent-ochre: #8C4724;
  --accent-ochre-soft: #F6ECE4;
  --border-subtle: #D8D0C1;
  --border-strong: #B6AC99;
  --focus-ring: #8C4724;
  --shadow-soft: 0 6px 24px rgba(23, 41, 37, 0.07);
  --shadow-popover: 0 14px 36px rgba(23, 41, 37, 0.18);
  --font-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --container-max: 74rem;
}

body.memorial-page {
  --bg-paper: #F4F4F2;
  --bg-surface: #FAFAFA;
  --bg-tint: #E8E9E7;
  --bg-river-band: #EAECEB;
  --brand-green: #243330;
  --brand-green-strong: #182321;
  --accent-ochre: #3E4C49;
  --accent-ochre-soft: #ECEEED;
  --border-subtle: #CFD3D1;
  --focus-ring: #182321;
}

/* ==========================================================================
   2. Osnovni reset, tipografija i pristupačnost
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-block-start: 5.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--bg-paper);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: clamp(1.0625rem, 1rem + 0.18vw, 1.14rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
}

main {
  flex: 1 0 auto;
}

img,
svg {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--ink-primary);
  line-height: 1.24;
  margin-block: 0 0.75rem;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.82rem, 1.42rem + 1.55vw, 2.68rem);
  letter-spacing: -0.012em;
}

h2 {
  font-size: clamp(1.38rem, 1.18rem + 0.75vw, 1.82rem);
  margin-block-start: 2.35rem;
  color: var(--brand-green-strong);
}

h3 {
  font-size: clamp(1.16rem, 1.06rem + 0.38vw, 1.38rem);
  margin-block-start: 1.55rem;
}

p {
  margin-block: 0 1.15rem;
}

a:any-link {
  color: var(--brand-green);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

a:any-link:hover {
  color: var(--brand-green-strong);
  text-decoration-thickness: 2.5px;
}

:where(a:any-link, button, input, summary, [tabindex="0"]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 0.2rem;
}

h1[tabindex="-1"]:focus {
  outline: none;
}

.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.skip-link {
  position: fixed;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  min-block-size: 2.75rem;
  background: var(--brand-green-strong);
  color: #FCFBF8 !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-popover);
}

.container {
  inline-size: min(var(--container-max), calc(100% - 2rem));
  margin-inline: auto;
}

@media (min-width: 48em) {
  .container {
    inline-size: min(var(--container-max), calc(100% - 3rem));
  }
}

/* ==========================================================================
   3. Zaglavlje i responzivna navigacija (modern-web-guidance: navbar)
   ========================================================================== */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgba(252, 251, 248, 0.96);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--border-subtle);
}

.site-header.is-measuring,
.site-header.is-measuring * {
  transition: none !important;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.55rem;
}

.header-inner > * {
  flex-shrink: 0;
  white-space: nowrap;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 2.75rem;
  padding-inline-end: 0.4rem;
  text-decoration: none;
  color: var(--ink-primary) !important;
}

.site-logo-mark {
  inline-size: 2.1rem;
  block-size: 2.1rem;
  border-radius: var(--radius-sm);
  background: var(--brand-green);
  color: #FCFBF8;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}

.site-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-logo-name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink-primary);
}

.site-logo-tag {
  font-size: 0.76rem;
  color: var(--ink-secondary);
  font-weight: 500;
}

@media (max-width: 24em) {
  .site-logo-tag {
    display: none;
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.site-nav {
  display: flex;
  align-items: center;
}

.menu-button,
.search-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  padding: 0.45rem 0.85rem;
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--ink-primary);
  background: var(--bg-paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}

.menu-button:hover,
.search-link-btn:hover {
  background: var(--bg-tint);
  border-color: var(--brand-green);
}

.site-header .menu-button {
  anchor-name: --menu-button;
}

.site-header .site-menu {
  list-style: none;
  margin: 0;
  padding: 0.65rem;
  position: fixed;
  inset: auto;
  inset-block-start: 4.4rem;
  inset-block-start: anchor(--menu-button bottom);
  inset-inline-end: 1rem;
  inline-size: min(86dvw, 22rem);
  max-inline-size: calc(100dvw - 2rem);
  block-size: fit-content;
  max-block-size: calc(100dvh - 5.5rem);
  margin-block-start: 0.45rem;
  overflow: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}

.site-menu[popover]:not(:is(:popover-open, .\:popover-open)) {
  display: none;
}

.site-menu[popover]:is(:popover-open, .\:popover-open) {
  display: grid;
  gap: 0.2rem;
}

@media (prefers-reduced-motion: no-preference) {
  .site-menu[popover] {
    transition: opacity 0.16s ease, translate 0.16s ease, display 0.16s ease, overlay 0.16s ease;
    transition-behavior: allow-discrete;
  }
  .site-menu[popover]:not(:is(:popover-open, .\:popover-open)) {
    opacity: 0;
    translate: 0 -0.35rem;
  }
  @starting-style {
    .site-menu[popover]:is(:popover-open, .\:popover-open) {
      opacity: 0;
      translate: 0 -0.35rem;
    }
  }
}

.site-menu li {
  margin: 0;
}

.site-menu a {
  display: flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0.5rem 0.8rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink-primary) !important;
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid transparent;
}

.site-menu a:hover {
  background: var(--bg-tint);
  color: var(--brand-green-strong) !important;
}

.site-menu a[aria-current="page"] {
  background: var(--accent-ochre-soft);
  color: var(--brand-green-strong) !important;
  font-weight: 700;
  border-inline-start-color: var(--accent-ochre);
}

.site-header.is-wide .menu-button {
  display: none;
}

.site-header.is-wide .site-menu {
  position: static;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  inline-size: auto;
  max-inline-size: none;
  block-size: auto;
  max-block-size: none;
  overflow: visible;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.site-header.is-wide .site-menu::backdrop {
  display: none;
}

.site-header.is-wide .site-menu a {
  border-inline-start: 0;
  border-block-end: 3px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding-inline: 0.75rem;
}

.site-header.is-wide .site-menu a[aria-current="page"] {
  background: transparent;
  border-block-end-color: var(--accent-ochre);
}

.search-popover {
  position: fixed;
  inset: auto;
  inset-block-start: 4.4rem;
  inset-inline: 1rem;
  max-inline-size: 38rem;
  margin-inline: auto;
  padding: 1.1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  max-block-size: calc(100dvh - 5.5rem);
  overflow: auto;
}

.search-popover:not(:is(:popover-open, .\:popover-open)) {
  display: none;
}

.search-popover:is(:popover-open, .\:popover-open) {
  display: block;
}

.search-popover::backdrop {
  background: rgba(23, 41, 37, 0.28);
}

/* ==========================================================================
   4. Putanja stranice (Breadcrumbs) i Hero zaglavlja
   ========================================================================== */
.breadcrumb-bar {
  padding-block: 0.8rem 0.25rem;
  font-size: 0.92rem;
  color: var(--ink-secondary);
}

.breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.breadcrumb-list li + li::before {
  content: "/";
  color: var(--border-strong);
  margin-inline-end: 0.5rem;
}

.breadcrumb-list a {
  color: var(--ink-secondary);
  text-decoration: none;
}

.breadcrumb-list a:hover {
  color: var(--brand-green-strong);
  text-decoration: underline;
}

.kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-ochre);
  margin-block-end: 0.5rem;
}

.home-hero {
  padding-block: 1.75rem 2.25rem;
  border-block-end: 1px solid var(--border-subtle);
}

.home-hero-grid {
  display: grid;
  gap: 1.6rem;
  align-items: center;
}

@media (min-width: 58em) {
  .home-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr);
    gap: 2.5rem;
  }
}

.home-subtitle {
  font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.36rem);
  color: var(--ink-secondary);
  line-height: 1.5;
  margin-block-end: 1.1rem;
}

.home-intro p {
  color: var(--ink-primary);
  max-inline-size: 64ch;
}

.hero-figure {
  margin: 0 0 1.6rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.home-hero .hero-figure {
  margin-block-end: 0;
}

.hero-figure img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 44%;
}

@media (min-width: 42em) {
  .hero-figure img {
    aspect-ratio: 3 / 2;
  }
}

.hero-figure.is-diagram img {
  aspect-ratio: auto;
  object-fit: contain;
  padding: 0.75rem;
  background: #FAF8F3;
}

.hero-figure figcaption {
  padding: 0.8rem 1.05rem;
  font-size: 0.89rem;
  line-height: 1.48;
  color: var(--ink-secondary);
  border-block-start: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.credit-tag {
  display: inline;
  margin-inline-start: 0.3rem;
  font-size: 0.82rem;
  color: var(--ink-secondary);
}

.ai-caption-note {
  display: block;
  margin-block-start: 0.25rem;
  font-size: 0.81rem;
  font-style: italic;
  color: var(--ink-secondary);
}

/* ==========================================================================
   5. Skladne mreže po 3 u redu (Početna, Hubovi i Izleti)
   ========================================================================== */
.home-section {
  padding-block: 2.5rem;
  border-block-end: 1px solid var(--border-subtle);
}

.home-section-alt {
  background: var(--bg-surface);
}

.section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-block-end: 1.35rem;
}

.section-header h2 {
  margin: 0;
}

.section-lead {
  max-inline-size: 68ch;
  color: var(--ink-secondary);
  margin-block-end: 1.5rem;
}

.quick-grid,
.river-sequence,
.card-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
}

@media (min-width: 42em) {
  .quick-grid,
  .river-sequence,
  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .quick-grid,
  .river-sequence,
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem;
  }
}

/* Unutar kolone članka (povezane teme) mreža ostaje skladno dvokolonska */
@media (min-width: 38em) {
  .article-prose .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.quick-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-inline-start: 4px solid var(--brand-green);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.85rem;
}

.quick-card-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.14rem;
  color: var(--ink-primary);
  margin: 0 0 0.3rem;
}

.quick-card-note {
  font-size: 0.93rem;
  color: var(--ink-secondary);
  margin: 0;
}

.quick-card-links {
  margin-block-start: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pill-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.6rem;
  padding: 0.32rem 0.85rem;
  background: var(--bg-paper);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.91rem;
  font-weight: 600;
  color: var(--brand-green-strong) !important;
  text-decoration: none;
}

.pill-link:hover {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: #FCFBF8 !important;
}

.river-step {
  background: var(--bg-paper);
  border: 1px solid var(--border-subtle);
  border-block-start: 3px solid var(--brand-green);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.river-step-num {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-ochre);
}

.river-step h3 {
  margin: 0;
  font-size: 1.16rem;
}

.river-step h3 a {
  text-decoration: none;
  color: var(--ink-primary);
}

.river-step h3 a:hover {
  color: var(--brand-green);
  text-decoration: underline;
}

.river-step p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-secondary);
}

/* Kartice članaka i pametne kartice izleta */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-block-size: 11rem;
  box-shadow: 0 2px 10px rgba(23, 41, 37, 0.04);
}

.card-media img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-block-end: 1px solid var(--border-subtle);
}

.card-body {
  padding: 1.15rem 1.25rem 1.3rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.48rem;
}

.card-meta {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-ochre);
}

.card-title {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.3;
}

.card-title a {
  color: var(--ink-primary) !important;
  text-decoration: none;
}

.card-title a:hover {
  color: var(--brand-green) !important;
  text-decoration: underline;
}

.card-excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.52;
  color: var(--ink-secondary);
}

/* Uredno, strukturisano podnožje kartice izleta */
.route-card-footer {
  margin-block-start: auto;
  padding-block-start: 0.8rem;
  border-block-start: 1px solid var(--border-subtle);
  display: grid;
  gap: 0.55rem;
}

.route-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 22em) {
  .route-kv-grid {
    grid-template-columns: 1fr;
  }
}

.route-kv {
  background: var(--bg-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
}

.route-kv-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
  line-height: 1.2;
}

.route-kv-val {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink-primary);
  line-height: 1.3;
  margin-block-start: 0.1rem;
}

.route-card-stops {
  margin: 0;
  font-size: 0.83rem;
  line-height: 1.42;
  color: var(--ink-secondary);
}

.route-card-stops strong {
  color: var(--brand-green-strong);
}

/* ==========================================================================
   6. Raspored članka (adekvatna širina teksta bez praznine ka bočnom okviru)
   ========================================================================== */
.article-shell {
  padding-block: 1.25rem 3.5rem;
}

.article-header {
  max-inline-size: 52rem;
  margin-block-end: 1.65rem;
}

.article-byline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-block-start: 0.65rem;
  font-size: 0.93rem;
  color: var(--ink-secondary);
}

.byline-author {
  font-weight: 600;
  color: var(--ink-primary);
}

.article-lead {
  font-size: clamp(1.12rem, 1.05rem + 0.32vw, 1.26rem);
  line-height: 1.58;
  color: var(--ink-primary);
  margin-block: 1rem 0;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--brand-green);
  max-inline-size: 50rem;
}

.article-grid {
  display: grid;
  gap: 2.25rem;
  align-items: start;
}

@media (min-width: 64em) {
  .article-grid {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 2.75rem;
  }
}

.article-prose {
  max-inline-size: none;
  min-inline-size: 0;
}

.article-prose-solo {
  max-inline-size: 52rem;
}

.hub-editorial > .hero-figure,
.hub-editorial > .route-box,
.hub-editorial section > h2,
.hub-editorial section > p {
  max-inline-size: 54rem;
}

.article-prose p {
  text-wrap: pretty;
}

.article-sidebar {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 64em) {
  .article-sidebar {
    position: sticky;
    inset-block-start: 5.4rem;
  }
}

.info-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  box-shadow: 0 2px 8px rgba(23, 41, 37, 0.03);
}

.info-panel h2,
.info-panel h3 {
  margin-block: 0 0.75rem;
  font-size: 1.08rem;
  color: var(--brand-green-strong);
}

.meta-dl {
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.meta-dl div {
  border-block-start: 1px solid var(--border-subtle);
  padding-block-start: 0.5rem;
}

.meta-dl div:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.meta-dl dt {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
}

.meta-dl dd {
  margin: 0.12rem 0 0;
  font-size: 0.94rem;
  color: var(--ink-primary);
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.toc-list a {
  display: block;
  padding: 0.35rem 0.5rem;
  font-size: 0.94rem;
  color: var(--ink-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.toc-list a:hover {
  background: var(--bg-tint);
  color: var(--brand-green-strong);
}

/* Strukturisani itinerer izleta (umesto pretrpane SVG šeme) */
.route-box,
.itinerary-panel {
  background: #F1F6F3;
  border: 1px solid #BCD0C8;
  border-inline-start: 4px solid var(--brand-green);
  border-radius: var(--radius-md);
  padding: 1.3rem 1.4rem;
  margin-block: 1.4rem 1.9rem;
}

.route-box h2,
.itinerary-panel h2 {
  margin-block: 0 0.9rem;
  font-size: 1.26rem;
}

.itinerary-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin-block-end: 1.15rem;
}

@media (min-width: 38em) {
  .itinerary-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.itinerary-fact {
  background: var(--bg-surface);
  border: 1px solid #CBDAD3;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
}

.itinerary-fact-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent-ochre);
  margin-block-end: 0.15rem;
}

.itinerary-fact-val {
  display: block;
  font-size: 0.93rem;
  line-height: 1.45;
  color: var(--ink-primary);
}

.itinerary-subhead {
  font-family: var(--font-serif);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--brand-green-strong);
  margin-block: 0 0.65rem;
}

.station-timeline {
  list-style: none;
  margin: 0 0 1.1rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.station-timeline li {
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  background: var(--bg-surface);
  border: 1px solid #D3DFDA;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
}

.station-num {
  inline-size: 1.85rem;
  block-size: 1.85rem;
  border-radius: 999px;
  background: var(--brand-green);
  color: #FCFBF8;
  font-size: 0.86rem;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  margin-block-start: 0.05rem;
}

.station-timeline li:first-child .station-num {
  background: var(--accent-ochre);
}

.station-text {
  font-size: 0.95rem;
  line-height: 1.48;
  color: var(--ink-primary);
}

.itinerary-alt {
  background: var(--bg-surface);
  border-inline-start: 3px solid var(--accent-ochre);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.7rem 0.95rem;
  font-size: 0.93rem;
  line-height: 1.48;
  margin: 0;
}

/* Napomena / Callout u tekstu */
.callout-box {
  background: var(--accent-ochre-soft);
  border-inline-start: 4px solid var(--accent-ochre);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1rem 1.2rem;
  margin-block: 1.5rem;
}

.callout-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.03rem;
  color: var(--ink-primary);
  margin-block: 0 0.35rem;
}

.callout-box p {
  margin: 0;
  font-size: 0.97rem;
}

/* Foto-esej duž toka Drine */
.photo-essay-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.15rem;
  margin-block: 1.5rem 2rem;
}

@media (min-width: 38em) {
  .photo-essay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.essay-item {
  margin: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.essay-item img {
  inline-size: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.essay-item figcaption {
  padding: 0.75rem 0.95rem;
  font-size: 0.89rem;
  color: var(--ink-secondary);
}

.essay-loc {
  display: block;
  font-weight: 700;
  color: var(--brand-green-strong);
  margin-block-end: 0.2rem;
}

/* ==========================================================================
   7. Responzivne tabele za mobilni i desktop (modern-web-guidance: responsive-table)
   ========================================================================== */
.table-wrapper {
  overflow-x: auto;
  max-inline-size: 100%;
  container-type: inline-size;
  margin-block: 1.5rem 1.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  box-shadow: 0 2px 10px rgba(23, 41, 37, 0.04);
}

@media (min-width: 44em) {
  .table-wrapper {
    overflow: auto;
    max-block-size: min(36rem, 80dvh);
  }
}

.table-wrapper table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.48;
}

.table-wrapper caption {
  text-align: start;
  padding: 0.9rem 1.05rem;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--brand-green-strong);
  background: var(--bg-paper);
  border-block-end: 1px solid var(--border-strong);
}

.table-wrapper thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
}

.table-wrapper thead th {
  background: var(--bg-tint);
  color: var(--ink-primary);
  font-weight: 700;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: start;
  padding: 0.72rem 0.95rem;
  border-block-end: 2px solid var(--border-strong);
}

.table-wrapper tbody th,
.table-wrapper tbody td {
  padding: 0.75rem 0.95rem;
  border-block-end: 1px solid var(--border-subtle);
  vertical-align: top;
  text-align: start;
  background: var(--bg-surface);
}

.table-wrapper tbody tr:nth-child(even) th,
.table-wrapper tbody tr:nth-child(even) td {
  background: #F9F7F2;
}

@media (hover: hover) {
  .table-wrapper tbody tr:hover th,
  .table-wrapper tbody tr:hover td {
    background: #F2EDE2;
  }
}

.table-wrapper tbody th {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  font-weight: 700;
  color: var(--ink-primary);
  border-inline-end: 1px solid var(--border-subtle);
}

.table-wrapper tbody tr:last-child th,
.table-wrapper tbody tr:last-child td {
  border-block-end: 0;
}

@container (width < 600px) {
  .table-wrapper table,
  .table-wrapper caption,
  .table-wrapper thead,
  .table-wrapper tbody,
  .table-wrapper tr,
  .table-wrapper th,
  .table-wrapper td {
    display: block;
  }

  .table-wrapper caption {
    inline-size: 100%;
  }

  .table-wrapper thead {
    display: none;
  }

  .table-wrapper tbody {
    padding: 0.75rem;
    display: grid;
    gap: 0.85rem;
    background: var(--bg-paper);
  }

  .table-wrapper tbody tr {
    margin: 0;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    box-shadow: 0 1px 4px rgba(23, 41, 37, 0.05);
  }

  .table-wrapper tbody th {
    position: sticky;
    inset-block-start: 0;
    z-index: 2;
    background: var(--bg-tint) !important;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    color: var(--brand-green-strong);
    padding: 0.7rem 0.9rem;
    border-inline-end: 0;
    border-block-end: 1px solid var(--border-strong);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  }

  .table-wrapper tbody td {
    background: var(--bg-surface) !important;
    padding: 0.62rem 0.9rem;
    display: grid;
    gap: 0.14rem;
  }

  .table-wrapper tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  }

  .table-wrapper td::before {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-ochre);
    line-height: 1.25;
  }

  .table-wrapper td:nth-child(2)::before { content: var(--label-2) ": "; }
  .table-wrapper td:nth-child(3)::before { content: var(--label-3) ": "; }
  .table-wrapper td:nth-child(4)::before { content: var(--label-4) ": "; }
  .table-wrapper td:nth-child(5)::before { content: var(--label-5) ": "; }
  .table-wrapper td:nth-child(6)::before { content: var(--label-6) ": "; }
  .table-wrapper td:nth-child(7)::before { content: var(--label-7) ": "; }
}

/* ==========================================================================
   8. Izvori, povezane stranice, filter deonica, pretraga i mapa
   ========================================================================== */
.sources-section,
.related-section {
  margin-block-start: 2.6rem;
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--border-subtle);
}

.sources-list {
  margin: 0;
  padding-inline-start: 1.25rem;
  display: grid;
  gap: 0.75rem;
  font-size: 0.94rem;
}

.source-meta {
  color: var(--ink-secondary);
  display: block;
  font-size: 0.88rem;
}

.section-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 1.5rem 2rem;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-block-end: 1rem;
}

.search-input {
  flex: 1 1 15rem;
  min-block-size: 2.85rem;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink-primary);
  background: #FFFFFF;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.search-submit-btn {
  min-block-size: 2.85rem;
  min-inline-size: 2.85rem;
  padding: 0.55rem 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 700;
  color: #FCFBF8;
  background: var(--brand-green);
  border: 1px solid var(--brand-green);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.search-submit-btn:hover {
  background: var(--brand-green-strong);
}

.search-status {
  font-size: 0.92rem;
  color: var(--ink-secondary);
  margin-block-end: 0.85rem;
}

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.search-result-item {
  padding: 0.9rem 1.05rem;
  background: var(--bg-paper);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.search-result-item h3 {
  margin: 0 0 0.25rem;
  font-size: 1.08rem;
}

.search-result-item p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-secondary);
}

/* Mapa stranica */
.map-showcase {
  display: grid;
  gap: 1.85rem;
  margin-block: 1.5rem 2.5rem;
}

@media (min-width: 60em) {
  .map-showcase {
    grid-template-columns: minmax(19rem, 24.5rem) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
  }
}

.map-svg-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: var(--shadow-soft);
}

.map-svg-box img {
  inline-size: 100%;
  max-inline-size: 25rem;
  margin-inline: auto;
}

@media (min-width: 60em) {
  .map-svg-box {
    position: sticky;
    inset-block-start: 5.4rem;
  }
}

/* ==========================================================================
   9. Podnožje sajta (Footer) + Dodatni linkovi
   ========================================================================== */
.site-footer {
  background: var(--bg-footer);
  color: #EAE6DC;
  padding-block: 2.8rem 2.2rem;
  margin-block-start: 3rem;
  border-block-start: 4px solid var(--accent-ochre);
}

.site-footer a:any-link {
  color: #F4EFE4;
  text-decoration: none;
}

.site-footer a:any-link:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.site-footer :where(a:any-link, button):focus-visible {
  outline-color: #F2C57C;
}

.footer-top {
  display: grid;
  gap: 2rem;
  padding-block-end: 2rem;
  border-block-end: 1px solid rgba(244, 239, 228, 0.18);
}

@media (min-width: 52em) {
  .footer-top {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.footer-about h2,
.footer-nav-col h2,
.footer-partners h2 {
  color: #FCFBF8;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin-block: 0 0.75rem;
}

.footer-about p {
  color: #D7E0DD;
  font-size: 0.95rem;
  max-inline-size: 60ch;
}

.footer-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
}

.footer-nav-list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  font-weight: 600;
}

.footer-partners {
  padding-block: 1.6rem;
  border-block-end: 1px solid rgba(244, 239, 228, 0.18);
}

.footer-partners-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.15rem;
  font-size: 0.9rem;
}

.footer-partners-list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.2rem;
  color: #D7E0DD !important;
}

.footer-partners-list a:hover {
  color: #FFFFFF !important;
}

.footer-bottom {
  padding-block-start: 1.3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  font-size: 0.87rem;
  color: #C4D0CD;
}

@media (forced-colors: active) {
  .site-menu a[aria-current="page"] {
    outline: 2px solid Highlight;
  }
  .card,
  .info-panel,
  .quick-card,
  .river-step,
  .itinerary-panel {
    border: 1px solid CanvasText;
  }
}