/* ============================================================
   home.css — naslovnica (hero 3D, alati, blizina, obavijesti, karte)
   Koristi tokene iz main.css; svaki var() ima fallback na paletu.
   ============================================================ */

/* ---------- lokalni tokeni po temi ---------- */
:root {
  --home-hero-bg: #cfe8ef; /* boja neba scene — vidljivo samo dok se CSS/SVG slaže */
  --home-scrim: linear-gradient(100deg,
      rgba(247, 249, 251, 0.88) 0%,
      rgba(247, 249, 251, 0.55) 38%,
      rgba(247, 249, 251, 0.05) 70%);
  --home-scrim-bottom: linear-gradient(to top, rgba(247, 249, 251, 0.32), transparent 26%);
  --home-hero-text: var(--at-navy-900, #001e33);
  --home-hero-sub: var(--at-navy-800, #002d4d);
  --home-kicker: var(--at-orange-600, #f2571e);
  --home-chip-bg: rgba(255, 255, 255, 0.62);
  --home-chip-border: rgba(0, 45, 77, 0.16);
  --home-card-line: rgba(0, 45, 77, 0.1);
  --home-accent: var(--at-orange-600, #f2571e);
  --home-icon-bg: rgba(242, 87, 30, 0.1);
  --home-store-bg: var(--at-navy-900, #001e33);
  --home-store-text: #f2f7fb;
  --home-table-stripe: rgba(0, 45, 77, 0.045);
}

[data-theme="dark"] {
  --home-hero-bg: #0a1b31;
  --home-scrim: linear-gradient(100deg,
      rgba(0, 10, 18, 0.86) 0%,
      rgba(0, 12, 22, 0.55) 38%,
      rgba(0, 15, 26, 0.05) 70%);
  --home-scrim-bottom: linear-gradient(to top, rgba(0, 15, 26, 0.4), transparent 26%);
  /* na tamnoj podlozi naslov je brand-azur — kao h1 na autotrolej.hr */
  --home-hero-text: var(--at-sky-400, #33ccff);
  --home-hero-sub: #c3d8e8;
  --home-kicker: var(--at-sky-400, #33ccff);
  --home-chip-bg: rgba(0, 30, 51, 0.55);
  --home-chip-border: rgba(232, 240, 247, 0.16);
  --home-card-line: rgba(232, 240, 247, 0.1);
  --home-accent: var(--at-orange-500, #ff6d33);
  --home-icon-bg: rgba(255, 109, 51, 0.13);
  --home-store-bg: #04121f;
  --home-store-text: #eef5fb;
  --home-table-stripe: rgba(232, 240, 247, 0.05);
}

/* Na mobitelu tekst heroja zauzima punu širinu pa scrim mora biti ravnomjeran
   (desktop dijagonalni gradijent ostavlja desnu stranu preslabom za kontrast). */
@media (max-width: 768px) {
  :root {
    --home-scrim: linear-gradient(180deg,
        rgba(247, 249, 251, 0.92) 0%,
        rgba(247, 249, 251, 0.78) 58%,
        rgba(247, 249, 251, 0.3) 100%);
  }
  [data-theme="dark"] {
    --home-scrim: linear-gradient(180deg,
        rgba(0, 10, 18, 0.9) 0%,
        rgba(0, 12, 22, 0.72) 58%,
        rgba(0, 15, 26, 0.3) 100%);
  }
}

/* ============================================================
   1. HERO
   ============================================================ */
.page-home .hero {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--home-hero-bg);
}

/* ---------- 2D panorama riječke Rive (hero-scene.ejs) ----------
   Sve boje scene žive ovdje kao klase; [data-theme=dark] ih prebacuje u
   noćnu paletu, a .only-day/.only-night slojevi se stapaju kroz opacity. */
#hero2d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#hero2d * { transition: fill 0.9s ease, stroke 0.9s ease; }
#hero2d .only-day { opacity: 1; transition: opacity 0.9s ease; }
#hero2d .only-night { opacity: 0; transition: opacity 0.9s ease; }
[data-theme="dark"] #hero2d .only-day { opacity: 0; }
[data-theme="dark"] #hero2d .only-night { opacity: 1; }

/* — dnevna paleta — */
#hero2d .cloudC { fill: #ffffff; }
#hero2d .gull { stroke: #5a6a74; }
#hero2d .star { fill: #dfeaf5; }
#hero2d .moon { fill: #e9eef6; }
#hero2d .ridgeFar { fill: #b9cdc9; }
#hero2d .ridgeNear { fill: #a3bba9; }
#hero2d .hillTrsat { fill: #7ea283; }
#hero2d .hillShade { fill: #6c9070; }
#hero2d .castleW { fill: #92876f; }
#hero2d .castleR { fill: #7c6a56; }
#hero2d .castleD { fill: #4f4638; }
#hero2d .houseTiny { fill: #d8cdb4; }
#hero2d .cityBg { fill: #cec5b6; }
#hero2d .cityBg2 { fill: #c1b7a8; }
#hero2d .bgRoof { fill: #ad9384; }
#hero2d .copper { fill: #7fb0a2; }
#hero2d .copperD { fill: #689488; }
#hero2d .tileRoof { fill: #c3705a; }
#hero2d .tileD { fill: #a95e4b; }
#hero2d .slate { fill: #8d98a5; }
#hero2d .fCream { fill: #f0e5cb; }
#hero2d .fStone { fill: #e6dcc6; }
#hero2d .fOchre { fill: #e2c28c; }
#hero2d .fYellow { fill: #ebd09b; }
#hero2d .fRose { fill: #dcae92; }
#hero2d .fCoral { fill: #d59c88; }
#hero2d .fSage { fill: #cdd0b9; }
#hero2d .fSage2 { fill: #c5c2ac; }
#hero2d .fMuted { fill: #c6c4b4; }
#hero2d .trim { fill: #faf6ea; }
#hero2d .balus { stroke: #faf6ea; }
#hero2d .winG { fill: #51616f; }
#hero2d .arc { fill: #41505c; }
#hero2d .awnO { fill: #e8834a; }
#hero2d .awnT { fill: #4e8d93; }
#hero2d .brick { fill: #a2503e; }
#hero2d .brickS { fill: #e9dcc3; }
#hero2d .spire { fill: #4a4440; stroke: #4a4440; }
#hero2d .towerY { fill: #eece93; }
#hero2d .towerSh { fill: #d8b674; }
#hero2d .clockF { fill: #f9f3e0; }
#hero2d .clockR { stroke: #6b5f45; }
#hero2d .clockH { stroke: #3c3a31; }
#hero2d .side { fill: #d0c8b5; }
#hero2d .road { fill: #5c6169; }
#hero2d .roadLine { fill: #eceae2; stroke: #eceae2; }
#hero2d .quay { fill: #c9bfa8; }
#hero2d .quayEdge { fill: #b2a88e; }
#hero2d .lampP { fill: #2c4757; }
#hero2d .lampHead { fill: #f4e9c8; }
#hero2d .nvy { fill: #1f4a68; stroke: #1f4a68; }
#hero2d .signO { fill: var(--at-orange-600, #f2571e); }
#hero2d .treeG { fill: #7ea75f; }
#hero2d .treeD { fill: #67905a; }
#hero2d .palmG { stroke: #6a9d52; }
#hero2d .trunk { stroke: #7d6b50; }
#hero2d .mast { stroke: #6a6a62; }
#hero2d .flagR { fill: #c14a34; }
#hero2d .craneS { fill: #97a5ad; stroke: #97a5ad; }
#hero2d .contR { fill: #b06a48; }
#hero2d .beacon { fill: #ff5544; }
#hero2d .molo { fill: #b7b09d; }
#hero2d .lhW { fill: #f3efe4; }
#hero2d .lhR { fill: #c14a34; }
#hero2d .boatW { fill: #eef0ea; }
#hero2d .boatT { fill: #23404f; }
#hero2d .glint { fill: #ffffff; opacity: 0.32; }
#hero2d .nw1 { fill: #ffca85; }
#hero2d .nw2 { fill: #ffb35c; }
#hero2d .busW { fill: #f8f8f5; }
#hero2d .busO { fill: var(--at-orange-600, #f2571e); }
#hero2d .busV { fill: #2c3a45; }
#hero2d .busK { fill: #23282d; }
#hero2d .busHub { fill: #cdd0d2; }
#hero2d .busLight { fill: #fff6d8; }
#hero2d .bellow { fill: #1d2429; }
#hero2d .bellowL { stroke: #3a444c; }

/* — noćna paleta — */
[data-theme="dark"] #hero2d .ridgeFar { fill: #223549; }
[data-theme="dark"] #hero2d .ridgeNear { fill: #1d3040; }
[data-theme="dark"] #hero2d .hillTrsat { fill: #16282e; }
[data-theme="dark"] #hero2d .hillShade { fill: #122228; }
[data-theme="dark"] #hero2d .castleW { fill: #4a5058; }
[data-theme="dark"] #hero2d .castleR { fill: #3a4048; }
[data-theme="dark"] #hero2d .castleD { fill: #262c34; }
[data-theme="dark"] #hero2d .houseTiny { fill: #333e4b; }
[data-theme="dark"] #hero2d .cityBg { fill: #2b394b; }
[data-theme="dark"] #hero2d .cityBg2 { fill: #253242; }
[data-theme="dark"] #hero2d .bgRoof { fill: #202c3c; }
[data-theme="dark"] #hero2d .copper { fill: #2e4a48; }
[data-theme="dark"] #hero2d .copperD { fill: #263e3e; }
[data-theme="dark"] #hero2d .tileRoof { fill: #2a3542; }
[data-theme="dark"] #hero2d .tileD { fill: #253040; }
[data-theme="dark"] #hero2d .slate { fill: #2b3949; }
[data-theme="dark"] #hero2d .fCream { fill: #3c4d63; }
[data-theme="dark"] #hero2d .fStone { fill: #37485c; }
[data-theme="dark"] #hero2d .fOchre { fill: #3f4e60; }
[data-theme="dark"] #hero2d .fYellow { fill: #44546b; }
[data-theme="dark"] #hero2d .fRose { fill: #3a4a5e; }
[data-theme="dark"] #hero2d .fCoral { fill: #374759; }
[data-theme="dark"] #hero2d .fSage { fill: #33434f; }
[data-theme="dark"] #hero2d .fSage2 { fill: #2f3f4b; }
[data-theme="dark"] #hero2d .fMuted { fill: #2c3b47; }
[data-theme="dark"] #hero2d .trim { fill: #55697c; }
[data-theme="dark"] #hero2d .balus { stroke: #55697c; }
[data-theme="dark"] #hero2d .winG { fill: #232f3a; }
[data-theme="dark"] #hero2d .arc { fill: #1d2833; }
[data-theme="dark"] #hero2d .awnO { fill: #7a4426; }
[data-theme="dark"] #hero2d .awnT { fill: #2a4a50; }
[data-theme="dark"] #hero2d .brick { fill: #3c2b33; }
[data-theme="dark"] #hero2d .brickS { fill: #4e5a6a; }
[data-theme="dark"] #hero2d .spire { fill: #2b3038; stroke: #2b3038; }
[data-theme="dark"] #hero2d .towerY { fill: #45566d; }
[data-theme="dark"] #hero2d .towerSh { fill: #394a5f; }
[data-theme="dark"] #hero2d .clockF { fill: #ffe9b4; }
[data-theme="dark"] #hero2d .clockR { stroke: #8a7648; }
[data-theme="dark"] #hero2d .side { fill: #333d49; }
[data-theme="dark"] #hero2d .road { fill: #262d37; }
[data-theme="dark"] #hero2d .roadLine { fill: #55606c; stroke: #55606c; }
[data-theme="dark"] #hero2d .quay { fill: #38424f; }
[data-theme="dark"] #hero2d .quayEdge { fill: #2c3641; }
[data-theme="dark"] #hero2d .lampP { fill: #22303c; }
[data-theme="dark"] #hero2d .lampHead { fill: #ffd98e; }
[data-theme="dark"] #hero2d .nvy { fill: #2a3a4a; stroke: #2a3a4a; }
[data-theme="dark"] #hero2d .signO { fill: #b64516; }
[data-theme="dark"] #hero2d .treeG { fill: #1e3226; }
[data-theme="dark"] #hero2d .treeD { fill: #182a20; }
[data-theme="dark"] #hero2d .palmG { stroke: #1b2d1f; }
[data-theme="dark"] #hero2d .trunk { stroke: #241f1b; }
[data-theme="dark"] #hero2d .mast { stroke: #3e464e; }
[data-theme="dark"] #hero2d .flagR { fill: #5c2e24; }
[data-theme="dark"] #hero2d .craneS { fill: #323d47; stroke: #323d47; }
[data-theme="dark"] #hero2d .contR { fill: #3a3038; }
[data-theme="dark"] #hero2d .molo { fill: #333b46; }
[data-theme="dark"] #hero2d .lhW { fill: #414c58; }
[data-theme="dark"] #hero2d .lhR { fill: #5c2e24; }
[data-theme="dark"] #hero2d .boatW { fill: #39434e; }
[data-theme="dark"] #hero2d .boatT { fill: #16222c; }
[data-theme="dark"] #hero2d .glint { fill: #7fa7c4; opacity: 0.2; }
[data-theme="dark"] #hero2d .busW { fill: #aeb6bd; }
[data-theme="dark"] #hero2d .busO { fill: #cf4b1c; }
[data-theme="dark"] #hero2d .busV { fill: #ffd9a2; }
[data-theme="dark"] #hero2d .busHub { fill: #8f979d; }

/* — animacije scene — */
#hero2d .busEst { animation: hero-bus-e 56s linear infinite; }
#hero2d .busWst { animation: hero-bus-w 64s linear -22s infinite; }
@keyframes hero-bus-e {
  from { transform: translateX(-280px); }
  to { transform: translateX(2480px); }
}
@keyframes hero-bus-w {
  from { transform: translateX(2520px); }
  to { transform: translateX(-420px); }
}
#hero2d .cloud { animation: hero-cloud 110s ease-in-out infinite alternate; }
@keyframes hero-cloud {
  from { transform: translateX(-28px); }
  to { transform: translateX(28px); }
}
#hero2d .gull { animation: hero-gull 4.5s ease-in-out infinite alternate; }
@keyframes hero-gull {
  from { transform: translateY(0); }
  to { transform: translateY(-9px); }
}
#hero2d .boat { animation: hero-boat 5.5s ease-in-out infinite alternate; }
@keyframes hero-boat {
  from { transform: translateY(0) }
  to { transform: translateY(3.5px); }
}
#hero2d .glint { animation: hero-glint 7s ease-in-out infinite alternate; }
@keyframes hero-glint {
  from { opacity: 0.14; }
  to { opacity: 0.4; }
}
#hero2d .lhBlink { animation: hero-lh 3s ease-in-out infinite; }
@keyframes hero-lh {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.95; }
}
#hero2d .beacon { animation: hero-beacon 2.2s ease-in-out infinite; }
@keyframes hero-beacon {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #hero2d * { animation: none !important; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--home-scrim);
}

.hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--home-scrim-bottom);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: clamp(4.5rem, 12vh, 8rem) clamp(4rem, 10vh, 6rem);
  max-width: 1200px;
  width: 100%;
}

.hero-kicker {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--home-kicker);
  margin: 0 0 0.7rem;
  animation: hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-title {
  font-size: clamp(2.3rem, 6vw, 4.1rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--home-hero-text);
  margin: 0 0 1rem;
  max-width: 13ch;
  animation: hero-rise 0.7s 0.08s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-sub {
  font-size: clamp(1.02rem, 2vw, 1.25rem);
  color: var(--home-hero-sub);
  max-width: 44ch;
  margin: 0 0 0.55rem;
  animation: hero-rise 0.7s 0.16s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* rotirajuća poruka */
.hero-rotator {
  min-height: 1.7em;
  margin: 0 0 1.5rem;
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  font-weight: 700;
  color: var(--home-accent);
  animation: hero-rise 0.7s 0.22s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-rotator-word {
  display: inline-block;
}

.hero-rotator-word.is-swap {
  animation: rotator-swap 0.5s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}

@keyframes rotator-swap {
  0%   { opacity: 0; transform: translateY(0.55em); }
  100% { opacity: 1; transform: translateY(0); }
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  animation: hero-rise 0.7s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-cta .btn { gap: 0.5rem; }

/* pretraga u heroju — gumb stiliziran kao polje */
.hero-search {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: min(21rem, 100%);
  padding: 0.68rem 1rem;
  margin-bottom: 1.6rem;
  border-radius: 999px;
  border: 1px solid var(--home-chip-border);
  background: var(--home-chip-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--home-hero-sub);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  animation: hero-rise 0.7s 0.38s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero-search:hover {
  border-color: var(--home-accent);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 30, 51, 0.12);
}

.hero-search svg { flex: none; opacity: 0.75; }

/* stat chipovi — staklasti */
.hero-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  animation: hero-rise 0.7s 0.46s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.stat-chip {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 7.2rem;
  padding: 0.7rem 1.05rem;
  border-radius: 1rem;
  background: var(--home-chip-bg);
  border: 1px solid var(--home-chip-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 15, 26, 0.08);
}

.stat-num {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--home-hero-text);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--home-hero-sub);
}

.stat-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5);
  animation: stat-pulse 2s infinite;
}

@keyframes stat-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.stat-num.is-updated {
  animation: stat-bump 0.5s ease;
}

@keyframes stat-bump {
  40% { transform: scale(1.12); }
}

/* pokazivač za pomicanje */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  color: var(--home-hero-sub);
  background: var(--home-chip-bg);
  border: 1px solid var(--home-chip-border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: scroll-bob 2.2s ease-in-out infinite;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.hero-scroll:hover { color: var(--home-accent); border-color: var(--home-accent); }

@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 7px); }
}

@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   2. BRZI ALATI
   ============================================================ */
/* Alata je točno četiri, pa broj stupaca ne prepuštamo auto-fitu: s minimalnom
   širinom od 340 px iz .grid-2 na uobičajenoj širini stanu tri, a četvrti ostane
   sam u drugom redu. Ovako je uvijek 4 u nizu ili uredan raspored 2×2. */
.tools-grid {
  margin-top: 0.5rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .tools-grid { grid-template-columns: 1fr; }
}

/* U četiri stupca je stupac uzak (~270 px), a ikona uz tekst ostavlja opisu
   jedva 180 px — naslov se lomi u dva reda i kartice ispadaju različite.
   Zato u toj širini ikona ide IZNAD teksta i opis dobiva punu širinu kartice. */
@media (min-width: 1101px) {
  .tools-grid .tool-card { flex-direction: column; align-items: stretch; gap: 0.85rem; }
  .tools-grid .tool-icon { width: 2.9rem; height: 2.9rem; }
  .tools-grid .tool-arrow { position: absolute; top: 1.25rem; right: 1.35rem; }
  .tools-grid .tool-card { position: relative; }
}

/* blagi stagger za reveal elemente (main.css definira tranziciju) */
.tools-grid > .reveal:nth-child(2) { transition-delay: 0.07s; }
.tools-grid > .reveal:nth-child(3) { transition-delay: 0.14s; }
.tools-grid > .reveal:nth-child(4) { transition-delay: 0.21s; }
.notices-grid > .reveal:nth-child(2) { transition-delay: 0.07s; }
.notices-grid > .reveal:nth-child(3) { transition-delay: 0.14s; }

.tool-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-decoration: none;
  color: inherit;
  padding: 1.25rem 1.35rem;
}

.tool-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 0.9rem;
  background: var(--home-icon-bg);
  color: var(--home-accent);
}

