:root{

  --bg: #f7f2ea;

  --paper: #fbf7f0;

  --text: #2a2a2a;



  --brown-900:#2f1a0f;

  --brown-800:#3b2417;

  --brown-700:#52301f;

  --brown-600:#6a3c26;



  --cream-200:#f3e6d2;

  --cream-300:#ead9c2;



  --green-700:#2f5b46;

  --green-600:#376a52;



  --shadow: 0 10px 25px rgba(0,0,0,.08);

  --radius: 18px;

  --radius-sm: 14px;



  --container: 1120px;

}



*{

  box-sizing:border-box;

  margin:0;

  padding:0;

}



html{

  scroll-behavior:smooth;

  overflow-x:hidden;

}



body{

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  color:var(--text);

  background:var(--paper);

  line-height:1.6;

  overflow-x:hidden;

}



a{

  color:inherit;

  text-decoration:none;

}



img{

  max-width:100%;

  display:block;

}



.container{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

}



/* ===== HEADER ===== */



.site-header{

  position:sticky;

  top:0;

  z-index:999;

  background:rgba(255,255,255,.88);

  backdrop-filter:blur(10px);

  border-bottom:1px solid rgba(0,0,0,.06);

}



.header-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  min-height:72px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:18px;

}



.logo{

  display:flex;

  align-items:center;

  gap:10px;

  min-width:0;

}



.logo img{

  height:42px;

  width:auto;

  object-fit:contain;

}



.nav{

  display:flex;

  align-items:center;

  gap:18px;

}



.nav a{

  font-size:14px;

  opacity:.86;

  padding:8px 6px;

  border-radius:10px;

  position:relative;

  transition:all .18s ease;

  white-space:nowrap;

}



.nav a:hover{

  opacity:1;

  background:rgba(0,0,0,.04);

}



.nav a::after{

  content:"";

  position:absolute;

  left:10px;

  right:10px;

  bottom:4px;

  height:2px;

  background:var(--brown-600);

  border-radius:2px;

  transform:scaleX(0);

  transform-origin:left;

  transition:transform .18s ease;

  opacity:.9;

}



.nav a:hover::after{

  transform:scaleX(1);

}



.social{

  display:flex;

  align-items:center;

  gap:10px;

}



.social a{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:42px;

  padding:0 16px;

  border-radius:999px;

  background:rgba(82,48,31,.06);

  border:1px solid rgba(82,48,31,.10);

  font-size:13px;

  font-weight:700;

  color:var(--brown-700);

  transition:all .18s ease;

}



.social a:hover{

  background:rgba(82,48,31,.11);

  transform:translateY(-1px);

}



.social-desktop{

  display:flex;

}



.burger{

  display:none;

  width:46px;

  height:46px;

  border:none;

  background:rgba(82,48,31,.06);

  border:1px solid rgba(82,48,31,.10);

  border-radius:14px;

  cursor:pointer;

  align-items:center;

  justify-content:center;

  flex-direction:column;

  gap:5px;

}



.burger span{

  display:block;

  width:18px;

  height:2px;

  background:var(--brown-700);

  border-radius:2px;

  transition:all .22s ease;

}



.mobile-menu{

  display:none;

}



.mobile-menu-inner{

  display:flex;

  flex-direction:column;

  gap:10px;

  padding:0 24px 20px;

}



.mobile-menu a{

  padding:12px 0;

  border-bottom:1px solid rgba(82,48,31,.08);

  color:var(--brown-700);

  font-weight:600;

}



.social-mobile{

  display:flex;

  gap:10px;

  padding-top:10px;

}



.social-mobile a{

  flex:1;

  justify-content:center;

}



.mobile-menu.is-open{

  display:block;

  background:#fff;

  border-top:1px solid rgba(0,0,0,.06);

}



.burger.is-open span:nth-child(1){

  transform:translateY(7px) rotate(45deg);

}



.burger.is-open span:nth-child(2){

  opacity:0;

}



.burger.is-open span:nth-child(3){

  transform:translateY(-7px) rotate(-45deg);

}



/* ===== HERO PAGE ===== */



