/* ================================================================
   Chiropraktik Jablonec — „Motýl"
   Feel: the client's original site (ivory, sky blue, Cormorant, butterfly)
   Craft: pacing & circular CTA from Roots; letterspaced caps, long-form warmth
          from Chiropraxe Praha.
   ================================================================ */

:root {
  --ivory: #fdfbf6;
  --ivory-2: #f7f3ea;      /* warm band */
  --paper: #ffffff;

  --ink: #2b3238;
  --ink-2: #5a646d;
  --muted: #666e76;        /* AA on ivory-2 (4.67:1) — was #8b949c at 2.78:1 */

  --blue: #6ec1e4;         /* his accent */
  --blue-deep: #25708f;    /* AA on ivory-2 (5.00:1) — was #2b7fa5 at 4.34:1 */
  --blue-tint: rgba(110, 193, 228, .14);
  --sand: #c2ab86;         /* quiet warm secondary — rules & gradients only */
  --sand-deep: #806b48;    /* the same warm family, AA for small text (4.61:1) */
  --line: #e7e0d3;
  --rule-strong: #8c8371;  /* non-text UI indicators — 3.63:1, meets 1.4.11 */

  --font-display: 'Cormorant', Georgia, serif;
  --font-body: 'Roboto', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--ink-2);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.14;
}
h1 { font-size: clamp(2.9rem, 5.6vw, 4.6rem); font-weight: 300; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 500; }
em.accent { font-style: italic; color: var(--blue-deep); }

p + p { margin-top: 1.1em; }
a { color: var(--blue-deep); text-decoration: none; }
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; }

/* Small informational text carries the instructions, the reassurance and the
   practical facts (cash only, undressing, why the phone goes unanswered).
   Body weight is 300, and Roboto Light at 11–13px is thin for the 50+ reader
   this site is written for — these get 400. Tone is handled by --muted. */
.cta-hint, .hero-note, .contact-note, .practical-list li, .price-note,
.credentials span, .mobile-menu-note, .map-inset figcaption, .more-note,
.review figcaption, .signature small, .footer-inner, .label,
.price-entry-meta,
.scroll-cue {
  font-weight: 400;
}

/* The header is ~67px fixed; without this an anchor jump parks a section's
   own label underneath it. */
section[id] { scroll-margin-top: 84px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 200;
  background: var(--paper); color: var(--blue-deep);
  font-size: .8rem; font-weight: 400; letter-spacing: .1em; text-transform: lowercase;
  padding: 12px 20px; border: 1px solid var(--blue);
  transition: top .2s var(--ease);
}
.skip-link:focus-visible { top: 16px; }

.container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(22px, 4vw, 60px); }
.narrow { max-width: 820px; }
section { padding: clamp(88px, 13vh, 165px) 0; position: relative; }
.band-warm { background: var(--ivory-2); }

/* ---------- shared bits ---------- */
.label {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: lowercase;
  color: var(--blue-deep);
  margin-bottom: 1.4rem;
  display: block;
}
.rule { width: 46px; height: 1px; background: var(--sand); margin: 1.6rem 0; border: 0; }
.center { text-align: center; }
/* heading block that introduces a full-bleed grid below it */
.section-intro { margin-bottom: clamp(40px, 6vh, 80px); }

