/* TippyTaps — clinic detail (single-tt_clinics).
   Ported from the PAWS design (buildClinicDetail). Every selector is scoped
   under .tt-site so the generic design class names can't collide. Tokens come
   from tippytaps.css :root — not redefined here.

   Accent: this page is part of the green-primary clinic catalog family and
   reuses the green clinic-card for "Podobné kliniky", so --green stays primary
   (as in the design); terracotta (--pop) keeps its secondary role (avatars,
   map pin, part-chip hover). --font -> --sans, --shadow -> its literal value,
   --accent(-ink) -> --green(-ink); --accent-soft already exists. */

.tt-site .clinic-detail{ font-family:var(--sans); color:var(--ink); padding:26px 0 72px; }

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

/* ---- hero ---- */
.tt-site .dhero{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(24,39,31,.02); overflow:hidden; }
/* The decorative `.cover` gradient band is GONE (sQuem, 2026-08-01) — it carried no
   content and pushed the venue's own details below the fold. The `<div class="cover">`
   was removed from both hero templates with it; do not re-add one without asking. */
.tt-site .dhead{ padding:22px 26px 24px; display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap; }
/* 180px and flush with the top — bigger, since dropping the gradient band freed the
   room, and no negative margin because there is nothing left to hang into
   (sQuem, 2026-08-01). */
.tt-site .dhead .logo{ width:180px; height:180px; border-radius:26px; border:6px solid var(--surface);
  margin-top:0; background:#fff; box-shadow:0 1px 0 rgba(24,39,31,.02); overflow:hidden;
  flex:none; display:grid; place-items:center; font-family:var(--disp); font-weight:700;
  color:var(--green-ink); font-size:44px; }
/* `contain` + padding, like Toplekari: a wide logo in a square box must never be
   cropped — with `cover` the AniCura VetPoint logo showed as a middle strip. */
