/* Hlavu Vzhůru — Kadeřnictví | shared styles */

:root{
  color-scheme: dark;
  --bg:#000;
  --text:#dadada;
  --text-bright:#f2f2f2;
  --text-muted:#8a8a8a;
  --divider:#3a3a3a;
  --border:#4a4a4a;
  --fade-transition:
    opacity .6s cubic-bezier(.16,.8,.3,1) calc(min(var(--i, 0), 5) * 70ms),
    transform .6s cubic-bezier(.16,.8,.3,1) calc(min(var(--i, 0), 5) * 70ms);
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html,body{
  height:100%;
}

html{
  scroll-behavior:smooth;
}

@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior:auto;
  }
}

body{
  background-color:var(--bg);
  color:var(--text);
  font-family:'Clash Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight:300;
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

.container{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:0 6vw;
}

/* ---------- Header / nav ---------- */

.site-header{
  border-bottom:1px solid var(--divider);
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:100;
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 6vw;
  max-width:1040px;
  margin:0 auto;
}

.nav-brand{
  display:flex;
  align-items:center;
  position:relative;
  z-index:201;
}

.nav-logo{
  height:38px;
  width:auto;
  flex-shrink:0;
}

@media (max-width:480px){
  .nav-logo{
    height:32px;
  }
}

.nav-toggle{
  display:none;
}

.nav-toggle-label{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  padding:6px;
  position:relative;
  z-index:201;
}
.nav-toggle-label span{
  width:22px;
  height:2px;
  background:var(--text-bright);
  display:block;
  transform-origin:center;
  transition:transform .3s ease, opacity .3s ease, width .3s ease;
}
.nav-toggle-label span:nth-child(2){
  width:16px;
  margin-left:auto;
}
.nav-toggle:checked ~ .nav-toggle-label span{
  width:22px;
}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(2){
  opacity:0;
  transform:scaleX(0);
}
.nav-toggle:checked ~ .nav-toggle-label span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(1rem, 2.5vw, 2rem);
  list-style:none;
  flex-wrap:wrap;
}

.nav-links a{
  font-size:.9rem;
  letter-spacing:.02em;
  font-weight:300;
  color:var(--text-muted);
  border-bottom:1px solid transparent;
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}

.nav-links a:hover{
  color:var(--text-bright);
}

.nav-links a.active{
  color:var(--text-bright);
  border-color:var(--text-bright);
}

.nav-links a.cta{
  color:var(--bg);
  background:var(--text-bright);
  padding:.5rem 1rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.8rem;
  border-bottom:none;
}
.nav-links a.cta:hover{
  color:var(--bg);
  background:var(--text);
}

