/* ==========================================================================
   eDoktor - arhiva/kategorija v2 (prefiks .arh-)
   Port Petrine makete "eDoktor Zdravlje Arhiva" (27.08.2026.)
   Font se nasljeduje sitewide (Inter Tight). Bez JS-a - WP Rocket odgada
   inline skripte, pa su sve interakcije rjesene linkovima, formom i CSS-om.
   ========================================================================== */

.arh {
  --arh-bg:      oklch(0.985 0.008 95);
  --arh-tinta:   oklch(0.22 0.02 260);
  --arh-tekst:   oklch(0.44 0.02 260);
  --arh-prigus:  oklch(0.55 0.02 260);
  --arh-rub:     oklch(0.92 0.008 95);
  --arh-bijela:  oklch(1 0 0);
  --arh-akcent:  oklch(0.62 0.15 195);
  --arh-topla:   oklch(0.68 0.15 40);
  --arh-sirina:  1280px;
  --arh-pad:     26px;

  background: var(--arh-bg);
  background-image: radial-gradient(oklch(0.22 0.02 260 / 0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  color: var(--arh-tinta);
}

.arh *,
.arh *::before,
.arh *::after { box-sizing: border-box; }

.arh a { color: var(--arh-akcent); text-decoration: none; }
.arh a:hover { color: oklch(0.45 0.14 195); }
.arh ::selection { background: oklch(0.62 0.15 195 / 0.25); }
.arh input, .arh button { font-family: inherit; }

.arh-omot {
  max-width: var(--arh-sirina);
  margin: 0 auto;
  padding-left: var(--arh-pad);
  padding-right: var(--arh-pad);
}

/* ── Animacije ──────────────────────────────────────────────────────────── */
@keyframes arhPop    { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes arhBlink  { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes arhSweep  { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes arhDrift  { 0%,100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(4%,-6%,0) scale(1.08); } 66% { transform: translate3d(-5%,4%,0) scale(0.96); } }
@keyframes arhGrid   { from { background-position: 0 0; } to { background-position: 34px 34px; } }
@keyframes arhTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes arhSheen  { from { transform: translateX(-140%) skewX(-18deg); } to { transform: translateX(240%) skewX(-18deg); } }
@keyframes arhUlaz   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Ulazna animacija bez JS-a - vrti se odmah, sadrzaj nikad ne ostaje skriven. */
.arh-ulaz { animation: arhUlaz 0.7s cubic-bezier(0.2,0.7,0.2,1) both; }

/* ── Traka s porukama ───────────────────────────────────────────────────── */
.arh-traka {
  overflow: hidden;
  border-bottom: 1px solid var(--arh-rub);
  background: var(--arh-bijela);
  padding: 9px 0;
}
.arh-traka-red {
  display: flex;
  width: max-content;
  gap: 34px;
  animation: arhTicker 34s linear infinite;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: oklch(0.6 0.02 260);
}
.arh-traka-red span {
  display: flex;
  align-items: center;
  gap: 34px;
  white-space: nowrap;
}
.arh-traka-red i {
  width: 4px; height: 4px;
  border-radius: 999px;
  background: oklch(0.72 0.12 195);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.arh-hero { position: relative; overflow: hidden; padding-top: 46px; padding-bottom: 26px; }
.arh-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(10px);
  pointer-events: none;
}
.arh-orb-1 {
  top: -180px; right: 4%; width: 520px; height: 520px;
  background: radial-gradient(circle at 40% 40%, oklch(0.62 0.15 195 / 0.2), transparent 68%);
  animation: arhDrift 18s ease-in-out infinite;
}
.arh-orb-2 {
  bottom: -220px; left: -8%; width: 460px; height: 460px;
  background: radial-gradient(circle at 60% 40%, oklch(0.7 0.14 40 / 0.18), transparent 68%);
  animation: arhDrift 23s ease-in-out infinite reverse;
}

.arh-mrvice {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 500;
  color: var(--arh-prigus);
}
.arh-mrvice a { color: var(--arh-prigus); }
.arh-mrvice b { color: oklch(0.32 0.02 260); font-weight: 500; }

.arh-hero-red {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: end;
  margin-top: 18px;
}
.arh-hero h1 {
  font-size: 68px;
  line-height: 0.94;
  letter-spacing: -0.045em;
  font-weight: 800;
  margin: 0;
  animation: arhPop 0.5s ease both;
}
.arh-plus {
  background: linear-gradient(90deg, oklch(0.62 0.15 195), oklch(0.62 0.15 40), oklch(0.62 0.15 195));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: arhSweep 7s linear infinite;
}
.arh-hero-uvod {
  margin: 18px 0 0;
  font-size: 17.5px;
  line-height: 1.55;
  color: oklch(0.42 0.02 260);
  max-width: 54ch;
  text-wrap: pretty;
}

.arh-brojke { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.arh-brojka {
  padding: 16px 14px;
  border-radius: 16px;
  background: var(--arh-bijela);
  border: 1px solid var(--arh-rub);
  box-shadow: 0 3px 10px oklch(0.22 0.02 260 / 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.arh-brojka:hover { transform: translateY(-4px); box-shadow: 0 14px 30px oklch(0.22 0.02 260 / 0.09); }
.arh-brojka b {
  display: block;
  font-size: 27px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.arh-brojka span {
  display: block;
  font-size: 11.5px; line-height: 1.3;
  color: oklch(0.52 0.02 260);
  margin-top: 6px;
}

/* ── Trazilica i teme ───────────────────────────────────────────────────── */
.arh-filtri {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 34px; padding-top: 26px;
  border-top: 1px solid oklch(0.91 0.008 95);
}
.arh-trazi { position: relative; flex: 1 1 300px; min-width: 260px; margin: 0; }
.arh-trazi-ikona {
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  color: oklch(0.6 0.02 260);
  pointer-events: none;
  display: flex;
}
.arh-trazi input {
  width: 100%;
  padding: 14px 18px 14px 42px;
  border-radius: 999px;
  border: 1.5px solid oklch(0.9 0.008 95);
  background: var(--arh-bijela);
  font-size: 14.5px;
  color: var(--arh-tinta);
  outline: none;
}
.arh-trazi input:focus {
  border-color: var(--arh-akcent);
  box-shadow: 0 0 0 4px oklch(0.62 0.15 195 / 0.12);
}
.arh-teme { display: flex; flex-wrap: wrap; gap: 8px; }
.arh-cip {
  padding: 11px 16px;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  white-space: nowrap;
  border: 1.5px solid oklch(0.91 0.008 95);
  background: var(--arh-bijela);
  color: oklch(0.38 0.02 260);
  transition: all 0.15s ease;
}
.arh-cip:hover { border-color: oklch(0.86 0.06 195); background: oklch(0.97 0.02 195); color: oklch(0.38 0.02 260); }
.arh-cip.je-aktivan {
  border-color: var(--arh-akcent);
  background: var(--arh-akcent);
  color: oklch(0.99 0.01 195);
}

/* ── Zajednicki naslovni blok kartice ──────────────────────────────────── */
.arh-naslovnica {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, var(--tonA), var(--tonB));
}
.arh-naslovnica img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.42;
}
/* zatamnjenje samo kad ispod stoji fotografija - na cistom gradijentu nije potrebno */
.arh-naslovnica.ima-sliku::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(145deg, oklch(0.66 0.14 var(--ton) / 0.55), oklch(0.5 0.13 var(--ton) / 0.72));
}
.arh-naslovnica > * { position: relative; z-index: 2; }
.arh-mrezica {
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.16) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.16) 1px, transparent 1px);
  background-size: 34px 34px;
  animation: arhGrid 6s linear infinite;
}
.arh-sjaj {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 3;
  width: 44%;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.4), transparent);
  pointer-events: none;
  opacity: 0;
}
.arh-kartica:hover .arh-sjaj { opacity: 1; animation: arhSheen 0.9s ease-out; }
.arh-znak {
  font-weight: 800;
  letter-spacing: -0.05em;
  color: oklch(1 0 0 / 0.85);
  line-height: 1;
  text-shadow: 0 2px 18px oklch(0.2 0.05 260 / 0.35);
  transition: transform 0.45s cubic-bezier(0.2,0.7,0.2,1);
}
.arh-kartica:hover .arh-znak { transform: scale(1.14) translateY(-4px); }
.arh-tema-oznaka {
  position: absolute; bottom: 12px; left: 16px; z-index: 3;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(1 0 0 / 0.88);
}
.arh-minute {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  padding: 5px 11px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.92);
  font-size: 10.5px; font-weight: 700;
  white-space: nowrap;
  color: oklch(0.35 0.02 260);
}

