/* ============ Услуги — вътрешни страници (шаблон „Техническо досие") ============ */

/* ---- Херо ---- */
.svc-hero { position: relative; min-height: 62vh; display: flex; align-items: flex-end; padding: 9rem 0 3.2rem; overflow: hidden; }
.svc-hero__media { position: absolute; inset: 0; }
.svc-hero__media img { width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.svc-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(127,179,224,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,179,224,.07) 1px, transparent 1px);
  background-size: 72px 72px;
}
/* отляво и отгоре по-тъмно — пътечката, редът под нея и заглавието стоят върху светли снимки (небе, бетон);
   измерено: пътечката беше 1,6–3,5:1 спрямо снимката */
.svc-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(27,35,49,.78), rgba(27,35,49,.42) 50%, rgba(27,35,49,0) 80%),
    linear-gradient(180deg, rgba(27,35,49,.62), rgba(27,35,49,.35) 45%, var(--ink) 97%);
}
@media (max-width: 768px) {
  .svc-hero__shade { background: linear-gradient(180deg, rgba(27,35,49,.82), rgba(27,35,49,.68) 55%, var(--ink) 97%); }
  /* декоративните кръстчета падаха върху пътечката и края на заглавието */
  .svc-hero__cross { display: none; }
}
/* на 125% мащаб (Windows) долният ръб на снимката оставаше светла линия — тъмна ивица я покрива */
.svc-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); z-index: 1; }
.svc-hero__shade--deep { background: rgba(11,14,19,.6); opacity: 0; }
.svc-hero__cross { position: absolute; width: 18px; height: 18px; opacity: .55; }
.svc-hero__cross::before, .svc-hero__cross::after { content: ''; position: absolute; background: var(--blue-map); }
.svc-hero__cross::before { left: 0; right: 0; top: 8px; height: 1px; }
.svc-hero__cross::after { top: 0; bottom: 0; left: 8px; width: 1px; }
.svc-hero .container { position: relative; z-index: 2; }
/* пътечката и редът под нея стоят върху светли снимки (ПУП, консултантски) — лека сянка за четимост */
.svc-hero__crumbs, .svc-hero__meta { text-shadow: 0 1px 3px rgba(27,35,49,.85), 0 0 14px rgba(27,35,49,.7); }
.svc-hero__crumbs { display: flex; flex-wrap: wrap; gap: .55rem; color: #C9D3E1; }
.svc-hero__crumbs a { color: inherit; transition: color .25s; }
.svc-hero__crumbs a:hover { color: var(--white); }
.svc-hero__crumbs [aria-current] { color: var(--white); }
.svc-hero__meta { margin-top: .9rem; color: #A9CDF0; } /* --blue-bright беше 3,3–4,4:1 върху светлите снимки */
/* всяка част от реда („СОФИЯ · СЛИВЕН · ПЛОВДИВ") се пренася цяла — без ред, който започва с „·" */
.svc-hero__meta .nw { white-space: nowrap; }
.svc-hero h1 { font-size: var(--fs-h1); margin: .7rem 0 1rem; }
.svc-hero__intro { max-width: var(--measure); font-size: var(--fs-lead); color: #C9D3E1; text-shadow: 0 1px 4px rgba(27,35,49,.6); margin: 0; }

/* ---- Списък ---- */
.svc-list { padding-block: 4.5rem 3rem; }
/* 3D фонът (scene3d.js) обхваща списъка и блока „Свържете се“ под него (обвивката .svc-scene): макетът продължава
   зад блока и плавно потъва в края му, преди „Още от ТРАНСГЕО“ — без рязане на ръба на секция */
.svc-scene.has-scene::after { content: ''; position: absolute; inset: auto 0 0; height: 30svh; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(27, 35, 49, 0), var(--ink) 92%); }
.svc-list__grid { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 2rem; }
.svc-list__title { font-size: var(--fs-h2); margin-bottom: 2rem; }
.svc-list__wrap { position: relative; padding-left: 2.2rem; }
.svc-list__line {
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--blue-bright), rgba(91,168,245,.12));
  transform: scaleY(0); transform-origin: top;
}
/* редовете не по-широки от ~60rem — знакът „+" стои близо до името, а не на 500 px от него */
.svc-rows { list-style: none; margin: 0; padding: 0; max-width: 60rem; }
.svc-row { position: relative; border-bottom: 1px solid var(--row-line, var(--line-blue)); }
.svc-row::before {
  content: ''; position: absolute; left: -2.2rem; top: 0; bottom: 0; width: 2px;
  background: var(--blue-bright); transform: scaleY(0); transform-origin: top; transition: transform .3s;
}
.svc-row.is-open::before { transform: scaleY(1); }
/* „станции" на нивелирната линия: кръгче срещу всеки ред — запълва се, когато редът е отворен */
.svc-row::after {
  content: ''; position: absolute; left: calc(-2.2rem - 3px); top: 1.9rem; width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(91,168,245,.55); background: var(--ink); transition: background-color .2s, border-color .2s;
}
.svc-row.is-open::after { background: var(--blue-bright); border-color: var(--blue-bright); }
/* само редовете, които се отварят, реагират на посочване (статичните на „Проектиране" — не) */
@media (hover: hover) and (pointer: fine) { .svc-row:not(.svc-row--static):hover::before { transform: scaleY(1); } }
.svc-row__h { margin: 0; font-size: inherit; }
.svc-row__toggle {
  display: flex; align-items: baseline; gap: 1.3rem; width: 100%; padding: 1.2rem 0;
  background: none; border: 0; color: var(--white); text-align: left; cursor: pointer; font: inherit;
}
.svc-row__num { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-label); letter-spacing: .08em; color: var(--blue-num); min-width: 2.1rem; }
/* върху 3D фона — тъмен ореол около номерата и имената (на телефон макетът минава точно зад тях), като надписите на карта */
.has-scene :is(.svc-row__num, .svc-row__name) { text-shadow: 0 0 2px var(--ink), 0 0 6px var(--ink), 0 0 12px var(--ink); }
.svc-row__name { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; font-family: var(--font-head); font-weight: 600; font-size: var(--fs-h3); line-height: 1.35; transition: color .25s, transform .3s; }
.svc-row.is-open .svc-row__name { color: var(--blue-bright); }
@media (hover: hover) and (pointer: fine) { .svc-row__toggle:hover .svc-row__name { color: var(--blue-bright); transform: translateX(4px); } }
.svc-row__plus { position: relative; width: 14px; height: 14px; flex: none; align-self: center; transition: transform .35s; }
.svc-row__plus::before, .svc-row__plus::after { content: ''; position: absolute; background: var(--blue-bright); }
.svc-row__plus::before { left: 0; right: 0; top: 6.5px; height: 1.5px; }
.svc-row__plus::after { top: 0; bottom: 0; left: 6.5px; width: 1.5px; transition: opacity .3s; }
/* отворено: „+" се завърта и остава „−" (скрива се чертата, която след завъртането би била вертикална) */
.svc-row__plus::before { transition: opacity .3s; }
.svc-row.is-open .svc-row__plus { transform: rotate(90deg); }
.svc-row.is-open .svc-row__plus::before { opacity: 0; }
/* отваря се за .26 s, затваря се по-бързо (.18 s); текстът избледнява след рамката */
.svc-row__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .18s cubic-bezier(.22, 1, .36, 1); }
.svc-row.is-open .svc-row__panel { grid-template-rows: 1fr; transition-duration: .26s; }
.svc-row__panel-inner { overflow: hidden; opacity: 0; transition: opacity .12s; }
.svc-row.is-open .svc-row__panel-inner { opacity: 1; transition: opacity .15s .06s; }
.svc-row__panel p { margin: 0 0 1.3rem; padding-left: 3.4rem; max-width: calc(var(--measure) + 3.4rem); color: #C9D3E1; font-size: var(--fs-body); }
/* статичен вариант — без accordion (Инвестиционно проектиране) */
.svc-row__static { display: flex; align-items: baseline; gap: 1.3rem; padding: 1.2rem 0; margin: 0; }
/* брояч-рейка */
.svc-counter-rail { position: relative; }
.svc-counter-rail span { position: sticky; top: 46vh; display: block; text-align: right; font-size: var(--fs-small); color: var(--blue-bright); }
/* върху 3D фона броячът стои вдясно, точно над макета — меко тъмно петно зад цифрите, за да се четат и когато
   зад тях мине светла линия */
.has-scene .svc-counter-rail span { width: fit-content; margin-left: auto; padding-block: .1em; white-space: nowrap; border-radius: 8px; background: rgba(27, 35, 49, .82); box-shadow: 0 0 16px 8px rgba(27, 35, 49, .82); }

/* ---- CTA ---- */
.svc-cta { position: relative; padding-block: 5rem; border-top: 1px solid var(--ink-3); background: var(--ink-2); overflow: hidden; }
.svc-cta .svc-hero__grid { opacity: .6; }
/* над 3D фона блокът е прозрачен — макетът се вижда през него; мрежата на блока не ляга върху линиите му */
.svc-scene.has-scene .svc-cta { background: transparent; }
.svc-scene.has-scene .svc-cta .svc-hero__grid { display: none; }
/* на телефон макетът е горе в кадъра — точно там минава текстът на блока; под текста той е по-приглушен */
@media (max-width: 880px) {
  .svc-scene.has-scene .svc-cta { background: linear-gradient(180deg, rgba(27, 35, 49, 0), rgba(27, 35, 49, .72) 5rem); }
  .svc-scene.has-scene .svc-cta .section__kicker, .svc-scene.has-scene .svc-cta__contacts a { text-shadow: 0 0 2px var(--ink), 0 0 6px var(--ink), 0 0 12px var(--ink); }
}
.svc-cta .container { position: relative; z-index: 1; }
.svc-cta h2 { font-size: var(--fs-h2); margin-bottom: 1.2rem; }
.svc-cta__contacts { margin-bottom: .4rem; font-size: var(--fs-body); }
.svc-cta__hours { margin: 0 0 1.8rem; font-size: var(--fs-small); color: var(--gray); }
.svc-cta__contacts a { color: var(--blue-bright); }
.svc-cta__contacts a:hover { color: var(--white); }

/* ---- Другите категории ---- */
.svc-more { padding-block: 4.5rem 5.5rem; }
.svc-more__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.card--mini { min-height: 200px; grid-column: auto; }
.card--mini .card__body { padding: 1rem 1.15rem 1.1rem; }
/* номерът на мини картата — като всички други индекси (иначе .card p го правеше 18 px бял) */
.card--mini .card__body .mono { margin-bottom: .35rem; font-size: var(--fs-label); color: var(--blue-map); }
.card--mini h3 { font-size: var(--fs-h3); margin: 0; }

/* ---- Избрани проекти (страницата за проектиране): таблица обект / възложител / период ---- */
.svc-projects { padding-block: 1.5rem 5rem; }
.svc-projects__title { font-size: var(--fs-h2); margin: .7rem 0 1rem; }
.svc-projects__intro { max-width: var(--measure); font-size: var(--fs-lead); color: #C9D3E1; margin: 0 0 2.4rem; }
.svc-projects__table { width: 100%; border-collapse: collapse; }
.svc-projects__table th {
  text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-bright);
  padding: 0 1.4rem .8rem 0; border-bottom: 1px solid var(--ink-3);
}
.svc-projects__table td { padding: 1.1rem 1.4rem 1.1rem 0; border-bottom: 1px solid var(--ink-3); vertical-align: top; font-size: var(--fs-body); line-height: 1.5; color: #C9D3E1; text-wrap: pretty; }
.svc-projects__table td:first-child { width: 48%; font-weight: 600; color: var(--white); }
.svc-projects__table td.mono { font-size: var(--fs-small); letter-spacing: .02em; color: var(--blue-bright); white-space: nowrap; padding-right: 0; }
.svc-projects__more { margin: 2rem 0 0; }
/* в „Инвестиционно проектиране“ след списъка идва „Железопътни проекти“ — 3D фонът продължава зад заглавието му
   и плавно се приглушава към таблицата (колоната „Период“ е точно над макета, а данните трябва да се четат) */
.svc-scene.has-scene .svc-projects { background: linear-gradient(180deg, rgba(27, 35, 49, 0) 0, rgba(27, 35, 49, .85) 14rem, var(--ink) 28rem); }

/* ---- Отзивчивост ---- */
@media (max-width: 1000px) {
  .svc-more__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .svc-list__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-counter-rail { display: none; }
}
@media (max-width: 768px) {
  .svc-hero { min-height: 50vh; padding-top: 7rem; }
  .svc-row__panel p { padding-left: 0; }
}
/* на телефон всеки проект е блок: обект, под него възложител и период */
@media (max-width: 700px) {
  .svc-projects__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .svc-projects__table, .svc-projects__table tbody, .svc-projects__table tr, .svc-projects__table td { display: block; width: auto; }
  .svc-projects__table tr { padding: 1.1rem 0; border-bottom: 1px solid var(--ink-3); }
  .svc-projects__table td, .svc-projects__table td:first-child { width: auto; padding: 0; border: 0; }
  .svc-projects__table td + td { margin-top: .35rem; }
  .svc-projects__table td.mono { white-space: normal; }
}
/* на телефон — две колони (четири карти една под друга бяха ~650 px скрол) */
@media (max-width: 560px) {
  .svc-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
  .card--mini { min-height: 150px; }
  .card--mini .card__body { padding: .9rem .95rem 1rem; }
  .card--mini h3 { font-size: 1.125rem; hyphens: auto; overflow-wrap: break-word; }
}
@media (max-width: 340px) { .svc-more__grid { grid-template-columns: 1fr; } }
/* тесни телефони: по-малки отстъпи в редовете, за да не се пренасят дългите думи */
@media (max-width: 400px) {
  .svc-list__wrap { padding-left: 1.3rem; }
  .svc-row::before { left: -1.3rem; }
  .svc-row::after { left: calc(-1.3rem - 3px); }
  .svc-row__toggle, .svc-row__static { gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-row__panel, .svc-row__plus, .svc-row__name, .svc-row::before { transition: none; }
  .svc-row__name, .svc-row.is-open .svc-row__name { transform: none; }
  .svc-list__line { transform: none; }
}