.tool-icon svg { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

.tool-text { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }

.tool-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--home-hero-text);
}

.tool-desc {
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--home-hero-sub);
  opacity: 0.88;
}

.tool-arrow {
  margin-left: auto;
  align-self: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--home-accent);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tool-card:hover .tool-arrow,
.tool-card:focus-visible .tool-arrow { opacity: 1; transform: translateX(0); }

/* pokreti ikona po kartici */
.tool-card--karta:hover .tool-icon svg  { transform: scale(1.1) rotate(-4deg); }
.tool-card--blizu:hover .tool-icon svg  { transform: scale(1.12); }
.tool-card--planer:hover .tool-icon svg { transform: translateX(2px) scale(1.06); }
.tool-card--redovi:hover .tool-icon svg { transform: rotate(18deg) scale(1.06); }

.tool-icon-ring { transition: r 0.3s ease; }
.tool-card--blizu:hover .tool-icon-ring { animation: ring-ping 1s ease-out infinite; }

@keyframes ring-ping {
  0%   { opacity: 1; }
  100% { opacity: 0.35; }
}

/* ============================================================
   3. DOLASCI U BLIZINI
   ============================================================ */
.nearby-card {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.6rem 1.7rem;
  border-left: 4px solid var(--home-accent);
}

.nearby-head .section-title { margin-bottom: 0.35rem; }

