/* TippyTaps — homepage (front-page) page-specific styles.
   Ported from the PAWS-domov-v2 design; every selector scoped under .tt-site.
   Colors translated to theme tokens: design --accent -> --pop, --accent-ink ->
   --pop-ink, design --card -> theme --surface. The shared shell (nav, footer,
   .hero base, section, .btn.acc/.ink/.line, reveal .io/.stg) lives in site.css;
   only page-specific rules are here. */

/* ---------- extra button variant used on this page ---------- */
.tt-site .btn.paper{ background:var(--paper); color:var(--ink); }
@media (hover:hover){ .tt-site .btn.paper:hover{ transform:translateY(-2px); } }

/* ---------- hero extras (base .hero/.tagrow/h1/.lead are in site.css) ---------- */
.tt-site .hero .sub{ display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:end; margin-top:26px; }
.tt-site .hero .sub .lead{ margin-top:0; max-width:44ch; }
.tt-site .hero .miniStats{ display:flex; gap:26px; justify-content:flex-end; }
.tt-site .hero .miniStats .ms .v{ font-family:var(--disp); font-size:32px; font-weight:700; }
.tt-site .hero .miniStats .ms .l{ font-size:13px; color:var(--muted); font-weight:600; margin-top:2px; }

/* ---------- hero search ---------- */
.tt-site .search{ margin-top:38px; background:var(--ink); border-radius:26px; padding:10px; color:var(--paper);
  display:flex; gap:10px; align-items:stretch; flex-wrap:wrap; }
.tt-site .search .tabs{ display:flex; gap:4px; background:rgba(255,255,255,.08); border-radius:18px; padding:5px; }
.tt-site .search .tabs button{ border:0; background:transparent; color:rgba(255,255,255,.6); font-family:var(--sans);
  font-weight:700; font-size:14px; padding:12px 18px; border-radius:14px; transition:.14s; cursor:pointer; }
.tt-site .search .tabs button.active{ background:var(--paper); color:var(--ink); }
.tt-site .search .f{ flex:1; min-width:150px; display:flex; align-items:center; gap:11px;
  background:rgba(255,255,255,.08); border-radius:18px; padding:0 18px; }
.tt-site .search .f svg{ width:19px; height:19px; color:var(--lime); flex:none; }
.tt-site .search .f select{ border:0; background:transparent; color:var(--paper); font-family:var(--sans);
  font-weight:600; font-size:16px; width:100%; padding:16px 0; outline:none; cursor:pointer;
  appearance:none; -webkit-appearance:none; }
.tt-site .search .f select option{ color:#111; }
.tt-site .search .go{ border:0; background:var(--pop); color:#fff; border-radius:18px; padding:0 30px;
  font-family:var(--sans); font-weight:700; font-size:16px; display:inline-flex; align-items:center; gap:10px;
  justify-content:center; transition:.16s; text-decoration:none; }
.tt-site .search .go:hover{ background:#f0714b; }
.tt-site .search .go svg{ width:19px; height:19px; }

/* ---------- quick links ---------- */
.tt-site .quick{ display:flex; gap:9px; flex-wrap:wrap; margin-top:16px; align-items:center; }
.tt-site .quick .lb{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-right:4px; }
.tt-site .quick a{ background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  font-weight:600; font-size:14px; color:var(--ink); text-decoration:none; transition:.14s; }
@media (hover:hover){ .tt-site .quick a:hover{ border-color:var(--ink); transform:translateY(-2px); } }

/* ---------- ticker ---------- */
.tt-site .ticker{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:52px;
  overflow:hidden; background:var(--surface); }
.tt-site .ticker .track{ display:flex; gap:52px; white-space:nowrap; padding:18px 0;
  animation:tt-ticker 32s linear infinite; width:max-content; }
.tt-site .ticker .it{ display:inline-flex; align-items:center; gap:12px; font-family:var(--disp); font-weight:600;
  font-size:20px; color:var(--ink); }
.tt-site .ticker .it svg{ width:20px; height:20px; color:var(--pop); }
@keyframes tt-ticker{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .tt-site .ticker .track{ animation:none; } }

/* ---------- section head (this design's own class) ---------- */
.tt-site .head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:38px; flex-wrap:wrap; }
.tt-site .head h2{ font-family:var(--disp); font-size:46px; font-weight:700; max-width:16ch; letter-spacing:-.02em; line-height:1.02; }
.tt-site .head p{ font-size:17px; color:var(--ink-2); font-weight:500; max-width:38ch; }

/* ---------- categories bento ---------- */
.tt-site .bento{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:16px; }
.tt-site .tile{ border:1px solid var(--line); border-radius:22px; padding:22px; display:flex; flex-direction:column;
  justify-content:space-between; background:var(--surface); position:relative; overflow:hidden;
  text-decoration:none; color:var(--ink); transition:transform .18s, box-shadow .18s, border-color .18s; }
@media (hover:hover){ .tt-site .tile:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -20px rgba(24,39,31,.3); border-color:var(--ink); } }
.tt-site .tile .ic{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; }
.tt-site .tile .ic svg{ width:24px; height:24px; }
.tt-site .tile h3{ font-family:var(--disp); font-size:22px; font-weight:600; }
.tt-site .tile .foot{ display:flex; justify-content:space-between; align-items:flex-end; }
.tt-site .tile .foot p{ margin:0; font-size:13.5px; color:var(--ink-2); font-weight:500; max-width:22ch; }
.tt-site .tile .arw{ width:34px; height:34px; border-radius:50%; border:1.5px solid var(--line); display:grid;
  place-items:center; flex:none; color:var(--ink); transition:.16s; }
