/* ============ За нас (шаблон „Линията на времето") ============ */

/* ---- Херо настройки ---- */
.svc-hero--zanas { min-height: 55vh; }
.svc-hero--zanas .svc-hero__media img { height: 100%; }

/* ---- Таймлайн: статичен вариант (базов — мобилно / reduced-motion) ---- */
.tl { position: relative; background: var(--ink); }
.tl__media { position: relative; height: 44vh; overflow: hidden; }
.tl__poster, .tl__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tl__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,35,49,.45), rgba(27,35,49,.62) 70%, var(--ink) 100%); }
.tl__stage { position: relative; padding-block: 2.6rem 4rem; }
.tl__steps { margin-top: 1.6rem; }
.tl-step { padding: 1.5rem 0; border-bottom: 1px solid var(--ink-3); max-width: 640px; }
.tl-step__year { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.85rem, 4.6vw, 2.65rem); line-height: 1.1; color: var(--blue-bright); margin: 0 0 .5rem; }
.tl-step__text { margin: 0; color: #C9D3E1; max-width: var(--measure); }
.tl__rail { display: none; }

/* ---- Таймлайн: scrub вариант (класът се слага от JS) ---- */
/* екран + 400% скрол; закачането е CSS sticky, не pin от GSAP (превключването на fixed се броеше за разместване) */
.tl--scrub { height: 640svh; }
.tl--scrub .tl__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tl--scrub .tl__media { position: absolute; inset: 0; height: auto; }
/* отляво — сянка за текста; отгоре и отдолу видеото се стопява в тъмното (без остър ръб към херото и към следващата секция) */
.tl--scrub .tl__shade {
  background:
    linear-gradient(180deg, var(--ink) 0%, rgba(27,35,49,0) 14%, rgba(27,35,49,0) 82%, var(--ink) 100%),
    linear-gradient(90deg, rgba(27,35,49,.85) 0%, rgba(27,35,49,.45) 52%, rgba(27,35,49,.22) 100%);
}
.tl--scrub .tl__stage { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-block: 0; }
.tl--scrub .tl__stage .section__kicker { color: #A9CDF0; } /* върху видеото: 4,3:1 на телефон */
/* малък телефон (320×568): центрираното съдържание опираше горе — надписът влизаше под лентата с менюто */
@media (max-width: 600px) and (max-height: 600px) { .tl--scrub .tl__stage { padding-top: 4.4rem; } }
.tl--scrub .tl__steps { position: relative; height: 17rem; margin-top: 1.2rem; }
.tl--scrub .tl-step { position: absolute; top: 0; left: 0; border: 0; padding: 0; visibility: hidden; }
.tl--scrub .tl-step__year { font-size: clamp(3.4rem, 8.6vw, 6rem); }
/* над видеото на цял екран надписът и текстът са по-едри — до годината (96 px) обикновеният размер изглеждаше дребен;
   на телефон остават както са (там стъпките имат фиксирана височина за най-дългия текст) */
@media (min-width: 601px) {
  .tl--scrub .tl__stage .section__kicker { font-size: clamp(var(--fs-label), .75rem + .55vw, 1.25rem); }
  .tl--scrub .tl__steps { height: 20rem; }
  .tl--scrub .tl-step { max-width: 760px; }
  .tl--scrub .tl-step__text { font-size: clamp(var(--fs-body), .95rem + .7vw, 1.625rem); line-height: 1.5; }
}
.tl--scrub .tl__rail {
  display: flex; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  flex-direction: column; align-items: center; gap: .8rem;
  color: var(--blue-bright); font-size: var(--fs-small); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.tl__rail-track { display: block; position: relative; width: 3px; height: 30vh; background: rgba(91,168,245,.18); overflow: hidden; }
.tl__rail-line { display: block; position: absolute; inset: 0; background: var(--blue-bright); transform: scaleY(0); transform-origin: top; }

/* ---- Клиенти и членства ---- */
.zn-clients { padding-block: 5rem 3.5rem; }
.zn-clients__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; }
/* членствата (по-късият стълб) остават в екрана, докато се чете дългият списък с възложители */
@media (min-width: 901px) { .zn-clients__grid > :last-child { position: sticky; top: 6rem; } }
.zn-list { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.zn-list li { display: flex; align-items: baseline; gap: 1.2rem; padding: .85rem 0; border-bottom: 1px solid var(--row-line, var(--line-blue)); }
.zn-list .svc-row__num { min-width: 2.6rem; }
.zn-list a { color: var(--white); font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.35; transition: color .25s, transform .3s; display: inline-block; }
/* външна връзка (сайтът на възложителя) — малка стрелка „навън" след името */
.zn-list a[target="_blank"]::after {
  content: ''; display: inline-block; width: .62em; height: .62em; margin-left: .4em; vertical-align: .08em;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* докато името изплува ред по ред (reveal.js), стрелката не пада на отделен ред под него */
.zn-list a.tg-splitting::after { display: none; }
.zn-list a:focus-visible { color: var(--blue-bright); }
@media (hover: hover) and (pointer: fine) { .zn-list a:hover { color: var(--blue-bright); transform: translateX(4px); } }
.zn-list p { margin: 0; font-size: var(--fs-body); color: #DDE4EF; }

/* ---- Каузи ---- */
.zn-causes { padding-block: 4rem 5.5rem; border-top: 1px solid var(--ink-3); background: var(--ink-2); }
.zn-causes__intro { max-width: var(--measure); font-size: var(--fs-lead); color: #C9D3E1; margin: 1rem 0 2.4rem; }
.zn-causes__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.zn-cause { border: 1px solid var(--ink-3); border-radius: 16px; padding: 1.5rem 1.6rem 1.6rem; background: var(--ink); }
.zn-cause .mono { margin: 0 0 .6rem; }
.zn-cause h3 { font-size: var(--fs-h3); margin: 0 0 .6rem; }
.zn-cause p:last-child { margin: 0; font-size: var(--fs-body); color: #C9D3E1; }

/* ---- Отзивчивост ---- */
@media (max-width: 900px) {
  .zn-clients__grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .zn-causes__grid { grid-template-columns: 1fr; }
  .tl--scrub .tl__shade { background: linear-gradient(180deg, rgba(27,35,49,.7) 0%, rgba(27,35,49,.42) 50%, rgba(27,35,49,.78) 100%); }
  /* място вдясно за брояча „01 / 09“ под линията (той е по-широк от самата линия) */
  .tl--scrub .tl-step { padding-right: 4.4rem; }
  .tl--scrub .tl__rail { font-size: var(--fs-label); letter-spacing: 0; }
}
/* на тесен екран текстът на стъпката е на повече редове — място за най-дългата (EN, 320 px) */
@media (max-width: 600px) {
  /* 9 кратки стъпки — по-къс скрол на телефон (беше ~5,4 екрана) */
  .tl--scrub { height: 500svh; }
  .tl--scrub .tl__steps { height: 24.5rem; }
  /* броячът е с размера на останалите надписи (15 px) — място за него вдясно */
  .tl--scrub .tl-step { padding-right: 4.2rem; }
  .tl--scrub .tl__rail { font-size: var(--fs-label); letter-spacing: 0; }
  /* плуващото кръстче минаваше върху текста на стъпките */
  [data-tl-float2] { display: none; }
}
/* под 360 px (стари малки телефони) броячът остава по-тесен — иначе текстът на стъпките не се побира */
@media (max-width: 359px) {
  .tl--scrub .tl-step { padding-right: 3.6rem; }
  .tl--scrub .tl__rail { font-size: .75rem; letter-spacing: .02em; }
}
@media (prefers-reduced-motion: reduce) {
  .zn-list a { transition: none; }
}