@layer components {    

  /* HEADER */
  header {
    position: relative;
    width:100%;
    height: 90vh;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    padding-top:0;
    z-index:10000;
  }

  .hero-wrapper {
    width:100%;
    max-width:none;
    background:url('../imgs/pozadi.webp') center/cover no-repeat;
    border-radius:0 0 var(--space-300) var(--space-300);
    overflow:hidden;
    position:relative;
  }

  .overlay {
    position:absolute;
    inset:0;
    background:var(--color-overlay);
  }

  nav {
    position:relative;
    z-index:2;
    display:flex;
    white-space: nowrap;
    flex-wrap: nowrap;
    justify-content:center;
    align-items:center;
    padding:var(--space-30) var(--space-40);
    margin: 0 var(--space-20);
    font-size: var(--fs-15);
    font-weight:600;
  }

  nav .menu{
    display:flex;
    gap:var(--space-30);
    align-items:center;
    justify-content:center;
  }

  nav .phone{
    color:var(--color-green);
    font-weight:700;
  }

  nav a {
    color:var(--color-white);
    text-decoration:none;
    font-weight:800;
    font-size: var(--fs-28);
  }

  nav .phone {
    grid-column:3;
    justify-self:end;
    font-weight:600;
  }

  .hero {
    position:relative;
    z-index:2;
    text-align:center;
    padding:var(--space-80) var(--space-20) var(--space-160);
  }

  .logo {
    color:var(--color-green);
    line-height:1;
  }

  .logo img {
    width:var(--space-360); 
    height:var(--space-360);
    align-items: center;
  }

  .hero h1 {
    font-size: var(--fs-36);
    margin-bottom:var(--space-12);
    font-weight:800;
    gap: var(--space-20);
    padding-bottom: var(--space-20);
  }

  .hero p {
    font-size: var(--fs-23);
    margin-bottom:var(--space-40);
    font-weight:500;

  }


  /* .btn je definované níže v sekci reviews (jedno místo) */

  /* SERVICES */
  section.services {
    margin-top:-140px;
    padding:var(--space-240) var(--space-20) var(--space-10);
    text-align:center;
  }

  /* FOOTER */
  footer.footer{
    background:var(--color-footer-bg);
    color:var(--color-ink);
    padding:var(--space-70) var(--space-20) var(--space-40);
  }

  .footer-inner{
    max-width:var(--space-1200);
    margin:0 auto var(--space-40);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-40);
  }

  .footer-col h4{
    font-size: var(--fs-20);
    margin-bottom:var(--space-20);
    font-weight:600;
  }

  .footer-col p{
    margin-bottom:var(--space-12);
    color:var(--color-ink-soft);
  }

  .footer-col a{
    color:var(--color-ink);
    text-decoration:none;
  }

  .footer-col.center{text-align:center;}
  .footer-col.right{text-align:right;}

  .copyright{
    text-align:center;
    font-size: var(--fs-14);
    color:var(--color-ink-muted);
  }

  /* WHY SECTION */
  section.why{
    padding:var(--space-120) var(--space-20);
    position:relative;
    overflow:hidden;
  }

  .why-inner{
    max-width:var(--space-1200);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:var(--space-80);
    align-items:center;
  }

  .why-label{
    display:inline-block;
    background:var(--color-green);
    color:var(--color-black);
    font-weight:700;
    padding:var(--space-14) var(--space-22);
    margin-bottom:var(--space-40);
    font-size: var(--fs-28);
  }

  .why-item{
    display:flex;
    gap:var(--space-20);
    margin-bottom:var(--space-28);
    align-items:flex-start;
  }

  .why-item .icon{
    font-size: var(--fs-22);
    opacity:.8;
    margin-top:var(--space-4);
  }

  .why-item h4{
    font-size: var(--fs-16);
    margin-bottom:var(--space-6);
    font-weight:600;
  }

  .why-right img{
    width:100%;
    height:auto;
    border-radius: var(--radius-3xl);
  }

  .why-btn{
    margin-top:var(--space-30);
  }

  .quality{
    margin-top:var(--space-120);
    justify-content: center;
    text-align: center;
  }

  .quality-inner{
    max-width:var(--space-1200);
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-80);
    align-items:center;
    text-align: center;
  }

  .quality-img img{
    width:80%;
    height:auto;
    border-radius: var(--radius-2xl);
  }
  .quality-text{
    justify-content: center;
    text-align: center;
  }

  /* na indexu je to h2 (h1 patří hero sekci), na aboutUs.html je to h1
     (název stránky) – musí platit pro oba, jinak "Kdo jsme?" přijde
     o zelený span i o spodní mezeru */
  .quality-text h1,
  .quality-text h2{
    font-size: var(--font-size-2xl);
    margin-bottom:var(--space-20);
    font-weight:700;
  }

  .quality-text h1 span,
  .quality-text h2 span{
    color:var(--color-green);
    font-size: var(--fs-32);
  }

  .quality-text p{
    color:var(--color-text-secondary);
    margin-bottom:var(--space-14);
    line-height:1.6;
  }

  .quality-text i{
    color:var(--color-text-secondary);
    margin-bottom:var(--space-14);
    margin-bottom:var(--space-24);
    line-height:1.6;
  }

  .services h2 {
    margin-bottom:var(--space-20);
    font-weight:600;
  }

  .services h2 span{
    margin-bottom:var(--space-20);
    font-weight:600;
    font-size: var(--fs-28);
    color: var(--color-green);
  }

  .services .desc {
    max-width:var(--space-760);
    margin:0 auto var(--space-70);
    color:var(--color-text-secondary);
  }

  .service-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-60);
    max-width:var(--space-1000);
    margin:0 auto;
  }

  .service img {
    width:auto;
    height:var(--space-64);
    margin-bottom:var(--space-25);
    filter:invert(1);
  }

  .service h3 {
    margin-bottom:var(--space-12);
    font-weight:600;
  }

  .service p {
    color:var(--color-text-muted);
    line-height:1.6;
  }

  .contact {
    text-align: center;
    padding: 0px;
    align-items: center;
  }

  .before-after-wrapper {
    position: relative;
    aspect-ratio: 3/2;
  }

  .before-after-wrapper::before {
    background-color: hsla(172, 61%, 82%, 75%);
    border-radius: var(--radius-4xl);
    top: var(--space-10);
    color: green;
    content: 'before';
    left: var(--space-10);
    opacity: 0;
    padding: var(--space-5) var(--space-10);
    position: absolute;
    transition: opacity 200ms ease-in-out;
    z-index: 15;
  }

  .before-after-wrapper::after {
    background-color: hsla(172, 61%, 82%, 75%);
    border-radius: var(--radius-4xl);
    top: var(--space-10);
    color: green;
    opacity: 0;
    padding: var(--space-5) var(--space-10);
    position: absolute;
    right: var(--space-10);
    transition: opacity 200ms ease-in-out;
    z-index: 15;
    content: 'after';
  }

  .before-image-wrapper {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 10;
  }

  .before-image {
    background-size: cover;
    height: 100%;
    width: 100%;
  }

  .after-image {
    background-size: cover;
    inset: 0;
    position: absolute;
  }

  .handle {
    align-items: center;
    background: var(--color-green);
    bottom: 0;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 0;
    width: var(--space-4);
    z-index: 20;
  }

  .handle::before {
    content: '';
    position: absolute;
    inset: 0 -20px;
  }

  .handle::after {
    align-items: center;
    background: var(--color-green);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><path fill="hsl(172, 61%, 1%)" d="M505.7 265.7c3-3 3.1-7.9 .2-11.1l-104-112c-3-3.2-8.1-3.4-11.3-.4s-3.4 8.1-.4 11.3L481.7 252 23.3 252l90.3-90.3c3.1-3.1 3.1-8.2 0-11.3s-8.2-3.1-11.3 0l-104 104c-3.1 3.1-3.1 8.2 0 11.3l104 104c3.1 3.1 8.2 3.1 11.3 0s3.1-8.2 0-11.3L23.3 268l457.4 0-90.3 90.3c-3.1 3.1-3.1 8.2 0 11.3s8.2 3.1 11.3 0l104-104z"/></svg>');
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-round);
    color: green;
    content: '';
    display: flex;
    font-size: var(--fs-16);
    font-weight: bold;
    justify-content: center;
    max-height: var(--space-40);
    max-width: var(--space-40);
    min-height: var(--space-40);
    min-width: var(--space-40);
  }

  .reviews {
  padding: var(--space-80) var(--space-20);
  color: var(--color-white);
  text-align: center;
}