@media (hover:hover){ .tt-site .tile:hover .arw{ background:var(--ink); border-color:var(--ink); color:var(--paper); } }
.tt-site .tile .arw svg{ width:16px; height:16px; }
.tt-site .tile .idx{ position:absolute; top:20px; right:22px; font-family:var(--mono); font-size:12px; color:var(--muted); }
.tt-site .t-wide{ grid-column:span 2; }
.tt-site .t-big{ grid-column:span 2; grid-row:span 2; }
.tt-site .t-dark{ background:var(--forest); color:var(--paper); border-color:transparent; }
/* Headings need the colour spelled out: Astra sets one on h1–h6 directly, so the
   tile's own `color:var(--paper)` was never inherited and the dark tile's title
   rendered near-black on forest — invisible. Same trap as the hours table. */
.tt-site .t-dark h3,
.tt-site .t-dark h2{ color:var(--paper); }
.tt-site .t-dark .foot p{ color:rgba(242,238,228,.7); }
.tt-site .t-dark .arw{ border-color:rgba(255,255,255,.25); color:var(--paper); }
.tt-site .t-dark:hover .arw{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.tt-site .t-dark .idx{ color:rgba(242,238,228,.5); }
.tt-site .ic-a{ background:#f6dccf; color:var(--pop-ink); }
.tt-site .ic-g{ background:#d5ece0; color:#1c6b4a; }
.tt-site .ic-l{ background:var(--lime); color:var(--ink); }
.tt-site .ic-i{ background:var(--ink); color:var(--lime); }
.tt-site .t-big h3{ font-size:34px; max-width:12ch; line-height:1.02; }
.tt-site .t-big .lead{ font-size:15px; color:rgba(242,238,228,.78); font-weight:500; max-width:34ch; margin-top:10px; }

/* ---------- how (3 steps) ---------- */
.tt-site .how{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:1px solid var(--line);
  border-radius:24px; overflow:hidden; background:var(--surface); }
.tt-site .stp{ padding:36px 32px; border-right:1px solid var(--line); }
.tt-site .stp:last-child{ border-right:0; }
.tt-site .stp .n{ font-family:var(--disp); font-size:60px; font-weight:700; color:var(--pop); line-height:1; }
.tt-site .stp h3{ font-family:var(--disp); font-size:23px; font-weight:600; margin-top:16px; }
.tt-site .stp p{ font-size:15.5px; color:var(--ink-2); font-weight:500; margin-top:10px; line-height:1.55; }

/* ---------- featured clinics ---------- */
.tt-site .fc{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tt-site .clinic{ display:block; border:1px solid var(--line); border-radius:22px; padding:20px; background:var(--surface);
  text-decoration:none; color:var(--ink); transition:transform .18s, box-shadow .18s, border-color .18s; }
@media (hover:hover){ .tt-site .clinic:hover{ transform:translateY(-4px); box-shadow:0 24px 50px -20px rgba(24,39,31,.3); border-color:var(--ink); } }
.tt-site .clinic .top{ display:flex; gap:14px; align-items:center; }
.tt-site .clinic .th{ width:60px; height:60px; border-radius:16px; display:grid; place-items:center; flex:none;
  overflow:hidden; font-family:var(--disp); font-weight:700; font-size:20px; background:#d5ece0; color:#1c6b4a; }
.tt-site .clinic .th img{ width:100%; height:100%; object-fit:cover; }
.tt-site .clinic .nm{ font-family:var(--disp); font-weight:600; font-size:18px; }
.tt-site .clinic .rt{ display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; margin-top:3px; }
.tt-site .clinic .rt b{ font-weight:800; }
.tt-site .clinic .rt .c{ color:var(--muted); }
.tt-site .clinic .rt .tt-stars svg{ width:14px; height:14px; }
.tt-site .clinic .ad{ display:flex; align-items:center; gap:7px; color:var(--ink-2); font-size:14px; font-weight:500; margin-top:14px; }
.tt-site .clinic .ad svg{ width:15px; height:15px; color:var(--pop); flex:none; }
.tt-site .clinic .bd{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.tt-site .clinic .bd span{ font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:999px; border:1px solid var(--line); }
.tt-site .clinic .bd .sos{ background:#f6dccf; color:var(--pop-ink); border-color:transparent; }
.tt-site .clinic .bd .ver{ background:var(--ink); color:var(--lime); border-color:transparent; }
.tt-site .clinic .bd .home{ background:#eef1fb; color:#4a5aa8; border-color:transparent; }

/* ---------- regions map ---------- */
.tt-site .mapwrap{ border:1px solid var(--line); border-radius:32px; padding:40px; background:var(--surface); }
.tt-site .mtoggle{ display:inline-flex; gap:4px; background:var(--paper); border:1px solid var(--line);
  border-radius:999px; padding:5px; margin-bottom:28px; }
.tt-site .mtoggle button{ border:0; background:transparent; color:var(--ink-2); font-family:var(--sans); font-weight:700;
  font-size:15px; padding:11px 22px; border-radius:999px; display:inline-flex; align-items:center; gap:9px;
  cursor:pointer; transition:.2s; }
.tt-site .mtoggle button svg{ width:18px; height:18px; }
.tt-site .mtoggle button.active{ background:var(--green); color:#fff; box-shadow:0 8px 18px -7px rgba(47,158,112,.5); }
.tt-site .map-grid{ display:grid; grid-template-columns:1.5fr .82fr; gap:36px; align-items:start; }
.tt-site .map-box{ position:relative; min-height:340px; display:flex; align-items:center; justify-content:center; }
.tt-site .map-box svg{ width:100%; height:auto; overflow:visible; }
.tt-site .msel{ font-size:15px; color:var(--ink-2); font-weight:500; margin-bottom:12px; }
.tt-site .msel b{ font-family:var(--disp); color:var(--green); font-size:20px; font-weight:800; }
.tt-site .reg{ fill:rgba(47,158,112,.08); stroke:#fff; stroke-width:1.5; stroke-linejoin:round; cursor:pointer;
  transition:fill .35s ease; }
.tt-site .reg:hover{ fill:rgba(47,158,112,.22); }
.tt-site .reg.sel{ fill:var(--green); filter:drop-shadow(0 10px 22px rgba(47,158,112,.45)); }
.tt-site .rlabel{ font:600 12.5px var(--sans); fill:var(--ink-2); pointer-events:none; transition:.25s; }
.tt-site .rlabel.sel{ fill:#fff; font-weight:700; }
.tt-site .rdot{ fill:var(--pop); transition:.25s; }
.tt-site .rdot.sel{ fill:#fff; }
.tt-site .clist .ct{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin-bottom:14px; }
/* A row is an <a> now, so it needs its own colour and no underline — Astra styles
   links directly and would otherwise paint it default blue. */
.tt-site .crow{ display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:15px; cursor:pointer;
  transition:.18s; border:1px solid transparent; color:var(--ink); text-decoration:none; }
.tt-site .crow:hover{ background:var(--paper); }
.tt-site .crow:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
/* Empty state: no venues published yet, so there is nothing to click. */
.tt-site .crow.is-empty{ cursor:default; color:var(--muted); font-weight:600; }
.tt-site .crow.is-empty:hover{ background:transparent; }
.tt-site .crow.sel{ background:var(--paper); border-color:var(--line); }
.tt-site .crow .cd{ width:9px; height:9px; border-radius:50%; background:var(--green); flex:none; transition:.18s; }
.tt-site .crow.sel .cd{ box-shadow:0 0 0 4px rgba(47,158,112,.18); }
.tt-site .crow .cn{ font-family:var(--disp); font-weight:600; font-size:18px; }
.tt-site .crow .cr{ margin-left:auto; font-size:12.5px; color:var(--muted); font-weight:500; }
.tt-site .crow .cc{ font-family:var(--disp); font-weight:800; font-size:17px; color:var(--green); min-width:46px; text-align:right; }

/* ---------- emergency band ---------- */
.tt-site .emg{ background:var(--pop); color:#fff; border-radius:32px; padding:52px; display:flex; align-items:center;
  gap:32px; flex-wrap:wrap; position:relative; overflow:hidden; }
.tt-site .emg h2{ font-family:var(--disp); font-size:44px; font-weight:700; color:#fff; }
.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 .btn{ 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%; }

/* ---------- entrance flourishes (page-specific; io/stg live in site.css) ---------- */
@media (prefers-reduced-motion:no-preference){
  .tt-site [data-rise]{ opacity:0; transform:translateY(18px);
    animation:tt-rise .85s cubic-bezier(.2,.75,.25,1) both; }
  @keyframes tt-rise{ to{ opacity:1; transform:none; } }
  .tt-site .hero h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:.04em; height:.09em;
    background:var(--pop); border-radius:3px; transform:scaleX(0); transform-origin:left;
    animation:tt-uline .7s .85s cubic-bezier(.2,.75,.25,1) forwards; }
  @keyframes tt-uline{ to{ transform:scaleX(1); } }
  .tt-site .bento.stg.in>*:nth-child(6){ transition-delay:.40s; }
}

/* Fewer than five tiles: drop the 2x2 span and give the grid one column per tile,
   so a country missing a section gets one clean row instead of a hole.

   ⚠️ Dropping the span is only half of it. `.t-big` carries a lead paragraph and a
   CTA sized for the TWO rows it spans in the five-tile layout — 339px of content.
   Left on the fixed 190px row, `.tile{overflow:hidden}` cut it mid-sentence: Czechia
   has no hotels yet, so its home page shipped four tiles and the first one read
   "Najděte tu s nejlepšími recenzemi ve svém…" and stopped (2026-09-15).

   The row has to grow instead — which is the same fix the ≤820px block below already
   makes, for the same reason, in a comment that says so. It was written for the
   breakpoint and not carried to this variant. */
.tt-site .bento--flat{ grid-template-columns:repeat(var(--tt-tiles,3),1fr);
  grid-auto-rows:minmax(190px,auto); }
.tt-site .bento--flat .t-big, .tt-site .bento--flat .t-wide{ grid-column:auto; grid-row:auto; }

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .tt-site .bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:180px; }
  .tt-site .t-big{ grid-column:span 2; grid-row:span 1; }
  /* The rule above resets grid-auto-rows for EVERY bento, flat included, and it
     comes later in the file — so the flat variant loses its growing row right
     where two tiles per line make `.t-big` taller, not shorter. Restate it. */
  .tt-site .bento--flat{ grid-auto-rows:minmax(180px,auto); }
}
@media (max-width:820px){
  .tt-site .hero .sub{ grid-template-columns:1fr; gap:22px; }
  .tt-site .hero .miniStats{ justify-content:flex-start; }
  .tt-site .search{ flex-direction:column; }
  .tt-site .search .go{ padding:16px; }
  .tt-site .search > *{ min-width:0; }
  .tt-site .head h2{ font-size:34px; }
  .tt-site .how, .tt-site .fc, .tt-site .map-grid, .tt-site .bento{ grid-template-columns:1fr; }
  /* Both wide tiles keep `grid-column:span 2` from the desktop rules, and a
     2-col span inside a 1-col grid makes the browser invent a second,
     auto-sized implicit column — that is what turned the single-column mobile
     bento back into a lopsided 102px/220px grid and squeezed the tiles until
     their text was clipped. Reset both spans (missing either one is enough to
     recreate the implicit column), and let a tile grow past the fixed row
     height rather than cut its own content off. */
  .tt-site .t-big, .tt-site .t-wide{ grid-column:auto; grid-row:auto; }
  .tt-site .bento{ grid-auto-rows:minmax(180px,auto); }
  .tt-site .stp{ border-right:0; border-bottom:1px solid var(--line); }
  .tt-site .emg{ padding:32px; }
  .tt-site .emg h2{ font-size:32px; }
  .tt-site .mapwrap{ padding:24px; }
}

/* Four tabs in one row are wider than a 375px phone: "Výcvik psov" ran off the
   card's edge and its min-content pushed the whole search block — and the
   orange "Hľadať" — past the card (browser review, 2026-10-06). Two by two. */
@media (max-width:480px){
  .tt-site .search .tabs{ display:grid; grid-template-columns:repeat(3,1fr); }
  /* Four tabs (production has "Výcvik psov") go two by two; three stay in one
     row — two by two left a lone "Hotely" on staging, which has three. */
  .tt-site .search .tabs:has(> :nth-child(4)){ grid-template-columns:1fr 1fr; }
  .tt-site .search .tabs button{ padding:11px 6px; text-align:center; }
}