@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-grotesque-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";src:url(../fonts/archivo-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Every colour below is sampled from the practice's own waiting-room wall,
   from the glaze on its ceramic tiles, or from the ink of a printed notice.
   Nothing is mixed in between. */
:root{
  --wall:#e6e1f2;
  --wall-lit:#f2eff9;
  --wall-shade:#cdc2e8;
  --sheet:#faf6ee;
  --ink:#221c2b;
  --ink-2:#59526b;
  --ink-3:#676078;
  --rule:#ded8ea;
  --red:#9a3b2e;          /* kiln red: call first, closed */
  --red-deep:#7d2f24;
  --red-wash:#f6e7e3;
  --green:#6e8c4a;        /* glaze green: hours for sick children */
  --green-chip:#5c7639;   /* same glaze, deep enough for white text */
  --green-ink:#455f2c;
  --green-wash:#e9efdd;
  --blue:#4e7fa6;         /* lake blue: booked prevention + vaccination */
  --blue-chip:#46718f;
  --blue-ink:#345b7c;
  --blue-wash:#e2ecf3;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --text:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --pad:clamp(1.25rem,4vw,2.75rem);
  --sheet-shadow:0 1px 2px rgba(45,35,64,.20),0 10px 24px -6px rgba(45,35,64,.28);
}

/* ---------- PREVIEW-ONLY colour variants ----------
   Levandulová is the shipped choice above; "wall" restores the original sand
   room in full (including ink/paper/shadow) so it stays a fair side-by-side,
   the rest only swap the wash for a quick look. Once nothing else is being
   auditioned, delete every block below plus assets/js/theme-preview.js and
   its <script> tag -- the shipped site should carry exactly one palette. */