.page-hero{

  background:

    radial-gradient(circle at 20% 30%, rgba(255,255,255,.65), transparent 50%),

    radial-gradient(circle at 80% 20%, rgba(255,255,255,.55), transparent 45%),

    linear-gradient(0deg, var(--paper), var(--cream-200));

  position:relative;

  overflow:hidden;

}



.page-hero::before{

  content:"";

  position:absolute;

  inset:0;

  opacity:.18;

  background-image:radial-gradient(rgba(70,45,30,.22) 1px, transparent 1px);

  background-size:22px 22px;

  pointer-events:none;

}



.page-hero-small{

  padding:78px 0 58px;

}



.page-hero-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  text-align:center;

  position:relative;

  z-index:1;

}



.page-hero-label{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(255,255,255,.78);

  border:1px solid rgba(82,48,31,.12);

  box-shadow:0 10px 20px rgba(0,0,0,.06);

  color:var(--brown-700);

  font-weight:800;

  font-size:13px;

  margin-bottom:14px;

}



.page-hero-inner h1{

  margin:0 0 12px;

  font-size:clamp(34px, 4vw, 58px);

  line-height:1.05;

  letter-spacing:-1px;

  color:var(--brown-700);

}



.page-hero-inner p{

  max-width:780px;

  margin:0 auto;

  color:rgba(47,26,15,.72);

  line-height:1.75;

}





/* ===== NAVIGACE SEKCI ===== */



.galerie-nav{

  padding:12px 0 14px;

  background:var(--paper);

}



.galerie-nav-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  display:flex;

  justify-content:center;

  flex-wrap:wrap;

  gap:10px;

}



.galerie-chip{

  background:rgba(255,255,255,.78);

  border:1px solid rgba(82,48,31,.12);

  padding:10px 14px;

  border-radius:999px;

  font-weight:700;

  font-size:13px;

  color:rgba(47,26,15,.84);

  box-shadow:0 10px 20px rgba(0,0,0,.06);

  transition:all .18s ease;

}



.galerie-chip:hover{

  transform:translateY(-1px);

  background:#fff;

}



/* ===== SEKCE ===== */



.galerie-section{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  padding:56px 0 18px;

  scroll-margin-top:100px;

}



.galerie-subsection{

  padding-top:34px;

}



.galerie-section-head{

  display:flex;

  justify-content:space-between;

  gap:28px;

  align-items:flex-end;

  margin-bottom:22px;

}



.galerie-section-head h2{

  margin:4px 0 0;

  font-size:34px;

  line-height:1.1;

  letter-spacing:-0.7px;

  color:var(--brown-700);

}



.section-kicker{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  padding:8px 14px;

  border-radius:999px;

  background:rgba(82,48,31,.07);

  border:1px solid rgba(82,48,31,.10);

  color:var(--brown-700);

  font-size:13px;

  font-weight:800;

}



.galerie-section-head p{

  max-width:560px;

  color:rgba(47,26,15,.68);

  line-height:1.75;

}



/* ===== PODKATEGORIE ===== */



.subcat-grid{

  display:grid;

  grid-template-columns:repeat(4, 1fr);

  gap:14px;

}



.subcat-card{

  min-height:96px;

  display:flex;

  align-items:center;

  justify-content:center;

  text-align:center;

  padding:14px;

  border-radius:22px;

  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(243,230,210,.60));

  border:1px solid rgba(82,48,31,.10);

  box-shadow:0 12px 28px rgba(0,0,0,.05);

  color:var(--brown-700);

  font-weight:800;

  transition:all .18s ease;

}



.subcat-card:hover{

  transform:translateY(-2px);

  background:#fff;

  box-shadow:0 14px 30px rgba(0,0,0,.08);

}



/* ===== GRIDY FOTEK ===== */



.galerie-grid-page{

  display:grid;

  grid-template-columns:repeat(3, 1fr);

  gap:22px;

}



.galerie-grid-large{

  grid-template-columns:1.3fr 1fr 1fr;

}



.galerie-grid-4{

  grid-template-columns:repeat(4, 1fr);

}



.galerie-item{

  position:relative;

  overflow:hidden;

  border-radius:24px;

  border:1px solid rgba(82,48,31,.12);

  background:#fff;

  box-shadow:0 16px 36px rgba(0,0,0,.07);

  min-height:280px;

}