.nearby-desc {
  margin: 0;
  color: var(--home-hero-sub);
  opacity: 0.9;
  max-width: 56ch;
}

.nearby-body { min-height: 3rem; }

.nearby-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--home-hero-sub);
  font-weight: 600;
}

.nearby-spinner {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  border-radius: 50%;
  border: 2.5px solid var(--home-chip-border);
  border-top-color: var(--home-accent);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.nearby-result { display: flex; flex-direction: column; gap: 0.8rem; }

.nearby-station {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
}

.nearby-station-name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--home-hero-text);
}

.nearby-station-name a { color: inherit; text-decoration: none; }
.nearby-station-name a:hover { color: var(--home-accent); }

.nearby-dist { font-size: 0.85rem; font-weight: 700; color: var(--home-accent); }

.nearby-deps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nearby-dep {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.2rem;
  border-top: 1px solid var(--home-card-line);
}

.nearby-dep-dest {
  flex: 1;
  min-width: 0;
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--home-hero-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-dep-time {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--home-hero-sub);
  font-size: 0.9rem;
}

/* polazak idućeg dana — bez odbrojavanja, samo oznaka */
.nearby-dep-next {
  min-width: 4.2rem;
  text-align: right;
  font-weight: 700;
  font-size: 0.9rem;
  opacity: 0.75;
}