[data-theme="wall"]{
  --wall:#f3e4b0;--wall-lit:#f7ecc8;--wall-shade:#ecd37f;--sheet:#fff;
  --ink:#23231a;--ink-2:#55543e;--ink-3:#76755b;--rule:#d9d8c4;
  --sheet-shadow:0 1px 2px rgba(66,55,24,.20),0 10px 24px -6px rgba(66,55,24,.28);
}
[data-theme="sky"]{--wall:#dcebf5;--wall-lit:#eef6fb;--wall-shade:#bcdaeb}
[data-theme="mint"]{--wall:#dceee0;--wall-lit:#eef8f0;--wall-shade:#b9dcc4}
[data-theme="peach"]{--wall:#f7ddd0;--wall-lit:#fbebe2;--wall-shade:#eebfa8}
[data-theme="sage"]{--wall:#dde6d6;--wall-lit:#eef3ea;--wall-shade:#c3d4b6}
[data-theme="powder"]{--wall:#dbe3ea;--wall-lit:#edf1f5;--wall-shade:#b9c9d6}
[data-theme="rose"]{--wall:#ecdde0;--wall-lit:#f6eef0;--wall-shade:#ddbfc5}
/* Free-pick swatch: --wall is set inline by theme-preview.js from the colour
   input, lit/shade derive from it automatically so any hue stays paintable. */
[data-theme="custom"]{
  --wall-lit:color-mix(in srgb,var(--wall) 100%,white 35%);
  --wall-shade:color-mix(in srgb,var(--wall) 100%,black 12%);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--text);
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.6;
  color:var(--ink);
  background-color:var(--wall);
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.05;letter-spacing:-.022em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}

::selection{background:var(--red);color:#fff}
:root{accent-color:var(--green-ink);caret-color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:1px}
@supports (scrollbar-color:auto){html{scrollbar-color:var(--wall-shade) transparent}}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--wall);padding:.7rem 1rem;z-index:20;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

.wrap{width:min(100% - 2*var(--pad),1180px);margin-inline:auto}

/* ---------- the wall ---------- */
/* Rules and tints inside the hero sit on plaster, not on paper, so they are
   derived from the ink rather than from the paper-grey --rule. */
.wall{--rule:rgba(34,28,43,.2);position:relative;
  padding-block:clamp(1.5rem,3.5vw,2.75rem) clamp(3rem,7vw,5.5rem);overflow:hidden}
.wall::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 85% at 10% -5%,rgba(250,247,255,.62) 0%,rgba(250,247,255,0) 60%),
    linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(70,55,95,.16) 100%);
}

/* Tiles: photographs of the real glazed ceramic on the waiting-room wall.
   Their own cast shadow is carried in the alpha, so they need no CSS shadow.
   Only the hero tiles are positioned on open wall; every other tile is an
   in-flow section mark (.mark) so it can never collide with text. */
.tile,.mark{
  --sh:4px;
  filter:drop-shadow(calc(var(--sh)*.5) var(--sh) calc(var(--sh)*.8) rgba(58,46,78,.34));
}
.tile--cloud{--sh:clamp(2px,.5vw,5px)}
.mark{--sh:clamp(2px,.42vw,5px)}
.tile{position:absolute;pointer-events:none;user-select:none;z-index:0}
.tile--cloud{width:clamp(62px,7.5vw,126px);top:clamp(1.5rem,4vw,3.5rem);right:clamp(1rem,4vw,4.5rem);display:none}

.mark{flex:none;width:clamp(52px,9vw,112px);align-self:center}
.mark--sun{width:clamp(74px,13vw,186px);--sh:clamp(3px,.8vw,8px)}
.mark--castle{width:clamp(52px,8vw,118px)}
.mark--carriage{width:clamp(62px,11vw,136px)}
.mark--car{width:clamp(56px,9vw,116px)}
.mark--orchard{width:clamp(56px,9vw,120px)}
.mark--princess{width:clamp(42px,6.5vw,88px)}
.mark--forest{width:clamp(60px,10vw,128px)}
.mark--dragon{width:clamp(58px,9.5vw,124px);--sh:clamp(3px,.75vw,7px)}

/* ---------- hero ---------- */
/* A notice taped to the wall: real paper, square, lifted by a real shadow, with
   the kiln-red rule this world already uses for anything that changes a visit.
   It is absent from the markup when nothing is announced, so the page can never
   show a stale or empty announcement box. */
.notice{
  background:var(--sheet);box-shadow:var(--sheet-shadow);
  border-top:3px solid var(--red);
  padding:clamp(1rem,2.4vw,1.35rem) clamp(1.1rem,2.6vw,1.6rem);
  margin-top:clamp(1.5rem,3vw,2rem);max-width:46rem;
}
.notice p{color:var(--ink-2);font-size:.9375rem;line-height:1.55}
.notice p:first-child{
  font-family:var(--display);font-weight:700;color:var(--red-deep);
  font-size:clamp(1.0625rem,1rem + .5vw,1.3rem);letter-spacing:-.012em;
  line-height:1.2;margin-bottom:.35rem;
}
.hero__name{font-size:clamp(1.75rem,1.1rem + 3vw,3.35rem);font-weight:800;
  font-family:var(--display);line-height:1.04;letter-spacing:-.025em}
.hero__role{margin-top:.45rem;font-size:clamp(.9375rem,.9rem + .3vw,1.125rem);
  color:var(--ink-2);font-weight:500}
.hero__nurse{margin-top:.2rem;font-size:.875rem;color:var(--ink-2)}
.hero{display:grid;gap:clamp(1.75rem,4vw,3.25rem);align-items:start}
.wall .band__head{margin-top:clamp(1.25rem,3vw,2.25rem)}

.tel{
  display:flex;align-items:center;gap:.28em;
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.5rem,1rem + 7vw,4rem);
  line-height:.96;letter-spacing:-.035em;
  color:var(--ink);text-decoration:none;
  font-variant-numeric:tabular-nums;
  transition:color .18s cubic-bezier(.2,.7,.3,1);
}
.tel:hover,.tel:focus-visible{color:var(--red)}
/* Authored handset, solid so it carries the same weight as the numerals beside
   it; a hairline icon next to 800-weight display type reads as a different
   system. This is the page's only icon -- the ceramic tiles are the
   illustration system, and no icon set belongs beside them. */
.tel__icon{flex:none;width:.62em;height:.62em;fill:currentColor;
  margin-top:-.06em;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18))}
/* Same handset icon, inline, wherever a phone number appears outside the hero. */
.tel-icon{display:inline-flex;align-items:center;gap:.25em}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.callfirst{
  margin-top:1.3rem;padding-top:1.15rem;border-top:1px solid var(--rule);
  color:var(--red-deep);
}
.callfirst b{font-family:var(--display);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}
.callfirst p{margin-top:.3rem;color:var(--ink-2);font-size:.9375rem;line-height:1.55}
/* Same rule-above-text fact block, neutral ink instead of kiln red: a
   permanent operating fact (capacity), not the call-first alarm. */
