/*
 * TippyTaps v2 — home page (handoff design/Domov.dc.html + Tapko.dc.html).
 * Markup: template-parts/v2-front-page.php, printed by front-page.php only
 * under tt_v2(). Auto-loaded beside front-page.css by inc/enqueue.php.
 *
 * Every rule starts with `body.tt-v2` (see v2.css for why). The old
 * front-page.css still loads; the v2 markup uses its own `hp-` classes so the
 * two cannot meet, except the JS hooks the search keeps (.tabs, .go).
 *
 * Hover only inside @media (hover:hover). The motion here is transitions on
 * hover; the loops (marquee, bob, spin, pulse) are tt.js and stop by
 * themselves under prefers-reduced-motion.
 */

body.tt-v2 .tt-v2-home{ overflow-x:clip; }
body.tt-v2 .tt-v2-home h1,
body.tt-v2 .tt-v2-home h2,
body.tt-v2 .tt-v2-home h3{ color:inherit; font-family:var(--disp); }
body.tt-v2 .tt-v2-home a{ text-decoration:none; }
body.tt-v2 .tt-v2-home svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
body.tt-v2 .tt-v2-home svg.is-fill{ fill:currentColor; stroke:none; }
body.tt-v2 .tt-v2-home img{ max-width:none; }

/* Pulsing dot: a solid dot with a ring tt.js grows out of it (data-pulse). */
body.tt-v2 .tt-v2-home .hp-dot{ position:relative; display:block; flex:none; width:7px; height:7px; }
body.tt-v2 .tt-v2-home .hp-dot > span{ position:absolute; inset:0; border-radius:50%; background:currentColor; }

/* ---------- section shell ---------- */
body.tt-v2 .tt-v2-home .hp-sec{ max-width:1360px; margin:0 auto; padding:clamp(40px,6vw,80px) clamp(16px,3vw,40px); }
body.tt-v2 .tt-v2-home .hp-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; margin-bottom:44px; }
body.tt-v2 .tt-v2-home .hp-head h2{ margin:0; font-weight:500; font-size:clamp(40px,5.4vw,80px); line-height:.95; letter-spacing:-.05em;
  text-wrap:balance; }
/* The categories follow the hero directly since the two marquee strips went
   (Roman, 2026-10-07) — a full section gap under the blue read as a hole. */
body.tt-v2 .tt-v2-home .hp-cats{ padding-top:clamp(32px,4vw,56px); }
body.tt-v2 .tt-v2-home .hp-cats .hp-head h2{ max-width:760px; }
body.tt-v2 .tt-v2-home .hp-head p{ margin:0; max-width:380px; font-size:17px; line-height:1.55; color:var(--ink-2); text-wrap:pretty; }

/* ================= HERO ================= */
/* Full window width, the photo as the SECTION's background (cover), and the
   sticky nav floating over it: the section is pulled up by the nav's height
   (--tt-nav-h, v2.css) and pads its content back down by the same amount
   (Roman's design review, 2026-10-07).

   Phones/tablets: the portrait photo under the hero blue, which fades it in
   from the top — what the old <img> mask did. ≥1100 (below): a composite of
   the same blue gradient with the dog on the right 60%, its left edge faded in
   (hero-retriever-wide-*.webp, 1.2:1, rendered from the old two-layer layout).
   1.2:1 because the hero is 1.2–2:1 at desktop widths: a 16:9 file was scaled
   up by `cover` until the dog filled the screen behind the headline.
   LCP: preloaded per breakpoint in inc/redesign.php. */