.container {
  max-width: var(--space-1100);
  margin: 0 auto;
}
.container h2{
  color: var(--color-green);
}

.reviews h2 {
  font-size: var(--fs-32);
  margin-bottom: var(--space-10);
}
.reviews h4 {
  color: var(--color-black);
}

.reviews .subtitle {
  color: var(--color-text-subtle);
  margin-bottom: var(--space-50);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-25);
  margin-bottom: var(--space-50);
}

.review-card {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 👉 vertikální centrování */
  align-items: center; 
  background: var(--color-review-bg);
  padding: var(--space-30) var(--space-25);
  border-radius: var(--radius-lg);
  position: relative;
  transition: 0.3s ease;
}

.review-card:hover {
  transform: translateY(-5px);
  background: var(--color-surface-2);
}

.text-wrap {
  position: relative;
  margin-bottom: var(--space-25);
}

.text {
  font-size: var(--fs-16);
  line-height: 1.7;
  color: var(--color-black);
}

/* uvozovky */
.quote {
  position: absolute;
  color: var(--color-green);
  font-size: var(--fs-32);
  font-weight: bold;
  opacity: 0.9;
}

.quote.top {
  top: -28px;
  left: -10px;
}

.quote.bottom {
  bottom: -30px;
  right: -10px; 
  transform: rotate(180deg);
}