.galerie-item-large{

  min-height:420px;

}



.galerie-item img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:transform .45s ease;

}



.galerie-item:hover img{

  transform:scale(1.06);

}



.galerie-item::after{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.36));

  pointer-events:none;

}



.galerie-caption{

  position:absolute;

  left:14px;

  right:14px;

  bottom:14px;

  z-index:2;

  padding:12px 14px;

  border-radius:16px;

  background:rgba(255,255,255,.12);

  border:1px solid rgba(255,255,255,.20);

  backdrop-filter:blur(10px);

  -webkit-backdrop-filter:blur(10px);

  color:#fff;

  font-size:15px;

  font-weight:700;

  line-height:1.45;

}



/* ===== KONTAKT STRIP ===== */



.kontakt-strip{

  padding:70px 0 82px;

}



.kontakt-strip-inner{

  width:min(var(--container), calc(100% - 48px));

  margin:0 auto;

  background:linear-gradient(180deg, #3d6b55, #2e5644);

  color:rgba(255,255,255,.94);

  border-radius:28px;

  padding:34px 32px;

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:24px;

  box-shadow:0 22px 55px rgba(0,0,0,.12);

}



.kontakt-strip-inner h2{

  margin:0 0 8px;

  font-size:36px;

  line-height:1.05;

  letter-spacing:-0.6px;

}



.kontakt-strip-inner p{

  margin:0;

  max-width:620px;

  opacity:.94;

  line-height:1.7;

}



.kontakt-actions{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

}



.hero-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:50px;

  padding:0 22px;

  border-radius:999px;

  font-weight:800;

  font-size:15px;

  transition:all 0.18s ease;

}



.hero-btn-dark{

  background:#2f5b46;

  color:#fff;

  box-shadow:0 12px 24px rgba(47,91,70,0.24);

}



.hero-btn-dark:hover{

  background:#376a52;

  transform:translateY(-1px);

}



.outline-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  gap:8px;

  padding:13px 20px;

  border-radius:999px;

  font-weight:800;

  font-size:14px;

  background:transparent;

  color:#fff;

  border:1px solid rgba(255,255,255,.55);

  transition:all .18s ease;

}



.outline-btn:hover{

  background:rgba(255,255,255,.12);

}



/* ===== FOOTER ===== */



.site-footer{

  background:

    radial-gradient(circle at top left, rgba(255,255,255,.04), transparent 30%),

    linear-gradient(180deg, #071428 0%, #08162c 100%);

  color:rgba(255,255,255,.85);

  padding:70px 0 25px;

}



.footer-grid{

  display:grid;

  grid-template-columns:2fr 1fr 1fr 1fr;

  gap:40px;

}



.footer-brand h3{

  font-size:24px;

  margin:15px 0 10px;

  color:#fff;

}



.footer-brand p{

  color:rgba(255,255,255,.65);

  line-height:1.75;

  max-width:330px;

}



.footer-logo{

  width:45px;

  border-radius:10px;

}



.footer-col h4{

  margin-bottom:15px;

  font-size:18px;

  color:#fff;

}



.footer-col p{

  color:rgba(255,255,255,.72);

  line-height:1.75;

  margin-bottom:14px;

}



.footer-col a{

  display:block;

  margin-bottom:8px;

  color:rgba(255,255,255,.76);

  transition:all .2s ease;

}



.footer-col a:hover{

  color:#fff;

}



.footer-socials{

  display:flex;

  flex-direction:column;

  gap:14px;

}



.footer-social{

  display:flex;

  align-items:center;

  gap:12px;

  padding:12px 18px;

  border-radius:999px;

  border:1px solid rgba(255,255,255,.12);

  background:rgba(255,255,255,.05);

  color:#fff !important;

  font-weight:700;

  width:fit-content;

  min-width:170px;

  transition:all .22s ease;

  box-shadow:0 10px 24px rgba(0,0,0,.14);

}



.footer-social svg{

  width:18px;

  height:18px;

  fill:currentColor;

  flex:0 0 auto;

}



.footer-social:hover{

  transform:translateY(-2px);

  color:#fff !important;

}



.footer-social.instagram{

  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));

}