.nearby-dep .countdown {
  min-width: 4.2rem;
  text-align: right;
  font-weight: 800;
  color: var(--home-accent);
}

.nearby-more {
  align-self: flex-start;
  font-weight: 700;
  color: var(--home-accent);
  text-decoration: none;
}

.nearby-more:hover { text-decoration: underline; }

/* ============================================================
   4. OBAVIJESTI
   ============================================================ */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.section-head .section-title { margin: 0; }

.notice-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.25rem 1.35rem;
  text-decoration: none;
  color: inherit;
}

.notice-date {
  align-self: flex-start;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--home-accent);
  background: var(--home-icon-bg);
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
}

.notice-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--home-hero-text);
}

a.notice-card:hover .notice-title { color: var(--home-accent); }

.notice-excerpt {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--home-hero-sub);
  opacity: 0.9;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notice-cta {
  margin-top: auto;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--home-accent);
}

/* skeletoni */
.notice-skeleton { gap: 0.7rem; }
.notice-skel-date  { width: 5.5rem; height: 1.2rem; border-radius: 999px; }
.notice-skel-title { width: 85%; height: 1.35rem; border-radius: 0.4rem; }
.notice-skel-text  { width: 100%; height: 0.85rem; border-radius: 0.4rem; }
.notice-skel-text--short { width: 60%; }