/* ── Istaknuti clanak ───────────────────────────────────────────────────── */
.arh-istaknuto { padding-top: 8px; }
.arh-veliki {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  border-radius: 26px;
  overflow: hidden;
  background: var(--arh-bijela);
  border: 1px solid var(--arh-rub);
  box-shadow: 0 20px 50px oklch(0.22 0.02 260 / 0.07);
  color: inherit;
  transition: box-shadow 0.25s ease;
}
.arh-veliki:hover { box-shadow: 0 26px 60px oklch(0.22 0.02 260 / 0.11); color: inherit; }
.arh-veliki-slika { min-height: 340px; align-items: stretch; }
.arh-veliki-slika .arh-veliki-tekst-blok {
  position: relative; z-index: 3;
  padding: 34px;
  display: flex; flex-direction: column;
  width: 100%;
}
.arh-novo {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: start;
  padding: 7px 14px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.9);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(0.35 0.02 260);
}
.arh-novo i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: oklch(0.62 0.15 25);
  animation: arhBlink 1.8s ease-in-out infinite;
}
.arh-veliki-znak { margin-top: auto; font-size: 96px; transform-origin: left bottom; }
.arh-veliki-tema {
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(1 0 0 / 0.8);
  margin-top: 12px;
}
.arh-veliki-body { padding: 40px 40px 34px; display: flex; flex-direction: column; }
.arh-nadnaslov {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(0.55 0.15 195);
}
.arh-veliki-body h2 {
  font-size: 38px; line-height: 1.06;
  letter-spacing: -0.035em; font-weight: 800;
  margin: 14px 0 0;
  text-wrap: balance;
  color: var(--arh-tinta);
}
.arh-veliki-body p {
  font-size: 16px; line-height: 1.6;
  color: var(--arh-tekst);
  margin: 16px 0 0;
  text-wrap: pretty;
}
.arh-veliki-meta {
  margin-top: auto; padding-top: 28px;
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; color: oklch(0.5 0.02 260);
}
.arh-inicijali {
  width: 34px; height: 34px;
  border-radius: 999px;
  background: oklch(0.94 0.03 195);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  color: oklch(0.42 0.12 195);
  flex-shrink: 0;
}
.arh-veliki-meta .arh-autor { font-weight: 600; color: oklch(0.3 0.02 260); }
.arh-procitajte { margin-left: auto; font-weight: 700; color: oklch(0.55 0.15 195); white-space: nowrap; }

