/* Patrick Barber
   Černá jako kůže křesel, bílá jako jejich prošití.
   Jediná barva na webu je cihlová zeď z fotky interiéru. */

@font-face { font-family: "Big Shoulders"; src: url("fonts/big-shoulders-display-latin-ext-wght-normal.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+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: "Big Shoulders"; src: url("fonts/big-shoulders-display-latin-wght-normal.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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif"; src: url("fonts/source-serif-4-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Source Serif"; src: url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --black: #000;
  --leather: #0e1013;   /* tmavá kůže křesla, jemně do modra */
  --line: #2b2e33;
  --stitch: #eceae4;    /* bílá nit */
  --muted: #a5a4a0;
  --ink: #0b0c0e;       /* text na světlém pruhu */
  --ink-muted: #55544f;

  --display: "Big Shoulders", "Arial Narrow", Impact, sans-serif;
  --text: "Source Serif", Georgia, "Times New Roman", serif;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --section: clamp(4.5rem, 10vw, 9rem);
  --stitch-line: repeating-linear-gradient(90deg, var(--stitch) 0 9px, transparent 9px 15px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--black); color: var(--stitch); font: 400 1.125rem/1.65 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .005em; }
h2 { font-size: clamp(3rem, 7.5vw, 6.5rem); }
:focus-visible { outline: 2px solid var(--stitch); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--stitch); color: var(--ink); padding: .75rem 1rem; z-index: 50; }
.skip:focus { left: 0; }
.wrap { width: 100%; max-width: 88rem; margin-inline: auto; padding-inline: var(--gutter); }

/* Hlavička: logo uprostřed, odkazy symetricky po stranách jako křesla */
.head { position: sticky; top: 0; z-index: 20; background: var(--black); }
.head__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding-block: .6rem; }
.head__logo img { height: 4.5rem; width: auto; }
.head__nav { display: flex; gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: center; }
.head__nav--r { justify-content: flex-end; }
.head__nav a, .menu a { font: 700 1.3rem/1 var(--display); letter-spacing: .03em; text-decoration: none; text-transform: uppercase; }
.head__nav a { padding-block: .5rem; background: var(--stitch-line) 0 100% / 100% 2px no-repeat; background-size: 0 2px; transition: background-size .25s ease; }
.head__nav a:hover, .head__nav a[aria-current] { background-size: 100% 2px; }
.head__toggle, .head__call { display: none; }
.menu { display: none; }

