/* css/seo.css — публичните SEO страници (#305): фирми, цени, общини, области и хъбовете.
   Зарежда се само от тях (extra_head в scripts/build_seo_pages.py). Само токени от
   base.css — тъмната тема идва сама. Графиките са CSS ленти, без JS. */
.seo-page .container { max-width: 1100px; }
.seo-head { margin: 0.25rem 0 1.25rem; }
.seo-kicker { margin: 0 0 0.25rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.seo-kicker a { color: inherit; }
.seo-h1 { font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.2; margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.seo-lead { margin: 0; color: var(--text-secondary); font-size: 0.98rem; line-height: 1.55; max-width: 72ch; }
.seo-mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0.01em; }
.seo-muted { color: var(--text-muted); }
.seo-small { font-size: 0.82rem; }
.seo-strong { font-weight: 600; color: var(--text); }
.seo-nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Обобщението — четири числа над съдържанието. */
.seo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.seo-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.85rem 1rem; box-shadow: var(--shadow-card); min-width: 0; }
.seo-stat__value { font-size: 1.35rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.seo-stat__label { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.2rem; }
.seo-stat__note { font-size: 0.72rem; color: var(--caption-muted, var(--text-muted)); margin-top: 0.1rem; }

/* Картите и мрежата две колони → една на телефон. */
.seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.seo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.1rem 1.1rem; margin: 0 0 1rem; box-shadow: var(--shadow-card); min-width: 0; }
.seo-card h2 { font-size: 1.02rem; margin: 0 0 0.75rem; }
.seo-card h2 a { color: inherit; text-decoration: none; }
.seo-card h2 a:hover { color: var(--primary); }

/* Таблици: лепкава заглавна лента, числата вдясно с табулярни цифри. */
.seo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; padding: 0 0.25rem; }
.seo-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.seo-table th, .seo-table td { padding: 0.45rem 0.55rem; border-bottom: 1px solid var(--border-light, var(--border)); text-align: left; vertical-align: top; }
.seo-table thead th { position: sticky; top: 0; background: var(--surface); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
.seo-table tbody th { font-weight: 600; white-space: nowrap; }
.seo-table tbody tr:last-child td, .seo-table tbody tr:last-child th { border-bottom: 0; }
.seo-table tbody tr:hover td, .seo-table tbody tr:hover th { background: var(--primary-50, var(--surface-alt)); }
.seo-table .seo-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.seo-table--compact th, .seo-table--compact td { padding: 0.35rem 0.5rem; font-size: 0.84rem; }
.seo-table .seo-bar-col { width: 28%; min-width: 90px; }
.seo-table--years .seo-bar-col { padding-top: 0.75rem; }

/* Лентите (дял от най-голямата стойност). */
.seo-bar, .seo-range { display: block; position: relative; height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.seo-bar__fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.seo-range__band { position: absolute; top: 0; height: 100%; background: var(--primary-light); border-radius: 999px; }
.seo-range__dot { position: absolute; top: -2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--primary); border: 2px solid var(--surface); box-sizing: border-box; }
.seo-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.seo-bars__row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(70px, 1fr) auto; gap: 0.6rem; align-items: center; font-size: 0.88rem; }
.seo-bars__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seo-bars__value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.seo-bars__track { display: block; height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.seo-bars__fill { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* Класации и пилове. */
.seo-list { margin: 0; padding: 0 0 0 1.25rem; display: grid; gap: 0.35rem; font-size: 0.9rem; }
.seo-list li { display: flex; justify-content: space-between; gap: 0.75rem; }
.seo-list__name { min-width: 0; overflow-wrap: anywhere; }
.seo-list__count { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.seo-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seo-pill { font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-secondary); }
.seo-pill__n { font-weight: 600; color: var(--text); margin-left: 0.2rem; }
.seo-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: 0.9rem; }
.seo-recent__year { display: inline-block; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); margin-right: 0.35rem; font-variant-numeric: tabular-nums; }
.seo-links { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: 0.35rem; font-size: 0.9rem; }

