/*
 * v2 catalog — /kliniky/, /salony/ …, city pages, the emergency landing, and the
 * vet directory's shared sidebar (handoff: Kliniky.dc.html, Pohotovost.dc.html).
 * Loaded with archive.css under tt_v2() (inc/enqueue.php). Every rule starts with
 * `body.tt-v2` — see the head of v2.css for why.
 *
 * Visual only: the form, its field names, the auto-filter JS, sorting and
 * pagination are untouched. The list becomes ONE column of row cards (the
 * card itself is in v2.css).
 */

/* ---------- heading panel ---------- */
body.tt-v2 .tt-head{ position:relative; overflow:hidden; margin:18px 0 28px; padding:clamp(28px,4vw,56px);
  background:var(--surface); border-radius:var(--tt-r);
  display:grid; grid-template-columns:minmax(0,1fr); gap:22px 32px; align-items:center; }
body.tt-v2 .tt-head > :not(.tt-v2-pics){ position:relative; z-index:1; min-width:0; }
body.tt-v2 .tt-head .tt-kick{ justify-self:start; align-self:start; padding:7px 14px; border:1px solid var(--green); border-radius:999px;
  color:var(--green-ink); font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; text-wrap:balance; }
body.tt-v2 .tt-head h1{ font-family:var(--disp); font-weight:500; font-size:clamp(44px,6vw,88px); line-height:.92; letter-spacing:-.05em; margin:0; }
body.tt-v2 .tt-head h1 em{ color:var(--green); }
/* Wide: the kicker and h1 stack in column 1, the art takes column 2 across
   their rows. Narrow: one column in DOM order, text first, art after — placing
   the art by row there put it above the heading. */