/* ============================================================
   5. KARTE (teaser)
   ============================================================ */
.tickets-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  align-items: center;
  padding: 1.8rem 1.9rem;
  overflow: hidden;
  position: relative;
}

.tickets-card::before {
  content: "";
  position: absolute;
  right: -4rem;
  top: -4rem;
  width: 13rem;
  height: 13rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--home-icon-bg), transparent 70%);
  pointer-events: none;
}

.tickets-info .section-title { margin-bottom: 0.5rem; }

.tickets-info p {
  margin: 0 0 1.1rem;
  color: var(--home-hero-sub);
  line-height: 1.55;
  max-width: 46ch;
}

.store-badges { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.9rem;
  padding: 0.45rem 1.05rem;
  border-radius: 0.7rem;
  background: var(--home-store-bg);
  color: var(--home-store-text);
  text-decoration: none;
  border: 1px solid var(--home-chip-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.store-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 15, 26, 0.22);
}

.store-badge span { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800; font-size: 0.92rem; }
/* color: inherit je nužan — globalni `small` u main.css nosi --text-muted, koji je
   u svijetloj temi tamnoplav i na ovoj trajno tamnoj podlozi ispada nečitljiv. */
.store-badge small { font-size: 0.66rem; font-weight: 600; color: inherit; opacity: 0.85; letter-spacing: 0.02em; }

