/* Hairdresser & Barber by Iryna Hončarova – honcarovahair.cz */

@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-latin-ext.woff2) format('woff2');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:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-latin.woff2) format('woff2');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:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/jost-latin-ext.woff2) format('woff2');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:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/jost-latin.woff2) format('woff2');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}
/* azbuka (ruská verze): Bodoni Moda ji nemá, proto pro azbuku Playfair Display; Jost má vlastní */
@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/playfair-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-display:swap;src:url(../fonts/jost-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{
  --ink:#141312; --ink2:#1e1c1a; --paper:#faf8f5; --bez:#f2ede6;
  --zlata:#c9a877; --zlata-t:#8a6a3f; --text:#2c2824; --sede:#6f665d; --sede-t:rgba(255,255,255,.66);
  --linka:rgba(20,19,18,.12); --linka-t:rgba(255,255,255,.14);
  --serif:'Bodoni Moda',Georgia,serif; --sans:'Jost','Segoe UI',Arial,sans-serif;
  --hlavicka:72px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hlavicka) + 8px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--text);font:300 18px/1.65 var(--sans)}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:500;font-variation-settings:'opsz' 28;line-height:1.08;margin:0;letter-spacing:-.005em}
h2{font-size:clamp(36px,5vw,58px)}
h3{font-size:26px}
p{margin:0 0 1em}
figure{margin:0}
.vh,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px}
:focus-visible{outline:2px solid var(--zlata);outline-offset:3px}
.sirka{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.tmave{background:var(--ink);color:#fff}
.nadpisek{font-weight:500;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--zlata-t);margin:0 0 16px}
.tmave .nadpisek{color:var(--zlata)}

/* tlačítka */
.tl{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 28px;border-radius:999px;font:500 14px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s,border-color .2s;border:1px solid transparent;text-align:center}
.tl--zlate{background:var(--zlata);color:var(--ink)}
.tl--zlate:hover{background:#d8bb8f}
.tl--obrys{border-color:var(--zlata);color:var(--zlata)}
.tl--obrys:hover{background:var(--zlata);color:var(--ink)}
.tl--tmave{background:var(--ink);color:#fff}
.tl--tmave:hover{background:#2c2925}
.tl--obrys-tmave{border-color:var(--ink);color:var(--ink)}
.tl--obrys-tmave:hover{background:var(--ink);color:#fff}
.tlacitka{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.tlacitka--stred{justify-content:center;margin-top:40px}
.odkaz{font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--zlata-t);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.hvezdy{color:var(--zlata);letter-spacing:.08em}

/* hlavička */
.hlavicka{position:sticky;top:0;z-index:50;background:rgba(20,19,18,.96);color:#fff;backdrop-filter:blur(6px);border-bottom:1px solid var(--linka-t)}
.hlavicka__in{display:flex;align-items:center;justify-content:space-between;height:var(--hlavicka);gap:20px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo__ikona{width:34px;height:34px;flex:none;fill:none;stroke:var(--zlata);stroke-width:2.4;stroke-linecap:round}
.logo__text{display:flex;flex-direction:column;line-height:1.1}
.logo__nazev{font-family:var(--serif);font-weight:500;font-variation-settings:'opsz' 28;font-size:21px}
.logo__by{font-size:13px;letter-spacing:.12em;color:var(--zlata)}
.menu{display:flex;align-items:center;gap:26px}
.menu a{font-weight:400;font-size:14px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:rgba(255,255,255,.86)}
.menu a:hover{color:var(--zlata)}
.menu a.menu__rez{color:var(--ink);min-height:42px;padding:10px 22px}
.menu a.menu__rez:hover{color:var(--ink)}
.menu{margin-left:auto}
.menu a{white-space:nowrap}
.logo{flex:none}
@media (min-width:1181px){
  :lang(de) .menu,:lang(en) .menu{gap:22px}
  :lang(de) .menu a{letter-spacing:.1em}
}
.menu-tlacitko{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer}

/* přepínač jazyků */
.jazyk{position:relative;flex:none}
.jazyk summary{list-style:none;display:flex;align-items:center;gap:7px;min-height:44px;padding:0 2px;cursor:pointer;font-weight:500;font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.86);user-select:none}
.jazyk summary::-webkit-details-marker{display:none}
.jazyk summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.jazyk[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.jazyk summary:hover{color:var(--zlata)}
.jazyk__ikona{width:18px;height:18px;fill:none;stroke:var(--zlata);stroke-width:1.5}
.jazyk__seznam{position:absolute;right:0;top:calc(100% + 10px);margin:0;padding:6px 0;list-style:none;background:var(--ink);border:1px solid var(--linka-t);min-width:170px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.jazyk__seznam a{display:flex;justify-content:space-between;gap:14px;padding:10px 18px;font-size:15px;text-decoration:none;color:rgba(255,255,255,.86)}
.jazyk__seznam a span{font-size:12px;letter-spacing:.14em;color:var(--sede-t)}
.jazyk__seznam a:hover,.jazyk__seznam a[aria-current]{color:var(--zlata)}
.menu-tlacitko span:not(.vh){display:block;height:2px;background:#fff;margin:5px 0;transition:transform .2s,opacity .2s}

/* úvod */
.uvod{padding:72px 0 88px;overflow:hidden}
.uvod__in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.h1-znacka{display:block;font-size:clamp(54px,7.4vw,104px);line-height:.98}
.h1-pod{display:block;font-family:var(--sans);font-weight:500;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--zlata);margin-top:22px;font-variation-settings:normal}
.uvod__popis{font-size:20px;color:rgba(255,255,255,.85);max-width:520px;margin-top:26px}
.hodnoceni{display:inline-block;margin-top:30px;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--sede-t);text-decoration:none}
.hodnoceni strong{color:#fff;font-weight:500}
.uvod__foto{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.oblouk{border-radius:999px 999px 0 0;overflow:hidden;background:#2a2725}
.oblouk img{width:100%;height:100%;object-fit:cover}
.uvod__foto .oblouk{aspect-ratio:9/17}
.oblouk--nize{margin-top:64px}

/* pás s oceněním */
.pas{background:var(--bez);border-bottom:1px solid var(--linka)}
.pas__in{padding-top:26px;padding-bottom:26px;text-align:center}
.pas p{margin:0}
.pas__velke{font-family:var(--serif);font-weight:500;font-variation-settings:'opsz' 28;font-size:26px;color:var(--ink)}
.pas__male{display:inline-block;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--zlata-t);margin-left:14px}

/* sekce */
.sekce{padding:104px 0}
.sekce--bezova{background:var(--bez)}
.hlava{margin-bottom:52px;max-width:760px}
.hlava--stred{margin-left:auto;margin-right:auto;text-align:center}
.hlava__pod{color:var(--sede);margin-top:16px;font-size:18px}
.tmave .hlava__pod{color:var(--sede-t)}
.hlava__pod a{color:var(--zlata-t)}

/* služby */
.karty{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.karta{background:#fff;border:1px solid var(--linka);display:flex;flex-direction:column}
.karta img{aspect-ratio:4/5;width:100%;object-fit:cover}
.karta__text{padding:24px 22px 28px;display:flex;flex-direction:column;flex:1}
.karta h3{font-size:24px;margin-bottom:12px}
.karta p{font-size:16px;color:var(--sede);flex:1}
.karta .odkaz{align-self:flex-start}

/* svatby */
.svatby{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.svatby__text p{color:rgba(255,255,255,.85)}
.svatby__text h2{margin-bottom:26px}
.pozn{font-size:16px;color:var(--zlata)!important;border-left:0;margin-top:8px}
.mrizka{display:grid;gap:14px}
.mrizka figure{position:relative;overflow:hidden;background:#2a2725}
.mrizka img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transition:transform .5s}
.mrizka figure:hover img{transform:scale(1.03)}
.mrizka figcaption{position:absolute;left:10px;bottom:8px;font-size:12px;letter-spacing:.04em;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.mrizka--svatby{grid-template-columns:repeat(3,1fr)}
.mrizka--galerie{grid-template-columns:repeat(3,1fr);gap:18px}
.mrizka--galerie img{aspect-ratio:4/5;cursor:zoom-in}

/* ceník */
.ceniky{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start}
.cenik{background:#fff;border:1px solid var(--linka);padding:30px 28px 32px}
.cenik h3{margin-bottom:18px}
.cenik table{width:100%;border-collapse:collapse;font-size:16px}
.cenik th{text-align:left;font-weight:300;padding:10px 12px 10px 0;border-bottom:1px solid var(--linka)}
.cenik td{text-align:right;white-space:nowrap;font-weight:500;padding:10px 0;border-bottom:1px solid var(--linka);font-variant-numeric:tabular-nums}
.cenik td::after{content:" Kč";font-weight:300;color:var(--sede)}
:lang(en) .cenik td::after,:lang(de) .cenik td::after{content:" CZK"}
:lang(ru) .cenik td::after,:lang(uk) .cenik td::after{content:" крон"}
.cenik__pozn{font-size:14px;color:var(--sede);margin:18px 0 0;line-height:1.55}
.cenik__tl{margin-top:24px;width:100%}

/* o nás */
.onas{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:center}
.onas__foto{position:relative;padding-right:22%}
.onas__foto .oblouk{aspect-ratio:4/5}
.onas__mala{position:absolute;right:0;bottom:-28px;width:44%;aspect-ratio:1;border:8px solid var(--paper);overflow:hidden}
.onas__mala img{width:100%;height:100%;object-fit:cover;object-position:30% 50%}
.onas__text h2{margin-bottom:24px}
.onas__text p{color:var(--sede)}
.onas__text strong{color:var(--text);font-weight:500}
.body{list-style:none;margin:24px 0 0;padding:0}
.body li{padding:10px 0 10px 30px;position:relative;border-bottom:1px solid var(--linka)}
.body li::before{content:"";position:absolute;left:4px;top:21px;width:9px;height:9px;border-radius:50%;background:var(--zlata)}

/* recenze */
.velke-cislo{font-size:clamp(56px,8vw,88px)}
#recenze h2 .hvezdy{font-family:var(--sans);font-size:28px;vertical-align:middle;margin-left:10px}
.recenze{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.recenze blockquote{margin:0;background:var(--ink2);border:1px solid var(--linka-t);padding:30px 28px}
.recenze p{font-size:18px;color:rgba(255,255,255,.88)}
.recenze footer{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--zlata)}

/* kontakt */
.kontakt{display:grid;grid-template-columns:1.2fr .8fr;gap:72px;align-items:center}
.kontakt h2{margin-bottom:28px}
.udaje{margin:0}
.udaje div{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--linka)}
.udaje dt{font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--zlata-t);padding-top:3px}
.udaje dd{margin:0}
.udaje strong{font-weight:500}
.udaje a{text-decoration:none;border-bottom:1px solid var(--linka)}
.udaje a:hover{border-color:var(--zlata)}
.site{display:flex;flex-wrap:wrap;gap:18px}
.kontakt__foto{aspect-ratio:3/4}

/* patička */
.paticka{padding:56px 0 64px;font-size:14px}
.paticka__in{display:grid;grid-template-columns:1fr 2fr;gap:40px}
.paticka__nazev{font-family:var(--serif);font-weight:500;font-variation-settings:'opsz' 28;font-size:26px;margin:0}
.paticka__by{color:var(--zlata);letter-spacing:.12em;margin:4px 0 0}
.paticka__pravni p{color:var(--sede-t);margin-bottom:8px}

/* mobilní lišta */
.lista-mobil{display:none}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(10,9,8,.94);display:flex;align-items:center;justify-content:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto}
.lightbox__zavrit{position:absolute;top:12px;right:16px;width:48px;height:48px;border:0;background:none;color:#fff;font-size:40px;line-height:1;cursor:pointer}

/* --- menší obrazovky --- */
/* hlavička: pod 1180 px menu schované pod tlačítkem (delší německé/anglické/ruské položky by se nevešly) */
@media (max-width:1180px){
  .menu-tlacitko{display:block;order:2}
  .jazyk{margin-left:auto}
  .hlavicka__in{gap:12px}
  .menu{display:none;position:absolute;top:var(--hlavicka);right:0;width:340px;flex-direction:column;align-items:stretch;gap:0;background:var(--ink);padding:8px 24px 24px;border:1px solid var(--linka-t);border-top:0}
  .menu.otevreno{display:flex}
  .menu a{padding:14px 0;border-bottom:1px solid var(--linka-t);font-size:15px}
  .menu a.menu__rez{margin-top:16px;border-bottom:0}
  .menu-tlacitko[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-tlacitko[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-tlacitko[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:1080px){
  .karty{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  :root{--hlavicka:64px}
  body{font-size:17px}
  .menu{left:0;width:auto;padding:8px 20px 24px;border:0;border-bottom:1px solid var(--linka-t)}
  .uvod{padding:44px 0 56px}
  .uvod__in,.svatby,.onas,.kontakt{grid-template-columns:1fr;gap:40px}
  .uvod__foto{max-width:520px}
  .oblouk--nize{margin-top:40px}
  .sekce{padding:72px 0}
  .ceniky,.recenze{grid-template-columns:1fr}
  .mrizka--galerie{grid-template-columns:repeat(2,1fr);gap:12px}
  .onas__foto{max-width:460px}
  .kontakt__foto{max-width:420px}
  .paticka__in{grid-template-columns:1fr;gap:20px}
  .pas__male{display:block;margin:6px 0 0}
  .lista-mobil{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);border-top:1px solid var(--linka-t)}
  .lista-mobil a{display:flex;align-items:center;justify-content:center;min-height:56px;color:#fff;text-decoration:none;font-weight:500;font-size:14px;letter-spacing:.14em;text-transform:uppercase}
  .lista-mobil__rez{background:var(--zlata);color:var(--ink)!important}
  body{padding-bottom:56px}
}
@media (max-width:560px){
  .sirka{padding:0 16px}
  .karty{grid-template-columns:1fr}
  .mrizka--svatby{grid-template-columns:repeat(2,1fr)}
  .udaje div{grid-template-columns:1fr;gap:4px}
  .uvod__popis{font-size:18px}
  .tlacitka .tl{width:100%}
  .logo__nazev{font-size:19px}
  .logo__by{font-size:12px}
  .nadpisek{font-size:13px;letter-spacing:.2em}
  .h1-pod{font-size:14px;letter-spacing:.16em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mrizka img{transition:none}
}