@media (max-width: 62rem) {
  .head__in { grid-template-columns: auto 1fr auto; gap: .75rem; }
  .head__nav { display: none; }
  .head__logo { grid-column: 1; }
  .head__logo img { height: 3.75rem; }
  .head__toggle { display: inline-flex; grid-column: 3; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: none; border: 1.5px dashed var(--stitch); color: inherit; font: 700 1.15rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
  .menu[data-open="true"] { display: block; border-top: 1.5px dashed var(--line); padding: .5rem var(--gutter) 1.25rem; background: var(--black); }
  .menu a { display: block; padding: .85rem 0; font-size: 1.75rem; }
}

/* Úvod */
.hero { text-align: center; overflow: hidden; }
.hero__text { padding: clamp(.5rem, 2vw, 1.5rem) var(--gutter) 0; position: relative; z-index: 1; }
.hero h1 { font-size: 13vw; font-weight: 900; line-height: .95; }
.hero h1 > span { display: block; }
.hero h1 .where { font-size: clamp(1.75rem, 3.6vw, 3.25rem); font-weight: 700; line-height: 1.1; margin-top: .25em; letter-spacing: .02em; }
.hero__lead { max-width: 44rem; margin: .75rem auto 1.25rem; color: var(--stitch); }
.hero__photo { margin-top: clamp(-7rem, -6vw, -1.5rem); -webkit-mask-image: linear-gradient(#0000 6%, #0009 26%, #000 46%); mask-image: linear-gradient(#0000 6%, #0009 26%, #000 46%); }
.hero__photo img { width: 100%; aspect-ratio: 2048 / 900; object-fit: cover; object-position: 50% 100%; animation: settle 1.2s cubic-bezier(.2,.7,.2,1) both; }
@keyframes settle { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@media (min-width: 40.01rem) { .hero h1 { font-size: min(13vw, 18rem); } }
@media (max-width: 40rem) {
  .hero h1 { font-size: 22.5vw; line-height: .92; }
  .hero__photo { margin-top: -1rem; }
  .hero__photo img { aspect-ratio: 3 / 2; }
  .hero .btn { display: none; } /* volací lišta je na mobilu vždy vidět */
  .hero__lead { margin-bottom: 0; }
}

/* Tlačítka */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: .4rem 1.6rem .5rem; font: 800 1.5rem/1 var(--display); letter-spacing: .02em; text-transform: uppercase; text-decoration: none; background: var(--stitch); color: var(--ink); border: 2px solid var(--stitch); transition: background-color .15s ease, color .15s ease; }
.btn:hover { background: transparent; color: var(--stitch); }
.btn--dark { background: var(--ink); color: var(--stitch); border-color: var(--ink); }
.btn--dark:hover { color: var(--ink); }
.more { font: 700 1.3rem/1 var(--display); letter-spacing: .03em; text-transform: uppercase; text-decoration: none; padding-bottom: .4rem; background: var(--stitch-line) 0 100% / 100% 2px no-repeat; }
.more:hover { background-size: 100% 3px; }

/* Ceník: název, prošitá vodicí linka, cena */
.section { padding-block: var(--section); }
.prices { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.prices__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 60% 50%; }
.menu-list { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.row { padding-block: 1.1rem; }
.row__top { display: flex; align-items: baseline; gap: .75rem; font: 800 clamp(1.75rem, 3.2vw, 2.75rem)/1.05 var(--display); text-transform: uppercase; }
.row__top::before { content: ""; order: 2; flex: 1 1 1.5rem; min-width: 1.5rem; height: 2px; background: var(--stitch-line); opacity: .55; transform: translateY(-.15em); }
.row__name { order: 1; }
.row__price { order: 3; white-space: nowrap; }
.row p { color: var(--muted); max-width: 34rem; margin-top: .3rem; font-size: 1.0625rem; }
.prices__note { margin: 1.25rem 0 1.75rem; }
@media (max-width: 52rem) { .prices { grid-template-columns: 1fr; } .prices__img img { aspect-ratio: 4 / 3; } }

/* Prošitá čára mezi sekcemi */
.seam { height: 2px; background: var(--stitch-line); opacity: .35; }

/* Jak to u nás chodí */
.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 2vw, 2rem); }
.how h2 { grid-column: 1 / -1; }
.how__item { grid-column: span 4; }
.how__item h3 { font-size: clamp(1.9rem, 3vw, 2.5rem); margin-bottom: .6rem; }
.how__item p { color: var(--stitch); max-width: 26rem; }
@media (max-width: 52rem) { .how__item { grid-column: 1 / -1; } }

/* Fotky */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, 1rem); padding-inline: clamp(.5rem, 1vw, 1rem); }
.grid img { width: 100%; height: 100%; object-fit: cover; }
.grid figure:nth-child(1) { grid-column: span 7; aspect-ratio: 7 / 5; }
.grid figure:nth-child(2) { grid-column: span 5; aspect-ratio: 5 / 5; }
.grid figure:nth-child(3) { grid-column: span 4; aspect-ratio: 1; }
.grid figure:nth-child(4) { grid-column: span 4; aspect-ratio: 1; }
.grid figure:nth-child(5) { grid-column: span 4; aspect-ratio: 1; }
.grid figure:nth-child(2) img { object-position: 60% 50%; }
@media (max-width: 40rem) {
  .grid figure:nth-child(n) { grid-column: span 12; aspect-ratio: 4 / 3; }
  .grid figure:nth-child(3), .grid figure:nth-child(4) { grid-column: span 6; aspect-ratio: 1; }
}

/* Recenze */
.reviews { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.reviews__score { position: sticky; top: 7rem; }
.reviews__num { font: 900 clamp(7rem, 15vw, 13rem)/.85 var(--display); }
.reviews__sub { margin-top: 2rem; }
.reviews__score .more { display: inline-block; margin-top: 1.25rem; }
.quote { padding-block: clamp(1.5rem, 3vw, 2.25rem); }
.quote + .quote { background: var(--stitch-line) 0 0 / 100% 2px no-repeat; }
.quote blockquote { font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.35; max-width: 42rem; }
.quote figcaption { margin-top: .75rem; color: var(--muted); font-size: 1.0625rem; }
@media (max-width: 52rem) { .reviews { grid-template-columns: 1fr; } .reviews__score { position: static; } }

/* Poukaz: jediný světlý pruh */
.voucher { background: var(--stitch); color: var(--ink); --stitch-line: repeating-linear-gradient(90deg, var(--ink) 0 9px, transparent 9px 15px); }
.voucher__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: end; padding-block: clamp(3rem, 6vw, 5rem); }
.voucher p { max-width: 30rem; margin-bottom: 1.25rem; }
@media (max-width: 52rem) { .voucher__in { grid-template-columns: 1fr; } }