.tt-site .dhead .logo img{ width:100%; height:100%; object-fit:contain; padding:10px; }
.tt-site .dinfo{ flex:1; min-width:240px; }
.tt-site .dinfo h1{ margin:0; font-family:var(--disp); font-size:34px; font-weight:700; letter-spacing:-.03em; line-height:1.05; }
.tt-site .dinfo .rating{ margin-top:6px; }
.tt-site .dinfo .daddr{ color:var(--muted); font-size:15px; font-weight:600; margin-top:10px;
  display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.tt-site .dinfo .daddr svg{ width:15px; height:15px; color:var(--pop); flex:none; }
.tt-site .part-chip{ background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700; text-decoration:none; transition:.12s; }
.tt-site .part-chip:hover{ border-color:var(--pop); color:var(--pop-ink); }
/* Same chip, but it is a fact rather than a destination: a town we have no term
   (and therefore no page) for. No hover, no pointer — see single-tt_clinics.php. */
.tt-site .part-chip.is-plain{ cursor:default; }
.tt-site .part-chip.is-plain:hover{ border-color:var(--line); color:var(--ink); }
.tt-site .dstatus{ margin-top:12px; }
.tt-site .dbadges{ display:flex; gap:8px; flex-wrap:wrap; margin-top:15px; }
.tt-site .dactions{ display:flex; gap:10px; flex-wrap:wrap; }
.tt-site .dactions .btn{ padding:12px 18px; font-size:14px; }
.tt-site .dactions .btn svg{ width:16px; height:16px; }
/* Phones: the row wrapped into buttons of three widths with "Navigovať" alone
   on a second line (browser review, 2026-10-06). Call is the main action and
   gets the full first row; the rest go two per row at equal width, and an odd
   last one fills its row. */
@media (max-width:600px){
  .tt-site .dactions{ gap:8px; }
  .tt-site .dactions > *{ flex:1 1 calc(50% - 4px); }
  .tt-site .dactions .btn{ justify-content:center; }
  .tt-site .dactions .btn.call{ flex-basis:100%; order:-1; }
  .tt-site .dactions .tt-fav{ order:9; }
  .tt-site .dactions .tt-fav > *{ width:100%; justify-content:center; }
}

/* rating row (helper outputs .tt-stars) */
.tt-site .rating{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:600; }
.tt-site .rating b{ font-weight:800; }
.tt-site .rating .rc{ color:var(--muted); font-weight:600; }

/* badges */
.tt-site .badge{ font-size:11.5px; font-weight:800; padding:5px 11px; border-radius:999px;
  display:inline-flex; align-items:center; gap:5px; }
.tt-site .badge svg{ width:13px; height:13px; }
.tt-site .badge.sos{ background:var(--danger-soft); color:var(--danger); }
.tt-site .badge.verified{ background:var(--accent-soft); color:var(--green-ink); }
.tt-site .badge.home{ background:#eef1fb; color:#4a5aa8; }

/* buttons (base .btn comes from site.css) */
.tt-site .btn.call{ background:var(--green); color:#fff; }
@media (hover:hover){ .tt-site .btn.call:hover{ background:var(--green-ink); transform:translateY(-2px); } }
.tt-site .btn.ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line-strong); }
@media (hover:hover){ .tt-site .btn.ghost:hover{ border-color:var(--ink); background:var(--ink); color:var(--bg); transform:translateY(-2px); } }

/* ---- body layout ---- */
.tt-site .dbody{ display:grid; grid-template-columns:1fr 330px; gap:26px; margin-top:26px; align-items:start; }
.tt-site .dmain{ min-width:0; }
.tt-site .block{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:0 1px 0 rgba(24,39,31,.02); margin-bottom:20px; }
/* `.bh` is the same thing as an h2 visually, but not a heading. The venue page
   keeps ONE heading (the h1 = the venue name); its section captions are block
   labels, not an outline of eleven h2s. Both selectors stay so shared parts that
   still use h2 (the doctor page) are untouched. */
.tt-site .block h2,
.tt-site .block .bh{ font-family:var(--disp); font-size:21px; font-weight:600; margin:0 0 16px; letter-spacing:-.02em; }
.tt-site .block h2 .sub,
.tt-site .block .bh .sub{ font-family:var(--sans); font-weight:600; color:var(--muted); font-size:13.5px; }
/* Prose inside a block keeps a reading measure; everything else in the main
   column (chips, the price tables, the team grid, reviews) uses the full width.
   Needed since --wrap went 1200 → 1680: the main column grew to ~1270px and the
   "O nás" paragraph ran ~150 characters per line. Blocks that are not prose must
   NOT inherit this — a price table capped at 78ch would waste the space the
   widening was for. */
.tt-site .block > p,
.tt-site .b-about p,
.tt-site .doc-lines li{ max-width:78ch; }

.tt-site .plainchips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

/* Long chip lists are clamped to a first batch with a "+N" toggle — 54 services
   printed at once is a wall, not information. Hiding is behind `.tt-js`: without
   JS the button cannot open it, so everything shows instead (same rule as .io). */
.tt-js .tt-site .plainchips:not(.is-open) .chip-extra{ display:none; }
/* Neutral, like the list it opens: the toggle is a control, not an accent. */
.tt-site .chip-more{ font-size:13px; font-weight:700; color:var(--ink-2); cursor:pointer;
  background:transparent; border:1px dashed var(--line-strong); padding:6px 11px; border-radius:999px; }
.tt-site .chip-more:hover{ background:var(--surface-2); border-style:solid; }

.tt-site .note{ font-size:12.5px; color:var(--muted); font-weight:600; margin-top:13px;
  display:flex; gap:7px; align-items:flex-start; }
.tt-site .note svg{ width:15px; height:15px; flex:none; margin-top:1px; }

/* O nás prose */
.tt-site .prose{ color:var(--ink-2); font-size:14.5px; line-height:1.6; margin:0; }
.tt-site .prose > *:last-child{ margin-bottom:0; }
.tt-site .prose p{ margin:0 0 12px; }
.tt-site .prose a{ color:var(--green-ink); font-weight:700; }

/* category chips (info-only) */
.tt-site .chip-odb{ font-size:13px; background:var(--accent-soft); color:var(--green-ink);
  border:1px solid rgba(47,158,112,.28); padding:6px 11px; border-radius:999px; font-weight:700;
  display:inline-flex; align-items:center; gap:6px; }
/* Species chips carry an icon; the gap above only shows when one is present. */
.tt-site .chip-odb svg{ flex:none; }

/* ---- cenník accordion ---- */
.tt-site .acc{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.tt-site .acc details{ border-bottom:1px solid var(--line); }
.tt-site .acc details:last-child{ border-bottom:0; }
.tt-site .acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:15px 16px; font-weight:800; font-size:14.5px; background:var(--surface); transition:.12s; }
.tt-site .acc summary::-webkit-details-marker{ display:none; }
.tt-site .acc summary:hover{ background:var(--surface-2); }
.tt-site .acc summary .caret{ width:17px; height:17px; color:var(--muted); transition:transform .18s; flex:none; }
.tt-site .acc details[open] summary .caret{ transform:rotate(90deg); }
.tt-site .acc summary .gname{ flex:1; }
.tt-site .acc summary .gcnt{ color:var(--muted); font-weight:600; font-size:13px; }
.tt-site .acc .items{ padding:2px 16px 14px 44px; }
.tt-site .acc .prow{ display:flex; justify-content:space-between; gap:14px; padding:10px 0;
  font-size:14px; font-weight:600; border-top:1px dashed var(--line); }
.tt-site .acc .prow:first-child{ border-top:0; }
.tt-site .acc .prow .pv{ font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- náš tím ---- */
.tt-site .team{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.tt-site .member{ display:flex; gap:13px; align-items:flex-start; padding:11px; margin:-11px;
  border-radius:14px; transition:.12s; text-decoration:none; color:inherit; }
.tt-site .member:hover{ background:var(--surface-2); }
.tt-site .member .av{ width:56px; height:56px; border-radius:15px; flex:none; display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; color:var(--pop-ink); background:var(--pop-soft); font-size:17px; }
.tt-site .member .nm{ font-family:var(--disp); font-weight:600; font-size:15.5px; }
.tt-site .member .role{ color:var(--green-ink); font-size:13px; font-weight:700; margin-top:3px; }
.tt-site .member .spec{ color:var(--muted); font-size:13px; font-weight:600; margin-top:5px; }

/* ---- hodnotenia ---- */
.tt-site .rev-summary{ display:flex; gap:26px; align-items:center; flex-wrap:wrap;
  padding-bottom:16px; border-bottom:1px solid var(--line); margin-bottom:6px; }
.tt-site .rev-big{ text-align:center; }
.tt-site .rev-big .num{ font-family:var(--disp); font-size:44px; font-weight:700; line-height:1; }
.tt-site .rev-big .rating{ justify-content:center; margin-top:8px; }
.tt-site .rev-big .lbl{ font-size:12.5px; color:var(--muted); font-weight:600; margin-top:6px; }
/* The two source rows share ONE grid, so the label column sizes itself to the widest
   badge and both bars still start on the same line. It used to be `width:98px` on the
   label, measured against "TippyTaps" — and staging, whose site name is the domain,
   pushed "staging.tippytaps.sk" straight under the bar. A fixed column that fits one
   particular string is a bug waiting for a longer one; `display:contents` lets the
   rows hand their three cells to the grid and the first column measure itself. */
.tt-site .rev-break{ display:grid; grid-template-columns:auto minmax(60px,1fr) auto;
  gap:10px 11px; align-items:center; flex:1; min-width:210px; font-size:13.5px; }
.tt-site .rev-break .srcrow{ display:contents; }
/* Both badges fill the label column, so their pills are the same width and their right
   edges line up instead of ending ragged (sQuem, 2026-08-05: "чтобы оно ровненько было").
   The column is still `auto`, i.e. as wide as the longer of the two. */
.tt-site .rev-break .srcrow .snm{ display:flex; align-items:center; gap:6px; font-weight:700; min-width:0; }
.tt-site .rev-break .srcrow .snm .srcbadge{ width:100%; justify-content:center; }
.tt-site .rev-break .bar{ height:7px; border-radius:99px; background:var(--line); overflow:hidden; }
.tt-site .rev-break .bar span{ display:block; height:100%; background:var(--green); border-radius:99px; }
.tt-site .rev-break .val{ color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* The badge never wraps mid-word and never grows past the card: a site name long
   enough to do that gets an ellipsis instead of pushing the bar off the row. */
.tt-site .srcbadge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800;
  padding:3px 8px; border-radius:8px; white-space:nowrap; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; }
.tt-site .srcbadge.paws{ background:var(--accent-soft); color:var(--green-ink); }
.tt-site .srcbadge.paws svg{ width:13px; height:13px; }
.tt-site .srcbadge.google{ background:var(--surface); border:1px solid var(--line-strong); color:#5f6368; }
.tt-site .srcbadge .g{ width:13px; height:13px; }
.tt-site .rev-list{ margin-top:4px; }
.tt-site .review{ padding:16px 0; border-bottom:1px solid var(--line); }
.tt-site .review:last-child{ border-bottom:0; }
.tt-site .review .rtop{ display:flex; align-items:center; gap:11px; }
.tt-site .review .rav{ width:40px; height:40px; border-radius:50%; background:var(--pop-soft);
  display:grid; place-items:center; font-weight:800; color:var(--pop-ink); font-size:15px; flex:none; }
.tt-site .review .rnm{ font-weight:800; font-size:14.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tt-site .review .rating{ margin-top:2px; }
.tt-site .review .rdate{ color:var(--muted); font-size:12.5px; font-weight:600; margin-left:auto; }
.tt-site .review .rtext{ font-size:14px; color:var(--ink-2); margin-top:9px; line-height:1.55; }

/* ---- sidebar ---- */
.tt-site .dside{ position:sticky; top:86px; align-self:start; }
.tt-site .aside-block{ position:static; }
/* border:0 first, then just the divider we want: Astra styles every table with a
   full grid (border-right on td, border-top/left on the table), so overriding only
   border-bottom left the hours boxed in like a spreadsheet. */
.tt-site table.hours{ width:100%; border:0; border-collapse:collapse; font-size:14.5px; }
.tt-site table.hours td{ border:0; padding:11px 4px; border-bottom:1px solid var(--line); }
.tt-site table.hours tr:last-child td{ border-bottom:0; }
.tt-site table.hours .day{ color:var(--muted); font-weight:600; }
.tt-site table.hours tr.today td{ font-weight:800; color:var(--green-ink); }
.tt-site table.hours tr.today .day::after{ content:" · dnes"; font-weight:700; color:var(--green); }
.tt-site table.hours .closed{ color:var(--muted); font-weight:600; }
/* No consulting hours but the clinic is on 24/7 duty — terracotta, the emergency
   accent, so it does not read as "closed". */
.tt-site table.hours .sos-cell{ color:var(--pop-ink); font-weight:700; }

/* Google reviewer avatar: their profile photo when Google sends one (showing it is
   part of the attribution their terms ask for), initials otherwise. */
.tt-site .rev-list .rav.has-photo{ padding:0; overflow:hidden; }
.tt-site .rev-list .rav img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; }
.tt-site .rev-list a.srcbadge{ text-decoration:none; }
.tt-site .rev-list a.srcbadge:hover{ text-decoration:underline; }

.tt-site .map{ height:200px; border-radius:var(--radius-sm); position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% -10%,rgba(47,158,112,.10),transparent 60%),
    repeating-linear-gradient(0deg,rgba(24,39,31,.05),rgba(24,39,31,.05) 1px,transparent 1px,transparent 28px),
    repeating-linear-gradient(90deg,rgba(24,39,31,.05),rgba(24,39,31,.05) 1px,transparent 1px,transparent 28px),
    var(--surface-2); }
.tt-site .map .pin{ position:absolute; top:50%; left:50%; transform:translate(-50%,-100%); }
.tt-site .map .pin svg{ width:38px; height:38px; color:var(--pop); filter:drop-shadow(0 4px 6px rgba(0,0,0,.22)); }
/* Real Google embed: taller than the decorative placeholder, no gradient behind it. */
.tt-site .map.is-embed{ height:auto; background:none; }
.tt-site .map.is-embed iframe{ display:block; width:100%; height:260px; border:0; }

/* ---- pieces the design uses on the doctor page (buildSpecDetail) ----
   The hero portrait is a rounded SQUARE, not a circle (sQuem, 2026-08-01). A circle
   crops a head-and-shoulders photo at the shoulders and cuts the ears off a wide
   face; the square keeps the framing the photo was prepared with. Half of VetLINE's
   vets are photographed holding a patient, and a circle amputated the animal. */
.tt-site .dhead .logo.portrait{ border-radius:var(--radius); }
/* `cover` and no padding — the opposite of the clinic logo above it. A logo must not
   be cropped, a portrait must fill its box: `contain` + 10px padding left a face
   floating in a white square. */
.tt-site .dhead .logo.portrait img{ border-radius:calc(var(--radius) - 6px); padding:0;
  object-fit:cover; width:100%; height:100%; display:block; }
.tt-site .subrole{ color:var(--green-ink); font-weight:700; font-size:15px; margin-top:2px; }

/* "Kde ordinuje" — one row per clinic. */
.tt-site .ordi{ display:grid; gap:12px; }
.tt-site .ordi .oc{ display:flex; gap:14px; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; background:var(--surface); }
.tt-site .ordi .on{ font-family:var(--disp); font-weight:700; font-size:17px; color:var(--ink); text-decoration:none; }
.tt-site .ordi .on:hover{ color:var(--green-ink); }
.tt-site .ordi .oa,
.tt-site .ordi .oh{ display:flex; align-items:center; gap:6px; color:var(--muted); font-size:13.5px; margin-top:4px; }
.tt-site .ordi .oa svg,
.tt-site .ordi .oh svg{ width:14px; height:14px; flex:none; }

/* Aside: Vzdelanie a prax. */
.tt-site .eduline{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:10px; padding:9px 0;
  border-bottom:1px solid var(--line); font-size:14px; }
.tt-site .eduline:last-of-type{ border-bottom:0; }
.tt-site .eduline .k{ color:var(--muted); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.03em; }
.tt-site .langpills{ display:flex; flex-wrap:wrap; gap:6px; }
.tt-site .langpills .lp{ background:var(--surface-2); border:1px solid var(--line); border-radius:999px;
  padding:3px 9px; font-size:12.5px; font-weight:600; }

/* Neutral chip for services / species (the design's .chip-svc). */
.tt-site .chip-svc{ display:inline-flex; align-items:center; gap:6px; font-size:13px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; font-weight:600; color:var(--ink-2); }
.tt-site .chip-svc svg{ flex:none; }

/* Species: the neutral chip with the fill removed. Built on .chip-svc and placed
   AFTER it on purpose — as a modifier of .chip-odb it lost the colour fight to
   equal specificity earlier in the file and kept rendering green. */
.tt-site .chip-animal{ background:transparent; }

/* ---- reviews: source tabs, replies, submit form ---- */
.tt-site .rev-tabs{ display:flex; gap:8px; margin:16px 0 4px; flex-wrap:wrap; }
.tt-site .rev-tabs button{ border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:7px 14px; font:inherit; font-size:13px; font-weight:700; cursor:pointer; }
.tt-site .rev-tabs button.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.tt-site .reply{ margin:10px 0 0 46px; padding:12px 14px; background:var(--surface-2);
  border-left:3px solid var(--accent); border-radius:0 var(--radius-sm) var(--radius-sm) 0; }
.tt-site .reply .rlead{ display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  color:var(--green-ink); margin-bottom:4px; }
.tt-site .reply .rlead svg{ width:14px; height:14px; }

.tt-site .rev-toggle{ margin-top:16px; }
.tt-site .rev-form{ margin-top:16px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); display:grid; gap:14px; }
/* ⚠️ `display:grid` above is 0,2,0 and the browser's own `[hidden]{display:none}`
   is 0,1,0, so the author rule wins and the form was open permanently — the
   "Pridať hodnotenie" button toggled an attribute nothing was listening to
   (reported 2026-10-01). Exactly the trap the pet photo's paw hit: two places
   deciding one thing. Stated once, at a weight that beats the grid, so the
   attribute remains the single source of truth. */
.tt-site .rev-form[hidden]{ display:none; }
.tt-site .rev-form label{ display:grid; gap:5px; font-size:13px; font-weight:700; color:var(--muted); }
.tt-site .rev-form input[type=text],
.tt-site .rev-form input[type=email],
.tt-site .rev-form textarea{ font:inherit; font-size:14.5px; font-weight:500; color:var(--ink);
  border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:10px 12px;
  background:var(--surface); width:100%; }
.tt-site .rev-form input:focus,
.tt-site .rev-form textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.tt-site .rev-form .rf-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tt-site .rev-form .rf-trap{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Star picker.
   ONE source of truth: `data-fill="N"` on the row, set by reviews.js from the
   checked radio and from hover. The previous version tried to do it in pure CSS and
   contradicted itself — `:has(input:checked)` painted the chosen star GREY and
   nothing ever gilded the stars before it, so clicking the fifth lit only the
   fifth, and any mouse movement wiped the selection. Driving it from JS is also
   honest here: the form submits over fetch, so it does not work without JS anyway. */
.tt-site .rf-stars{ display:flex; gap:2px; position:relative; }
/* A thumb needs ~44px; the stars were ~28px (browser review, 2026-10-06). */
@media (max-width:600px){
  .tt-site .rf-stars{ gap:6px; }
  .tt-site .rf-stars .rf-star span[aria-hidden]{ font-size:34px; line-height:1; }
}
.tt-site .rf-star{ cursor:pointer; line-height:1; padding:2px 1px; }
.tt-site .rf-star input{ position:absolute; opacity:0; width:1px; height:1px; margin:0; }
.tt-site .rf-star span[aria-hidden]{ font-size:26px; line-height:1; color:var(--line-strong); transition:color .12s; }
.tt-site .rf-stars[data-fill="1"] .rf-star:nth-child(-n+1) span[aria-hidden],
.tt-site .rf-stars[data-fill="2"] .rf-star:nth-child(-n+2) span[aria-hidden],
.tt-site .rf-stars[data-fill="3"] .rf-star:nth-child(-n+3) span[aria-hidden],
.tt-site .rf-stars[data-fill="4"] .rf-star:nth-child(-n+4) span[aria-hidden],
.tt-site .rf-stars[data-fill="5"] .rf-star:nth-child(-n+5) span[aria-hidden]{ color:var(--star,#e8a33d); }
/* Keyboard: the radios are visually hidden, so the ring has to go on the glyph. */
.tt-site .rf-star:focus-within span[aria-hidden]{ outline:2px solid var(--green); outline-offset:2px; border-radius:3px; }
.tt-site .rf-actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.tt-site .rf-msg{ font-size:13px; font-weight:700; color:var(--muted); }
.tt-site .rf-msg.is-ok{ color:var(--green-ink); }
.tt-site .rf-msg.is-err{ color:var(--danger); }

@media (max-width:640px){
  .tt-site .rev-form .rf-row{ grid-template-columns:1fr; }
  .tt-site .ordi .oc{ flex-direction:column; align-items:flex-start; }
  .tt-site .eduline{ grid-template-columns:1fr; gap:2px; }
}

/* ---- Náš tím (doctors linked to this clinic) ---- */
.tt-site .clinic-team{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; }
.tt-site .team-member{ display:flex; gap:12px; align-items:center; padding:12px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); transition:.14s; }
@media (hover:hover){ .tt-site .team-member:hover{ border-color:var(--accent); transform:translateY(-1px); } }

/* Into the vet directory, under the team grid. A quiet text link, not a button:
   the members above are the point of the block, and this is a way out of it. */
.tt-site .team-all{ display:inline-block; margin-top:12px; font-size:14px; font-weight:600;
  color:var(--accent-ink); text-decoration:none; }
.tt-site .team-all:hover{ text-decoration:underline; }
.tt-site .team-all:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
/* Rounded square, 72px — same shape as the doctor page's hero portrait, so a vet
   looks like the same person in the team row and on their own page. Was a 52px
   circle (sQuem, 2026-08-01). */
.tt-site .tm-photo{ width:72px; height:72px; border-radius:var(--radius-sm); overflow:hidden; flex:none;
  background:var(--surface-2); display:grid; place-items:center; }
.tt-site .tm-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tt-site .tm-initials{ font-weight:700; color:var(--muted); }
.tt-site .tm-body{ display:grid; gap:2px; min-width:0; }
.tt-site .tm-name{ font-weight:700; font-size:14.5px; }
.tt-site .tm-role{ font-size:12.5px; color:var(--green-ink); font-weight:700; }
.tt-site .tm-disc{ font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- podobné kliniky ---- */
.tt-site .similar-wrap{ margin-top:26px; }
.tt-site .similar-wrap h2,
.tt-site .similar-wrap .bh-section{ font-family:var(--disp); font-size:18px; font-weight:600; letter-spacing:-.02em; margin:0 0 14px; }
.tt-site .similar-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* ---- responsive ---- */
@media (max-width:900px){
  /* Reading order on a phone only. The DOM — and therefore the desktop
     two-column layout — is untouched: `display:contents` lifts the children of
     .dmain and .dside into the same flex container just here, so `order` can
     interleave them. Desired sequence: O nás, Druhy zvierat, **Jazyky**,
     Odbornosti, Služby, Cenník, Náš tím, **Otváracie hodiny, Poloha**,
     Hodnotenia. Every block needs an explicit order — items sharing a value keep
     DOM order among themselves, so a half-numbered list cannot interleave.
     sQuem, 2026-07-30. */
  /* `align-items:stretch` is not decoration: the grid rule above sets
     `align-items:start`, which in a COLUMN flex container is the cross axis —
     horizontal. Inherited, it sized every block to its own content, so the widths
     jumped from block to block down the page. */
  .tt-site .dbody{ display:flex; flex-direction:column; align-items:stretch; gap:18px; }
  .tt-site .dmain,
  .tt-site .dside{ display:contents; }

  /* Scoped per post type: the two pages share this stylesheet, and a block with no
     `order` defaults to 0 — it would jump to the very top. So each page numbers
     ALL of its own blocks, and the two sets never see each other. */
  .single-tt_clinics .b-about{ order:1; }
  .single-tt_clinics .b-animals{ order:2; }
  .single-tt_clinics .b-langs{ order:3; }
  .single-tt_clinics .b-disc{ order:4; }
  .single-tt_clinics .b-services{ order:5; }
  .single-tt_clinics .b-price{ order:6; }
  .single-tt_clinics .b-team{ order:7; }
  .single-tt_clinics .b-hours{ order:8; }
  .single-tt_clinics .b-map{ order:9; }
  .single-tt_clinics .tt-reviews{ order:10; }

  /* Doctor: Vzdelanie a prax right after O mne; everything between keeps DOM order
     on a shared value, and the two named blocks out-specify it. */
  .single-tt_doctors .dmain > .block{ order:4; }
  .single-tt_doctors .dmain > .b-where{ order:1; }
  .single-tt_doctors .dmain > .b-about{ order:2; }
  .single-tt_doctors .b-edu{ order:3; }
  .single-tt_doctors .dmain > .tt-reviews{ order:5; }

  .tt-site .dside{ position:static; }
  .tt-site .team{ grid-template-columns:1fr; }
  .tt-site .similar-grid{ grid-template-columns:1fr; }
  .tt-site .dinfo h1{ font-size:27px; }
}
@media (max-width:560px){
  .tt-site .dhead .logo{ width:128px; height:128px; margin-top:0; border-radius:22px; font-size:34px; }
}

/* Fotografie: the venue's approved photos (inc/platform-photos.php). */
.tt-site .tt-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; }
.tt-site .tt-gallery a{ display:block; border-radius:var(--radius-sm); overflow:hidden; }
.tt-site .tt-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform .3s; }
@media (hover:hover){ .tt-site .tt-gallery a:hover img{ transform:scale(1.04); } }

/* Gallery photo opened over the page (tt-ui.js). */
.tt-lightbox{ border:0; padding:0; background:transparent; max-width:min(96vw,1400px); max-height:92vh; overflow:visible; }
.tt-lightbox::backdrop{ background:rgba(16,24,20,.86); }
.tt-lightbox img{ display:block; max-width:min(96vw,1400px); max-height:92vh; width:auto; height:auto; border-radius:14px; }
.tt-lightbox button{ position:absolute; top:-14px; right:-14px; width:40px; height:40px; border-radius:50%; border:0;
  background:#fff; color:#18271f; font-size:24px; line-height:1; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.3); }