.review-card .text {
  font-size: var(--fs-15);
  line-height: 1.6;
  margin-bottom: var(--space-20);
  margin-top: var(--space-20);
}

.stars {
  color: var(--color-green);
  margin-bottom: var(--space-10);
  font-size: var(--fs-18);
}

.review-card h4 {
  font-size: var(--fs-16);
  font-weight: 600;
}

.btn {
  display: inline-block;
  background: var(--color-green);
  color: var(--color-black);
  padding: var(--space-14) var(--space-28);
  border-radius: var(--radius-3xl);
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.btn:hover {
  background: var(--color-green-dark);
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

  /* GALLERY */
  section.gallery{
    padding:var(--space-80) var(--space-20) var(--space-140);
    text-align:center;
  }

  .gallery-inner{
    max-width:var(--space-1200);
    margin:0 auto;
  }

  /* třídy místo tagů: na indexu je to h2/h3 (h1 patří hero sekci),
     v galerii h1/h2 – vzhled musí být v obou případech stejný */
  .gallery .gallery-title{
    font-size: var(--font-size-2xl);
    margin-bottom:var(--space-10);
    font-weight: 800;
  }

  .gallery .gallery-subtitle{
    font-size: var(--font-size-xl);
    margin-bottom:var(--space-60);
    font-weight:700;
    color:var(--color-green);
  }

  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--space-250), var(--space-350)));
    justify-content: center; 
    gap: var(--space-40); /* menší mezery */
  }

  .gallery-grid img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-2xl);
    transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), 
                box-shadow 0.35s ease;
    z-index: 1;
  }

  .gallery-grid img:hover {
    transform: translateY(-10px) scale(1.03);
    box-shadow: var(--shadow-hover-img);
  }

  .lightbox {
    position: fixed;
    inset: 0;
    background: var(--color-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 9999;
  }

  .lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: var(--radius-xl);
    transform: scale(0.8);
    transition: transform 0.3s ease;
  }

  .lightbox.active {
    opacity: 1;
    visibility: visible;
  }

  .lightbox.active img {
    transform: scale(1);
  }

  .pricing {
    padding: var(--space-100) var(--space-20);
    color: var(--color-white);
    max-width: var(--space-1000);
    margin: 0 auto;
  }

  /* h1 = název ceníku na podstránkách, h2 = "Ceník služeb" na indexu */
  .pricing h1,
  .pricing h2 {
    text-align: center;
    font-size: var(--fs-36);
    margin-bottom: var(--space-70);
  }

  .pricing-group {
    margin-bottom: var(--space-50);
  }

  .pricing-group h3 {
    color: var(--color-green);
    margin-bottom: var(--space-20);
  }

  .pricing-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-10) 0;
    border-bottom: var(--space-1) solid var(--color-hairline);
  }

  .pricing-item span:last-child {
    white-space: nowrap;
  }

  .pricing-cta {
    text-align: center;
    padding: var(--space-120) var(--space-20) var(--space-80);
  }

  .pricing-cta h2 {
    color: var(--color-green);
    margin-bottom: var(--space-20);
  }

  .pricing-cta p {
    max-width: var(--space-600);
    margin: 0 auto var(--space-40);
    line-height: 1.6;
    color: var(--color-text-light);
  }

  .cta-btn {
    display: inline-block;
    background: var(--color-green);
    color: var(--color-black);
    padding: var(--space-16) var(--space-40);
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
  }

  .cta-btn:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-green-lg);
  }

  .contact-section {
    padding: var(--space-120) var(--space-20);
  }

  .contact-card {
    max-width: var(--space-1100);
    margin: 0 auto;
    background: var(--color-surface);
    border-radius: var(--radius-3xl);
    overflow: hidden;
  }

  .contact-top {
    background: var(--color-green);
    display: flex;
    justify-content: space-around;
    padding: var(--space-25) var(--space-20);
    color: var(--color-black);
    font-weight: 600;
  }

  .contact-top strong{
    text-align: center;
    font-size: var(--fs-20);
  }

  .contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-50);
    padding: var(--space-60);
  }

  .contact-form h3 {
    margin-bottom: var(--space-25);
    color: var(--color-black);
  }

  .contact-form input,
  .contact-form textarea {
    width: 100%;
    padding: var(--space-15) var(--space-20);
    margin-bottom: var(--space-15);
    border: none;
    border-radius: var(--radius-xl);
    background: var(--color-text-secondary);
    font-size: var(--fs-15);
  }

  .contact-form textarea {
    resize: none;
  }

  .contact-form button {
    margin-top: var(--space-10);
    padding: var(--space-14) var(--space-35);
    border: none;
    color: var(--color-black);
    border-radius: var(--radius-3xl);
    background: var(--color-green);
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s ease;
  }

  .contact-form button:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-green-sm);
  }

  .contact-image img {
    width: 100%;
    border-radius: var(--space-25);
    object-fit: cover;
    height: 100%;
  }

 .cenik-dropdown{
  position:absolute;
  top:var(--space-80);
  width: 100%;

  padding:var(--space-60) 0;
  border-radius: var(--radius-3xl);

  opacity:0;
  transform:translateY(-40px);
  pointer-events:none;

  transition:all 0.4s ease;

  z-index:9999;
}