/* ── Mreza + bocni stupac ──────────────────────────────────────────────── */
.arh-glavno {
  padding-top: 44px; padding-bottom: 70px;
  display: grid;
  grid-template-columns: 1fr 316px;
  gap: 44px;
  align-items: start;
}
.arh-zaglavlje-liste {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 20px;
}
.arh-zaglavlje-liste h2 {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: oklch(0.4 0.02 260);
  margin: 0;
}
.arh-broj-rez { font-size: 13px; color: var(--arh-prigus); }

.arh-mreza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.arh-kartica {
  display: flex; flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--arh-bijela);
  border: 1px solid var(--arh-rub);
  box-shadow: 0 2px 8px oklch(0.22 0.02 260 / 0.04);
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.arh-kartica:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px oklch(0.22 0.02 260 / 0.1);
  color: inherit;
}
.arh-kartica .arh-naslovnica { height: 150px; }
.arh-kartica .arh-znak { font-size: 58px; }
.arh-kartica-body { padding: 20px 20px 18px; display: flex; flex-direction: column; flex: 1; }
.arh-kartica-body h3 {
  font-size: 19px; line-height: 1.22;
  letter-spacing: -0.02em; font-weight: 700;
  margin: 0;
  text-wrap: pretty;
  color: var(--arh-tinta);
}
.arh-kartica-body p {
  font-size: 14px; line-height: 1.55;
  color: oklch(0.48 0.02 260);
  margin: 10px 0 0;
}
.arh-kartica-meta {
  margin-top: auto; padding-top: 18px;
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; color: oklch(0.54 0.02 260);
}
.arh-kartica-meta .arh-autor { font-weight: 600; color: oklch(0.34 0.02 260); }