/* Kontakt: nášivka na prošité kůži */
.contact { background: #040506 url("img/prosiv-tile.svg") center top / 96px 96px; padding: clamp(3rem, 8vw, 7rem) var(--gutter); }
.patch { max-width: 44rem; margin-inline: auto; background: var(--black); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3.5rem); text-align: center; outline: 2px dashed var(--stitch); outline-offset: -.6rem; }
.patch > img { height: clamp(9rem, 22vw, 13rem); width: auto; margin: 0 auto 1.5rem; }
.patch h2 { font-size: clamp(2.5rem, 6vw, 4.25rem); }
.patch__tel { display: block; margin-top: .25rem; font: 900 clamp(3.25rem, 11vw, 6.5rem)/1.05 var(--display); text-decoration: none; white-space: nowrap; }
.patch__tel:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; }
.patch dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; margin-top: 1.75rem; }
.patch dt { font: 700 1.3rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.patch dd { color: var(--stitch); font-size: 1.0625rem; line-height: 1.45; margin-top: .2rem; }
@media (max-width: 30rem) { .patch dl { grid-template-columns: 1fr; } }
.map { display: block; width: 100%; height: clamp(18rem, 40vw, 28rem); border: 0; filter: grayscale(1) invert(.92) contrast(.9); background: var(--leather); }

/* Patička */
.foot { padding-block: 2rem 2.5rem; color: var(--muted); font-size: 1rem; }
.foot__in { display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; }
.foot a:hover { color: var(--stitch); }

/* Stránka služeb */
.page-head { padding-block: clamp(1.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem); }
.page-head h1 { font-size: clamp(3.75rem, 12vw, 10.5rem); font-weight: 900; line-height: .95; }
.page-head p { max-width: 38rem; margin-top: 1rem; }
.group { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1rem clamp(2rem, 6vw, 6rem); padding-block: clamp(2rem, 4vw, 3.5rem); background: var(--stitch-line) 0 0 / 100% 2px no-repeat; }
.group h2 { font-size: clamp(2.5rem, 5vw, 4.25rem); }
.group .row:first-child { padding-top: 0; }
.row__price--soft { font-weight: 700; color: var(--muted); font-size: .72em; }
@media (max-width: 52rem) { .group { grid-template-columns: 1fr; } }
.faq details { padding-block: 1.1rem; background: var(--stitch-line) 0 0 / 100% 2px no-repeat; }
.faq summary { cursor: pointer; font: 800 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--display); text-transform: uppercase; }
.faq summary::marker { font-size: .8em; }
.faq details p { margin-top: .6rem; max-width: 38rem; }
.notfound { text-align: center; padding-block: clamp(4rem, 12vw, 9rem); }
.notfound h1 { font-size: clamp(3.5rem, 12vw, 9rem); font-weight: 900; }
.notfound p { margin: 1rem auto 1.75rem; max-width: 30rem; }