/* primary CTA */
.btn-sms {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 999px;
  background: var(--blue); color: #0e3547;
  font-size: 1rem; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 10px 26px -14px rgba(43, 127, 165, .8);
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.btn-sms:hover { background: var(--blue-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(43, 127, 165, .85); }
.btn-sms:active { transform: translateY(0); }
.btn-sms svg { width: 19px; height: 19px; }
.cta-block { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.cta-hint { font-size: .8rem; color: var(--muted); letter-spacing: .02em; padding-left: 2px; }

.tel-large {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 2.6vw, 2.35rem);
  line-height: 1.15;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: .01em;
  display: inline-block;
}

/* real photographs (.wide is dormant — reserved for the future street photo
   of the building, see the street-view comment in index.html) */
.photo-real {
  position: relative; margin: 0; overflow: hidden;
  background: var(--ivory-2);
}
.photo-real img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-real.portrait { aspect-ratio: 4 / 5; }
.photo-real.wide { aspect-ratio: 3 / 2; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  padding: 16px clamp(22px, 5vw, 40px);
  background: rgba(253, 251, 246, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(231, 224, 211, .8);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: auto; object-fit: contain; }
.brand-text {
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.brand-text em { font-style: normal; color: var(--blue-deep); }
.site-nav { display: flex; gap: 30px; }
.site-nav a {
  color: var(--ink-2); font-size: .82rem; letter-spacing: .12em;
  text-transform: lowercase; transition: color .3s var(--ease);
}
.site-nav a:hover { color: var(--blue-deep); }
.header-tel {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
  color: var(--ink); letter-spacing: .02em; white-space: nowrap;
}

/* desktop only: the number becomes a copy control (see main.js).
   The button inherits the link's own class, so it keeps its exact type. */
.tel-copy-wrap { position: relative; display: inline-block; }
/* :where() so this reset carries ZERO specificity. It still beats the UA button
   defaults (author styles always do), but every property the element's own class
   sets — .tel-large's line-height, .header-tel's colour — wins over it. A plain
   .tel-copy rule would out-order those classes and silently flatten them. */
:where(.tel-copy) {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  cursor: pointer; text-align: left;
}
.tel-copy::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: currentColor; opacity: 0;
  transition: opacity .25s var(--ease);
}
.tel-copy:hover::after, .tel-copy:focus-visible::after { opacity: .35; }
.copy-status {
  position: absolute; left: 0; top: calc(100% + 6px); white-space: nowrap;
  font-family: var(--font-body); font-size: .74rem; font-weight: 400;
  letter-spacing: .1em; text-transform: lowercase; color: var(--blue-deep);
  opacity: 0; transform: translateY(-3px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.copy-status.is-on { opacity: 1; transform: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- mobile menu ---------- */
.nav-toggle {
  display: none;
  position: relative; z-index: 120;
  width: 40px; height: 40px; flex: none;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 95; /* under .site-header (100) so brand, tel and the X stay visible */
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  /* On a 667px phone the content is ~685px tall — it overflowed an unscrollable
     box, clipping „objednání SMS zprávou" and pushing the first link up behind
     the 69px header. Scroll it, and stop centring once it no longer fits. */
  gap: max(18px, 8vh); padding: 100px 30px 40px;
  overflow-y: auto; overscroll-behavior: contain;
  background: rgba(253, 251, 246, .96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: 0; visibility: hidden;
  transition: opacity .4s var(--ease), visibility 0s .4s;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity .4s var(--ease); }
body.menu-open { overflow: hidden; }

.mobile-nav { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3.2vh, 26px); }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 6.5vw, 2.2rem);
  color: var(--ink); letter-spacing: .04em;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), color .3s var(--ease);
}
.mobile-nav a:hover { color: var(--blue-deep); }
body.menu-open .mobile-nav a { opacity: 1; transform: translateY(0); }
body.menu-open .mobile-nav a:nth-child(1) { transition-delay: .05s; }
body.menu-open .mobile-nav a:nth-child(2) { transition-delay: .1s; }
body.menu-open .mobile-nav a:nth-child(3) { transition-delay: .15s; }
body.menu-open .mobile-nav a:nth-child(4) { transition-delay: .2s; }
body.menu-open .mobile-nav a:nth-child(5) { transition-delay: .25s; }
body.menu-open .mobile-nav a:nth-child(6) { transition-delay: .3s; }

.mobile-menu-foot {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s var(--ease) .35s, transform .45s var(--ease) .35s;
}
/* People open this menu to book, not to browse — the action goes first. */
.mobile-menu-foot .btn-sms { margin-bottom: 1.6rem; }
body.menu-open .mobile-menu-foot { opacity: 1; transform: translateY(0); }
.mobile-menu-tel {
  font-family: var(--font-display); font-size: 1.6rem; font-weight: 500;
  color: var(--blue-deep); letter-spacing: .03em;
}
.mobile-menu-note {
  font-size: .78rem; letter-spacing: .14em; text-transform: lowercase;
  color: var(--muted);
}

/* ---------- hero ---------- */
.hero { min-height: 100svh; display: flex; align-items: center; padding-top: 110px; overflow: hidden; }
.hero-butterfly {
  position: absolute; top: 58%; left: 50%;
  /* height:auto is REQUIRED, not redundant: the img carries width/height attrs
     for CLS, and an absolutely positioned replaced element resolves auto height
     from the intrinsic 1024px instead of width ÷ aspect-ratio. Without this it
     renders 460×1024 — stretched to 2.2×. */
  width: min(460px, 42vw); height: auto; pointer-events: none; z-index: 0;
  transform: translate(-34%, -50%);
  /* .17 read as a smudge rather than a mark. Safe to lift here because on wide
     screens it clears every text block (only ~6% of the h1, which is 71px
     display type). See the 900px breakpoint for the mobile case. */
  opacity: .28;
  /* white-background artwork dissolves into the ivory page */
  mix-blend-mode: multiply;
}
.footer-mark { width: 40px; height: auto; opacity: .65; }
.hero-inner {
  position: relative; z-index: 2;
  max-width: 1560px;
  display: grid; grid-template-columns: 1fr .9fr;
  gap: clamp(40px, 5vw, 96px); align-items: center; width: 100%;
}
.hero-photo .photo-real.portrait { max-height: 74vh; margin-left: auto; }
.hero h1 { margin-bottom: 1.6rem; }
.hero .lead { font-size: 1.12rem; max-width: 30rem; color: var(--ink-2); }
.hero-actions { display: flex; align-items: flex-start; gap: clamp(26px, 4vw, 54px); margin-top: 2.8rem; flex-wrap: wrap; }
.hero-phone .label { margin-bottom: .4rem; }
.hero-note {
  margin-top: 2.2rem; max-width: 30rem;
  font-size: .92rem; line-height: 1.75; color: var(--muted);
  padding-left: 16px; border-left: 1px solid var(--line);
}
.contact-note { margin-top: 1rem; font-size: .88rem; line-height: 1.7; color: var(--muted); max-width: 24rem; }
.hero-photo { width: 100%; }

.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  font-size: .7rem; letter-spacing: .22em; text-transform: lowercase; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 3;
}
.scroll-cue span { display: block; width: 1px; height: 46px; background: linear-gradient(var(--sand), transparent); }

/* ---------- intro ---------- */
.intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.signature { margin-top: 1.8rem; }
.signature small { display: block; font-family: var(--font-body); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.credentials { display: flex; gap: clamp(28px, 5vw, 64px); flex-wrap: wrap; margin-top: 3rem; }
.credentials b { display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--ink); font-weight: 400; line-height: 1; }
.credentials span { font-size: .8rem; letter-spacing: .1em; text-transform: lowercase; color: var(--muted); }

/* ---------- pain highlights (scroll) ---------- */
/* ---------- co napravuji (2-up grid) ---------- */
.condition-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 56px) clamp(30px, 4vw, 60px);
}
.condition figure { margin: 0 0 1.5rem; aspect-ratio: 1; overflow: hidden; background: var(--ivory-2); }
/* ink-wash paintings show as paintings — no edge mask, the rice paper is the frame */
.condition figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease);
}
.condition:hover figure img { transform: scale(1.04); }
.panel-num {
  display: block; font-size: .72rem; letter-spacing: .2em; font-weight: 400;
  color: var(--sand-deep); margin-bottom: .5rem;
}
.condition h3 { margin-bottom: .7rem; }
.condition p { font-size: .98rem; }

