/* TippyTaps — SEO landing pages (tt_city "Mesto" + tt_category "Odbor").
   Page-specific rules only; the shell (nav/footer/.btn/.hero/section/.shead/
   reveal) lives in site.css, and .tt-grid/.tt-card come from tippytaps.css.
   Ported from the PAWS design: design --accent -> --pop, --accent-ink ->
   --pop-ink, --card -> --surface. Scoped under .tt-site to avoid collisions.
   Kept generic so the tt_category landing can reuse it. */

/* ---- breadcrumbs ---- */
.tt-site .crumbs{ margin:26px 0 0; } /* look: site.css */

/* ---- place page: catalog heading + the descriptive tail under it ----
   The city page IS the catalog (archive.css does the sidebar and the grid), so its
   heading is the catalog's .tt-head — this only adds the accent on the place name.
   The prose lives BELOW the results: the list is what the visitor came for. */
.tt-site .tt-head h1 em{ font-style:normal; color:var(--pop); }
.tt-site .tt-head h1 .in-city{ color:var(--muted); font-weight:600; }
/* The stat row shares the heading line: h1 left, numbers right, baselines aligned.
   Below 900px it drops under the h1 — three 32px numbers next to a 28px heading do
   not fit a phone, and the heading is what has to be read first. */
.tt-site .tt-head-city{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 40px; flex-wrap:wrap; }
.tt-site .tt-head-city .tt-head-main{ flex:1 1 22ch; min-width:0; }
.tt-site .tt-head-city .lstats{ margin-top:0; gap:26px; flex:0 1 auto; }
.tt-site .cityseo{ border-top:1px solid var(--line); padding:38px 0 8px; }
.tt-site .cityseo .lead{ font-size:17px; color:var(--ink-2); font-weight:500; max-width:70ch; margin:0; }

/* ---- landing hero (extends .hero) ---- */
.tt-site .lhero{ padding:26px 0 10px; }
.tt-site .lhero h1{ font-size:56px; font-weight:700; max-width:18ch; margin-top:16px; }
.tt-site .lhero h1 em{ font-style:normal; color:var(--pop); }
.tt-site .lhero .lead{ font-size:18px; color:var(--ink-2); font-weight:500; max-width:56ch; margin-top:18px; }

/* ---- stat row ---- */
.tt-site .lstats{ display:flex; gap:30px; flex-wrap:wrap; margin-top:26px; }
.tt-site .lstats .s .n{ font-family:var(--disp); font-size:32px; font-weight:700; line-height:1.05; }
.tt-site .lstats .s .l{ font-size:13.5px; color:var(--muted); font-weight:600; margin-top:2px; }

/* ---- quick-nav chips (parts of the city) ---- */
.tt-site .quicknav{ display:flex; gap:9px; flex-wrap:wrap; margin-top:26px; }
.tt-site .quicknav a{ background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-weight:700; font-size:14px; color:var(--ink); text-decoration:none;
  transition:.14s; display:inline-flex; align-items:center; gap:8px; }
@media (hover:hover){ .tt-site .quicknav a:hover{ border-color:var(--ink); transform:translateY(-2px); } }
.tt-site .quicknav a .c{ color:var(--muted); font-weight:700; }

/* ---- design's landing card (kept for reuse; live pages use .tt-grid) ---- */
.tt-site .list{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:14px; }
.tt-site .lc{ border:1px solid var(--line); border-radius:20px; padding:18px; background:var(--surface);
  transition:transform .18s, box-shadow .18s, border-color .18s; display:flex; flex-direction:column; }
@media (hover:hover){ .tt-site .lc:hover{ transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--ink); } }
.tt-site .lc .ph{ height:150px; border-radius:14px; background:var(--surface-2); display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; font-size:34px; color:var(--green-ink); margin-bottom:14px; }
.tt-site .lc .nm{ font-family:var(--disp); font-weight:600; font-size:18px; }
.tt-site .lc .rt{ font-size:13.5px; font-weight:600; margin-top:5px; }
.tt-site .lc .rt .s{ color:var(--star); } .tt-site .lc .rt .c{ color:var(--muted); }
.tt-site .lc .ad{ color:var(--ink-2); font-size:13.5px; font-weight:500; margin-top:10px;
  display:flex; gap:7px; align-items:flex-start; }
.tt-site .lc .ad svg{ width:15px; height:15px; color:var(--pop); flex:none; margin-top:1px; }
.tt-site .lc .bd{ display:flex; gap:6px; flex-wrap:wrap; margin-top:11px; }
.tt-site .lc .bd span{ font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; }
.tt-site .lc .bd .sos{ background:var(--danger-soft); color:var(--danger); }
.tt-site .lc .bd .ver{ background:var(--ink); color:var(--lime); }
.tt-site .lc .go{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.tt-site .lc .go a{ color:var(--pop-ink); font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:6px; }
.tt-site .lc .go a svg{ width:15px; height:15px; }

/* ---- other-cities grid ---- */
.tt-site .citygrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.tt-site .cityc{ border:1px solid var(--line); border-radius:16px; padding:20px; background:var(--surface);
  transition:.16s; display:flex; justify-content:space-between; align-items:center; text-decoration:none; color:var(--ink); }
@media (hover:hover){ .tt-site .cityc:hover{ border-color:var(--ink); transform:translateY(-3px); } }
.tt-site .cityc .cn{ font-family:var(--disp); font-weight:600; font-size:18px; }
.tt-site .cityc .cc{ background:var(--surface-2); border-radius:999px; padding:3px 11px; font-weight:800; font-size:13px; }

/* ---- emergency band ---- */
.tt-site .emg{ background:var(--pop); color:#fff; border-radius:32px; padding:48px; display:flex;
  align-items:center; gap:32px; flex-wrap:wrap; position:relative; overflow:hidden; }
.tt-site .emg h2{ font-family:var(--disp); font-size:40px; font-weight:700; color:#fff; letter-spacing:-.02em; }
.tt-site .emg p{ font-size:17px; font-weight:500; opacity:.95; margin:10px 0 0; max-width:46ch; }
.tt-site .emg .grow{ flex:1; min-width:280px; position:relative; z-index:1; }
.tt-site .emg .ghost-paw{ position:absolute; right:-40px; bottom:-70px; width:340px; height:340px; color:rgba(255,255,255,.1); }
.tt-site .emg .ghost-paw svg{ width:100%; height:100%; }

@media (max-width:1000px){ .tt-site .lhero h1{ font-size:46px; } }
@media (max-width:900px){
  .tt-site .lhero h1{ font-size:38px; }
  .tt-site .tt-head-city{ display:block; }
  /* Three equal columns: wrapped flex left the rating alone on a second row. */
  .tt-site .tt-head-city .lstats{ margin-top:16px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  .tt-site .tt-head-city .lstats .s .n{ font-size:26px; }
  .tt-site .list{ grid-template-columns:1fr; }
  .tt-site .citygrid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:720px){
  .tt-site .emg{ padding:30px; }
  .tt-site .emg h2{ font-size:30px; }
}