/* TippyTaps — shared site shell: nav, footer, buttons, hero, sections, reveal.
   Ported from the PAWS design system. Scoped under body.tt-site so the generic
   class names (.nav, .btn, section, footer) can't collide with Astra/core.
   Primary accent on content pages is terracotta (--pop); green (--green) is
   secondary. (The catalog uses green as its primary — its own tt- classes.) */

/* Content pages read --wrap-text, not --wrap: their headings and leads cap
   themselves in `ch`, so a catalog-width container just parks dead space to the
   right of every one of them. The catalog's own .tt-wrap (tippytaps.css) keeps
   --wrap, where the extra width buys a third card column. See the token comment
   in tippytaps.css for the measurements. */
.tt-site .wrap{ max-width:var(--wrap-text,1320px); margin:0 auto; padding:0 var(--wrap-pad,26px); }

/* The nav and the footer live outside the page template, so they cannot read the
   container it chose — but they must line up with it: the logo sitting inboard of
   the first card (or outboard of the hero) is the seam people notice. They follow
   --wrap-text with everything else by default, and widen only on the catalog
   views, which are the pages whose content is genuinely 1680 wide. The
   `tt-catalog-view` body class comes from tt_is_catalog_view() (inc/enqueue.php),
   the same test that gives those pages Astra's page-builder layout. */
.tt-site.tt-catalog-view .nav .wrap,
.tt-site.tt-catalog-view .site-footer .wrap{ max-width:var(--wrap,1680px); }
.tt-site .mono{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); }

/* ---- buttons ---- */
.tt-site .btn{ border:0; border-radius:999px; padding:14px 24px; font-family:var(--sans); font-size:15px;
  font-weight:700; display:inline-flex; align-items:center; gap:9px; justify-content:center;
  transition:transform .16s, background .16s, color .16s; text-decoration:none; cursor:pointer; }
.tt-site .btn svg{ width:17px; height:17px; }
.tt-site .btn.acc{ background:var(--pop); color:#fff; }
@media (hover:hover){ .tt-site .btn.acc:hover{ background:var(--pop-ink); transform:translateY(-2px); } }
.tt-site .btn.ink{ background:var(--ink); color:var(--paper); }
@media (hover:hover){ .tt-site .btn.ink:hover{ transform:translateY(-2px); } }
.tt-site .btn.line{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.tt-site .btn.line:hover{ background:var(--ink); color:var(--paper); }
.tt-site .btn.lg{ padding:16px 28px; font-size:16px; }

/* ---- nav ---- */
.tt-site .nav{ position:sticky; top:0; z-index:60; background:rgba(242,238,228,.8);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line-2); }
.tt-site .nav .row{ display:flex; align-items:center; gap:22px; height:74px; }
/* The header brand is the wordmark image (assets/brand/tippytaps-logo-light-1024.png),
   so the old text sizing and ellipsis are gone — there is no text to shrink. `flex:none`
   because a flex item with min-width:0 would happily squash the logo on a narrow row. */
.tt-site .brand{ display:flex; align-items:center; gap:11px; color:var(--ink); flex:none; }
.tt-site .brand-logo{ height:40px; width:auto; display:block; }
/* Header and footer are the same wordmark image in two colourways (light on --bg,
   dark on --ink), so there is no brand text left to size in either. */
.tt-site .nav .links{ display:flex; gap:2px; margin-left:8px; }
.tt-site .nav .links a{ padding:9px 15px; border-radius:999px; font-weight:600; font-size:15px;
  color:var(--ink-2); transition:.14s; }
.tt-site .nav .links a:hover{ background:rgba(24,39,31,.06); color:var(--ink); }
.tt-site .nav .links a.active{ color:var(--ink); background:rgba(24,39,31,.07); }
.tt-site .nav .spacer{ flex:1; }
.tt-site .nav .sos{ display:inline-flex; align-items:center; gap:9px; background:var(--ink);
  color:var(--paper); border-radius:999px; padding:11px 18px; font-weight:700; font-size:14.5px;
  flex:none; white-space:nowrap; }
.tt-site .nav .sos .d{ width:9px; height:9px; border-radius:50%; background:var(--pop); animation:tt-blink 1.6s infinite; }
/* Account entry. Quieter than the SOS pill on purpose: an emergency is the one
   thing this header should shout about, and a login link competing with it would
   be the wrong order of urgency. Outlined, not filled. */
.tt-site .nav-account{ display:inline-flex; align-items:center; gap:8px; flex:none;
  border:1.5px solid var(--line-strong); border-radius:999px; padding:8px 15px 8px 12px;
  font-weight:700; font-size:14.5px; color:var(--ink); white-space:nowrap; transition:.14s; }
@media (hover:hover){ .tt-site .nav-account:hover{ background:rgba(24,39,31,.06); border-color:var(--ink); } }
.tt-site .nav-account__ic{ width:17px; height:17px; flex:none; }
/* The initial, for a signed-in visitor: a display name is as long as the person
   is, and this row is measured in pixels. */
.tt-site .nav-account__av{ width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--forest); color:var(--paper); display:grid; place-items:center;
  font-size:11.5px; font-weight:800; }
