/* Градове /gradove и /gradove/<град> — шаблон по DESIGN.md т. 5.5 (само токени от dosadno.css) */

/* C11 герой: допълнения към .cx-hero от catalog.css */
.cy-hero .cx-hero-in{padding-top:26px;padding-bottom:72px}
.cy-hero .ct-pill{margin-bottom:4px}
.cy-hero .lead{max-width:640px}
.cy-hero-cta{margin:22px 0 0}
.cy-hero-cta .btn{min-height:48px;padding:13px 28px}
.cy-trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;padding:0;margin:18px 0 0;font-size:14px;color:var(--mint-2)}
.cy-trust li{position:relative;padding-left:20px}
.cy-trust li::before{content:"✓";position:absolute;left:0;color:var(--lime);font-weight:800}

/* Общи заглавия на секции */
.cy-h2{text-align:center;margin:0 0 10px}
.cy-h3{font-size:20px;margin:44px 0 16px;color:var(--dark)}
.cy-sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 28px}
.cy-tint{background:var(--bg)}
.cy-narrow{max-width:800px}
.cy-more{margin:20px 0 0;font-weight:600}
.cy-link{font-weight:600}

/* ── Списък: активни градове (големи карти) ── */
.cy-active{display:grid;gap:18px}
.cy-acard{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.cy-acard-img img{display:block;width:100%;height:100%;min-height:240px;object-fit:cover}
.cy-acard-b{padding:30px 32px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.cy-acard-b h3{font-size:30px;margin:10px 0 8px}
.cy-acard-b h3 a{color:var(--dark)}
.cy-acard-b p{color:var(--muted);margin:0 0 20px}
.cy-acard-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}

/* ── Списък: „скоро“ в колони от връзки (C19) ── */
.cy-cols{list-style:none;padding:0;margin:0;columns:5 160px;column-gap:24px}
.cy-cols li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--line)}
.cy-cols a{color:var(--ink);font-weight:600}
.cy-cols a:hover{color:var(--green)}
.cy-soon{color:var(--muted);font-size:14px}

.cy-wait-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:32px;align-items:center}

/* ── Град: 3 стъпки в ред (кръгчета с цветен фон) ── */
.cy-steps-sect{padding-bottom:24px}
.cy-steps{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:cy;text-align:center}
.cy-steps li{counter-increment:cy;display:flex;flex-direction:column;align-items:center}
.cy-steps li::before{content:counter(cy);width:52px;height:52px;border-radius:50%;background:var(--mint);color:var(--green-d);font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.cy-steps li:nth-child(2)::before{background:var(--lime);color:var(--dark)}
.cy-steps li:nth-child(3)::before{background:var(--green);color:#fff}
.cy-steps b{color:var(--dark);font-size:18px;margin-bottom:4px}
.cy-steps span{color:var(--muted);max-width:280px}

/* ── Град: формуляри за чакане ── */
.cy-wait2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.cy-wait2 .ct-wait{max-width:none}

/* ── Град: C13 карти на подуслугите ── */
.cy-svc-sect{padding-top:40px}
.cy-svc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:26px}
.cy-item{padding:20px 22px;gap:22px}
.cy-item .cx-b h3{font-size:20px;margin:2px 0 6px}
.cy-item .cx-b h3 a{color:var(--dark)}
.cy-item .cx-b h3 a:hover{color:var(--green);text-decoration:none}
.cy-item .cx-b p{font-size:15px}
.cy-cat{display:inline-block;background:var(--mint-3);color:var(--green-d);font-size:13px;font-weight:700;border-radius:999px;padding:3px 10px}
.cy-cat:hover{background:var(--mint);text-decoration:none}

/* Всички категории в града */
.cy-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cy-catlink{display:flex;align-items:center;gap:12px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);padding:12px 14px;color:var(--ink);min-height:60px}
.cy-catlink:hover{border-color:var(--green);text-decoration:none}
.cy-catlink b{display:block;color:var(--dark);font-size:15px;line-height:1.3}
.cy-catlink small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.cy-ico{flex:0 0 38px;height:38px;border-radius:50%;background:var(--mint-3);display:flex;align-items:center;justify-content:center;font-size:19px}

.cy-chips{justify-content:center}
.cy-chips+.cy-more{text-align:center}

@media(max-width:960px){
  .cy-svc{grid-template-columns:1fr}
  .cy-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cy-wait-row{grid-template-columns:1fr}
}
@media(max-width:700px){
  .cy-hero .cx-hero-in{padding-bottom:44px}
  .cy-acard{grid-template-columns:1fr}
  .cy-acard-img img{min-height:0;aspect-ratio:16/9}
  .cy-acard-b{padding:22px 20px}
  .cy-acard-b h3{font-size:26px}
  .cy-steps{grid-template-columns:1fr;gap:18px;text-align:left;max-width:460px;margin-left:auto;margin-right:auto}
  .cy-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .cy-steps li::before{grid-row:1 / span 2;width:44px;height:44px;font-size:18px;margin:0}
  .cy-steps b{font-size:17px}
  .cy-steps span{max-width:none;font-size:15px}
  .cy-wait2{grid-template-columns:1fr}
  .cy-cats{grid-template-columns:1fr}
  .cy-h3{margin-top:34px}
}
@media(max-width:600px){
  .cy-hero-cta .btn,.cy-acard-cta .btn{width:100%}
  .cy-acard-cta{width:100%}
  .cy-item{padding:18px}
}

/* ── Села около Плевен ── */
.cy-sela{columns:3 260px;column-gap:18px;margin-top:18px}
.cy-ob{break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:var(--r);margin:0 0 14px;box-shadow:var(--shadow)}
.cy-ob summary{cursor:pointer;list-style:none;padding:14px 16px;font-weight:700;color:var(--dark);min-height:44px;display:flex;align-items:center;gap:6px}
.cy-ob summary::-webkit-details-marker{display:none}
.cy-ob summary::after{content:"+";margin-left:auto;color:var(--green);font-weight:800}
.cy-ob[open] summary::after{content:"–"}
.cy-ob ul{list-style:none;margin:0;padding:0 16px 12px}
.cy-ob li{margin:0;padding:6px 0;border-top:1px solid var(--line);font-size:15px;display:flex;justify-content:space-between;gap:8px}
.cy-ob li a{color:var(--ink)}
.cy-ob li a:hover{color:var(--green)}