body.tt-v2 .tt-v2-home .hp-hero{ position:relative; padding:0; margin-top:calc(-1 * var(--tt-nav-h));
  background:linear-gradient(180deg,#33719b 10%,rgba(46,102,143,.65) 45%,rgba(40,79,108,.65) 100%),
    url(../img/v2/hero-retriever-900.webp) 50% 30% / cover no-repeat, #2e668f; }
body.tt-v2 .tt-v2-home .hp-hero__box{ position:relative; display:flex; min-height:max(720px,100vh); overflow:hidden;
  padding-top:var(--tt-nav-h); color:var(--surface); }
body.tt-v2 .tt-v2-home .hp-hero__tap{ position:absolute; left:-2%; right:-2%; top:calc(var(--tt-nav-h) + clamp(10px,3vw,40px)); text-align:right; white-space:nowrap;
  font-family:var(--disp); font-weight:650; font-size:clamp(120px,21vw,360px); letter-spacing:-.07em; line-height:.8;
  color:rgba(251,249,243,.12); pointer-events:none; user-select:none; transition:translate .5s cubic-bezier(.2,.7,.2,1); }
body.tt-v2 .tt-v2-home .hp-hero__in{ position:relative; z-index:2; width:100%; max-width:1360px; margin:0 auto;
  padding:clamp(28px,5vw,72px) clamp(20px,4vw,56px) clamp(28px,4vw,56px);
  display:flex; flex-direction:column; justify-content:space-between; gap:36px; }
body.tt-v2 .tt-v2-home .hp-hero__top{ display:flex; flex-direction:column; gap:26px; max-width:720px; }
body.tt-v2 .tt-v2-home .hp-hero__kick{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
body.tt-v2 .tt-v2-home .hp-hero__pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid rgba(251,249,243,.5);
  border-radius:999px; font-size:14px; font-weight:600; background:rgba(251,249,243,.08);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
body.tt-v2 .tt-v2-home .hp-hero__pill svg{ width:16px; height:16px; flex:none; }
body.tt-v2 .tt-v2-home .hp-hero__est{ padding:8px 14px; border-radius:999px; background:var(--lime); color:var(--forest);
  font-size:13px; font-weight:700; letter-spacing:.04em; }
body.tt-v2 .tt-v2-home .hp-hero h1{ margin:0; color:var(--surface); font-weight:500; font-size:clamp(50px,7.4vw,118px); line-height:.9;
  letter-spacing:-.055em; text-wrap:balance; text-shadow:0 4px 40px rgba(20,45,65,.35); }
body.tt-v2 .tt-v2-home .hp-hero h1 em{ position:relative; display:inline-block; font-style:normal; color:var(--lime); }
body.tt-v2 .tt-v2-home .hp-hero h1 em svg{ position:absolute; left:0; bottom:-.1em; width:100%; height:.2em;
  stroke:var(--tt-pink-500); stroke-width:7; }
body.tt-v2 .tt-v2-home .hp-hero__lead{ margin:0; max-width:500px; font-size:clamp(17px,1.4vw,20px); line-height:1.55;
  color:rgba(251,249,243,.9); text-wrap:pretty; }
body.tt-v2 .tt-v2-home .hp-hero__bottom{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:28px; }
body.tt-v2 .tt-v2-home .hp-hero__main{ flex:1 1 520px; min-width:0; display:flex; flex-direction:column; gap:24px; color:var(--ink); }

/* search card — .tabs/.go/.js-city are front-page.js hooks */
body.tt-v2 .tt-v2-home .hp-search{ max-width:640px; padding:10px; border-radius:var(--tt-r); background:var(--surface);
  box-shadow:0 40px 80px -40px rgba(10,30,45,.7); }
body.tt-v2 .tt-v2-home .hp-search .tabs{ display:flex; flex-wrap:wrap; gap:4px; padding:4px; }
body.tt-v2 .tt-v2-home .hp-search .tabs button{ padding:10px 18px; border:0; border-radius:var(--tt-r-btn); background:transparent; color:var(--ink);
  font-family:var(--sans); font-weight:600; font-size:15px; line-height:1.2; cursor:pointer; transition:background .2s, color .2s; }
body.tt-v2 .tt-v2-home .hp-search .tabs button.active{ background:var(--ink); color:var(--bg); }
body.tt-v2 .tt-v2-home .hp-search__row{ display:flex; flex-wrap:wrap; gap:8px; padding:6px; }
body.tt-v2 .tt-v2-home .hp-field{ position:relative; flex:1 1 180px; min-width:0; display:flex; flex-direction:column; gap:2px; margin:0;
  padding:12px 44px 12px 20px; border-radius:var(--tt-r-btn); background:var(--bg); cursor:pointer; }
body.tt-v2 .tt-v2-home .hp-field--need{ flex-basis:200px; }
body.tt-v2 .tt-v2-home .hp-field__lb{ font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
body.tt-v2 .tt-v2-home .hp-field select{ appearance:none; -webkit-appearance:none; width:100%; height:auto; margin:0; padding:0; border:0; border-radius:0;
  background:transparent; box-shadow:none; color:var(--ink); font-family:var(--sans); font-size:17px; font-weight:600; line-height:1.3;
  outline:none; cursor:pointer; }
body.tt-v2 .tt-v2-home .hp-field select option{ color:var(--ink); }
body.tt-v2 .tt-v2-home .hp-field__chev{ position:absolute; right:18px; top:50%; width:18px; height:18px; margin-top:-9px; pointer-events:none; color:var(--ink); }
body.tt-v2 .tt-v2-home .hp-field:focus-within{ outline:2px solid var(--green); outline-offset:2px; }
body.tt-v2 .tt-v2-home .hp-search__go{ flex:0 1 auto; display:flex; align-items:center; justify-content:center; gap:10px; min-height:64px;
  padding:0 30px; border-radius:var(--tt-r-btn); background:var(--green); color:var(--surface); font-weight:700; font-size:17px;
  transition:background .2s; }
body.tt-v2 .tt-v2-home .hp-search__go svg{ width:20px; height:20px; transition:rotate .3s, scale .3s; }
body.tt-v2 .tt-v2-home .hp-quick{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 10px 6px; font-size:14px; }
body.tt-v2 .tt-v2-home .hp-quick__lb{ margin-right:4px; color:var(--muted); font-weight:600; }
body.tt-v2 .tt-v2-home .hp-quick a{ padding:7px 13px; border:1px solid var(--line); border-radius:var(--tt-r-btn); color:var(--ink);
  transition:background .2s, border-color .2s; }

/* counters */
body.tt-v2 .tt-v2-home .hp-stats{ display:flex; color:var(--surface); }
body.tt-v2 .tt-v2-home .hp-stat{ padding:4px clamp(14px,3vw,28px); border-right:1px solid rgba(251,249,243,.3); }
body.tt-v2 .tt-v2-home .hp-stat:first-child{ padding-left:0; }
body.tt-v2 .tt-v2-home .hp-stat:last-child{ padding-right:0; border-right:0; }
body.tt-v2 .tt-v2-home .hp-stat .n{ font-family:var(--disp); font-size:clamp(34px,4vw,44px); font-weight:700; letter-spacing:-.04em; line-height:1; }
body.tt-v2 .tt-v2-home .hp-stat .l{ margin-top:4px; font-size:14px; opacity:.85; }

/* right column (≥1100 only) */
body.tt-v2 .tt-v2-home .hp-hero__side{ display:none; flex:0 1 auto; flex-direction:column; align-items:flex-end; gap:14px; }
body.tt-v2 .tt-v2-home .hp-mini{ display:flex; align-items:center; gap:12px; max-width:320px; padding:10px 18px 10px 10px; border-radius:var(--tt-r);
  background:var(--surface); color:var(--ink); box-shadow:0 24px 40px -22px rgba(10,30,45,.6); transition:translate .4s; }
body.tt-v2 .tt-v2-home .hp-mini__logo{ flex:none; width:52px; height:52px; border-radius:16px; overflow:hidden; display:grid; place-items:center;
  background:#fff; color:var(--green-ink); font-family:var(--disp); font-weight:700; font-size:18px; }
body.tt-v2 .tt-v2-home .hp-mini__logo img{ width:100%; height:100%; object-fit:contain; }
body.tt-v2 .tt-v2-home .hp-mini__tx{ display:flex; flex-direction:column; min-width:0; }
body.tt-v2 .tt-v2-home .hp-mini__rt{ display:flex; align-items:center; gap:4px; font-weight:700; font-size:15px; }
body.tt-v2 .tt-v2-home .hp-mini__rt svg{ width:15px; height:15px; color:var(--pop); }
body.tt-v2 .tt-v2-home .hp-mini__rt span{ color:var(--muted); font-weight:500; }
body.tt-v2 .tt-v2-home .hp-mini__nm{ font-size:14px; font-weight:600; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.tt-v2 .tt-v2-home .hp-mini__ct{ font-size:13px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.tt-v2 .tt-v2-home .hp-tapko-row{ display:flex; align-items:flex-end; margin-top:6px; }
body.tt-v2 .tt-v2-home .hp-tapko-bubble{ position:relative; z-index:1; max-width:190px; margin:0 -12px 96px 0; padding:12px 16px;
  border-radius:var(--tt-r) var(--tt-r) 4px var(--tt-r); background:var(--ink); color:var(--bg); font-size:14px; line-height:1.35; font-weight:500; }
body.tt-v2 .tt-v2-home .hp-tapko-bubble strong{ color:var(--lime); }

/* Ťapko — the paw tile from Tapko.dc.html, drawn at 150px (the design's 200px
   box scaled by .75; the 170px tile sits centred in it). */
body.tt-v2 .tt-v2-home .tt-tapko{ width:150px; height:150px; flex:none; display:grid; place-items:center; cursor:pointer; }
body.tt-v2 .tt-v2-home .tt-tapko__look{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
body.tt-v2 .tt-v2-home .tt-tapko__tile{ position:relative; width:128px; height:128px; border-radius:36px; background:var(--green);
  box-shadow:0 22px 30px -18px rgba(21,52,39,.55), inset 0 -6px 0 rgba(0,0,0,.1);
  transition:scale .4s cubic-bezier(.3,1.8,.5,1), border-radius .4s; }
body.tt-v2 .tt-v2-home .tt-tapko__toe,
body.tt-v2 .tt-v2-home .tt-tapko__pad{ position:absolute; border-radius:50%; background:var(--surface); }
body.tt-v2 .tt-v2-home .tt-tapko__toe{ transition:translate .4s cubic-bezier(.3,1.9,.5,1); }
body.tt-v2 .tt-v2-home .tt-tapko__toe.t1{ left:17px; top:46px; width:22px; height:22px; }
body.tt-v2 .tt-v2-home .tt-tapko__toe.t2{ left:36px; top:24px; width:24px; height:24px; transition-delay:.05s; }
body.tt-v2 .tt-v2-home .tt-tapko__toe.t3{ left:68px; top:24px; width:24px; height:24px; transition-delay:.1s; }
body.tt-v2 .tt-v2-home .tt-tapko__toe.t4{ left:89px; top:46px; width:22px; height:22px; transition-delay:.15s; }
body.tt-v2 .tt-v2-home .tt-tapko__pad{ left:38px; top:59px; width:53px; height:44px; }

/* spinning badge (hidden below 720) */
body.tt-v2 .tt-v2-home .hp-badge{ position:absolute; z-index:3; right:clamp(16px,4vw,64px); top:calc(var(--tt-nav-h) + clamp(16px,4vw,48px)); width:118px; height:118px;
  border-radius:50%; background:var(--lime); display:grid; place-items:center; box-shadow:0 18px 30px -18px rgba(10,30,45,.6);
  transition:translate .4s; }
body.tt-v2 .tt-v2-home .hp-badge__ring{ position:absolute; inset:0; width:118px; height:118px; }
body.tt-v2 .tt-v2-home .hp-badge__ring text{ fill:var(--forest); stroke:none; font-family:var(--disp); font-size:9.4px; font-weight:700; letter-spacing:1.2px; }
body.tt-v2 .tt-v2-home .hp-badge__paw{ width:30px; height:30px; fill:var(--forest); stroke:none; }

@media (min-width:1100px){
  body.tt-v2 .tt-v2-home .hp-hero{ background:url(../img/v2/hero-retriever-wide-1600.webp) 100% 35% / cover no-repeat, #33719b; }
  body.tt-v2 .tt-v2-home .hp-hero__side{ display:flex; }
}
@media (min-width:1700px){
  body.tt-v2 .tt-v2-home .hp-hero{ background-image:url(../img/v2/hero-retriever-wide-2560.webp); }
}
@media (max-width:719px){
  body.tt-v2 .tt-v2-home .hp-badge{ display:none; }
}
@media (max-width:640px){
  body.tt-v2 .tt-v2-home .hp-search__go{ flex:1 1 100%; min-height:58px; }
}
/* "Starostlivosť," at the design's 50px floor is wider than a 390px phone's
   hero; the line would be clipped by the hero's overflow. */
@media (max-width:440px){
  body.tt-v2 .tt-v2-home .hp-hero h1{ font-size:clamp(38px,11.4vw,50px); }
  body.tt-v2 .tt-v2-home .hp-stat{ padding-inline:12px; }
  body.tt-v2 .tt-v2-home .hp-stat:first-child{ padding-left:0; }
  body.tt-v2 .tt-v2-home .hp-stat:last-child{ padding-right:0; }
  body.tt-v2 .tt-v2-home .hp-stat .l{ font-size:13px; }
}

/* ================= CATEGORIES ================= */
body.tt-v2 .tt-v2-home .hp-cats__rows{ display:flex; flex-direction:column; gap:20px; }
body.tt-v2 .tt-v2-home .hp-cats__row{ display:flex; flex-wrap:wrap; gap:20px; }
body.tt-v2 .tt-v2-home .hp-cat{ position:relative; flex:1 1 320px; min-height:460px; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--tt-r); color:var(--ink); isolation:isolate; }
body.tt-v2 .tt-v2-home .hp-cat__img{ position:absolute; left:0; right:0; bottom:0; width:100%; height:72%; object-fit:cover; object-position:50% 30%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%); mask-image:linear-gradient(180deg,transparent,#000 35%);
  transition:scale .8s cubic-bezier(.2,.8,.2,1); }
body.tt-v2 .tt-v2-home .hp-cat__body{ position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; padding:30px; }
body.tt-v2 .tt-v2-home .hp-cat__top{ display:flex; justify-content:space-between; align-items:center; }
body.tt-v2 .tt-v2-home .hp-cat h3{ margin:0; font-weight:500; font-size:40px; line-height:.98; letter-spacing:-.045em; }
body.tt-v2 .tt-v2-home .hp-cat p{ margin:0; font-size:16px; line-height:1.5; }
body.tt-v2 .tt-v2-home .hp-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid currentColor;
  border-radius:999px; font-size:13px; font-weight:600; }
body.tt-v2 .tt-v2-home .hp-arw{ flex:none; width:48px; height:48px; border-radius:16px; display:grid; place-items:center;
  transition:all .35s cubic-bezier(.3,1.5,.5,1); }
body.tt-v2 .tt-v2-home .hp-arw svg{ width:20px; height:20px; }

/* 01 clinics: wide, cream, photo on the right */
body.tt-v2 .tt-v2-home .hp-cat--clinic{ flex:1.7 1 560px; flex-direction:row; background:var(--surface); border:1px solid rgba(47,158,112,.28);
  transition:border-color .3s; }
body.tt-v2 .tt-v2-home .hp-cat--clinic .hp-cat__img{ left:auto; right:0; width:62%; height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%); mask-image:linear-gradient(90deg,transparent,#000 38%); }
body.tt-v2 .tt-v2-home .hp-cat--clinic .hp-cat__body{ max-width:420px; justify-content:space-between; gap:24px; padding:clamp(28px,4vw,36px); }
body.tt-v2 .tt-v2-home .hp-cat__chips{ display:flex; flex-wrap:wrap; gap:8px; }
body.tt-v2 .tt-v2-home .hp-cat--clinic .hp-chip,
body.tt-v2 .tt-v2-home .hp-cat--home .hp-chip{ border-color:var(--green); color:var(--green-ink); }
body.tt-v2 .tt-v2-home .hp-cat__txt{ display:flex; flex-direction:column; gap:16px; }
body.tt-v2 .tt-v2-home .hp-cat--clinic h3{ font-size:clamp(34px,3.6vw,52px); }
body.tt-v2 .tt-v2-home .hp-cat--clinic p{ line-height:1.55; color:var(--ink-2); text-wrap:pretty; }
body.tt-v2 .tt-v2-home .hp-cat__cta{ display:inline-flex; align-items:center; gap:12px; font-weight:700; }
body.tt-v2 .tt-v2-home .hp-cat--clinic .hp-arw{ width:52px; height:52px; border-radius:18px; background:var(--bg); }

/* 02 salons: pink */
body.tt-v2 .tt-v2-home .hp-cat--salon{ flex:1 1 340px; background:var(--tt-pink); }
body.tt-v2 .tt-v2-home .hp-cat--salon .hp-cat__img{ object-position:50% 20%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%); mask-image:linear-gradient(180deg,transparent,#000 30%); }
body.tt-v2 .tt-v2-home .hp-cat--salon .hp-cat__body{ padding:32px; gap:14px; }
body.tt-v2 .tt-v2-home .hp-cat--salon p{ max-width:280px; }
body.tt-v2 .tt-v2-home .hp-cat--salon .hp-arw{ background:var(--surface); }

/* 03 emergency: coral */
body.tt-v2 .tt-v2-home .hp-cat--sos{ background:var(--pop); color:var(--surface); }
body.tt-v2 .tt-v2-home .hp-cat--sos .hp-arw,
body.tt-v2 .tt-v2-home .hp-cat--hotel .hp-arw{ background:rgba(251,249,243,.18); }

/* 04 home visits: cream */
body.tt-v2 .tt-v2-home .hp-cat--home{ background:var(--surface); border:1px solid rgba(47,158,112,.28); }
body.tt-v2 .tt-v2-home .hp-cat--home .hp-cat__img{ object-position:50% 40%; }
body.tt-v2 .tt-v2-home .hp-cat--home p{ color:var(--ink-2); }
body.tt-v2 .tt-v2-home .hp-cat--home .hp-arw{ background:var(--bg); }

/* 05 hotels: green */
body.tt-v2 .tt-v2-home .hp-cat--hotel{ background:var(--green); color:var(--surface); }
body.tt-v2 .tt-v2-home .hp-cat--hotel .hp-cat__img{ object-position:50% 60%; }

@media (max-width:639px){
  /* The clinic card's photo goes under the text instead of beside it. */
  body.tt-v2 .tt-v2-home .hp-cat--clinic{ min-height:640px; }
  body.tt-v2 .tt-v2-home .hp-cat--clinic .hp-cat__body{ align-self:flex-start; }
  body.tt-v2 .tt-v2-home .hp-cat--clinic .hp-cat__img{ width:100%; height:44%; top:auto;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 35%); mask-image:linear-gradient(180deg,transparent,#000 35%); }
  body.tt-v2 .tt-v2-home .hp-cat{ flex-basis:100%; }
}

/* ================= THREE STEPS ================= */
body.tt-v2 .tt-v2-home .hp-steps .hp-head{ margin-bottom:36px; }
body.tt-v2 .tt-v2-home .hp-steps .hp-head h2 span{ color:var(--green); }
body.tt-v2 .tt-v2-home .hp-steps__list{ border-top:1.5px solid var(--ink); }
body.tt-v2 .tt-v2-home .hp-step{ --gap:clamp(16px,3vw,40px); display:flex; align-items:center; gap:var(--gap); padding:28px 0;
  border-bottom:1.5px solid var(--ink); }
body.tt-v2 .tt-v2-home .hp-step__pic{ flex:none; width:0; height:150px; margin-right:calc(-1 * var(--gap)); border-radius:var(--tt-r); overflow:hidden; opacity:0;
  transition:width .6s cubic-bezier(.2,.8,.2,1), opacity .4s, margin .6s; }
body.tt-v2 .tt-v2-home .hp-step__pic img{ width:240px; height:150px; object-fit:cover; display:block; }
body.tt-v2 .tt-v2-home .hp-step__n{ flex:none; font-family:var(--disp); font-weight:500; font-size:22px; color:#8a968e; transition:color .3s, rotate .4s; }
body.tt-v2 .tt-v2-home .hp-step__tx{ flex:1; min-width:0; }
body.tt-v2 .tt-v2-home .hp-step h3{ margin:0; font-weight:500; font-size:clamp(30px,4vw,60px); letter-spacing:-.045em; line-height:1;
  transition:color .3s, translate .4s; }
body.tt-v2 .tt-v2-home .hp-step p{ margin:12px 0 0; max-width:620px; font-size:17px; line-height:1.5; color:var(--ink-2); }

/* ================= FEATURED ================= */
body.tt-v2 .tt-v2-home .hp-favs .hp-head{ margin-bottom:40px; }
body.tt-v2 .tt-v2-home .hp-favs .hp-head p{ margin-top:14px; max-width:none; }
body.tt-v2 .tt-v2-home .hp-btn-line{ display:inline-flex; align-items:center; gap:12px; padding:16px 26px; border:1.5px solid var(--ink);
  border-radius:var(--tt-r-btn); color:var(--ink); font-weight:700; transition:background .25s, color .25s; }
body.tt-v2 .tt-v2-home .hp-btn-line svg{ width:18px; height:18px; transition:translate .3s; }
body.tt-v2 .tt-v2-home .hp-favs__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:20px; }
body.tt-v2 .tt-v2-home .hp-fav{ display:block; color:var(--ink); }
body.tt-v2 .tt-v2-home .hp-fav__card{ height:100%; padding:10px; border-radius:var(--tt-r); background:var(--surface); transition:transform .3s, box-shadow .3s; }
body.tt-v2 .tt-v2-home .hp-fav__pic{ position:relative; height:300px; border-radius:var(--tt-r); overflow:hidden; background:#e7e9ec; }
body.tt-v2 .tt-v2-home .hp-fav--1 .hp-fav__pic{ background:var(--green); }
body.tt-v2 .tt-v2-home .hp-fav--2 .hp-fav__pic{ background:var(--tt-yellow); }
body.tt-v2 .tt-v2-home .hp-fav__img{ width:100%; height:100%; object-fit:cover; display:block; transition:scale .8s cubic-bezier(.2,.8,.2,1); }
body.tt-v2 .tt-v2-home .hp-fav__tags{ position:absolute; left:14px; top:14px; right:14px; display:flex; flex-wrap:wrap; gap:6px; }
body.tt-v2 .tt-v2-home .hp-fav__tags span{ padding:7px 12px; border-radius:999px; background:rgba(251,249,243,.92); font-size:13px; font-weight:700; }
body.tt-v2 .tt-v2-home .hp-fav__logo{ position:absolute; left:14px; bottom:14px; width:58px; height:58px; padding:4px; border-radius:18px; overflow:hidden;
  display:grid; place-items:center; background:var(--surface); color:var(--green-ink); font-family:var(--disp); font-weight:700; font-size:20px; }
body.tt-v2 .tt-v2-home .hp-fav__logo img{ width:100%; height:100%; object-fit:contain; border-radius:14px; }
body.tt-v2 .tt-v2-home .hp-fav__body{ display:flex; flex-direction:column; gap:8px; padding:18px 14px 12px; }
body.tt-v2 .tt-v2-home .hp-fav__row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
body.tt-v2 .tt-v2-home .hp-fav h3{ margin:0; font-size:26px; font-weight:650; letter-spacing:-.035em; line-height:1.05; }
body.tt-v2 .tt-v2-home .hp-rate{ flex:none; display:inline-flex; align-items:center; gap:4px; padding:6px 10px; border-radius:999px;
  background:var(--lime); color:var(--ink); font-weight:700; font-size:14px; }
body.tt-v2 .tt-v2-home .hp-rate svg{ width:13px; height:13px; color:var(--forest); }
body.tt-v2 .tt-v2-home .hp-fav__meta{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:15px; }
body.tt-v2 .tt-v2-home .hp-fav__meta svg{ width:15px; height:15px; flex:none; }
body.tt-v2 .tt-v2-home .hp-fav__cnt{ margin-left:auto; white-space:nowrap; }

/* ================= CITIES ================= */
body.tt-v2 .tt-v2-home .hp-cities__box{ display:flex; flex-direction:column; gap:36px; padding:clamp(16px,5vw,64px);
  border-radius:var(--tt-r); background:var(--surface); }
body.tt-v2 .tt-v2-home .hp-cities .hp-head{ margin-bottom:0; }
body.tt-v2 .tt-v2-home .hp-cities .hp-head h2{ font-size:clamp(40px,5vw,72px); }
body.tt-v2 .tt-v2-home .hp-cities .hp-head p{ max-width:400px; }
body.tt-v2 .tt-v2-home .hp-cities__grid{ display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
body.tt-v2 .tt-v2-home .hp-cities__grid.is-1{ grid-template-columns:minmax(0,1fr); }
body.tt-v2 .tt-v2-home .hp-city{ position:relative; min-height:150px; display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(16px,2vw,22px); border-radius:var(--tt-r); overflow:hidden; background:var(--bg); color:var(--ink); transition:background .3s; }
body.tt-v2 .tt-v2-home .hp-city__nm{ position:relative; z-index:1; font-family:var(--disp); font-weight:500; font-size:clamp(17px,1.6vw,21px);
  line-height:1.15; letter-spacing:-.03em; overflow-wrap:anywhere; }
body.tt-v2 .tt-v2-home .hp-city__ct{ position:relative; z-index:1; display:flex; align-items:baseline; gap:6px; }
body.tt-v2 .tt-v2-home .hp-city__n{ font-family:var(--disp); font-weight:500; font-size:44px; letter-spacing:-.05em; line-height:1; color:var(--green);
  transform-origin:0 100%; transition:scale .4s cubic-bezier(.3,1.6,.5,1), color .3s; }
body.tt-v2 .tt-v2-home .hp-city__w{ font-size:14px; color:var(--ink-2); }
body.tt-v2 .tt-v2-home .hp-city__img{ position:absolute; right:14px; bottom:-14px; width:86px; height:86px; border-radius:50%; object-fit:cover;
  border:4px solid var(--surface); translate:0 110px; transition:translate .55s cubic-bezier(.3,1.5,.5,1), rotate .55s; }
body.tt-v2 .tt-v2-home .hp-cities__chips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
body.tt-v2 .tt-v2-home .hp-cities__lb{ margin-right:6px; font-weight:700; }
body.tt-v2 .tt-v2-home .hp-cities__chips a{ padding:9px 16px; border:1px solid rgba(24,39,31,.16); border-radius:var(--tt-r-btn); color:var(--ink); font-size:15px;
  transition:background .2s, color .2s, border-color .2s; }
@media (min-width:900px){
  body.tt-v2 .tt-v2-home .hp-cities__grid{ grid-template-columns:repeat(var(--n,5),minmax(0,1fr)); }
  /* Eight cards fill two rows of five, as the design's eight regions did. */
  body.tt-v2 .tt-v2-home .hp-cities__grid.is-8 > :nth-child(4),
  body.tt-v2 .tt-v2-home .hp-cities__grid.is-8 > :nth-child(8){ grid-column:span 2; }
}

/* ================= EMERGENCY ================= */
body.tt-v2 .tt-v2-home .hp-sos{ padding-top:clamp(20px,4vw,40px); padding-bottom:clamp(20px,4vw,40px); }
body.tt-v2 .tt-v2-home .hp-sos__box{ position:relative; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  overflow:hidden; border-radius:var(--tt-r); background:var(--forest); color:var(--bg); }
body.tt-v2 .tt-v2-home .hp-sos__tx{ position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:24px;
  padding:clamp(32px,6vw,80px); }
body.tt-v2 .tt-v2-home .hp-sos__chip{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; padding:8px 16px;
  border:1px solid var(--pop); border-radius:999px; color:#f4a88f; font-weight:600; font-size:14px; }
body.tt-v2 .tt-v2-home .hp-sos__chip .hp-dot{ width:8px; height:8px; color:var(--pop); }
body.tt-v2 .tt-v2-home .hp-sos h2{ margin:0; font-weight:500; font-size:clamp(44px,5.6vw,84px); line-height:.94; letter-spacing:-.05em; text-wrap:balance; }
body.tt-v2 .tt-v2-home .hp-sos h2 span{ color:var(--lime); }
body.tt-v2 .tt-v2-home .hp-sos p{ margin:0; max-width:460px; font-size:18px; line-height:1.55; color:rgba(242,238,228,.78); text-wrap:pretty; }
body.tt-v2 .tt-v2-home .hp-sos__cta{ align-self:flex-start; display:inline-flex; align-items:center; gap:14px; padding:20px 30px; border-radius:var(--tt-r-btn);
  background:var(--pop); color:var(--surface); font-weight:700; font-size:18px; transition:background .25s, scale .25s; }
body.tt-v2 .tt-v2-home .hp-sos__art{ position:relative; min-height:440px; }
body.tt-v2 .tt-v2-home .hp-sos__word{ position:absolute; right:-2%; top:2%; font-family:var(--disp); font-weight:650; font-size:clamp(150px,20vw,300px);
  letter-spacing:-.07em; line-height:.8; color:transparent; -webkit-text-stroke:2px rgba(224,96,58,.7); user-select:none; transition:translate .4s; }
body.tt-v2 .tt-v2-home .hp-sos__arch{ position:absolute; left:8%; right:8%; top:16%; bottom:0; overflow:hidden; border-radius:240px 240px 0 0;
  transition:transform .4s; }
body.tt-v2 .tt-v2-home .hp-sos__arch img{ position:absolute; inset:-20px; width:calc(100% + 40px); height:calc(100% + 40px); object-fit:cover;
  transition:translate .4s; }
body.tt-v2 .tt-v2-home .hp-sos__float{ position:absolute; left:4%; top:24%; padding:12px 16px; border-radius:var(--tt-r); background:var(--surface); color:var(--ink);
  box-shadow:0 20px 40px -20px rgba(0,0,0,.5); }
body.tt-v2 .tt-v2-home .hp-sos__float .n{ font-family:var(--disp); font-size:22px; font-weight:700; letter-spacing:-.03em; line-height:1.1; }
body.tt-v2 .tt-v2-home .hp-sos__float .l{ font-size:12px; font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
@media (max-width:519px){
  body.tt-v2 .tt-v2-home .hp-sos__art{ min-height:340px; }
}

/* ================= hover ================= */
@media (hover:hover){
  body.tt-v2 .tt-v2-home .hp-search__go:hover{ background:var(--green-ink); color:var(--surface); }
  body.tt-v2 .tt-v2-home .hp-search__go:hover svg{ rotate:-15deg; scale:1.15; }
  body.tt-v2 .tt-v2-home .hp-search .tabs button:not(.active):hover{ background:var(--bg); }
  body.tt-v2 .tt-v2-home .hp-quick a:hover{ background:var(--lime); border-color:var(--lime); color:var(--ink); }
  body.tt-v2 .tt-v2-home .hp-mini:hover{ color:var(--ink); }

  body.tt-v2 .tt-v2-home .hp-cat:hover .hp-cat__img{ scale:1.07; }
  body.tt-v2 .tt-v2-home .hp-cat--clinic:hover .hp-cat__img{ scale:1.05; }
  body.tt-v2 .tt-v2-home .hp-cat--clinic:hover{ border-color:var(--green); color:var(--ink); }
  body.tt-v2 .tt-v2-home .hp-cat:hover .hp-arw{ rotate:-45deg; }
  body.tt-v2 .tt-v2-home .hp-cat--clinic:hover .hp-arw,
  body.tt-v2 .tt-v2-home .hp-cat--home:hover .hp-arw{ background:var(--green); color:var(--surface); }
  body.tt-v2 .tt-v2-home .hp-cat--salon:hover .hp-arw{ background:var(--ink); color:var(--tt-pink); }
  body.tt-v2 .tt-v2-home .hp-cat--sos:hover .hp-arw{ background:var(--forest); }
  body.tt-v2 .tt-v2-home .hp-cat--hotel:hover .hp-arw{ background:var(--lime); color:var(--forest); }
  body.tt-v2 .tt-v2-home .hp-cat--salon:hover,
  body.tt-v2 .tt-v2-home .hp-cat--home:hover{ color:var(--ink); }
  body.tt-v2 .tt-v2-home .hp-cat--sos:hover,
  body.tt-v2 .tt-v2-home .hp-cat--hotel:hover{ color:var(--surface); }

  body.tt-v2 .tt-v2-home .hp-step:hover .hp-step__pic{ width:min(240px,30vw); opacity:1; margin-right:0; }
  body.tt-v2 .tt-v2-home .hp-step:hover .hp-step__n{ color:var(--green); rotate:-12deg; }
  body.tt-v2 .tt-v2-home .hp-step:hover h3{ color:var(--green); translate:8px 0; }

  body.tt-v2 .tt-v2-home .hp-btn-line:hover{ background:var(--ink); color:var(--bg); }
  body.tt-v2 .tt-v2-home .hp-btn-line:hover svg{ translate:4px 0; }
  body.tt-v2 .tt-v2-home .hp-fav:hover{ color:var(--ink); }
  body.tt-v2 .tt-v2-home .hp-fav:hover .hp-fav__card{ box-shadow:var(--tt-shadow); }
  body.tt-v2 .tt-v2-home .hp-fav:hover .hp-fav__img{ scale:1.08; }

  body.tt-v2 .tt-v2-home .hp-city:hover{ background:var(--lime); color:var(--ink); }
  body.tt-v2 .tt-v2-home .hp-city:hover .hp-city__n{ scale:1.15; color:var(--forest); }
  body.tt-v2 .tt-v2-home .hp-city:hover .hp-city__img{ translate:0 0; rotate:-8deg; }
  body.tt-v2 .tt-v2-home .hp-cities__chips a:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); }

  body.tt-v2 .tt-v2-home .hp-sos__cta:hover{ background:#f07048; color:var(--surface); scale:1.04; }
}

/* Hover transitions that move things are cut to an instant change. */
@media (prefers-reduced-motion:reduce){
  body.tt-v2 .tt-v2-home *{ transition-duration:.01ms !important; }
}

/* Obľúbené: the cover is the venue's logo on white, large — no stock photo
   beside a real venue (it would read as the venue's own picture). */
body.tt-v2 .tt-v2-home .hp-fav .hp-fav__pic{ background:#fff; }
body.tt-v2 .tt-v2-home .hp-fav .hp-fav__logo{ inset:0; width:auto; height:auto; padding:28px 32px; border-radius:0; background:transparent;
  display:grid; grid-template:minmax(0,1fr) / minmax(0,1fr); place-items:center; box-shadow:none; font-family:var(--disp); font-weight:500; font-size:64px; letter-spacing:-.04em; color:var(--green); }
/* The logo is sized BY the box, not capped by it. With an `auto` grid row a
   percentage height has nothing to resolve against, so a square logo rendered at
   its own 313px inside the 300px cover and lost its bottom ~60px (CatVet's tail,
   2026-10-07). The 1fr track above gives the row the cover's height. */
body.tt-v2 .tt-v2-home .hp-fav .hp-fav__logo img{ width:100%; height:100%; object-fit:contain; border-radius:0; transition:scale .8s cubic-bezier(.2,.8,.2,1); }
@media (hover:hover){ body.tt-v2 .tt-v2-home .hp-fav:hover .hp-fav__logo img{ scale:1.06; } }