.arh-prazno {
  padding: 54px 26px;
  text-align: center;
  border-radius: 20px;
  border: 1.5px dashed oklch(0.88 0.008 95);
  background: oklch(1 0 0 / 0.6);
}
.arh-prazno b { font-size: 19px; font-weight: 700; }
.arh-prazno p { font-size: 14.5px; color: oklch(0.5 0.02 260); margin: 10px 0 0; }

/* ── Straniciranje ─────────────────────────────────────────────────────── */
.arh-stranice {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  margin-top: 42px;
}
.arh-stranice .page-numbers {
  min-width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--arh-bijela);
  border: 1px solid var(--arh-rub);
  font-weight: 600; font-size: 14px;
  color: oklch(0.35 0.02 260);
}
.arh-stranice .page-numbers:hover { background: oklch(0.97 0.02 195); border-color: oklch(0.86 0.06 195); color: oklch(0.35 0.02 260); }
.arh-stranice .page-numbers.current {
  background: var(--arh-tinta);
  border-color: var(--arh-tinta);
  color: oklch(0.98 0.005 95);
  font-weight: 700;
}
.arh-stranice .page-numbers.dots { border: none; background: none; min-width: 26px; color: oklch(0.6 0.02 260); }
.arh-stranice-info { margin-left: 12px; font-size: 13px; color: var(--arh-prigus); }

/* ── Bocni stupac ──────────────────────────────────────────────────────── */
.arh-bocno { position: sticky; top: 78px; display: grid; gap: 20px; }
.arh-blok {
  padding: 22px;
  border-radius: 22px;
  background: var(--arh-bijela);
  border: 1px solid var(--arh-rub);
}
.arh-blok h3 {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.5 0.02 260);
  margin: 0 0 14px;
}

.arh-alat {
  padding: 24px;
  border-radius: 22px;
  background: var(--arh-tinta);
  color: oklch(0.97 0.005 95);
  box-shadow: 0 18px 40px oklch(0.22 0.02 260 / 0.18);
}
.arh-alat-oznaka {
  display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.75 0.09 195);
}
.arh-alat-oznaka i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: oklch(0.72 0.14 150);
  animation: arhBlink 2s ease-in-out infinite;
}
.arh-alat b {
  display: block;
  font-size: 23px; font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 12px; line-height: 1.12;
}
.arh-alat p {
  font-size: 13.5px; line-height: 1.55;
  color: oklch(0.82 0.01 260);
  margin: 10px 0 0;
}
.arh-alat-cta {
  display: block; text-align: center;
  margin-top: 18px;
  padding: 13px 18px;
  border-radius: 999px;
  background: var(--arh-akcent);
  color: oklch(0.99 0.01 195);
  font-weight: 700; font-size: 14px;
}
.arh-alat-cta:hover { background: oklch(0.68 0.15 195); color: oklch(0.99 0.01 195); }