.tickets-table-wrap { position: relative; overflow-x: auto; }

.tickets-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.96rem;
}

.tickets-table th {
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--home-hero-sub);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--home-card-line);
}

.tickets-table th:last-child { text-align: right; }

.tickets-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--home-card-line);
  color: var(--home-hero-text);
  font-weight: 600;
}

.tickets-table tbody tr:nth-child(odd) { background: var(--home-table-stripe); }

.ticket-note { font-size: 0.8rem; font-weight: 500; color: var(--home-hero-sub); }

.ticket-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--home-accent);
  white-space: nowrap;
}

.tickets-more {
  display: inline-block;
  margin-top: 0.9rem;
  font-weight: 700;
  color: var(--home-accent);
  text-decoration: none;
}

.tickets-more:hover { text-decoration: underline; }

/* ============================================================
   6. PWA slot
   ============================================================ */
#pwa-install-slot-home { margin-block: 0 2.5rem; }
#pwa-install-slot-home:empty { display: none; }

/* ============================================================
   Responzivnost
   ============================================================ */
@media (max-width: 900px) {
  .tickets-card { grid-template-columns: 1fr; gap: 1.4rem; }
}

@media (max-width: 768px) {
  .page-home .hero { min-height: 78vh; min-height: 78svh; }
  .hero-content { padding-block: 4rem 4.5rem; }
  .hero-scroll { display: none; }
  .nearby-card { padding: 1.3rem 1.2rem; }
  .tickets-card { padding: 1.4rem 1.2rem; }
}

@media (max-width: 480px) {
  .hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .hero-search { width: 100%; }
  .stat-chip { flex: 1 1 30%; min-width: 0; padding: 0.6rem 0.8rem; }
  .stat-num { font-size: 1.3rem; }
  .store-badge { flex: 1 1 45%; justify-content: center; }
}

/* ============================================================
   Smanjeno kretanje
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-kicker, .hero-title, .hero-sub, .hero-rotator,
  .hero-cta, .hero-search, .hero-stats {
    animation: none;
  }
  .hero-rotator-word.is-swap { animation: none; }
  .hero-scroll, .stat-dot { animation: none; }
  .stat-num.is-updated { animation: none; }
  .nearby-spinner { animation: none; border-top-color: var(--home-chip-border); }
  .tool-icon svg, .tool-arrow, .store-badge, .hero-search { transition: none; }
  .tool-card--blizu:hover .tool-icon-ring { animation: none; }
  .store-badge:hover { transform: none; }
}