/* no box — the list sits on the page like the rest of the editorial layout */
.condition-more {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 clamp(0px, 2vw, 24px);
}
.condition-more .tags { margin-top: 0; }
.more-note { margin-top: 1.8rem; font-size: .92rem; color: var(--muted); font-style: italic; max-width: 34rem; }

.tags { list-style: none; display: grid; gap: 0; margin-top: 1.4rem; }
.tags li {
  font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  color: var(--ink); padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.tags li:first-child { border-top: 1px solid var(--line); }

/* ---------- steps ---------- */
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 4vw, 56px); margin-top: 3.4rem; }
.steps li { counter-increment: s; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--font-display); font-size: 2.6rem; color: var(--blue);
  display: block; line-height: 1; margin-bottom: .9rem;
}
.steps h3 { margin-bottom: .5rem; }
.steps p { font-size: .97rem; }
/* The rule spans the column; only the text is measured. Capping the whole
   block drew a 800px rule under a 1280px row of steps, which read as broken. */
.practical { margin-top: 3.6rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.practical-list { list-style: none; display: grid; gap: 1rem; max-width: 50rem; }
.practical-list li { font-size: .96rem; color: var(--muted); position: relative; padding-left: 18px; }
.practical-list li::before { content: ''; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); }
/* These were weight 400 inside 400 parents, differing only by #5a646d vs
   #666e76 — authored as emphasis, rendered as body text. The marked phrases
   are the SMS instruction and the undressing warning, i.e. the two sentences
   that most need to be seen. --ink takes them to ~11:1 against the grey. */