.arh-top { display: grid; gap: 14px; }
.arh-top a { display: flex; gap: 13px; align-items: start; color: inherit; }
.arh-top a:hover { color: oklch(0.55 0.15 195); }
.arh-top .arh-rang {
  font-size: 15px; font-weight: 800;
  color: oklch(0.78 0.02 260);
  line-height: 1.3; min-width: 18px;
}
.arh-top .arh-top-t { font-size: 14px; font-weight: 600; line-height: 1.35; }

.arh-kat-cipovi { display: flex; flex-wrap: wrap; gap: 8px; }
.arh-kat-cipovi a {
  padding: 8px 13px;
  border-radius: 999px;
  background: oklch(0.975 0.008 95);
  border: 1px solid oklch(0.93 0.008 95);
  font-size: 13px; font-weight: 600;
  color: oklch(0.35 0.02 260);
}
.arh-kat-cipovi a:hover { background: oklch(0.94 0.04 195); border-color: oklch(0.86 0.06 195); color: oklch(0.35 0.02 260); }

.arh-recepti-mini { display: grid; gap: 12px; }
.arh-recepti-mini a { display: flex; gap: 12px; align-items: center; color: inherit; }
.arh-recepti-mini a:hover { color: oklch(0.55 0.15 195); }
.arh-mini-slika {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800;
  color: oklch(1 0 0 / 0.9);
  background: linear-gradient(145deg, var(--tonA), var(--tonB));
}
.arh-mini-slika img { width: 100%; height: 100%; object-fit: cover; }
.arh-mini-t { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.arh-svi-recepti { display: block; margin-top: 14px; font-size: 13px; font-weight: 700; }

.arh-news {
  padding: 24px;
  border-radius: 22px;
  background: linear-gradient(150deg, oklch(0.95 0.05 195), oklch(0.96 0.04 40));
  border: 1px solid oklch(0.9 0.04 195);
}
.arh-news-oznaka {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: oklch(0.45 0.1 195);
}
.arh-news b {
  display: block;
  font-size: 21px; font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 10px; line-height: 1.15;
  color: var(--arh-tinta);
}
.arh-news input {
  width: 100%; margin-top: 14px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid oklch(0.9 0.02 195);
  background: var(--arh-bijela);
  font-size: 14px; outline: none;
}
.arh-news input:focus { border-color: var(--arh-akcent); }
.arh-news button {
  width: 100%; margin-top: 9px;
  padding: 13px 18px;
  border-radius: 999px; border: none;
  background: var(--arh-tinta);
  color: oklch(0.98 0.005 95);
  font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.arh-news button:hover { background: oklch(0.32 0.03 260); }
.arh-news small {
  display: block;
  font-size: 11.5px;
  color: oklch(0.5 0.03 195);
  margin-top: 10px; text-align: center;
}

/* ── Donje sekcije ─────────────────────────────────────────────────────── */
.arh-sekcija { border-top: 1px solid oklch(0.91 0.008 95); }
.arh-sekcija-bijela { background: var(--arh-bijela); }
.arh-sekcija-siva { background: oklch(0.96 0.012 260); border-top-color: oklch(0.91 0.008 260); }
.arh-sekcija .arh-omot { padding-top: 66px; padding-bottom: 66px; }

.arh-sekcija-vrh {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 26px; flex-wrap: wrap;
}
.arh-sekcija-vrh h2 {
  font-size: 40px; letter-spacing: -0.04em;
  font-weight: 800; margin: 12px 0 0; line-height: 1.02;
  color: var(--arh-tinta);
}
.arh-sekcija-vrh p {
  font-size: 16.5px; color: oklch(0.45 0.02 260);
  margin: 12px 0 0; max-width: 58ch; line-height: 1.55;
}
.arh-oznaka-sekcije {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.55 0.15 195);
}
.arh-oznaka-sekcije i {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: oklch(0.68 0.15 40);
  animation: arhBlink 1.9s ease-in-out infinite;
}
.arh-gumb-svijetli {
  padding: 14px 24px;
  border-radius: 999px;
  background: oklch(0.975 0.008 95);
  border: 1.5px solid oklch(0.9 0.008 95);
  font-weight: 700; font-size: 14.5px;
  color: oklch(0.25 0.02 260);
  white-space: nowrap;
}
.arh-gumb-svijetli:hover { background: oklch(0.94 0.04 195); border-color: oklch(0.86 0.06 195); color: oklch(0.25 0.02 260); }
.arh-gumb-tamni {
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--arh-tinta);
  color: oklch(0.98 0.005 95);
  font-weight: 700; font-size: 14.5px;
  white-space: nowrap;
}
.arh-gumb-tamni:hover { background: oklch(0.32 0.03 260); color: oklch(0.98 0.005 95); }