/* mobile nav */
@media (max-width:700px){
  .nav-toggle-label{
    display:flex;
  }
  .nav-links{
    position:fixed;
    inset:0;
    z-index:150;
    width:auto;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:0;
    background-color:var(--bg);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .35s ease;
  }
  .nav-toggle:checked ~ .nav-links{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-links li{
    width:220px;
    text-align:center;
    border-bottom:1px solid var(--divider);
    padding:1.1rem 0;
    opacity:0;
    transform:translateY(14px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .nav-links li:first-child{
    border-top:1px solid var(--divider);
  }
  .nav-toggle:checked ~ .nav-links li{
    opacity:1;
    transform:translateY(0);
  }
  .nav-links li:nth-child(1){ transition-delay:.08s; }
  .nav-links li:nth-child(2){ transition-delay:.14s; }
  .nav-links li:nth-child(3){ transition-delay:.2s; }
  .nav-links li:nth-child(4){ transition-delay:.26s; }
  .nav-links li:nth-child(5){ transition-delay:.32s; }
  .nav-links a{
    font-size:1.1rem;
    font-weight:700;
  }
  .nav-links a.cta{
    background:var(--text-bright);
    color:var(--bg);
    padding:.5rem 1.25rem;
  }
  .nav{
    flex-wrap:wrap;
  }
}

@media (max-width:700px) and (prefers-reduced-motion: reduce){
  .nav-links, .nav-links li, .nav-toggle-label span{
    transition:none !important;
  }
}

/* ---------- Main / page layout ---------- */

main{
  flex:1;
  padding:clamp(2.5rem, 6vw, 5rem) 0;
}

main:has(.hero){
  padding-top:clamp(.75rem, 2.5vw, 1.5rem);
}

.title-row{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:.9rem;
}

.title-crown{
  width:18px;
  height:auto;
  flex-shrink:0;
  color:var(--text-muted);
}

.title-line{
  flex:1;
  height:1px;
  background:var(--divider);
  transform-origin:left;
  transform:scaleX(0);
  transition:transform .6s ease-out .2s;
}

.title-row.is-visible .title-line{
  transform:scaleX(1);
}

.page-title{
  font-weight:700;
  font-size:clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-bright);
}

.page-lede{
  color:var(--text-muted);
  font-weight:300;
  max-width:46ch;
  margin-bottom:clamp(2rem, 5vw, 3rem);
}

.divider{
  width:48px;
  height:1px;
  background:var(--divider);
  margin:1.5rem 0;
}

/* ---------- Scroll-reveal entrance animation ---------- */

.fade-up{
  opacity:0;
  transform:translateY(16px);
  transition:var(--fade-transition);
}

.fade-up.is-visible{
  opacity:1;
  transform:translateY(0);
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .fade-up, .title-line{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

.btn{
  display:inline-block;
  background:transparent;
  cursor:pointer;
  border:1px solid var(--text);
  color:var(--text-bright);
  font-family:inherit;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:.85rem;
  padding:.85rem 1.6rem;
  transition:background .2s ease, color .2s ease;
}
.btn:hover{
  background:var(--text-bright);
  color:var(--bg);
}
.btn-group{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
}

/* ---------- Footer ---------- */

.site-footer{
  border-top:1px solid var(--divider);
  padding:2rem 6vw;
  text-align:center;
  color:var(--text-muted);
  font-size:.8rem;
  letter-spacing:.04em;
}
.site-footer a{
  color:var(--text);
}
.site-footer a:hover{
  color:var(--text-bright);
}
.footer-links{
  display:flex;
  justify-content:center;
  gap:1.2rem;
  margin-bottom:.75rem;
  flex-wrap:wrap;
}

/* ---------- Homepage hero + logo build-up ---------- */

.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(.85rem, 2.5vw, 1.5rem);
  padding:0 0 clamp(1.5rem, 4vw, 2.5rem);
}

.hero-mark{
  display:flex;
  justify-content:center;
}

@media (max-width:600px){
  main:has(.hero){
    padding-top:clamp(1rem, 4vw, 1.5rem);
  }
  .hero{
    gap:1.75rem;
  }
}

.hero-title{
  display:flex;
  justify-content:center;
}

.hero-logo{
  width:clamp(240px, 42vw, 380px);
  height:auto;
  opacity:0;
  animation:wordRise .65s cubic-bezier(.22,.9,.32,1.35) .4s forwards;
}

.hero-logo-crown{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:crownSway 3.6s ease-in-out 1.05s infinite;
}

@keyframes crownSway{
  0%, 100%{ transform:rotate(-4deg); }
  50%{ transform:rotate(4deg); }
}
@keyframes wordRise{
  from{ opacity:0; transform:translateY(38px); }
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-logo, .hero-logo-crown{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

.hero-text{
  color:var(--text-muted);
  max-width:48ch;
  font-weight:300;
}

.hero-text,
.hero .btn-group,
.scroll-indicator{
  opacity:0;
  animation:fadeUp .45s ease-out forwards;
}
.hero-text{ animation-delay:1.05s; }
.hero .btn-group{ animation-delay:1.15s; }
.scroll-indicator{ animation-delay:1.25s; }

@media (prefers-reduced-motion: reduce){
  .hero-text, .hero .btn-group, .scroll-indicator{
    animation:none !important;
    opacity:1 !important;
  }
}

.scroll-indicator{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--divider);
  border-radius:50%;
  color:var(--text-muted);
  margin-top:.25rem;
  transition:color .2s ease, border-color .2s ease;
}
.scroll-indicator:hover{
  color:var(--text-bright);
  border-color:var(--text);
}
.scroll-arrow{
  animation:bob 1.8s ease-in-out infinite;
}
@keyframes bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(4px); }
}
@media (prefers-reduced-motion: reduce){
  .scroll-arrow{
    animation:none !important;
  }
}

/* ---------- About (homepage) ---------- */

.about{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(2rem, 6vw, 4rem);
  align-items:start;
  padding-top:clamp(2.5rem, 6vw, 4rem);
  margin-top:clamp(2.5rem, 6vw, 4rem);
  border-top:1px solid var(--divider);
  text-align:left;
  scroll-margin-top:5rem;
}
@media (max-width:800px){
  .about{
    grid-template-columns:1fr;
  }
}

.about-text p{
  color:var(--text-bright);
  font-weight:600;
  max-width:52ch;
}
.about-text p + p{
  margin-top:.9rem;
}

.about-brand{
  margin-top:1.25rem;
}
.about-brand-logo{
  height:88px;
  width:auto;
  opacity:.85;
}

.about-photos{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:.75rem;
}

.about-photos a.gallery-tile{
  aspect-ratio:1;
  font-size:.7rem;
  transition:var(--fade-transition), border-color .2s ease, color .2s ease;
}
.about-photos a.gallery-tile:hover{
  border-color:var(--text);
  color:var(--text-bright);
}

.about-more-link{
  grid-column:1 / -1;
  margin-top:.25rem;
  display:inline-block;
  color:var(--text-muted);
  font-size:.8rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-bottom:1px solid var(--divider);
  padding-bottom:2px;
  transition:var(--fade-transition), color .2s ease, border-color .2s ease;
}
.about-more-link:hover{
  color:var(--text-bright);
  border-color:var(--text-bright);
}

/* ---------- Gallery ---------- */

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:1rem;
}

.gallery-tile{
  aspect-ratio:4/5;
  border:1px solid var(--divider);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background-color:transparent;
  background-image:
    repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,.03) 10px, rgba(255,255,255,.03) 20px);
  font-family:inherit;
  width:100%;
  padding:0;
  overflow:hidden;
  transition:var(--fade-transition), border-color .2s ease, color .2s ease;
}