/* Призивът — акцентът на страницата. */
.seo-cta { margin: 1.5rem 0 1rem; padding: 1.25rem 1.4rem; border-radius: var(--radius-lg); background: var(--primary-50, var(--primary-light)); border: 1px solid var(--primary-light); display: grid; gap: 0.5rem; }
.seo-cta__title { margin: 0; font-size: 1.15rem; }
.seo-cta__text { margin: 0; color: var(--text-body, var(--text-secondary)); line-height: 1.55; max-width: 70ch; }
.seo-cta__btn { justify-self: start; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; padding: 0.6rem 1.1rem; border-radius: var(--radius-md); background: var(--primary); color: #fff; font-weight: 600; text-decoration: none; transition: background var(--t-base, 220ms) var(--ease-out, ease-out), transform var(--t-fast, 120ms) var(--ease-out, ease-out); }
.seo-cta__btn:hover { background: var(--primary-hover); color: #fff; text-decoration: none; }
.seo-cta__btn:active { transform: scale(0.98); }
.seo-cta__btn:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
[data-theme="dark"] .seo-cta { background: var(--bg-elevated, var(--surface-alt)); border-color: var(--border); }
/* Тъмната тема: --primary е светлосиньо (#58a6ff) — белият текст пада под AA, тъмният държи. */
[data-theme="dark"] .seo-cta__btn,
[data-theme="dark"] .seo-cta__btn:hover,
[data-theme="dark"] .seo-letters a[aria-current="page"],
[data-theme="dark"] .seo-pager a[aria-current="page"] { color: #0b1426; }

/* Връзки към приложението, бележката за данните и хъбовете. */
.seo-applink { margin: 0.75rem 0; font-weight: 600; font-size: 0.92rem; }
.seo-asof { margin: 1.25rem 0 0.5rem; font-size: 0.8rem; color: var(--text-muted); }
.seo-hubs { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; font-size: 0.86rem; margin: 0 0 1.5rem; }
.seo-hubs__label { color: var(--text-muted); }
.seo-hubs a[aria-current="true"] { font-weight: 600; }

/* Хъбовете: буквите/областите/групите и индексът. */
.seo-letters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.25rem; }
.seo-letters a { display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); text-decoration: none; font-size: 0.86rem; font-weight: 600; color: var(--text); }
.seo-letters a:hover { border-color: var(--primary); color: var(--primary); }
.seo-letters a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.seo-letters__n { font-size: 0.72rem; font-weight: 400; opacity: 0.75; }
.seo-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.seo-index li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.35rem 0.25rem; border-bottom: 1px solid var(--border-light, var(--border)); font-size: 0.9rem; }
.seo-index li:last-child { border-bottom: 0; }
.seo-index a { min-width: 0; overflow-wrap: anywhere; }
.seo-index__meta { color: var(--text-muted); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.seo-index--cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: 1.5rem; }
.seo-pager { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 1rem 0 0; }
.seo-pager a { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; font-size: 0.86rem; }
.seo-pager a[aria-current="page"] { background: var(--primary); border-color: var(--primary); color: #fff; }

@media (max-width: 760px) {
  .seo-grid { grid-template-columns: 1fr; }
  .seo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-stat__value { font-size: 1.15rem; }
  /* Лентите: етикет и стойност на един ред, лентата под тях на цяла ширина. */
  .seo-bars__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.25rem; }
  .seo-bars__label { grid-row: 1; grid-column: 1; }
  .seo-bars__value { grid-row: 1; grid-column: 2; }
  .seo-bars__track { grid-row: 2; grid-column: 1 / -1; }
  /* Таблиците не се мачкат — скролват хоризонтално в обвивката. */
  .seo-table-wrap .seo-table { min-width: 560px; }
  .seo-table .seo-bar-col { display: none; }
  .seo-index li { flex-direction: column; gap: 0.1rem; }
  .seo-index__meta { white-space: normal; }
  .seo-cta { padding: 1rem 1.1rem; }
}
@media (max-width: 400px) {
  .seo-stats { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .seo-stat { padding: 0.65rem 0.75rem; }
  .seo-stat__value { font-size: 1.02rem; }
}