.footer-social.instagram:hover{

  background:linear-gradient(

    135deg,

    #f09433 0%,

    #e6683c 25%,

    #dc2743 50%,

    #cc2366 75%,

    #bc1888 100%

  );

  border-color:transparent;

  box-shadow:0 14px 34px rgba(204,35,102,.28);

}



.footer-social.facebook:hover{

  background:#1877f2;

  border-color:transparent;

  box-shadow:0 14px 34px rgba(24,119,242,.28);

}



.footer-bottom{

  text-align:center;

  margin-top:40px;

  padding-top:20px;

  border-top:1px solid rgba(255,255,255,.08);

  font-size:14px;

  color:rgba(255,255,255,.55);

}



/* ===== RESPONSIVE ===== */



@media (max-width: 1100px){

  .gallery-map-main{

    grid-template-columns:repeat(2, 1fr);

  }



  .gallery-map-sub,

  .subcat-grid,

  .galerie-grid-page,

  .galerie-grid-large,

  .galerie-grid-4{

    grid-template-columns:repeat(2, 1fr);

  }



  .galerie-section-head{

    flex-direction:column;

    align-items:flex-start;

  }



  .footer-grid{

    grid-template-columns:1fr 1fr;

  }

}



@media (max-width: 900px){

  .header-inner{

    width:min(var(--container), calc(100% - 28px));

    min-height:60px;

    padding:8px 0;

  }



  .logo img{

    height:34px;

  }



  .nav{

    display:none;

  }



  .social-desktop{

    display:none;

  }



  .burger{

    display:flex;

  }



  .kontakt-strip-inner{

    flex-direction:column;

    align-items:flex-start;

  }

}



@media (max-width: 720px){

  .page-hero-small{

    padding:58px 0 44px;

  }



  .page-hero-inner{

    width:min(var(--container), calc(100% - 28px));

  }



  .page-hero-inner h1{

    font-size:36px;

  }



  .gallery-map{

    padding-top:28px;

  }



  .gallery-map-row{

    padding:18px;

    border-radius:22px;

  }



  .gallery-map-title{

    font-size:20px;

  }



  .gallery-map-main,

  .gallery-map-sub,

  .subcat-grid,

  .galerie-grid-page,

  .galerie-grid-large,

  .galerie-grid-4,

  .footer-grid{

    grid-template-columns:1fr;

  }



  .gallery-map-card{

    min-height:110px;

    border-radius:28px;

    font-size:18px;

  }



  .gallery-map-chip{

    min-height:62px;

    border-radius:16px;

    font-size:14px;

  }



  .galerie-nav-inner,

  .galerie-section,

  .kontakt-strip-inner{

    width:min(var(--container), calc(100% - 28px));

  }



  .galerie-section{

    padding:40px 0 16px;

  }



  .galerie-section-head h2{

    font-size:28px;

  }



  .galerie-item,

  .galerie-item-large{

    min-height:240px;

  }



  .kontakt-strip-inner{

    padding:26px 22px;

    border-radius:22px;

  }



  .kontakt-strip-inner h2{

    font-size:28px;

  }



  .kontakt-actions{

    width:100%;

  }



  .kontakt-actions .hero-btn,

  .kontakt-actions .outline-btn{

    width:100%;

  }



  .footer-social{

    width:100%;

    min-width:unset;

    justify-content:flex-start;

  }



  .footer-bottom{

    font-size:13px;

    line-height:1.6;

  }

}

.lightbox{

  display:none;

  position:fixed;

  z-index:9999;

  left:0;

  top:0;

  width:100%;

  height:100%;

  background:rgba(0,0,0,0.9);

  justify-content:center;

  align-items:center;

}



.lightbox-content{

  max-width:90%;

  max-height:85%;

  border-radius:10px;

}



.lightbox-close{

  position:absolute;

  top:30px;

  right:40px;

  color:#fff;

  font-size:40px;

  cursor:pointer;

}



.lightbox-prev,

.lightbox-next{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  color:white;

  font-size:50px;

  cursor:pointer;

  padding:10px;

}



.lightbox-prev{ left:30px; }

.lightbox-next{ right:30px; }