.callfirst--muted{color:var(--ink)}

/* ---------- the week ---------- */
.week{margin:0}
.week__head{
  font-family:var(--display);font-weight:700;font-size:1.125rem;
  margin-bottom:.9rem;letter-spacing:-.015em;
}
/* The hours are set as a printed timetable, not as coloured badges. The two
   daily blocks carry no purpose labels: the practice books every patient by
   phone, so there is nothing to split them by. The table therefore has no
   column heads at all -- a rule above the first row opens it, the way a printed
   timetable does. Colour carries no meaning in this table: kiln red stays
   reserved for the call-first rule. */
.hours{width:100%;table-layout:fixed;border-collapse:collapse;font-variant-numeric:tabular-nums}
.hours th,.hours td{text-align:left;padding:.55rem .75rem .55rem 0;vertical-align:baseline}
.hours th:first-child,.hours td:first-child{width:20%}
.hours th:nth-child(2),.hours td:nth-child(2){width:40%}
.hours th:nth-child(3),.hours td:nth-child(3){width:40%}
.hours td:last-child,.hours th:last-child{padding-right:0}
.hours tbody tr:first-child{border-top:1.5px solid var(--ink-3)}
.hours tbody tr + tr{border-top:1px solid var(--rule)}
.hours tbody th{
  font-weight:600;font-size:.9375rem;color:var(--ink-2);white-space:nowrap;
  padding-right:1.25rem;
}
.hours td{font-size:clamp(1rem,.95rem + .25vw,1.125rem);font-weight:600;color:var(--ink)}
.hours tbody tr.is-today{background:rgba(35,35,26,.075)}
.hours tbody tr.is-today th{color:var(--ink)}
/* the block we are inside right now, marked in ink rather than in fill;
   underlining the text rather than the cell keeps the mark on the times */
.hours td.is-live{
  text-decoration:underline;text-decoration-thickness:2px;
  text-underline-offset:.3em;text-decoration-color:var(--ink);
}

.week__note{margin-top:1rem;font-size:.875rem;color:var(--ink-2)}

/* ---------- bands ---------- */
.band{position:relative;padding-block:clamp(2.75rem,7vw,5rem)}
.band--paper{background:var(--sheet);box-shadow:var(--sheet-shadow)}
.band__inner{position:relative;z-index:1}
.band__head{display:flex;align-items:center;gap:clamp(.85rem,2.5vw,1.5rem);margin-bottom:clamp(1.25rem,3vw,2rem)}
.band h2{font-size:clamp(1.4rem,1.1rem + 1.5vw,2.1rem);font-weight:700}

.rules{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.25rem,3vw,2rem)}
.rules b{font-family:var(--display);font-weight:700;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);letter-spacing:-.012em;display:block;margin-bottom:.3rem}
.rules p{color:var(--ink-2)}
.rules li:first-child{
  padding:clamp(1rem,2.5vw,1.5rem) clamp(1rem,2.5vw,1.6rem);
  background:var(--red-wash);border-top:2px solid var(--red);
}
.rules li:first-child b{color:var(--red-deep);font-size:clamp(1.15rem,1rem + .8vw,1.5rem)}
.rules p + p{margin-top:.55rem}
/* The locum and emergency numbers stand on their own line, and they are what a
   parent stabs at one-handed: give them a real tap target, not a 26px line of
   inline text. Inline numbers inside prose stay inline. */
.rules__tel{margin-top:.55rem}
.rules__tel a{padding:.55rem 0;font-size:1.0625rem}
.rules .tel-icon{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.rules .tel-icon:hover,.rules .tel-icon:focus-visible{color:var(--red)}
/* No item here outranks the others: the red wash belongs to the one call-first
   rule on the page, and must not leak onto whatever happens to be listed first
   in another band. */
.rules--plain li:first-child{padding:0;background:none;border-top:1px solid var(--rule)}
.rules--plain li{border-top:1px solid var(--rule);padding-top:clamp(.9rem,2vw,1.2rem)}
.rules--plain li:first-child b{color:var(--ink);font-size:clamp(1.0625rem,1rem + .35vw,1.25rem)}

.price{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(1.5rem,4vw,3.5rem)}
.price li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.55rem 0;border-top:1px solid var(--rule)}
.price li:first-child{border-top:0}
.price .amount{flex:none;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}