/* The burger copy. Hidden above the breakpoint, shown inside the open menu below
   it — the two are never visible at once. */
.tt-site .nav-account--menu{ display:none; }
@keyframes tt-blink{ 0%,100%{opacity:1} 50%{opacity:.25} }
/* Hamburger — hidden on desktop, shown ≤820px (see media query below). */
.tt-site .nav-burger{ display:none; }

/* ---- hero + sections ---- */
.tt-site .hero{ padding:64px 0 20px; }
.tt-site .hero .tagrow{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.tt-site .hero .tagrow .ln{ flex:1; height:1px; background:var(--line); }
.tt-site .hero h1{ font-family:var(--disp); font-size:66px; font-weight:700; max-width:15ch;
  letter-spacing:-.02em; line-height:1.03; }
.tt-site .hero h1 em{ font-style:normal; color:var(--pop); position:relative; }
.tt-site .hero .lead{ font-size:19px; color:var(--ink-2); font-weight:500; max-width:52ch; margin-top:22px; }
.tt-site section{ padding:64px 0; }
.tt-site .shead{ margin-bottom:26px; }
.tt-site .shead h2{ font-family:var(--disp); font-size:40px; font-weight:700; max-width:18ch; letter-spacing:-.02em; }
.tt-site .shead p{ font-size:17px; color:var(--ink-2); font-weight:500; max-width:44ch; margin-top:10px; }

/* ---- footer ---- */
.tt-site .site-footer{ background:var(--ink); color:rgba(242,238,228,.7); margin-top:12px; }
.tt-site .site-footer .cols{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding:64px 0 36px; }
.tt-site .site-footer .brand{ color:var(--paper); }

.tt-site .site-footer .about{ font-size:15px; margin:16px 0 0; max-width:32ch; line-height:1.55; color:rgba(242,238,228,.6); }
.tt-site .site-footer h4{ font-family:var(--disp); color:var(--paper); font-size:16px; font-weight:600; margin:0 0 16px; }
.tt-site .site-footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
/* An explicit colour, not inheritance: Astra styles `a` directly, so the footer's
   own rgba() never reached its links and they rendered in the default link blue. */
.tt-site .site-footer ul a{ font-size:15px; font-weight:500; transition:.14s; color:rgba(242,238,228,.72); }
.tt-site .site-footer ul a:hover{ color:var(--paper); }
/* ---- cross-link to TopLekári ----
   A footer column, styled to sit beside the others rather than above them. The
   mark keeps TopLekári's blue: at 26px the colour is the only thing that says
   "different site", and our own green would read as one more section of this one. */
/* `!important` on the colour and the tile, for the reason documented at length on
   `.tt-catsearch-in` in archive.css: Astra prints its link and form styling as an
   INLINE <style> in <head>, which comes after every enqueued file in document
   order and therefore wins at equal specificity. Raising specificity does not
   help when the conflict is source order. On TopLekári the same collision turned
   this link blue and stripped the tile's background entirely. */
/* Lives in the bottom bar now, so no column offset — the bar is a flex row with
   `space-between` and a third child centres itself. */
.tt-site .site-footer .tt-cross{ display:inline-flex !important; align-items:center; gap:9px;
  text-decoration:none !important; color:rgba(242,238,228,.82) !important; }
.tt-site .site-footer .tt-cross:hover{ color:var(--paper) !important; }
/* 32px tile, radius 8 — matching TopLekári's own `.tl-footer__logo-icon`, so the
   two wordmarks in this footer are the same size on both sites. */
.tt-site .site-footer .tt-cross__mark{ width:32px !important; height:32px !important;
  border-radius:8px; flex:none; background:#1d4ed8 !important;
  display:grid; place-items:center; transition:.14s; }
.tt-site .site-footer .tt-cross__mark svg{ display:block; }
/* Just the brand, no tagline (sQuem, 2026-08-12) — a line of Slovak marketing copy
   under a footer link reads as filler. Written as the brand styles itself,
   "TopLekári.sk" and not the lowercase hostname: this is a name, not a URL bar.

   18px/800/-0.5px is TopLekári's `.tl-footer__logo-text` verbatim, and the same
   size their footer now gives our name. Both cross-links are set identically on
   both sites; only the colours differ. Bigger than the 13.5px bottom bar around
   it on purpose: this is a logo sitting in a row of fine print. */
.tt-site .site-footer .tt-cross__txt{ font-size:18px; font-weight:800; line-height:1.2;
  letter-spacing:-.5px; color:#fff !important; transition:.14s; }
/* !important on the accent too, and the hover deliberately leaves it alone: the
   parent link sets its colour with !important (Astra collision, see above), so a
   plain declaration here loses and "Lekári" comes out white — which is exactly
   the flat wordmark this change exists to avoid. */
.tt-site .site-footer .tt-cross__accent{ color:#93c5fd !important; }
.tt-site .site-footer .tt-cross:hover .tt-cross__txt{ color:#fff !important; }
@media (hover:hover){ .tt-site .site-footer .tt-cross:hover .tt-cross__mark{ transform:translateY(-1px); } }

.tt-site .site-footer .bottom{ border-top:1px solid rgba(255,255,255,.1); padding:22px 0; font-size:13.5px;
  font-weight:500; color:rgba(242,238,228,.5); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.tt-site .site-footer .bottom__id{ display:flex; align-items:center; gap:14px; }
/* Prepínač krajiny: dve písmená, oddelené bodkou. Aktuálna krajina je svetlejšia
   a nie je odkaz — pozri footer.php. */
.tt-site .site-footer .tt-cswitch{ display:inline-flex; align-items:center; gap:8px; }
.tt-site .site-footer .tt-cswitch__i{ font-size:12px; font-weight:700; letter-spacing:.06em;
  text-decoration:none; text-transform:uppercase; }
.tt-site .site-footer .tt-cswitch__i+.tt-cswitch__i::before{ content:"·"; margin-right:8px;
  font-weight:400; letter-spacing:0; color:rgba(242,238,228,.35); }
.tt-site .site-footer .tt-cswitch__i.is-current{ color:var(--paper); }
/* Fryzur.com: jedno písmeno pred právnym riadkom. Vyzerá ako súčasť riadku —
   rovnaká veľkosť aj farba, len tučnejšie, aby sa dalo kliknúť naň. */
.tt-site .site-footer .tt-fz{ font-weight:800; letter-spacing:.04em; text-decoration:none;
  margin-right:9px; }
.tt-site .site-footer .bottom a{ color:rgba(242,238,228,.62); }
.tt-site .site-footer .bottom a:hover{ color:var(--paper); }

/* ---- reveal-on-scroll (tt-ui.js) ----
   Every hidden state below is behind `.tt-js`, the class header.php sets from an
   inline script. Without it the content simply shows: JS un-hides these blocks, so
   hiding them for a visitor whose JS never ran means hiding them for good. */
@media (prefers-reduced-motion:no-preference){
  .tt-js .tt-site .io{ opacity:0; transform:translateY(26px);
    transition:opacity .8s cubic-bezier(.2,.75,.25,1), transform .8s cubic-bezier(.2,.75,.25,1); }
  .tt-js .tt-site .io.in{ opacity:1; transform:none; }
  .tt-js .tt-site .stg>*{ opacity:0; transform:translateY(22px);
    transition:opacity .6s cubic-bezier(.2,.75,.25,1), transform .6s cubic-bezier(.2,.75,.25,1); }
  .tt-js .tt-site .stg.in>*{ opacity:1; transform:none; }
  .tt-js .tt-site .stg.in>*:nth-child(2){ transition-delay:.08s } .tt-js .tt-site .stg.in>*:nth-child(3){ transition-delay:.16s }
  .tt-js .tt-site .stg.in>*:nth-child(4){ transition-delay:.24s } .tt-js .tt-site .stg.in>*:nth-child(5){ transition-delay:.32s }
}
/* Phones scroll fast: at .8s with a stagger, a flick showed pale half-faded cards
   and gaps that read as "still loading" (browser review, 2026-10-06). Shorter,
   smaller, almost no stagger. */
@media (prefers-reduced-motion:no-preference) and (max-width:900px){
  .tt-js .tt-site .io,
  .tt-js .tt-site .stg>*{ transform:translateY(10px); transition-duration:.35s; }
  .tt-js .tt-site .io.in,
  .tt-js .tt-site .stg.in>*{ transform:none; }
  .tt-js .tt-site .stg.in>*:nth-child(n){ transition-delay:0s; }
}

@media (max-width:1000px){ .tt-site .hero h1{ font-size:50px; } }
/*
 * The nav collapses EARLIER than the rest of the layout, and has its own
 * breakpoint for that reason.
 *
 * It used to fold at 820px together with the hero and the footer. Then the
 * catalog split into three sections (2026-08-12) and the row went from four links
 * to six — `Kliniky · Salóny · Hotely · O nás · Pre partnerov · Kontakt` — which
 * with the wordmark and the SOS pill needs ~940px. Between 820 and 940 the links
 * would have wrapped under the brand or pushed the pill off the edge.
 *
 * The row is back to three links (2026-08-14) and would fit at 820 again, but the
 * breakpoint stays at 980: the burger there is early, not broken, and 820 is the
 * number the hero and footer were measured at, not the nav.
 *
 * Only the nav rules moved up; the hero and footer still fold at 820, where they
 * were measured to need it. Two breakpoints, because they are two problems.
 */
@media (max-width:980px){
  /* Hamburger replaces the inline links. */
  .tt-site .nav-burger{ display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; padding:0; border:0; border-radius:12px; cursor:pointer;
    background:rgba(24,39,31,.06); }
  .tt-site .nav-burger span{ display:block; width:20px; height:2px; margin:0 auto; border-radius:2px;
    background:var(--ink); transition:transform .2s ease, opacity .2s ease; }
  .tt-site .nav.open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .tt-site .nav.open .nav-burger span:nth-child(2){ opacity:0; }
  .tt-site .nav.open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .tt-site .nav .links{ display:none; position:absolute; top:100%; left:0; right:0; z-index:59;
    flex-direction:column; gap:2px; margin:0; padding:10px 20px 18px; background:var(--paper);
    border-bottom:1px solid rgba(24,39,31,.1); box-shadow:0 14px 26px rgba(24,39,31,.10); }
  .tt-site .nav.open .links{ display:flex; }
  .tt-site .nav .links a{ padding:12px 14px; font-size:16px; }
  /* Burger sits at the right edge, after the SOS pill (DOM order puts it right
     after the brand — that is for the tab order, not the layout). */
  .tt-site .nav-burger{ order:3; flex:none; }
  /* The row has no room for a fourth item here (see the 560px block below), so
     the account link moves into the menu and the row's copy disappears. */
  .tt-site .nav-account{ display:none; }
  /* ⚠️ Selector matches `.nav .links a` above, which sets padding and size for
     every link in the open menu. Same specificity would let source order decide;
     this one is written to win on its own terms, not on where it happens to sit. */
  .tt-site .nav .links a.nav-account--menu{
    display:block; margin-top:8px; padding:14px 14px 4px; font-size:16px;
    border-top:1px solid var(--line); border-radius:0; font-weight:700; color:var(--ink);
  }
  .tt-site .nav .links a.nav-account--menu:hover{ background:transparent; }
}

@media (max-width:820px){
  .tt-site .hero{ padding:44px 0 10px; } .tt-site .hero h1{ font-size:38px; }
  .tt-site .shead h2{ font-size:30px; }
  /* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, and the "about"
     column's min-content (255px) blew the grid past the viewport. */
  .tt-site .site-footer .cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* Phones. The nav row carries brand + SOS + burger; at 390px the design's
   desktop sizes need ~500px of the 338px available, which is what pushed the
   whole document into horizontal scroll on every page. */
@media (max-width:560px){
  .tt-site .nav .row{ gap:12px; }
  /* <picture> swapped the file for the square mark; height IS the width here. */
  /* Scoped to .nav: below 560px the header <picture> swaps to the square compact
     mark, which needs a square box. The footer keeps the full wordmark — the same
     rule unscoped squashed 4.5:1 artwork into 34x34. */
  .tt-site .nav .brand-logo{ height:34px; width:34px; }
  .tt-site .site-footer .brand-logo{ height:34px; }
  .tt-site .nav .sos{ font-size:13px; padding:9px 14px; gap:7px; }
  .tt-site .site-footer .cols{ grid-template-columns:1fr; gap:28px; padding:44px 0 28px; }
}

/* ---- Astra's "scroll to top" button ----
   Astra renders #ast-scroll-top itself (a 31px blue square with a 2px radius) and
   it has nothing to do with this design. Restyled rather than hidden: the button is
   useful on the long venue pages. Not scoped under .tt-site — Astra prints it as a
   sibling of the content, outside our shell.

   The chevron is a background SVG, not CSS borders: the border-triangle version
   rendered as a stray diagonal tick because Astra styles this element's ::before
   itself (a dashicons glyph) and the two fought. A background image cannot be
   half-overridden. */
/* ⚠️ `html body` in front on purpose (2026-10-06). For GUESTS, LiteSpeed combines
   the stylesheets and Astra's own `#ast-scroll-top{background-color:var(--ast-global-
   color-0)}` lands after this rule — same specificity, so the later one wins and
   guests saw the blue square while signed-in visitors (no CSS optimisation) saw
   ours. Extra weight makes the order irrelevant. */
html body #ast-scroll-top{
  width:44px; height:44px; border-radius:50%;
  background-color:var(--forest);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F2EEE4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:18px 18px;
  box-shadow:0 8px 22px rgba(24,39,31,.22);
  border:1px solid rgba(255,255,255,.14);
  transition:background-color .18s, transform .18s;
}
html body #ast-scroll-top:hover{ background-color:var(--green); transform:translateY(-2px); }
/* On phones it covered card buttons, the footer logo, body text and the booking
   bar (browser review, 2026-10-06). iOS scrolls to the top with a tap on the
   status bar, and Android pages this long are scrolled with a fling. */
@media (max-width:900px){ html body #ast-scroll-top{ display:none !important; } }
/* Kill Astra's own glyph, whichever way it renders it. */
#ast-scroll-top::before,
#ast-scroll-top::after{ content:none; display:none; }
#ast-scroll-top .ast-icon,
#ast-scroll-top span,
#ast-scroll-top svg{ display:none; }
@media (max-width:560px){
  #ast-scroll-top{ width:40px; height:40px; background-size:16px 16px; }
}


/*
 * ⚠️ iOS SAFARI ZOOMS INTO ANY FIELD UNDER 16px, and does not zoom back
 * (reported 2026-10-06 on an iPhone 16 Plus as "the site scrolls sideways").
 * The page itself fits — measured at 430px on every page type, nothing wider
 * than the screen — but tapping the catalog sort (14px), a contact field
 * (15.5px) or the booking card (15px) zoomed the page in, and a zoomed page
 * pans in every direction. 16px is the threshold, so phones get exactly that.
 *
 * `!important` on purpose: the fields are styled in five files at up to 0,3,0
 * (`.tt-site .tt-book .tt-book__inp`), and the rule has to win over all of them
 * now and over the next one somebody writes.
 */
@media (max-width:900px){
  body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
  body select,
  body textarea{ font-size:16px !important; }
}

/*
 * ---- breadcrumbs, one look everywhere (2026-10-06) ----
 * There were three: the catalog had NO crumb styles at all (they lived in
 * landing.css and single-clinic.css, which the catalog does not load), so its
 * "Domov" was Astra's default blue; venue pages coloured one link green and left
 * the rest blue. Defined once here; the page files keep only their margins.
 * On a phone the trail stays on one line and the last item gives way.
 */
.tt-site .crumbs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:500; }
.tt-site .crumbs a,
.tt-site .crumbs a.link{ color:var(--muted); font-weight:600; text-decoration:none; }
.tt-site .crumbs a:hover{ color:var(--green-ink); }
.tt-site .crumbs .sep{ opacity:.4; }
/* The catalog's kicker under it is the same mono caps — without a gap the two
   read as one two-line caption. */
.tt-site .crumbs + .tt-head{ margin-top:18px; }
@media (max-width:900px){
  .tt-site .crumbs{ flex-wrap:nowrap; white-space:nowrap; overflow:hidden; }
  .tt-site .crumbs > :last-child{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
}

/* ---- 404 (404.php) ----
   "4 [dog] 4": text and the ways in on the left, the number on the right with a
   round dog photo for the zero (Roman, 2026-10-08). Replaced Astra's white box
   and its WordPress search, which searched posts, not venues. */
.tt-site .tt-404{ padding:clamp(28px,5vw,64px) 0 0; }
.tt-site .tt-404__card{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px 40px;
  padding:clamp(32px,5vw,64px) clamp(20px,5vw,72px); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.tt-site .tt-404__txt{ display:grid; gap:14px; justify-items:start; min-width:0; }
.tt-site .tt-404 h1{ margin:0; font-family:var(--disp); font-weight:600; font-size:clamp(30px,4.2vw,52px); letter-spacing:-.03em; line-height:1.05; max-width:16ch; text-wrap:balance; }
.tt-site .tt-404__lead{ margin:0; color:var(--muted); font-size:18px; }
.tt-site .tt-404__ways{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.tt-site .tt-404__go{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:999px; text-decoration:none;
  border:1.5px solid var(--line-strong); color:var(--ink); background:var(--bg); font-weight:700; font-size:15px; transition:background .2s, border-color .2s; }
.tt-site .tt-404__go.is-sos{ background:var(--pop); border-color:var(--pop); color:#fff; }
.tt-site .tt-404__go.is-sos .d{ width:8px; height:8px; border-radius:50%; background:#fff; }
.tt-site .tt-404__num{ display:flex; align-items:center; font-family:var(--disp); font-weight:700; line-height:1;
  font-size:clamp(96px,13vw,190px); letter-spacing:-.05em; color:var(--forest, #153427); }
.tt-site .tt-404__num img{ width:.82em; height:.82em; border-radius:50%; object-fit:cover; border:.035em solid var(--lime, #cfe05a); margin:0 .04em; }
@media (hover:hover){
  .tt-site .tt-404__go:hover{ border-color:var(--ink); }
  .tt-site .tt-404__go.is-sos:hover{ background:#c94e2a; border-color:#c94e2a; }
}
@media (max-width:820px){
  .tt-site .tt-404__card{ grid-template-columns:1fr; text-align:center; }
  .tt-site .tt-404__num{ order:-1; justify-content:center; font-size:clamp(84px,26vw,140px); }
  .tt-site .tt-404__txt{ justify-items:center; }
  .tt-site .tt-404 h1{ margin:0 auto; }
  .tt-site .tt-404__ways{ justify-content:center; }
}
@media (max-width:560px){
  .tt-site .tt-404__ways{ display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .tt-site .tt-404__go{ justify-content:center; }
  .tt-site .tt-404__go.is-sos{ grid-column:1 / -1; }
}

/* "Spýtajte sa AI" under a list (inc/ask-ai.php, Trello #64) */
.tt-ai{ margin:32px 0 0; padding:clamp(30px,4.5vw,52px) clamp(20px,4vw,56px); border-radius:20px; background:#153427; color:#f2eee4;
  display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.tt-ai__kick{ display:inline-flex; align-items:center; gap:8px; color:#cfe05a; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.tt-ai__kick svg{ width:15px; height:15px; }
.tt-ai .tt-ai__q{ margin:0; max-width:24ch; color:#f2eee4; font-family:var(--disp); font-size:clamp(23px,2.6vw,34px); font-weight:600; line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
.tt-ai__q span{ color:#cfe05a; }
.tt-ai__links{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:4px; }
.tt-ai .tt-ai__btn{ position:relative; display:grid; place-items:center; width:58px; height:58px; box-sizing:border-box; border-radius:16px;
  background:rgba(242,238,228,.08); border:1px solid rgba(242,238,228,.16); color:#f2eee4; text-decoration:none;
  transition:transform .25s cubic-bezier(.3,1.6,.5,1), background .2s, border-color .2s; }
.tt-ai .tt-ai__btn:hover, .tt-ai .tt-ai__btn:focus-visible{ transform:translateY(-4px); background:rgba(242,238,228,.16); border-color:#cfe05a; color:#f2eee4; }
.tt-ai .tt-ai__btn:focus-visible{ outline:2px solid #cfe05a; outline-offset:3px; }
.tt-ai__btn > svg{ width:27px; height:27px; }
.tt-ai__spark{ position:absolute; top:9px; right:9px; width:11px; height:11px; color:#cfe05a; }
.tt-ai__spark svg{ display:block; width:100%; height:100%; }
.tt-ai__tip{ position:absolute; top:calc(100% + 8px); left:50%; transform:translate(-50%,-4px); padding:5px 9px; border-radius:8px;
  background:#cfe05a; color:#153427; font-size:12.5px; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:2; }
.tt-ai__btn:hover .tt-ai__tip, .tt-ai__btn:focus-visible .tt-ai__tip{ opacity:1; transform:translate(-50%,0); }
.tt-ai .tt-ai__hint{ margin:0; font-size:14px; color:rgba(242,238,228,.7); }
@media (max-width:560px){
  .tt-ai{ margin-top:24px; gap:16px; }
  .tt-ai .tt-ai__btn{ width:56px; height:56px; }
  .tt-ai__tip{ display:none; }
}
/* Under a list: one compact plate right under the pager, modelled on Skylum's
   (sQuem, 2026-10-29: the 34px plate with a kicker and a hint was "огромный", twice):
   centred question, a row of small square buttons, nothing else. Our colours.
   ⚠️ `.tt-site .tt-ai.tt-ai--list`, not `.tt-ai--list`: `.tt-site section{ padding:64px 0 }`
   (0-1-1) beat the plate's own padding since the block shipped — that 64px top and bottom
   with no side padding is most of why it looked huge. */
.tt-site .tt-ai.tt-ai--list{ box-sizing:border-box; width:100%; margin:28px 0 0; padding:36px 24px; border-radius:18px;
  gap:20px; border:1px solid rgba(242,238,228,.08); }
.tt-site .tt-ai.tt-ai--list .tt-ai__kick,
.tt-site .tt-ai.tt-ai--list .tt-ai__hint{ display:none; }
.tt-site .tt-ai.tt-ai--list .tt-ai__q{ max-width:46ch; font-size:clamp(18px,1.7vw,24px); line-height:1.35; letter-spacing:-.01em; }
.tt-site .tt-ai.tt-ai--list .tt-ai__links{ gap:8px; margin:0; }
.tt-site .tt-ai.tt-ai--list .tt-ai__btn{ width:44px; height:44px; border-radius:11px; }
.tt-site .tt-ai.tt-ai--list .tt-ai__btn > svg{ width:21px; height:21px; }
.tt-site .tt-ai.tt-ai--list .tt-ai__spark{ top:5px; right:5px; width:7px; height:7px; }
@media (max-width:560px){
  .tt-site .tt-ai.tt-ai--list{ padding:24px 18px; gap:14px; }
}
/* Footer copy: the footer is already dark, so the plate becomes a framed band. */
.tt-ai--footer{ margin:0 0 48px; background:rgba(242,238,228,.05); border:1px solid rgba(242,238,228,.14); }