.cenik-dropdown.active{
  opacity: 1;
  transform:translateY(0);
  pointer-events:auto;
}

.cenik-container{
  max-width:var(--space-1200);
  margin:auto;

  background:var(--color-surface-3);
  border-radius: var(--radius-4xl);

  padding:var(--space-60);
  box-shadow: var(--shadow-card);

  text-align: center;
}

.cenik-container h2{
    font-size: var(--font-size-2xl);
    font-weight: 900;
    margin-bottom: var(--space-32);
  }

.cenik-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-50);
}

.cenik-card{
  text-align:center;
}

.cenik-card img{
  width:100%;
  height:auto;
  border-radius: var(--radius-3xl);
}

.cenik-label{
  position:relative;
  margin-top:-45px;
  background:var(--color-green);
  padding:var(--space-8);
  color:var(--color-black);
  font-weight:600;
  border-radius:0px 0px var(--space-30) var(--space-30);
}

.cenik-card button{
  margin-top:var(--space-20);
  background:var(--color-green);
  border:none;
  padding:var(--space-12) var(--space-35);
  border-radius: var(--radius-3xl);
  font-weight:600;
  cursor:pointer;
}

.pricing-name{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--space-6);
}

.info-icon{
  width:var(--space-18);
  height:var(--space-18);

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: var(--fs-12);
  font-weight:bold;

  background:var(--color-green);
  color:white;

  border-radius: var(--radius-round);
  cursor:pointer;
}

.info-box{
  position:absolute;
  top:var(--space-28);
  left:0;

  z-index: 999;

  width:var(--space-260);

  background:white;
  color:var(--color-text-dark);

  padding:var(--space-12) var(--space-14);

  border-radius: var(--radius-md);

  font-size: var(--fs-14);
  line-height:1.4;

  box-shadow: var(--shadow-pop);

  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;

  transition:all 0.25s ease;
}

