/* PQD — хаб «Города обслуживания» /gorod/ (ORG-SITES-067): стили макета 02.09 + карта. Подключается mu-plugin pqd-gorod-hub.php только на этой странице. */
/* Макет раздела «Города обслуживания» для pqd.ru.
   Своя компоновка, оформление держится темы: Tahoma, текст #2E2E2E, акцент #CD2E2E. */

.gr-lead{font-size:15px;line-height:1.75;margin:0 0 26px;max-width:720px}

/* — строка подбора города — */
.gr-find{border:1px solid #E4E4E4;background:#FAFAFA;padding:20px 22px;margin:0 0 12px}
.gr-find-h{font-size:17px;font-weight:bold;margin:0 0 3px}
.gr-find-s{font-size:13px;color:#7A7A7A;margin:0 0 12px}
.gr-find-row{display:flex;gap:0;position:relative;max-width:640px}
.gr-find-row input{flex:1 1 auto;min-width:0;font-family:Tahoma;font-size:15px;color:#2E2E2E;padding:12px 14px;border:1px solid #CFCFCF;border-right:0;background:#fff}
.gr-find-row input:focus{outline:none;border-color:#CD2E2E}
.gr-find-row button{flex:0 0 auto;font-family:Tahoma;font-size:15px;padding:12px 26px;border:0;background:#CD2E2E;color:#fff;cursor:pointer}
.gr-find-row button:hover{background:#B02525}
.gr-sugg{position:absolute;z-index:60;left:0;right:0;top:100%;background:#fff;border:1px solid #CFCFCF;border-top:0;max-height:290px;overflow-y:auto}
.gr-sugg:empty{display:none}
.gr-sugg button{display:flex;justify-content:space-between;gap:14px;width:100%;padding:10px 14px;background:#fff;border:0;border-bottom:1px solid #F0F0F0;font-family:Tahoma;font-size:14px;color:#2E2E2E;text-align:left;cursor:pointer}
.gr-sugg button:last-child{border-bottom:0}
.gr-sugg button:hover,.gr-sugg button:focus{background:#FBF2F2;color:#CD2E2E;outline:none}
.gr-sugg .km{color:#9A9A9A;white-space:nowrap}

/* — ответ калькулятора — */
.gr-answer{border:1px solid #E4E4E4;border-left:3px solid #CD2E2E;background:#fff;padding:18px 20px;margin:0 0 34px}
.gr-answer[hidden]{display:none}
.gr-answer-city{font-size:18px;font-weight:bold;margin-bottom:10px}
.gr-answer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gr-answer-grid div span{display:block;font-size:12px;color:#9A9A9A;margin-bottom:2px}
.gr-answer-grid div b{font-size:16px;color:#2E2E2E;font-weight:bold}
.gr-answer-grid div b.red{color:#CD2E2E}
.gr-answer-cem{margin-top:12px;padding-top:11px;border-top:1px solid #F0F0F0;font-size:13px;color:#5A5A5A;line-height:1.65}
.gr-answer-cem em{font-style:normal;color:#9A9A9A}
.gr-answer-go{display:inline-block;margin-top:11px;font-size:14px;color:#CD2E2E;text-decoration:none;border-bottom:1px solid rgba(205,46,46,.35)}
.gr-answer-go:hover{border-bottom-color:#CD2E2E}

/* — пояса как прайс — */
.gr-zones{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 10px}
.gr-zone{border:1px solid #E4E4E4;padding:18px 20px;background:#fff}
.gr-zone-k{font-size:13px;color:#7A7A7A}
.gr-zone-p{font-size:20px;font-weight:bold;color:#2E2E2E;margin:6px 0 4px;white-space:nowrap}
.gr-zone-c{font-size:12px;color:#9A9A9A}
.gr-zone-c b{color:#CD2E2E;font-weight:bold}
.gr-free{font-size:13px;color:#7A7A7A;line-height:1.7;margin:0 0 38px;max-width:720px}

/* — шаги заказа — */
.gr-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 40px;margin:18px 0 42px;max-width:860px}
.gr-step-n{font-size:26px;font-weight:bold;color:#CD2E2E;line-height:1;margin-bottom:7px}
.gr-step-t{font-size:15px;font-weight:bold;margin-bottom:5px}
.gr-step-d{font-size:13px;color:#5A5A5A;line-height:1.6}

/* — все города в колонках — */
.gr-list-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 10px}
.gr-list-head .cnt{font-size:13px;color:#9A9A9A}
.gr-filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.gr-filter button{font-family:Tahoma;font-size:13px;padding:7px 14px;border:1px solid #DCDCDC;background:#fff;color:#2E2E2E;cursor:pointer}
.gr-filter button[aria-pressed="true"]{border-color:#CD2E2E;color:#CD2E2E}
.gr-cols{columns:3;column-gap:36px;margin:0 0 10px}
.gr-cols a{display:block;break-inside:avoid;padding:5px 0;font-size:14px;color:#2E2E2E;text-decoration:none;hyphens:none}
.gr-cols a:hover{color:#CD2E2E}
.gr-cols a .km{color:#A5A5A5;font-size:12px;margin-left:5px;white-space:nowrap}
.gr-cols a.off{display:none}
.gr-cols mark{background:#FFEFA8;color:inherit}
.gr-dup{font-size:10px;color:#CD2E2E;border:1px solid #CD2E2E;padding:0 3px;margin-left:4px}
.gr-nothing{padding:22px 0;color:#7A7A7A;font-size:14px}

/* — доверие — */
.gr-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 42px}
.gr-trust-i{border:1px solid #E4E4E4;background:#FAFAFA;padding:18px 20px}
.gr-trust-v{font-size:19px;font-weight:bold;color:#CD2E2E;margin-bottom:6px}
.gr-trust-d{font-size:13px;color:#5A5A5A;line-height:1.65}
.gr-req{font-size:12px;color:#9A9A9A;line-height:1.7;margin:-26px 0 40px;max-width:860px}
.gr-req a{color:#9A9A9A}
.gr-req a:hover{color:#CD2E2E}
@media (max-width:900px){.gr-trust{grid-template-columns:1fr}}

/* — мост на кладбища — */
.gr-bridge{display:flex;align-items:center;gap:24px;background:#2E2E2E;color:#fff;padding:24px 28px;margin:34px 0 10px;flex-wrap:wrap}
.gr-bridge-n{font-size:34px;font-weight:bold;color:#fff;line-height:1;flex:0 0 auto}
.gr-bridge-t{flex:1 1 300px;font-size:14px;line-height:1.6;color:#DCDCDC}
.gr-bridge-t b{color:#fff;display:block;font-size:16px;margin-bottom:3px}
.gr-bridge a{flex:0 0 auto;background:#CD2E2E;color:#fff;text-decoration:none;padding:11px 22px;font-size:14px}
.gr-bridge a:hover{background:#B02525;color:#fff}

@media (max-width:1100px){.gr-answer-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.gr-zones{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.gr-cols{columns:2}}
@media (max-width:520px){
  .gr-cols{columns:1}
  .gr-zones{grid-template-columns:1fr}
  .gr-steps{grid-template-columns:1fr}
  .gr-answer-grid{grid-template-columns:1fr}
  .gr-find-row{flex-wrap:wrap}
  .gr-find-row input{flex:1 1 100%;border-right:1px solid #CFCFCF}
  .gr-find-row button{flex:1 1 100%;margin-top:8px}
  .gr-bridge{gap:14px}
}
.gr-map{height:460px;background:#f2f2f2;border:1px solid #dedede;border-radius:3px;margin-top:12px;position:relative;overflow:hidden}
.gr-map.gr-map-off{display:none}
.gr-map-note{font-size:13px;color:#2e2e2e99;margin:8px 0 0}
.gr-pin{display:flex;align-items:center;gap:5px;transform:translate(-8px,-8px);text-decoration:none;color:#2e2e2e;white-space:nowrap}
.gr-pin-dot{width:14px;height:14px;border-radius:50%;background:#d32c2c;border:2px solid #fff;box-shadow:0 0 0 1px #d32c2c,0 1px 3px rgba(0,0,0,.35);flex:none}
.gr-pin-lbl{font:12px/1 Tahoma,Arial,sans-serif;background:#fff;padding:2px 5px;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.gr-pin:hover .gr-pin-lbl{color:#d32c2c}
.gr-cluster{width:36px;height:36px;border-radius:50%;background:#343941;color:#fff;font:700 13px/36px Tahoma,Arial,sans-serif;text-align:center;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transform:translate(-18px,-18px);cursor:pointer}
@media (max-width:640px){.gr-map{height:340px}.gr-pin-lbl{display:none}}

/* Перебиваем сброс темы (button,input{width:100%;display:block}, input[type=text]{display:flex}):
   файл грузится раньше стилей темы, поэтому нужна специфичность выше, чем у тега с атрибутом. */
body .gr-find-row input#grInput{display:block;width:auto;flex:1 1 auto;min-width:0}
body .gr-find-row button#grGo{display:block;width:auto;flex:0 0 auto}
body .gr-filter button{display:inline-block;width:auto}
body .gr-sugg button{display:flex;width:100%}
body .gr-cols a{text-align:left}
body .gr-find-s,body .gr-map-note,body .gr-free{text-align:left}