/* Same hairline list as the price list, without a second column. */
.items{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(1.5rem,4vw,3.5rem)}
.items li{padding:.55rem 0;border-top:1px solid var(--rule)}
.items li:first-child{border-top:0}

/* Insurers: the payer code leads, because that is what a parent is checking. */
.codes{list-style:none;margin:0;padding:0;display:grid;gap:0 clamp(1.5rem,4vw,3.5rem)}
.codes li{display:grid;grid-template-columns:3.1rem 1fr;gap:.5rem;align-items:baseline;
  padding:.55rem 0;border-top:1px solid var(--rule)}
.codes li:first-child{border-top:0}
.codes .code{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.note{font-size:.875rem;color:var(--ink-2)}

.two{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start}
.addr{font-style:normal;line-height:1.7}
.addr dt{font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:.2rem}
.addr dd{margin:0 0 1.1rem}
.addr a{text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--wall-shade)}
.addr a:hover{color:var(--red);text-decoration-color:var(--red)}

.portrait{max-width:22rem}
.portrait img{box-shadow:var(--sheet-shadow)}
.portrait figcaption{margin-top:.9rem;font-size:.875rem;color:var(--ink-2);max-width:34ch}

.foot{padding-block:clamp(2.5rem,6vw,4rem) clamp(2rem,4vw,3rem);position:relative}
.foot__row{display:flex;align-items:center;justify-content:space-between;gap:clamp(.85rem,2.5vw,1.5rem)}
.foot__meta{font-size:.8125rem;color:var(--ink-2);text-align:right}
.foot__meta a{text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--wall-shade)}
.foot__meta a:hover{color:var(--red);text-decoration-color:var(--red)}

.lede{color:var(--ink-2);margin-bottom:clamp(1.25rem,3vw,1.9rem)}

/* ---------- legal page (gdpr.html) ---------- */
/* A transcribed printed document: numbered clauses, and the numerals kept
   visible because the text refers to them ("uvedených v bodu II."). The text
   runs the full container width on a PC -- the client asked for this twice, so
   no ch-based measure cap goes back on this page. */
.legal{max-width:none}
.legal__intro{margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.legal section + section{margin-top:clamp(1.75rem,4vw,2.75rem)}
.legal h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.0625rem,1rem + .45vw,1.3rem);line-height:1.2;
  margin-bottom:.7rem;padding-top:clamp(.75rem,2vw,1rem);
  border-top:1px solid var(--rule);
}
.legal__num{display:inline-block;min-width:2.4rem;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.legal p{color:var(--ink-2)}
.legal p + p{margin-top:.7rem}
.legal__id{color:var(--ink);line-height:1.7;margin-bottom:.7rem}
.legal ul{margin:.6rem 0 0;padding-left:1.15rem;color:var(--ink-2)}
.legal li + li{margin-top:.45rem}
.legal li::marker{color:var(--ink-3)}
.legal ul ul{margin-top:.45rem}
.legal a{text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:var(--wall-shade)}
.legal a:hover{color:var(--red);text-decoration-color:var(--red)}

/* ---------- layout up ---------- */
@media (min-width:48rem){
  /* Day, then the two blocks in fixed columns side by side, so the times read
     as one pair instead of drifting apart as the table gets wider. The last
     column takes the slack, which keeps the row hairlines running to the same
     right edge as the bands below. */
  .hours th:first-child,.hours td:first-child{width:11rem}
  .hours th:nth-child(2),.hours td:nth-child(2){width:13rem}
  .hours th:nth-child(3),.hours td:nth-child(3){width:auto}
  .price{grid-template-columns:1fr 1fr}
  .price li:nth-child(-n+2){border-top:0}
  .two{grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4.5rem)}
  .rules{gap:clamp(1.5rem,3vw,2.4rem)}
}
@media (min-width:62rem){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .tile--cloud{display:block}
}

/* Motion: one authored settle on load, from an already-visible default. */
@media (prefers-reduced-motion:no-preference){
  .js .hero,.js .band__head{animation:settle .62s cubic-bezier(.16,.84,.34,1) both}
  .js .tile--cloud{animation:settle .8s .14s cubic-bezier(.16,.84,.34,1) both}
}
@keyframes settle{from{transform:translateY(10px)}to{transform:none}}

@media print{
  body{background:#fff}
  .tile,.skip{display:none}
  .band--paper{box-shadow:none}
}