/* ==========================================================================
   TV Kikinda — Arhiva: overview by year (/arhiva/) and a year by month (/arhiva/2024/)
   Loaded only on the archive page template.
   ========================================================================== */

/* ---------- Head ---------- */
.arhiva-head { padding-bottom: clamp(40px, 6vw, 80px); }
.arhiva-head a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 4px; }
.arhiva-head a:hover { text-decoration-color: var(--orange); }
.arhiva-head__span {
  position: absolute; z-index: -1; right: -.04em; bottom: -.16em; pointer-events: none; user-select: none; white-space: nowrap;
  font: italic 900 clamp(5rem, 1rem + 16vw, 17rem)/.8 var(--font-display); letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .13);
}
.arhiva-head__year { font: italic 900 clamp(5.5rem, 2rem + 15vw, 15rem)/.8 var(--font-display); letter-spacing: -.03em; color: #fff; }
.arhiva-head--year .page-head__inner { gap: 18px; }

/* Year digits roll into place (motion.js builds the columns; plain text without JS). Hidden until the roll starts so
   the final number does not flash first; shown anyway after 2.5 s if the script never runs. */
.js [data-odometer]:not([data-rolled]) { opacity: 0; animation: tvk-odo-show 0s 2.5s forwards; }
@keyframes tvk-odo-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js [data-odometer]:not([data-rolled]) { opacity: 1; animation: none; } }
.odo { display: inline-flex; }
.odo__col { display: inline-block; height: .86em; overflow: hidden; }
.odo__strip { display: flex; flex-direction: column; line-height: .86; }

.arhiva-step { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.arhiva-step__link {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  font: italic 800 1.15rem/1 var(--font-display); letter-spacing: .02em; color: #fff; text-decoration: none !important;
}
.arhiva-step__link::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border: 1.5px solid rgba(255, 255, 255, .28); border-radius: 3px;
  transform: skewX(var(--skew)); transition: background-color .3s, border-color .3s;
}
.arhiva-step__link:hover::before, .arhiva-step__link:focus-visible::before { background: var(--orange); border-color: var(--orange); }
.arhiva-step__link:hover, .arhiva-step__link:focus-visible { color: var(--navy-950); }