button.gallery-tile{
  cursor:pointer;
}
button.gallery-tile:hover{
  border-color:var(--text);
  color:var(--text-bright);
}
.gallery-tile img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery-tile[hidden],
.gallery-more-wrap[hidden]{
  display:none;
}
.gallery-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:clamp(1.5rem, 4vw, 2.5rem);
}

@media (max-width:600px){
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:.6rem;
  }
  .gallery-tile{
    font-size:.65rem;
    aspect-ratio:1;
  }
}

/* ---------- Lightbox ---------- */

.lightbox{
  position:fixed;
  inset:0;
  z-index:400;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.92);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
/* No fixed box — the photo sizes itself as large as the viewport allows,
   leaving room at the sides for the arrows. */
.lightbox-frame{
  max-width:min(88vw, calc(100vw - 220px));
  max-height:84vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-muted);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:.95rem;
  transform:scale(.96);
  opacity:0;
  transition:transform .25s ease, opacity .25s ease;
}
.lightbox-frame img{
  max-width:min(88vw, calc(100vw - 220px));
  max-height:84vh;
  width:auto;
  height:auto;
  display:block;
}
.lightbox.is-open .lightbox-frame{
  transform:scale(1);
  opacity:1;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:absolute;
  background:transparent;
  border:1px solid var(--divider);
  color:var(--text-bright);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  width:44px;
  height:44px;
  font-size:1.1rem;
  font-family:inherit;
  transition:border-color .2s ease, color .2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
  border-color:var(--text-bright);
}
.lightbox-close{
  top:1.5rem;
  right:1.5rem;
}
.lightbox-prev{
  left:1.5rem;
  top:50%;
  transform:translateY(-50%);
}
.lightbox-next{
  right:1.5rem;
  top:50%;
  transform:translateY(-50%);
}
@media (max-width:600px){
  /* Arrows move below the photo, so it can use the full width here. */
  .lightbox-frame,
  .lightbox-frame img{
    max-width:94vw;
    max-height:70vh;
  }
  .lightbox-close{
    top:1rem;
    right:1rem;
    width:38px;
    height:38px;
  }
  /* Arrows sit below the photo instead of over its edges. */
  .lightbox-prev,
  .lightbox-next{
    top:auto;
    bottom:1.5rem;
    transform:none;
  }
  .lightbox-prev{
    left:calc(50% - 56px);
    right:auto;
  }
  .lightbox-next{
    right:calc(50% - 56px);
    left:auto;
  }
}

/* ---------- Ceník ---------- */

.price-category{
  margin-bottom:clamp(2rem, 5vw, 3rem);
}
.price-category h2{
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:1.05rem;
  color:var(--text-bright);
  margin-bottom:1rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--divider);
}
.price-category-note{
  color:var(--text-muted);
  font-size:.85rem;
  margin:-.5rem 0 .75rem;
}
.price-row{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem 0;
  border-bottom:1px dashed var(--divider);
  font-weight:300;
}
.price-row .name{
  color:var(--text);
}
.price-row .price{
  color:var(--text-bright);
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  white-space:nowrap;
}
.price-note{
  color:var(--text-muted);
  font-size:.85rem;
  max-width:60ch;
  margin-top:clamp(1rem, 3vw, 2rem);
}

/* ---------- Kontakt ---------- */

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 3rem);
}
@media (max-width:700px){
  .contact-grid{
    grid-template-columns:1fr;
  }
}
.contact-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.contact-list .label{
  color:var(--text-muted);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.15rem;
}
.contact-list .value{
  color:var(--text-bright);
  font-weight:700;
}
.contact-list .value a{
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s ease;
}
.contact-list .value a:hover{
  color:var(--text-muted);
}
.hours-table{
  border-collapse:collapse;
  font-weight:300;
  font-size:.85rem;
}
.hours-table th,
.hours-table td{
  padding:.3rem .75rem .3rem 0;
  text-align:left;
  white-space:nowrap;
}
.hours-table th{
  color:var(--text-muted);
  font-weight:700;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding-bottom:.5rem;
}
.hours-table td:first-child{
  color:var(--text-muted);
  font-weight:700;
  padding-right:1rem;
}
.hours-table td{
  color:var(--text-bright);
}
.hours-note{
  color:var(--text-muted);
  font-size:.75rem;
  font-weight:300;
  margin-top:.5rem;
}
.map-frame{
  width:100%;
  aspect-ratio:4/3;
  border:1px solid var(--divider);
}

/* ---------- Rezervace ---------- */

.reservation-box{
  border:1px solid var(--divider);
  padding:clamp(1.5rem, 5vw, 2.5rem);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
}
.reservation-note{
  color:var(--text-muted);
  font-size:.85rem;
  max-width:42ch;
}
.reservation-frame{
  width:100%;
  max-width:800px;
  height:500px;
  border:0;
}
@media (max-width:600px){
  .reservation-frame{
    height:640px;
  }
}