.practical-list b, .hero-note b { color: var(--ink); }
/* Two landscape photos of the ordinace, full container width. Capped at 820px
   with portraits it left the right third empty, which read as a missing third
   photo rather than as a deliberate pair. */
.step-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  margin-top: 3.4rem; }
.photo-real.room { aspect-ratio: 4 / 3; }

/* ---------- APM ---------- */
.apm-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.apm-photo { aspect-ratio: 3 / 4; max-width: 420px; background: transparent; }
/* Full column width and the price on the right, like the ceník rail — the
   22rem cap stopped its rule 338px short and left the price stranded left. */
.apm-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.apm-price b { margin-left: auto; font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.apm-price span { color: var(--muted); font-size: .95rem; }

/* ---------- reviews ----------
   Was a one-quote carousel: 396px, no heading, auto-advancing away from slow
   readers, with dot targets nobody could hit. On a persuasion page the proof
   should be readable at a glance, so all six stand at once in an editorial
   grid — hairline rules like the price list, no cards. */
#reference { padding: clamp(72px, 10vh, 120px) 0; }
#reference > .container > .label,
#reference > .container > h2 { text-align: center; }
#reference > .container > h2 { margin-inline: auto; }

.review-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.4vw, 52px) clamp(28px, 3.4vw, 56px);
  margin-top: clamp(40px, 5vw, 64px);
}
.review { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.review blockquote {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.06rem, 1.35vw, 1.22rem); line-height: 1.55; color: var(--ink);
}
.review blockquote::before { content: '\201E'; }
.review blockquote::after { content: '\201C'; }
.review figcaption {
  margin-top: 1.1rem; font-size: .74rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* Six quotes fit three-across on a desktop. Stacked on a phone they ran 1,408px
   — 1.7 screens of testimonial — so half start hidden behind a toggle. */
.review-more { display: none; }

/* ---------- pricing ----------
   One ledger, one component, one price rail. Was a 620px bordered card above a
   1178px borderless list: identical type, hairlines above both, but the two
   price columns sat 602px apart, which read as a broken table rather than two
   designs. The card's fill was #fff on #fdfbf6 — 1.03:1, invisible — so the
   border was doing all the work for no stated reason.
   The komplexní ošetření is now the SAME .price-entry as the add-ons; it just
   gets a caption, a description and one step up the display scale. */
.price-ledger {
  --rail: clamp(5.5rem, 9vw, 8rem);
  --gutter: clamp(20px, 3vw, 56px);
  /* Full container width, like the reviews grid above and the condition grid
     in „co napravuji". Capping it (820, then 1080) left the section visibly
     narrower than its neighbours — the h2 is .narrow, but on this site the
     CONTENT below a .narrow heading runs full width. */
  margin-top: 44px;
  border-top: 1px solid var(--line);
}
.price-caption { display: block; padding: 32px 0 0; }
.price-entries { list-style: none; }

.price-entry {
  /* column-gap only: `gap` also applies between wrapped flex lines, which put
     50px between the meta and the description on top of its own 12px margin. */
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: var(--gutter); row-gap: 0;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.price-entry-body { flex: 0 1 auto; min-width: 0; }
/* Full width means a short name can sit ~1000px from its price. A hairline
   leader carries the eye across, the way a printed menu does — and it is
   the same 1px var(--line) the whole page is built from. */
.price-leader {
  flex: 1 1 auto; min-width: 28px; align-self: baseline;
  border-bottom: 1px solid var(--line); transform: translateY(-.3em);
}
.price-entry-name {
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem); line-height: 1.25;
}
.price-entry-meta { margin-top: 4px; font-size: .88rem; color: var(--muted); }
/* Its own full-width line rather than a child of .price-entry-body, which had
   to share the row with the price rail — that squeezed it to 211px on a phone.
   42rem keeps it to one line on a desktop instead of wrapping at 544px while
   1128px sat empty to its right. */
.price-entry-desc {
  flex: 0 0 100%; margin-top: 12px;
  font-size: .95rem; color: var(--ink-2); max-width: 42rem;
}
/* flex:none + min-width rather than a fixed track: the lead's number is wider
   than the rail and is allowed to exceed it. Every price still ends on the same
   line because it is the last flex item and right-aligned. */
.price-entry-sum {
  flex: none; min-width: var(--rail);
  text-align: right; white-space: nowrap;
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.2;
}

/* the main therapy: same row, bigger type, no box */
.price-entry.is-lead { padding: 12px 0 20px; border-bottom: 0; }
.price-entry.is-lead .price-entry-name { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.price-entry.is-lead .price-entry-sum  { font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
/* the child rate belongs to the row above, so no rule between them; --sand
   closes the block the way hr.rule does elsewhere */
.price-entry.is-sub { padding: 0 0 24px; border-bottom-color: var(--sand); }

.price-note { margin-top: 2.4rem; font-size: .92rem; color: var(--muted); max-width: 44rem; }
/* The floating pill still overlaps the rail at 375, so body.at-prices stays.
   At 1280 the rail moved in to 871 and the pill sits at ~1080, so the collision
   it was written for no longer exists there. */
.price-cta { margin-top: 2.2rem; }

/* ---------- doctor ---------- */
/* Was 340px photo against an 860px text column — 101 characters per line, and
   the portrait read as an afterthought beside it. Bigger photo, and the prose
   capped to a real measure; the column keeps the rest as whitespace. */
.doctor-grid { display: grid; grid-template-columns: clamp(280px, 32%, 460px) 1fr;
  gap: clamp(40px, 6vw, 80px); align-items: center; }
.doctor-grid > div:last-child > * { max-width: 40rem; }
.pull-quote {
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  color: var(--blue-deep); line-height: 1.5; margin-top: 2rem;
  padding-left: 1.6rem; border-left: 1px solid var(--blue);
}

/* ---------- credentials ----------
   Text, not photos: two of the framed certificates carry his date of birth.
   No dates either — the courses formalise a practice that predates them. */
.creds { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.creds-list { list-style: none; display: grid; gap: 1.1rem; }
.creds-list li { display: grid; gap: 2px; }
.creds-list b {
  font-family: var(--font-display); font-weight: 500; color: var(--ink);
  font-size: 1.06rem; line-height: 1.3;
}
.creds-list span { font-size: .84rem; font-weight: 400; letter-spacing: .1em;
  text-transform: lowercase; color: var(--muted); }
.creds-note { margin-top: 1.4rem; font-size: .88rem; font-weight: 400; color: var(--muted); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 5vw, 80px); align-items: start; margin-top: 3rem; }
.contact-card { max-width: 30rem; }
.c-row + .c-row { margin-top: 2.2rem; padding-top: 2.2rem; border-top: 1px solid var(--line); }
.c-row .label { margin-bottom: .6rem; }
.c-value { color: var(--ink); font-size: 1.06rem; line-height: 1.65; }
.c-link {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 1rem; font-size: .95rem; letter-spacing: .02em;
  padding-bottom: 3px; border-bottom: 1px solid var(--blue);
  transition: gap .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.c-link:hover { gap: 15px; color: var(--ink); border-color: var(--sand); }
.c-link svg { width: 17px; height: 17px; }
.c-row .tel-large { margin-top: .1rem; }
.map-frame { border: 1px solid var(--line); background: var(--paper); padding: 8px; }
.map-frame iframe { width: 100%; border: 0; display: block; filter: grayscale(.25) contrast(.95); }
/* loaded street view must keep the consent box's height, or it grows over the map's button */
.map-frame.streetview iframe { height: 200px; filter: none; }

/* click-to-load placeholder for Google embeds (no cookies until clicked) */
.map-consent {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; height: 330px; padding: 26px;
  background: linear-gradient(160deg, #f9f6ee, #f3eee1);
  color: var(--ink-2);
}
.map-consent svg { width: 30px; height: 30px; color: var(--blue-deep); opacity: .8; }
.map-consent p { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
.map-consent button {
  font-family: var(--font-body); font-size: .9rem; letter-spacing: .04em;
  padding: 10px 22px; border: 1px solid var(--blue-deep); border-radius: 999px;
  background: var(--paper); color: var(--blue-deep); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}

/* The page used to end on two empty beige boxes — the last thing a visitor who
   scrolled the whole way saw. This is a self-hosted OSM render, generated once
   at build time and committed, so the runtime still makes ZERO third-party
   requests until the visitor actually clicks. */
.map-main .map-consent {
  background-image:
    linear-gradient(rgba(253, 251, 246, .58), rgba(253, 251, 246, .58)),
    image-set(url("../assets/img/foto/mapa-poster.webp") type("image/webp"),
              url("../assets/img/foto/mapa-poster.jpg")  type("image/jpeg"));
  background-size: cover; background-position: center;
}
.map-main .map-consent p { text-shadow: 0 1px 2px rgba(253, 251, 246, .9); }
.map-consent button:hover { background: var(--blue); color: #10323f; }
.streetview .map-consent { height: 200px; padding: 14px; gap: 6px; }
/* line drawing of the actual building (traced from the street photo) so the
   inset isn't a bare beige box before consent. flex:none is required — as a
   flex child with no intrinsic height the svg gets compressed and the house
   squashes, exactly like the butterfly did. */
.map-consent .house-sketch { width: min(216px, 92%); height: auto; flex: none; opacity: .85; }

/* map + street view, overlapping — inset must clear the map card's centered text */
.map-stack { position: relative; padding-bottom: 165px; }
.map-main iframe { height: 330px; }
.map-inset {
  position: absolute; right: -14px; bottom: 0; width: 62%; margin: 0;
  box-shadow: 0 24px 50px -28px rgba(43, 50, 56, .5);
}
.map-inset figcaption {
  font-size: .8rem; color: var(--muted); letter-spacing: .04em;
  padding: 9px 2px 1px; text-align: right;
}
/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 22px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; font-size: .8rem; color: var(--muted); }
.footer-left { display: flex; align-items: center; gap: 16px; }
.footer-privacy { font-size: .73rem; margin: 0; text-align: right; }

/* ---------- floating CTA ---------- */
.floating-cta {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px;
  background: var(--blue); color: #10323f;
  font-size: .9rem; letter-spacing: .04em;
  box-shadow: 0 12px 30px -12px rgba(43, 127, 165, .55);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
body.scrolled .floating-cta { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* The pill is 162px wide and the ceník's price values are right-aligned under
   it — it was covering them. Over that one section it steps aside; .price-cta
   carries the action there instead. */
body.at-prices .floating-cta,
body.cta-visible .floating-cta { opacity: 0; transform: translateY(14px); pointer-events: none; }
.floating-cta svg { width: 17px; height: 17px; flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  /* Stacked, the watermark's default position lands under 48% of the hero note
     and 82% of the SMS button. Multiply-blended over the artwork's dark wing
     pixels that drops body text to 3.40:1 at opacity .17 and 2.56:1 at .28 —
     measured, and below AA at every usable opacity.
     But that worst case is the wrong model: the dark pixels are the BODY, in
     the centre of the square, and the wings never reach the top edge. Sampling
     only the pixels that actually fall under each text block, at 0.28 the lead
     reads 4.58:1 and the h1 12.57:1 — both pass. 0.34 drops the lead to 4.33
     and fails, so .28 is the ceiling.
     So it goes big: one wash spanning the headline, the lead and the portrait,
     overflowing the viewport and clipped by the hero. */
  /* Haloes the portrait, which now sits between the lead and the CTA. The gap it
     can occupy is bounded by the lead above (ends y365) and the CTA below
     (starts y816) — centred on the photo that allows 412px. Bottom-anchored at
     361px because the photo's distance from the hero bottom is fixed by the
     CTA + hint + note stack below it, so this tracks at any phone width. */
  .hero-butterfly {
    top: auto; bottom: 361px; left: 50%;
    width: min(400px, 106vw); height: auto;
    transform: translateX(-50%);
    opacity: .28;
  }

  body { font-size: 1rem; }
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-header { padding: 12px 18px; gap: 12px; }
  .brand { gap: 9px; }
  .brand-text { font-size: .84rem; letter-spacing: .22em; }
  .header-tel { font-size: 1rem; margin-left: auto; }

  /* On a phone the button already IS the number — tapping either opens the same
     prefilled SMS. Showing both put two identical actions 145px apart, with the
     secondary one (Cormorant 500/37px) visually outweighing the primary
     (Roboto 400/16px). The number still lives in the header, the menu and the
     contact card. Desktop keeps it: there it's the copy-to-clipboard control. */
  .hero-phone { display: none; }

  .hero { padding-top: 92px; }
  /* gap:0 because .hero-text goes display:contents below — its children become
     grid items and would otherwise all inherit the gap. Their own margins
     already carry the original rhythm. */
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .contact-card { max-width: 100%; }

  /* Photo between the promise and the ask: you see his face, then you're asked
     to text him. .hero-photo is a sibling of .hero-text, so the text block
     dissolves into the grid to let one order run across both. */
  .hero-text { display: contents; }
  .hero-text > .label { order: 1; }
  .hero h1 { order: 2; }
  .hero .lead { order: 3; }
  /* The portrait sits between the promise and the ask, so every pixel it takes
     pushes the CTA down. At 230px the button landed at y703–759 — clear only on
     a chrome-less 812 viewport, and below the fold on any 667-class phone or an
     812 with Safari's address bar showing. 165px puts its bottom edge near 620. */
  /* Portrait above the ask, at full 300px — owner's call, reaffirmed after being
     shown the cost: the CTA lands ~y832 and is below the fold on every phone.
     Face-before-ask was worth more to him than the button being on screen 1. */
  .hero-photo { order: 4; margin-block: 18px 26px; }
  .hero-actions { order: 5; margin-top: 2rem; gap: 26px; }
  .hero-note { order: 6; margin-top: 1.8rem; }

  .hero-photo { max-width: 300px; margin-inline: auto; }
  .hero-photo .photo-real.portrait { margin-inline: auto; max-height: none; max-width: 300px; }
  .hero h1 { font-size: clamp(2.4rem, 10vw, 3.1rem); }
  .hero .lead { font-size: 1.02rem; }
  .btn-sms { padding: 14px 26px; font-size: .95rem; }
  .scroll-cue { display: none; }

  .intro-grid, .doctor-grid, .contact-grid, .apm-grid { grid-template-columns: 1fr; }

  /* Stacked, this photo originally sat BEFORE the section's own heading, so you
     met his face twice — hero, then here — before being told who he is. Parking
     it at the end fixed that but stranded it under the credentials.
     So: heading first for context, then the photo, then the prose. The text
     column dissolves into the grid so one order can run across both children. */
  #kdo .intro-grid { gap: 0; }
  #kdo .intro-grid > div:last-child { display: contents; }
  #kdo .label { order: 1; }
  #kdo h2 { order: 2; }
  #kdo .rule { order: 3; }
  #kdo .intro-grid > div:first-child { order: 4; margin-block: 0 26px; }
  #kdo .intro-grid p, #kdo .credentials { order: 5; }
  /* At 718px this rendered 300×400 while the condition paintings ran 661×661
     and the ordinace photos 661×826 — same artwork family, three sizes.
     width:100% is required, not just dropping the cap: with aspect-ratio set
     and the inner img at width/height 100%, the figure has no intrinsic width
     to stretch from and collapses. */
  .apm-photo { width: 100%; max-width: none; margin-inline: auto; }
  .intro-grid .photo-real, .doctor-grid .photo-real { max-width: 300px; margin-inline: auto; }

  .condition-grid { grid-template-columns: 1fr; }
  .map-stack { padding-bottom: 0; }
  .map-inset { position: static; width: 100%; margin-top: 18px; box-shadow: none; }
  .map-inset figcaption { text-align: left; }
  .map-main iframe, .map-main .map-consent { height: 320px; }

  .steps { grid-template-columns: 1fr; gap: 34px; }
  .review-grid { grid-template-columns: 1fr; gap: 26px; }
  .review-extra, .review:nth-of-type(3) { display: none; }
  body.reviews-open .review:nth-of-type(3) { display: block; }
  body.reviews-open .review-extra { display: block; }
  .review-more {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
    appearance: none; -webkit-appearance: none; background: none; border: 0;
    padding: 14px 0; min-height: 44px; cursor: pointer;
    font-family: var(--font-body); font-size: .82rem; font-weight: 400;
    letter-spacing: .14em; text-transform: lowercase; color: var(--blue-deep);
  }
  .review-more::after {
    content: ''; width: 7px; height: 7px; margin-top: -4px;
    border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
    transform: rotate(45deg); transition: transform .3s var(--ease);
  }
  body.reviews-open .review-more::after { transform: rotate(-135deg); margin-top: 2px; }
  /* No leader on a phone: the gap it bridges is ~28px there and it only ate
     space. flex-basis MUST be 0, not auto — with flex-wrap on, an auto basis
     makes the long name claim the whole line and the price wraps under it,
     which broke the single price rail (three right edges instead of one). */
  .price-leader { display: none; }
  .price-entry-body { flex: 1 1 0%; }

  .step-photos { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .brand-text { font-size: .74rem; letter-spacing: .16em; }
  .header-tel { font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Blanket, so a new transition can't slip through unguarded the way
     .condition figure img (1.2s transform) and .copy-status did. */
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .condition:hover figure img { transform: none; }
}