/* ---------- Year rail and month bar (sticky under the header; follow it when it hides) ---------- */
.arail, .amonths {
  position: relative; z-index: 20; background: var(--header-bg); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
}
.arail--sticky, .amonths { position: sticky; top: 0; transition: top .45s var(--ease-out); }
.header:not(.is-hidden) ~ #main .arail--sticky, .header:not(.is-hidden) ~ #main .amonths { top: var(--header-h); }
@media (min-width: 783px) {
  .admin-bar .arail--sticky, .admin-bar .amonths { top: 32px; }
  .admin-bar .header:not(.is-hidden) ~ #main .arail--sticky, .admin-bar .header:not(.is-hidden) ~ #main .amonths { top: calc(var(--header-h) + 32px); }
}
.arail__list, .amonths__list {
  display: flex; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  padding-block: 10px; list-style: none;
}
.arail__list::-webkit-scrollbar, .amonths__list::-webkit-scrollbar { display: none; }
.arail__list > li, .amonths__list > li { flex: none; scroll-snap-align: start; }
.arail__link, .amonths__link {
  position: relative; isolation: isolate; display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; padding: 10px 14px;
  font: italic 800 1.2rem/1 var(--font-display); color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.amonths__link { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .04em; }
.arail__link small, .amonths__link small { font: 700 .72rem/1 var(--font-body); font-style: normal; letter-spacing: .02em; color: var(--muted); }
.arail__link::before, .amonths__link::before {
  content: ''; position: absolute; inset: 4px 0; z-index: -1; border-radius: 3px; background: var(--surface-2);
  transform: skewX(var(--skew)) scaleX(.6); opacity: 0; transition: transform .35s var(--ease-out), opacity .25s, background-color .25s;
}
.arail__link:hover::before, .amonths__link:hover::before { transform: skewX(var(--skew)) scaleX(1); opacity: 1; }
.arail__link[aria-current], .amonths__link[aria-current] { color: var(--navy-950); }
.arail__link[aria-current]::before, .amonths__link[aria-current]::before { transform: skewX(var(--skew)) scaleX(1); opacity: 1; background: var(--orange); }
.arail__link[aria-current] small, .amonths__link[aria-current] small { color: rgba(7, 7, 26, .7); }
.amonths__link.is-empty { color: var(--muted); opacity: .45; }
.amonths__link.is-other { color: var(--muted); } /* month on the other half-year page */
.amonths__link.is-other::after { content: '↗'; margin-left: 2px; font-size: .75em; font-style: normal; opacity: .7; }

/* ---------- Overview: one section per year ---------- */
.ayear { padding-block: clamp(48px, 7vw, 104px); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 64px); }
.ayear:nth-child(even) { background: var(--surface); }
.ayear__inner { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.ayear__head { grid-row: 1 / span 2; position: sticky; top: calc(var(--header-h) + 88px); display: grid; gap: 14px; justify-items: start; }
.ahist, .ayear__picks { grid-column: 2; }
.ayear__num {
  --fill: 1;
  font: italic 900 clamp(4.6rem, 2rem + 8vw, 9.5rem)/.82 var(--font-display); letter-spacing: -.03em; padding-right: .08em;
  color: transparent; -webkit-text-stroke: 2px var(--ink);
  background: linear-gradient(100deg, var(--orange) 0 50%, transparent 50% 100%) no-repeat;
  background-size: 210% 100%; background-position: calc(100% - var(--fill) * 100%) 0;
  -webkit-background-clip: text; background-clip: text;
}
.ayear__count { font: 600 1rem/1.2 var(--font-body); color: var(--muted); }
.ayear__count strong { font: italic 900 2rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ayear__more {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 6px;
  font: 800 .95rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); text-decoration: none;
  background: linear-gradient(var(--orange), var(--orange)) no-repeat 0 100% / 100% 2px; transition: background-size .35s var(--ease-out), color .25s;
}
.ayear__more:hover, .ayear__more:focus-visible { background-size: 100% 100%; color: var(--navy-950); padding-inline: 10px; }
.ayear__more .ico { transition: transform .35s var(--ease-out); }
.ayear__more:hover .ico { transform: translateX(4px); }

/* Stories per month */
.ahist { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(4px, .8vw, 10px); height: clamp(150px, 16vw, 210px); list-style: none; }
.ahist__m { display: flex; min-width: 0; }
.ahist__link { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; padding-bottom: 24px; text-decoration: none; }
.ahist__bar {
  display: block; height: var(--h, 0%); min-height: 3px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--orange) 0%, rgba(247, 148, 29, .45) 100%); transform-origin: 50% 100%;
  transition: filter .25s, transform .35s var(--ease-out);
}
.ahist__link.is-empty .ahist__bar { height: 3px; background: var(--line-strong); }
.ahist__n { align-self: center; font: 800 .78rem/1 var(--font-display); color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .25s var(--ease-out); }
.ahist__label { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font: 800 .72rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
a.ahist__link:hover .ahist__n, a.ahist__link:focus-visible .ahist__n { opacity: 1; transform: none; }
a.ahist__link:hover .ahist__bar, a.ahist__link:focus-visible .ahist__bar { filter: brightness(1.12) saturate(1.2); transform: scaleX(1.12); }
a.ahist__link:hover .ahist__label { color: var(--ink); }
a.ahist__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }

.ayear__picks { margin-top: clamp(8px, 2vw, 24px); }
.ayear__picks-title { margin-bottom: 16px; font: 800 .82rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Year page: month by month ---------- */
.ayearlist { padding-top: clamp(28px, 4vw, 48px); }
/* content-visibility clips painting at the section's edge: the side padding (offset by the negative margin) keeps the
   overhang of italic month names (J, A…) visible without moving anything. */
.amonth { margin: 0 calc(-1 * var(--gutter)) clamp(40px, 5vw, 64px); padding-inline: var(--gutter); scroll-margin-top: calc(var(--header-h) + 76px); content-visibility: auto; contain-intrinsic-size: auto 1400px; }
.amonth__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 14px; border-bottom: 3px solid var(--ink); }
.amonth__name { font: italic 900 clamp(2.3rem, 1.5rem + 3vw, 4.2rem)/.9 var(--font-display); text-transform: uppercase; letter-spacing: -.01em; }
.amonth__count { font: 800 .82rem/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-ink); }

.alist { list-style: none; }
.arow {
  position: relative; display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: baseline; gap: 6px 18px;
  padding: 13px 10px; border-bottom: 1px solid var(--line); transition: background-color .25s;
  scroll-margin-top: calc(var(--header-h) + 76px); /* keyboard focus never lands under the sticky month bar */
}
.arow::before {
  content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; background: var(--orange);
  transform: skewX(var(--skew)) scaleY(0); transform-origin: 50% 100%; transition: transform .3s var(--ease-out);
}
.arow:hover, .arow:focus-within { background: var(--surface); }
.arow:hover::before, .arow:focus-within::before { transform: skewX(var(--skew)) scaleY(1); }
.arow__date { display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.arow__day { font: italic 900 1.35rem/1 var(--font-display); color: var(--ink); }
.arow__wd { font: 800 .7rem/1 var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.arow--same-day .arow__date { opacity: 0; } /* same day as the row above: date stays for screen readers */
.arow__title { font: 600 1.04rem/1.38 var(--font-body); color: var(--ink); text-decoration: none; text-wrap: pretty; }
.arow__title::after { content: ''; position: absolute; inset: 0; } /* whole row is the link */
.arow__title:hover { color: var(--link-hover); }
.arow__title:focus-visible { outline: none; }
.arow:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.arow__video { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; vertical-align: -3px; background: var(--live); color: #fff; }
.arow__video .ico { width: 10px; height: 10px; margin-left: 1px; }
/* Rubric in readable ink; its colour is carried by the slanted mark (several rubric colours are too light for text). */
.arow__cat { display: inline-flex; align-items: center; gap: 7px; font: 800 .72rem/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.arow__cat::before { content: ''; width: 10px; height: 7px; background: var(--c, var(--orange)); transform: skewX(var(--skew)); }

/* Pointer-following preview of the hovered story (motion.js; fine pointers only). */
.apreview {
  position: fixed; left: 0; top: 0; z-index: var(--z-cursor); width: 260px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  pointer-events: none; opacity: 0; visibility: hidden; background: var(--surface-2); box-shadow: var(--shadow-lg);
}
.apreview img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.apreview.is-loading img { opacity: 0; }

@media (max-width: 1024px) {
  .ayear__inner { grid-template-columns: minmax(0, 1fr); }
  .ahist, .ayear__picks { grid-column: auto; }
  .ayear__head { grid-row: auto; position: static; grid-template-columns: auto 1fr; align-items: end; column-gap: 24px; }
  .ayear__num { grid-row: span 2; }
}
@media (max-width: 640px) {
  .ayear__head { grid-template-columns: minmax(0, 1fr); }
  .ayear__num { grid-row: auto; }
  .ahist { height: 130px; gap: 3px; }
  .ayear__picks .grid-cards { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .ayear__picks .grid-cards::-webkit-scrollbar { display: none; }
  .ayear__picks .card { flex: 0 0 78%; scroll-snap-align: start; }
  .ahist__label { font-size: .58rem; letter-spacing: 0; }
  .arow { grid-template-columns: 52px minmax(0, 1fr); padding-inline: 4px; }
  .arow__date { flex-direction: column; gap: 3px; }
  .arow__cat { grid-column: 2; }
}