/* Volání vždy po ruce na mobilu */
.callbar { display: none; }
@media (max-width: 40rem) {
  body { padding-bottom: 4.25rem; }
  .callbar { display: flex; position: fixed; inset: auto 0 0; z-index: 30; min-height: 3.75rem; align-items: center; justify-content: center; padding-bottom: env(safe-area-inset-bottom); background: var(--stitch); color: var(--ink); font: 800 1.5rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
   Logo u ceníku a efekty
   Stavy .fx platí jen se zapnutým JS a bez prefers-reduced-motion,
   jinak je všechno vidět rovnou.
   ------------------------------------------------------------------ */
@view-transition { navigation: auto; }

:root { --ease: cubic-bezier(.16, 1, .3, 1); --stitch-v: repeating-linear-gradient(180deg, var(--stitch) 0 9px, transparent 9px 15px); }

/* Ceník: logo v našitém rámečku */
.prices__logo { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: var(--black); }
.prices__logo > img { position: relative; z-index: 1; width: 62%; }
.frame { position: absolute; inset: .75rem; z-index: 1; pointer-events: none; }
.frame i { position: absolute; display: block; }
.frame i:nth-child(1) { inset: 0 0 auto 0; height: 2px; background: var(--stitch-line); }
.frame i:nth-child(2) { inset: 0 0 0 auto; width: 2px; background: var(--stitch-v); }
.frame i:nth-child(3) { inset: auto 0 0 0; height: 2px; background: var(--stitch-line); }
.frame i:nth-child(4) { inset: 0 auto 0 0; width: 2px; background: var(--stitch-v); }
@media (max-width: 52rem) { .prices__logo { aspect-ratio: 4 / 3; } .prices__logo > img { width: 54%; } }

/* Prošitá kůže pod kurzorem */
.spot { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .4s ease;
  background: url("img/prosiv-tile-svetly.svg") center top / 96px 96px;
  -webkit-mask-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #000 0, #0009 45%, #0000 100%);
  mask-image: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), #000 0, #0009 45%, #0000 100%); }
.spot.is-on { opacity: 1; }
.contact { position: relative; }
.patch { position: relative; z-index: 1; }


/* Tlačítka: výplň přejede zleva */
.btn { background: linear-gradient(90deg, transparent 50%, var(--stitch) 50%) 100% 0 / 201% 100% no-repeat; transition: background-position .45s var(--ease), color .25s ease; }
.btn:hover { background-color: transparent; background-position: 0 0; color: var(--stitch); }
.btn--dark { background: linear-gradient(90deg, transparent 50%, var(--ink) 50%) 100% 0 / 201% 100% no-repeat; }
.btn--dark:hover { background-position: 0 0; color: var(--ink); }

/* Odkazy se při najetí znovu prošijí */
.more { display: inline-block; }
.more:hover { animation: sew .6s var(--ease); background-size: 100% 2px; }
@keyframes sew { from { background-size: 0 2px; } to { background-size: 100% 2px; } }

/* Řádek ceníku reaguje na myš */
@media (hover: hover) {
  .row__name { transition: translate .4s var(--ease); }
  .row:hover .row__name { translate: .5rem 0; }
  .row__top::before { transition: opacity .3s ease; }
  .row:hover .row__top::before { opacity: 1; }
}

/* Fotky: přiblížení při najetí */
.grid figure { overflow: hidden; }
.grid img { transition: scale 1.2s var(--ease); }
@media (hover: hover) { .grid figure:hover img { scale: 1.04; } }

/* Úvodní fotka: maska a pohyb patří různým prvkům */
.hero__photo { overflow: hidden; }
.hero__photo img { animation: none; transform-origin: 50% 100%; will-change: translate; }

/* --- Stavy před odhalením --- */
.w { display: inline-block; white-space: nowrap; clip-path: inset(-.32em -.1em -.04em); }
.wi { display: inline-block; }

.fx .hero h1 { visibility: hidden; }
.fx .hero h1.is-split { visibility: visible; }
.fx .hero h1 .wi { translate: 0 108%; animation: rise .95s var(--ease) forwards; animation-delay: calc(var(--i) * 26ms + 120ms); }
.fx .hero h1 .where .wi { animation-delay: calc(var(--i) * 70ms + 620ms); }
.fx .hero__lead { opacity: 0; animation: fade .8s ease .95s forwards; }
.fx .hero .btn { opacity: 0; animation: fade .8s ease 1.1s forwards; }
.fx .hero__photo { opacity: 0; animation: fade 1.5s ease .35s forwards; }
.fx .hero__photo img { animation: settle 2.2s var(--ease) .35s both; }
.fx .head { animation: fade-in .8s ease .2s both; }
@keyframes rise { to { translate: 0 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle { from { scale: 1.1; } to { scale: 1; } }

/* Nadpisy zpoza masky */
.fx h2:not(.reviews__num) .wi, .fx .page-head h1 .wi, .fx .patch__tel .wi { translate: 0 108%; transition: translate .9s var(--ease); transition-delay: calc(var(--i) * 70ms); }
.fx .patch__tel .wi { transition-delay: calc(var(--i) * 32ms + 120ms); }
.fx h2.is-in .wi, .fx .page-head h1.is-in .wi, .fx .patch__tel.is-in .wi { translate: 0 0; }

/* Obecné odhalení */
.fx [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity .8s ease, translate .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.fx [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* Řádky ceníku: název, našití linky, cena */
.fx .row__name { opacity: 0; translate: 0 14px; transition: opacity .6s ease, translate .8s var(--ease); }
.fx .row__top::before { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.6, 0, .3, 1) .15s, opacity .3s ease; }
.fx .row__price { opacity: 0; transition: opacity .6s ease .75s; }
.fx .row p { opacity: 0; transition: opacity .7s ease .25s; }
.fx .row.is-in .row__name, .fx .row.is-in .row__price, .fx .row.is-in p { opacity: 1; translate: 0 0; }
.fx .row.is-in .row__top::before { clip-path: inset(0); }
@media (hover: hover) { .fx .row.is-in:hover .row__name { translate: .5rem 0; } }

/* Prošité čáry se šijí zleva doprava */
.fx .seam { background-repeat: no-repeat; background-size: 0 2px; transition: background-size 1.5s cubic-bezier(.6, 0, .3, 1); }
.fx .seam.is-in { background-size: 100% 2px; }
.fx .group, .fx .quote + .quote { background-size: 0 2px; transition: background-size 1.3s cubic-bezier(.6, 0, .3, 1); }
.fx .group.is-in, .fx .quote + .quote.is-in { background-size: 100% 2px; }

/* Rámeček kolem loga se našije dokola, logo se objeví */
.fx .prices__logo > img { opacity: 0; scale: .94; transition: opacity 1s ease .5s, scale 1.4s var(--ease) .5s; }
.fx .prices__logo.is-in > img { opacity: 1; scale: 1; }
.fx .frame i { transition: clip-path .55s linear; }
.fx .frame i:nth-child(1) { clip-path: inset(0 100% 0 0); }
.fx .frame i:nth-child(2) { clip-path: inset(0 0 100% 0); transition-delay: .55s; }
.fx .frame i:nth-child(3) { clip-path: inset(0 0 0 100%); transition-delay: 1.1s; }
.fx .frame i:nth-child(4) { clip-path: inset(100% 0 0 0); transition-delay: 1.65s; }
.fx .prices__logo.is-in .frame i { clip-path: inset(0); }

/* Fotky se odkryjí jako opona a usadí */
.fx .grid img { clip-path: inset(100% 0 0 0); scale: 1.18; transition: clip-path 1.2s var(--ease), scale 1.8s var(--ease); }
.fx .grid figure:nth-child(even) img { transition-delay: .12s; }
.fx .grid figure.is-in img { clip-path: inset(0); scale: 1; }
@media (hover: hover) { .fx .grid figure.is-in:hover img { scale: 1.04; transition-duration: 1.2s; } }

/* Recenze: slova se rozsvěcují podle scrollu */
.fx .quote blockquote .w { clip-path: none; }
.fx .quote blockquote .wi { color: #55565a; transition: color .35s ease; }
.fx .quote blockquote .wi.is-lit { color: var(--stitch); }

/* Pruh s poukazem se při příjezdu roztáhne do šířky */
.fx .voucher { clip-path: inset(0 7%); transition: clip-path 1.2s var(--ease); }
.fx .voucher.is-in { clip-path: inset(0); }

.prices__logo .spot { inset: .75rem; }

/* Hodnocení: ocenění jako našitý štítek */
.award { display: inline-block; margin-top: 1.5rem; padding: .9rem 1.25rem 1rem; border: 2px dashed var(--stitch); }
.award span { display: block; font-size: 1rem; line-height: 1.3; color: var(--muted); }
.award strong { display: block; margin-top: .3rem; font: 800 clamp(1.9rem, 3vw, 2.5rem)/1.05 var(--display); text-transform: uppercase; white-space: nowrap; }

/* Kdo vás stříhá */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.about h2 { margin-bottom: 1.5rem; }
.about p { max-width: 30rem; }
.about p + p { margin-top: 1rem; }
.about__photo, .group__photo { overflow: hidden; }
.about__photo img, .group__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.2s var(--ease); }
.about__photo { aspect-ratio: 3 / 2; }
@media (hover: hover) { .about__photo:hover img, .group__photo:hover img { scale: 1.04; } }
@media (max-width: 52rem) { .about { grid-template-columns: 1fr; } }

/* Kontakt: navigace a Facebook */
.patch__links { display: flex; justify-content: center; gap: 2rem; margin-top: 1.75rem; }

/* Služby: stejný začátek jako úvod, skupiny s fotkami */
.hero--sluzby .hero__photo img { object-position: 50% 42%; }
.group { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; padding-block: clamp(3rem, 6vw, 5.5rem); }
.group--first { background-image: none; }
.fx .group--first { background-image: none; }
.group__side h2 { margin-bottom: 1.25rem; }
.group__photo { aspect-ratio: 4 / 3; }
.group--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.group--flip .group__side { order: 2; }
.group__note { margin-bottom: 1rem; max-width: 22rem; }
@media (max-width: 52rem) {
  .group, .group--flip { grid-template-columns: minmax(0, 1fr); }
  .group--flip .group__side { order: 0; }
}

/* Fotky se odkryjí stejně jako v galerii */
.fx .about__photo img, .fx .group__photo img { clip-path: inset(100% 0 0 0); scale: 1.18; transition: clip-path 1.2s var(--ease), scale 1.8s var(--ease); }
.fx .about__photo.is-in img, .fx .group__photo.is-in img { clip-path: inset(0); scale: 1; }
@media (hover: hover) { .fx .about__photo.is-in:hover img, .fx .group__photo.is-in:hover img { scale: 1.04; transition-duration: 1.2s; } }

/* Co všechno patří k úpravě vousů */
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.5rem; margin-top: .5rem; }
.steps li { padding-left: 1.5rem; background: var(--stitch-line) 0 .85em / .9rem 2px no-repeat; }
@media (max-width: 30rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* Výřezy skutečných fotek */
.grid figure:nth-child(2) img { object-position: 50% 28%; }
.hero--sluzby .hero__photo img { object-position: 50% 45%; }
.about__photo img { object-position: 50% 30%; }
.group__photo img { object-position: 50% 35%; }

/* Ceník: kratší řádky, aby se vešlo všech šest služeb */
.menu-list .row { padding-block: .7rem; }
.menu-list .row__top { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.menu-list .row p { margin-top: .1rem; }
.hero__lead a { text-underline-offset: .15em; }

/* Kontakt se vejde na jednu obrazovku */
.contact { padding: clamp(1.25rem, 3.5vw, 2.75rem) var(--gutter); }
.patch { max-width: 36rem; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem); }
.patch > img { height: clamp(4.5rem, 12vh, 6.5rem); margin-bottom: .6rem; }
.patch h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.patch__tel { font-size: clamp(2.75rem, 7vw, 4.5rem); margin-top: 0; }
.patch dl { margin-top: .9rem; gap: .75rem 1.5rem; }
.patch dt { font-size: 1.15rem; }
.patch dd { font-size: 1rem; line-height: 1.35; margin-top: .1rem; }
.patch__links { margin-top: .9rem; }
@media (max-width: 30rem) { .patch dl { grid-template-columns: 1fr 1fr; } .patch dd { font-size: .9375rem; } }

/* Mapa je zakrytá, načte se až po kliknutí */
.mapbox__cover { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; padding: clamp(1.75rem, 4vw, 3rem) var(--gutter); text-align: center; background: var(--leather); }
.mapbox__cover p { font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--display); text-transform: uppercase; }

/* Patička */
.foot { padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; color: var(--muted); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3rem); align-items: start; }
.foot__logo { display: inline-block; }
.foot__logo img { width: 7.5rem; height: auto; }
.foot__h { margin-bottom: .6rem; font: 700 1.3rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--stitch); }
.foot li { padding-block: .12rem; font-size: 1rem; }
.foot a { text-decoration: none; }
.foot li a:hover { color: var(--stitch); text-decoration: underline; text-underline-offset: .15em; }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem; margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1rem; font-size: .9375rem; background: var(--stitch-line) var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 2px no-repeat; }
.foot__bottom { background-image: repeating-linear-gradient(90deg, var(--line) 0 9px, transparent 9px 15px); }
@media (max-width: 52rem) {
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__logo { grid-column: 1 / -1; }
}

/* Právní odkazy v patičce */
.foot__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.foot__legal a:hover { color: var(--stitch); text-decoration: underline; text-underline-offset: .15em; }

/* Poznámka k mapě */
.mapbox__note { flex-basis: 100%; color: var(--muted); font-size: .9375rem; line-height: 1.4; }

/* Právní informace */
.legal .group { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding-block: clamp(2.5rem, 5vw, 4rem); }
.legal .group h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); overflow-wrap: break-word; }
.legal__body { max-width: 44rem; }
.legal__body p + p, .legal__body ul + p { margin-top: .9rem; }
.legal__body h3 { margin: 1.75rem 0 .4rem; font-size: clamp(1.5rem, 2.2vw, 1.85rem); }
.legal__body h3:first-child { margin-top: 0; }
.legal__body strong { font-weight: 600; }
.legal__body ul { margin-top: .5rem; list-style: none; }
.legal__body li { padding-left: 1.5rem; margin-top: .25rem; background: var(--stitch-line) 0 .85em / .9rem 2px no-repeat; }
.legal__body a { text-underline-offset: .15em; }
@media (max-width: 52rem) { .legal .group { grid-template-columns: minmax(0, 1fr); } }