@media (min-width:1100px){
  body.tt-v2 .tt-head:has(.tt-v2-pics){ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  body.tt-v2 .tt-head:has(.tt-v2-pics) > :not(.tt-v2-pics){ grid-column:1; }
  body.tt-v2 .tt-head > .tt-v2-pics{ grid-column:2; grid-row:1 / span 4; }
}
body.tt-v2 .tt-head-city{ display:grid; }
body.tt-v2 .tt-head-city .tt-head-main{ display:flex; flex-direction:column; gap:22px; }
body.tt-v2 .tt-head .lstats{ margin-top:4px; gap:28px; }
body.tt-v2 .tt-head .lstats .s .n{ font-family:var(--disp); font-weight:500; letter-spacing:-.04em; }
body.tt-v2 .tt-head .lstats .s .l{ color:var(--muted); font-weight:500; }
body.tt-v2 .crumbs + .tt-head{ margin-top:14px; }

/* art: two arched photos and a bobbing round one, an outline word behind */
body.tt-v2 .tt-v2-pics{ position:relative; height:clamp(300px,32vw,400px); min-width:0; }
body.tt-v2 .tt-v2-ghost{ position:absolute; right:0; bottom:-10px; font-family:var(--disp); font-weight:650;
  font-size:clamp(90px,11vw,170px); letter-spacing:-.07em; line-height:.8; white-space:nowrap;
  color:transparent; -webkit-text-stroke:1.5px rgba(47,158,112,.45); transition:translate .4s; pointer-events:none; }
body.tt-v2 .tt-v2-pic{ position:absolute; overflow:hidden; transition:translate .4s; box-shadow:0 30px 50px -30px rgba(21,52,39,.5); }
body.tt-v2 .tt-v2-pic img{ width:100%; height:100%; object-fit:cover; display:block; }
body.tt-v2 .tt-v2-pic.p1{ left:4%; top:12%; width:42%; height:76%; border-radius:200px 200px var(--tt-r) var(--tt-r); rotate:-6deg; }
body.tt-v2 .tt-v2-pic.p2{ left:34%; top:0; width:40%; height:82%; border-radius:200px 200px var(--tt-r) var(--tt-r); rotate:3deg; z-index:1; }
body.tt-v2 .tt-v2-pic.p3{ right:2%; top:30%; width:30%; aspect-ratio:1; border-radius:50%; z-index:2; border:6px solid var(--surface); }
@media (max-width:640px){
  body.tt-v2 .tt-v2-pics{ height:240px; }
}

/* ---------- emergency landing: forest panel, outline 24/7, pug in an arch ---------- */
body.tt-v2.tt-v2-sos .tt-head{ background:var(--forest); color:var(--bg); padding:0; gap:0; }
body.tt-v2.tt-v2-sos .tt-head > .tt-kick{ margin:clamp(28px,5vw,64px) clamp(28px,5vw,64px) 0; border-color:var(--pop); color:#f4a88f; }
body.tt-v2.tt-v2-sos .tt-head > h1{ margin:22px clamp(28px,5vw,64px) clamp(28px,5vw,64px); align-self:start; color:var(--bg); }
body.tt-v2.tt-v2-sos .tt-head > .tt-v2-pics{ height:auto; min-height:400px; align-self:stretch; }
body.tt-v2 .tt-v2-pics.is-sos .tt-v2-ghost{ right:-2%; top:4%; bottom:auto; font-size:clamp(140px,18vw,280px);
  -webkit-text-stroke:2px rgba(207,224,90,.55); }
body.tt-v2 .tt-v2-arch{ position:absolute; left:10%; right:6%; bottom:0; top:18%; border-radius:240px 240px 0 0; overflow:hidden; transition:transform .4s; }
body.tt-v2 .tt-v2-arch img{ position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px); object-fit:cover; transition:translate .4s; }
/* Stacked (below the two-column width) the pug and the 24/7 took the whole first
   screen of a phone and pushed the clinics below it — someone on this page is in
   a hurry, so the hero is the heading and "Blízko mňa" only (Roman, 2026-10-08).
   Same for the filter strip under it: on a folded sidebar it is a "Filtre" button
   and chips nobody in an emergency needs; geo still works, the hero button
   presses the sidebar's own one. */
@media (max-width:1099px){
  body.tt-v2.tt-v2-sos .tt-head > .tt-v2-pics{ display:none; }
}
@media (max-width:900px){
  body.tt-v2.tt-v2-sos .tt-fstrip{ display:none; }
}

/* ---------- layout: 300px sidebar card + one column of cards ---------- */
body.tt-v2 .tt-layout{ grid-template-columns:300px minmax(0,1fr); gap:28px; }
body.tt-v2 .tt-sidebar{ background:var(--surface); border:0; border-radius:var(--tt-r); padding:22px; top:110px; }
body.tt-v2 .tt-fgroup{ border-bottom:1px solid rgba(24,39,31,.08); padding:14px 0; }
body.tt-v2 .tt-lbl{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
body.tt-v2 summary.tt-cat-group{ font-size:14px; }
body.tt-v2 .tt-select{ border:1.5px solid rgba(24,39,31,.12); background-color:var(--bg); border-radius:var(--tt-r-btn); padding:14px 40px 14px 16px; font-weight:600; }

html.tt-js body.tt-v2 .tt-geo-btn{ border:1.5px dashed rgba(47,158,112,.5); background:transparent; color:var(--green-ink); border-radius:var(--tt-r-btn); font-weight:700; }
body.tt-v2 .tt-check{ border-radius:var(--tt-r-btn); font-size:15px; }
body.tt-v2 .tt-check .box{ border:1.5px solid rgba(24,39,31,.25); border-radius:7px; }
body.tt-v2 .tt-check input:checked + .box{ background:var(--green); border-color:var(--green); }
body.tt-v2 .tt-fbtn{ margin-top:14px; }

body.tt-v2 .tt-results{ min-width:0; }
body.tt-v2 .tt-rhead{ align-items:center; margin-bottom:10px; }
body.tt-v2 .tt-rhead .tt-found{ font-family:var(--disp); font-weight:500; font-size:30px; letter-spacing:-.035em; color:var(--ink); }
body.tt-v2 .tt-sort{ display:inline-flex; align-items:center; gap:4px; padding:4px 4px 4px 12px; border-radius:var(--tt-r-btn); background:var(--surface);
  font-size:14px; color:var(--muted); }
body.tt-v2 .tt-sort .tt-select{ border:0; background-color:var(--ink); color:var(--bg); border-radius:var(--tt-r-btn); padding:9px 34px 9px 14px; font-size:14px; }
body.tt-v2 .tt-fchip{ border-radius:var(--tt-r-btn); font-weight:600; }
body.tt-v2 .tt-results .tt-grid{ grid-template-columns:minmax(0,1fr); gap:6px; padding-top:20px; }

/* pagination: round pills, current dark, hover lime */
body.tt-v2 .tt-results .page-numbers{ min-width:46px; height:46px; border-radius:999px; border:0; background:var(--surface); font-weight:700; }
body.tt-v2 .tt-results .page-numbers.current{ background:var(--ink); color:var(--bg); }
body.tt-v2 .tt-results .page-numbers.dots{ background:transparent; }
body.tt-v2 .tt-empty{ background:var(--surface); border-radius:var(--tt-r); }

@media (hover:hover){
  body.tt-v2 .tt-check:hover{ background:var(--bg); }
  body.tt-v2 .tt-results a.page-numbers:hover{ background:var(--lime); color:var(--ink); }
}
@media (max-width:980px){
  body.tt-v2 .tt-layout{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  body.tt-v2 .tt-head{ margin-top:10px; }
  body.tt-v2 .tt-rhead .tt-found{ font-size:24px; }
}

/* Emergency landing: "Blízko mňa" in the hero (template-parts/v2-sos-near.php).
   Big and coral, the handoff's CTA; full width and 56px tall on a phone, where it
   is the one thing a person in a hurry needs to hit. */
body.tt-v2 .tt-v2-near{ display:grid; gap:10px; justify-items:start; }
body.tt-v2 .tt-v2-near[hidden]{ display:none; }
body.tt-v2 .tt-v2-near__btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px;
  padding:16px 26px; border:0; border-radius:999px; background:var(--pop); color:var(--surface);
  font:inherit; font-weight:700; font-size:17px; cursor:pointer; transition:background .2s, scale .2s; }
body.tt-v2 .tt-v2-near__btn svg{ width:20px; height:20px; flex:none; }
body.tt-v2 .tt-v2-near__btn.is-on{ background:var(--lime); color:var(--forest); }
body.tt-v2 .tt-v2-near__btn.is-locating{ opacity:.8; cursor:progress; }
body.tt-v2 .tt-v2-near__btn.is-locating svg{ animation:tt-v2-near 1s ease-in-out infinite alternate; }
@keyframes tt-v2-near{ from{ scale:.8; } to{ scale:1.15; } }
body.tt-v2 .tt-v2-near__msg{ margin:0; min-height:1.3em; font-size:14px; color:rgba(242,238,228,.8); }
body.tt-v2:not(.tt-v2-sos) .tt-v2-near__msg{ color:var(--muted); }
@media (hover:hover){ body.tt-v2 .tt-v2-near__btn:not(.is-on):hover{ background:#c94e2a; scale:1.03; } }
@media (prefers-reduced-motion:reduce){ body.tt-v2 .tt-v2-near__btn.is-locating svg{ animation:none; } }
/* In the forest hero the heading hands its bottom margin to the button. */
body.tt-v2.tt-v2-sos .tt-head:has(> .tt-v2-near) > h1{ margin-bottom:22px; }
body.tt-v2.tt-v2-sos .tt-head > .tt-v2-near{ margin:0 clamp(28px,5vw,64px) clamp(28px,5vw,64px); align-self:start; }
/* The city emergency landing wraps kicker + h1 in .tt-head-main; the forest hero
   drops the panel padding, so the wrapper carries it. */
body.tt-v2.tt-v2-sos .tt-head-city > .tt-head-main{ padding:clamp(28px,5vw,64px); color:var(--bg); }
body.tt-v2.tt-v2-sos .tt-head-city .tt-kick{ border-color:var(--pop); color:#f4a88f; }
/* The country page's `> h1` rule misses the city h1 inside the wrapper, and site.css's
   `.tt-site h1{ color:var(--ink) }` won: ink on forest, unreadable (found 2026-10-20). */
body.tt-v2.tt-v2-sos .tt-head-city h1{ color:var(--bg); }
@media (max-width:640px){
  body.tt-v2 .tt-v2-near{ justify-items:stretch; }
  body.tt-v2 .tt-v2-near__btn{ width:100%; }
}