.arh-recepti-mreza { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.arh-recepti-mreza .arh-naslovnica { height: 132px; }
.arh-recepti-mreza .arh-znak { font-size: 46px; }
.arh-oznake { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.arh-oznake span {
  padding: 5px 11px;
  border-radius: 999px;
  background: oklch(0.975 0.008 95);
  border: 1px solid oklch(0.93 0.008 95);
  font-size: 11.5px; font-weight: 600;
  color: oklch(0.4 0.02 260);
  white-space: nowrap;
}

.arh-vodici { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.arh-vodic {
  display: flex; flex-direction: column;
  padding: 20px;
  border-radius: 20px;
  background: var(--arh-bijela);
  border: 1px solid oklch(0.91 0.008 260);
  color: inherit;
  min-height: 200px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.arh-vodic:hover { transform: translateY(-4px); box-shadow: 0 16px 34px oklch(0.22 0.02 260 / 0.1); color: inherit; }
.arh-vodic-faza {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: oklch(0.58 0.02 260);
}
.arh-vodic b {
  font-size: 21px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1;
  margin-top: 12px;
  text-wrap: pretty;
  color: var(--arh-tinta);
}
.arh-napredak { margin-top: auto; padding-top: 20px; }
.arh-napredak-red {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px;
  font-size: 11.5px; font-weight: 700;
  color: oklch(0.5 0.02 260);
}
.arh-napredak-red span { font-variant-numeric: tabular-nums; }
.arh-traka-napretka {
  height: 5px;
  border-radius: 999px;
  background: oklch(0.93 0.01 260);
  margin-top: 8px;
  overflow: hidden;
}
.arh-traka-napretka i {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, oklch(0.62 0.15 195), oklch(0.66 0.15 40));
}

/* ── Oglasi ────────────────────────────────────────────────────────────── */
.arh .ad-slot { margin: 26px 0; }
.arh .ad-slot:empty { display: none; }
.arh-mreza .ad-slot { grid-column: 1 / -1; margin: 0; }

/* ── Responzivno ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .arh-glavno { grid-template-columns: 1fr; gap: 34px; }
  .arh-bocno { position: static; grid-template-columns: repeat(2, 1fr); }
  .arh-vodici { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .arh-hero-red { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .arh-hero h1 { font-size: 46px; }
  .arh-hero-uvod { font-size: 16px; }
  .arh-veliki { grid-template-columns: 1fr; }
  .arh-veliki-slika { min-height: 220px; }
  .arh-veliki-znak { font-size: 66px; }
  .arh-veliki-body { padding: 26px 24px 24px; }
  .arh-veliki-body h2 { font-size: 28px; }
  .arh-recepti-mreza { grid-template-columns: repeat(2, 1fr); }
  .arh-sekcija-vrh h2 { font-size: 30px; }
  .arh-sekcija .arh-omot { padding-top: 46px; padding-bottom: 46px; }
}

@media (max-width: 680px) {
  .arh { --arh-pad: 18px; }
  .arh-hero { padding-top: 30px; }
  .arh-hero h1 { font-size: 38px; }
  /* brojke ostaju u JEDNOM redu - ne rusiti u 1fr (pouka s trgovine) */
  .arh-brojke { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .arh-brojka { padding: 12px 10px; }
  .arh-brojka b { font-size: 20px; }
  .arh-brojka span { font-size: 10.5px; }
  .arh-mreza { grid-template-columns: 1fr; gap: 16px; }
  .arh-bocno { grid-template-columns: 1fr; }
  .arh-recepti-mreza { grid-template-columns: 1fr; }
  .arh-vodici { grid-template-columns: 1fr; }
  .arh-veliki-meta { flex-wrap: wrap; row-gap: 8px; }
  .arh-procitajte { margin-left: 0; width: 100%; }
  .arh-stranice-info { width: 100%; text-align: center; margin: 8px 0 0; }
  .arh-teme { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .arh-teme::-webkit-scrollbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arh-ulaz { animation: none; }
  .arh * { animation-duration: 0.001s !important; }
}


/* ── Popravci specificnosti (27.08.2026.) ──────────────────────────────────
   .arh-kartica je definiran NAKON .arh-veliki pa mu je flex-column gasio
   dvostupacni raspored; tema je linku u tamnoj kartici nametala boju teksta
   jednaku pozadini gumba, pa se natpis nije vidio. */
a.arh-veliki {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  flex-direction: initial;
}
@media (max-width: 900px) {
  a.arh-veliki { grid-template-columns: 1fr; }
}
.arh .arh-alat-cta,
.arh .arh-alat-cta:hover,
.arh .arh-alat-cta:focus { color: oklch(0.99 0.01 195) !important; }
.arh .arh-alat-cta { background: var(--arh-akcent); }
.arh .arh-alat-cta:hover { background: oklch(0.68 0.15 195); }

/* Zaglavlje je position:fixed (72px / 60px na mobitelu), a <body> na arhivi
   NEMA padding-top kao na ostalim predloscima - bez ovog odmaka traka s
   porukama zavrsi skrivena ispod zaglavlja. */
.arh { padding-top: 72px; }
@media (max-width: 900px) { .arh { padding-top: 60px; } }

/* Vodici su od 27.08.2026. kupivi - umjesto trake napretka ide cijena i CTA. */
.arh-vodic-cijena {
  display: block;
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.03em;
  color: oklch(0.22 0.02 260);
  font-variant-numeric: tabular-nums;
}
.arh-vodic-cta {
  display: block; margin-top: 6px;
  font-size: 13px; font-weight: 700;
  color: oklch(0.55 0.15 195);
}


/* ── Petrine mobilne snimke, 27.08.2026. ─────────────────────────────────── */

/* PRAZNI OGLASNI BLOKOVI: edoktor_ad_slot() uvijek ispise <div class="ad-slot">,
   pa i kad mjesto nije prodano i AdSense ga ne popuni. `:empty` tada ne hvata
   jer div ima djecu (ins.adsbygoogle). Rezultat su bile velike rupe u stranici
   - izmedu istaknutog clanka i mreze, unutar mreze i u bocnom stupcu.
   Blok se prikazuje SAMO ako u sebi ima stvarni sadrzaj (sliku, poveznicu ili
   popunjeni AdSense). */
.arh .ad-slot { display: none; margin: 0; }
.arh .ad-slot:has(img),
.arh .ad-slot:has(a),
.arh .ad-slot:has(iframe),
.arh .ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) {
  display: block;
  margin: 26px 0;
}
.arh-mreza .ad-slot:has(img),
.arh-mreza .ad-slot:has(a),
.arh-mreza .ad-slot:has(iframe),
.arh-mreza .ad-slot:has(ins.adsbygoogle[data-ad-status="filled"]) {
  grid-column: 1 / -1;
  margin: 0;
}

/* Ikona povecala nije bila okomito centrirana u polju za pretragu. */
.arh-trazi { display: block; }
.arh-trazi-ikona {
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
}
.arh-trazi-ikona svg { display: block; }

/* Klasa .screen-reader-text nije definirana u ovom predlosku, pa je oznaka
   "Pretraga clanaka" bila VIDLJIVA iznad polja i gurala ikonu povecala iz
   sredine. Oznaka mora ostati u kodu zbog citaca ekrana, ali nevidljiva. */
.arh .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Vodici imaju vise planova pristupa - "od" ide sitnije od iznosa. */
.arh-vodic-cijena .arh-od {
  font-size: 13px;
  font-weight: 600;
  color: oklch(0.5 0.02 260);
  letter-spacing: 0;
}

/* 27.08.2026. (Petra): kratica NIJE preko svake fotografije. Prikazuje se samo
   na naslovnicama s klasom .arh-znak-on - svaka cetvrta kartica i svaki clanak
   bez fotografije (od 369 clanaka samo 2 su bez, pa bi inace kratica bila
   prakticki na svakoj slici). */
.arh-naslovnica .arh-znak { display: none; }
.arh-naslovnica.arh-znak-on .arh-znak { display: block; }
/* Preko fotografije kratica je diskretnija - na praznoj plohi ostaje puna. */
.arh-naslovnica.ima-sliku.arh-znak-on .arh-znak {
    opacity: .5;
    text-shadow: 0 2px 10px rgba(8,20,40,.5);
}

/* ========================================================================
   28.08.2026. (Petra): stupnjevani popis SAMO NA MOBITELU.
   Desktop ostaje kakav je bio - istaknuti clanak pa jednake kartice u dva
   stupca. Na mobitelu: prve 3 velike, sljedece 4 po dvije u redu (dva reda),
   ostatak kompaktna lista sa slikom lijevo - kao na hubu recepata.
   ======================================================================== */
@media (max-width: 760px) {
    /* Mreza je inace jednostupcana na mobitelu; vracamo dva stupca da srednje
       kartice mogu ici dvije u red. Velike i lista se protezu preko oba. */
    .arh-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

    .arh-mreza .arh-k-velika { grid-column: 1 / -1; }
    .arh-mreza .arh-k-velika .arh-naslovnica { height: 200px; }
    .arh-mreza .arh-k-velika .arh-znak { font-size: 68px; }
    .arh-mreza .arh-k-velika .arh-kartica-body h3 { font-size: 19px; line-height: 1.3; }

    .arh-mreza .arh-k-srednja .arh-naslovnica { height: 108px; }
    .arh-mreza .arh-k-srednja .arh-znak { font-size: 34px; }
    .arh-mreza .arh-k-srednja .arh-kartica-body { padding: 12px 13px; }
    .arh-mreza .arh-k-srednja .arh-kartica-body h3 { font-size: 14.5px; line-height: 1.32; }
    .arh-mreza .arh-k-srednja .arh-kartica-body p { display: none; }
    .arh-mreza .arh-k-srednja .arh-tema-oznaka { display: none; }

    .arh-mreza .arh-k-lista {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        align-items: stretch;
        gap: 0;
    }
    .arh-mreza .arh-k-lista .arh-naslovnica { height: 100%; min-height: 88px; }
    .arh-mreza .arh-k-lista .arh-znak { font-size: 26px; }
    .arh-mreza .arh-k-lista .arh-tema-oznaka,
    .arh-mreza .arh-k-lista .arh-minute { display: none; }
    .arh-mreza .arh-k-lista .arh-kartica-body { padding: 12px 14px; }
    .arh-mreza .arh-k-lista .arh-kartica-body h3 { font-size: 15px; line-height: 1.32; margin-bottom: 4px; }
    .arh-mreza .arh-k-lista .arh-kartica-body p { display: none; }

    /* Oglasno mjesto ide preko oba stupca. */
    .arh-mreza .ad-slot { grid-column: 1 / -1; }
}