.info-box.active{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.reveal{
  opacity:0;
  transform:translateY(var(--space-60));
  transition:all 0.8s ease;
}

.reveal.active{
  opacity:1;
  transform:translateY(0);
}

/* utility */
.is-hidden{ display:none; }

/* LEGAL / textová stránka (světlá karta, tmavý text) */
.legal{
  max-width: var(--space-760);
  margin: var(--space-60) auto;
  padding: var(--space-40);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border-radius: var(--radius-3xl);
  line-height: 1.7;
}
.legal h1{
  color: var(--color-ink);
  font-size: var(--fs-32);
  margin-bottom: var(--space-8);
}
.legal h2{
  color: var(--color-ink);
  font-size: var(--fs-20);
  margin: var(--space-32) 0 var(--space-12);
}
.legal p,
.legal li{
  color: var(--color-ink-soft);
  font-size: var(--fs-16);
  margin-bottom: var(--space-12);
}
.legal ul{
  padding-left: var(--space-20);
  margin-bottom: var(--space-12);
}
.legal a{
  color: var(--color-green-dark);
  text-decoration: underline;
}
.legal .legal-note{
  color: var(--color-ink-muted);
  font-size: var(--fs-14);
}
.legal .legal-updated{
  color: var(--color-ink-muted);
  font-size: var(--fs-14);
  margin-top: var(--space-24);
}

@media (max-width: 580px){

  .gallery-grid{
    grid-template-columns:repeat(1fr);
    gap:var(--space-30);
  }

  .gallery-grid img{
    height:var(--space-260);
    object-fit:cover;
  }

}

  @media(max-width:820px){
    .service-grid{grid-template-columns:1fr;}
    header{height:auto;}
    .legal{margin:var(--space-30) var(--space-16);padding:var(--space-20);}
    .footer-inner{grid-template-columns:1fr;gap:var(--space-30);text-align:center;}
    .footer-col.right,.footer-col.center{text-align:center;}
    .hero {
        padding: 0px var(--space-20) var(--space-90);
    }
    .hero h1 {font-size: var(--fs-24);}
    h2 {font-size: var(--fs-20);}
    /* dřív to byl h2 bez vlastní velikosti, takže mu na mobilu platilo
       pravidlo o řádek výš – třída má vyšší specificitu, proto explicitně */
    .gallery .gallery-subtitle {font-size: var(--fs-20);}
    h3 {font-size: var(--fs-20);}
    nav a {font-size: var(--fs-20);}
    p {font-size: var(--fs-16);}
    i {font-size: var(--fs-16);}
    .logo img {height: var(--space-200); ;
                width: var(--space-200) ;}
    section.why{
        padding: var(--space-20);
    }
    section.gallery{
        padding: var(--space-20);
    }
    .why-inner {
      display: inline;
    }
    .why-right{
      display: none;
    }
    .quality-inner {
      display: grid;
      grid-template-columns:1fr;
    }
    .quality-text{
      padding: var(--space-30);
    }
    .contact-top{
      display: grid;
      padding: var(--space-20) var(--space-20) 0px
    }
    .contact-top div p {
      font-size: var(--fs-14);
      text-align: center;
    }
    .contact-top div strong {
        font-size: var(--fs-16);
    }
    .contact-image {
      display: none;
    }
    .contact-content{
      display: inline;
    }
    .contact-content form {
        padding: var(--space-10) var(--space-40);
        align-content: center;
        text-align: center;
    }
    .hide{
        display: none;
    }
    .phone{
      display: none;
    }
    .pricing-cta {
        padding: 0;
    }
    .pricing {
        padding: var(--space-40) var(--space-20);
    }
    .cenik-card img{
    display:none;
    }

    .cenik-container {
        padding: var(--space-30);
        max-width: var(--space-380);
    }


  /* grid změní na jeden sloupec */
  .cenik-grid{
    grid-template-columns:1fr;
    gap:var(--space-1);
  }

  /* karta bude jen text */
  .cenik-card{
    border-radius:var(--space-15);
  }

  /* upraví label */
  .cenik-label{
    margin-top:0;
    margin-bottom:var(--space-10);
    border-radius: var(--radius-md);
  }

  /* tlačítko pod text */
  .cenik-card button{
    width:100%;
  }

  .cenik-dropdown {
    padding: 0;
  }

    

  }
}