@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

#header{
  display:none !important;
}

#footer{
  display:none !important;
}

:root{--cream:#F8EEE5;--green:#D9C667;--pink:#FFB7B8;--orange:#FA5C0E;--dark:#2B2624;--blue:#B7D9FF;}
*{box-sizing:border-box} body{margin:0;background:var(--cream);font-family:Inter,sans-serif;color:var(--dark)}
.wrap{max-width:1200px;width:92%;margin:auto}
h1,h2,h3,.logo,.num,.vertical{font-family:'Bebas Neue',sans-serif;margin:0;line-height:.9}
.header{
  display:grid;
  grid-template-columns:220px 1fr 180px;
  align-items:center;
  padding:24px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.logo{font-size:58px;color:var(--orange)}
.nav{display:flex;justify-content:center;gap:36px}
.nav-link{
  color:var(--dark);
  text-decoration:none;
  cursor:pointer;
  transition:color .2s ease;
}
.nav-link:hover{color:var(--orange);}
.nav-link.active{color:var(--orange);}
.btn{display:inline-block;padding:16px 28px;text-decoration:none;font-weight:700}
.orange{background:var(--orange);color:#fff}.dark{background:var(--dark);color:#fff}
.hero{display:grid;grid-template-columns:45% 55%;gap:40px;align-items:center;min-height:650px}
.hero h1{font-size:clamp(90px,8vw,140px)}
.accent{color:var(--orange)}

.photo{
  height:560px;

  background-image:url('https://www.hejbarna.cz/obrazek/3/foto1');
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}

.why{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding:80px 0;border-top:1px solid #ddd}
.num{font-size:58px}
.num-orange{color:var(--orange)} .num-green{color:var(--green)} .num-blue{color:#4f7fe8}

.offer{display:grid;grid-template-columns:50px 1fr;gap:20px;padding:60px 0}
.vertical{writing-mode:vertical-rl;transform:rotate(180deg);font-size:42px;letter-spacing:.12em}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{min-height:360px;padding:32px;position:relative}
.card h3{font-size:54px;color:#fff}
.card p{color:#fff;line-height:1.7}
.offer-link{position:absolute;left:32px;bottom:32px;color:#fff;font-weight:700}
.i{background:var(--orange)} .k{background:var(--green)} .s{background:var(--blue)}

.news{background:var(--pink);display:grid;grid-template-columns:1fr 260px;align-items:center;padding:28px 40px;margin:60px 0}
.news h2{font-size:48px}

.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:60px 0}
.ref{padding:20px;border-left:1px solid #ddd}

.cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:28px;
  padding:60px 0;
  border-top:1px solid #ddd;
}
.cta h2{font-size:72px}
.orange-text{color:var(--orange);white-space:nowrap}

.footer{display:grid;grid-template-columns:50% 50%;background:var(--dark);color:#fff;min-height:320px}
.map,.contact{padding:40px}

@media(max-width:900px){
  .header,.hero,.why,.cards,.news,.refs,.cta,.footer{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr}
  .nav{justify-content:flex-start;flex-wrap:wrap}
  .vertical{writing-mode:horizontal-tb;transform:none;margin-bottom:20px}
}

/* ===== HEJBARNA V8 ===== */

/* horní menu */
.header{
  column-gap:40px;
}

.nav{
  gap:60px !important;
}

.btn{
  min-width:190px;
  text-align:center;
  white-space:nowrap;
}

/* CTA */
.cta{
  column-gap:60px;
}

.cta .btn{
  min-width:190px;
}

/* NABÍZÍME */
.vertical{
  font-size:72px !important;
  letter-spacing:.08em;
}

/* mobil */
@media(max-width:1024px){

  .header{
    row-gap:30px;
  }

  .nav{
    gap:24px !important;
  }

  .btn,
  .cta .btn{
    min-width:190px;
    display:inline-block;
  }

  .cta{
    row-gap:60px;
  }
}

@media(max-width:600px){

  .header{
    margin-bottom:60px;
  }

  .nav{
    gap:18px !important;
  }

  .cta{
    row-gap:80px;
  }

  .btn,
  .cta .btn{
    min-width:190px;
  }
}


/* ===== V9 additions over V8 ===== */

/* Reference quotes */
.ref{
  position:relative;
  padding-top:42px;
}
.ref:before{
  content:"“";
  position:absolute;
  left:8px;
  top:-6px;
  font-size:82px;
  line-height:1;
  color:var(--orange);
  font-family:Georgia,serif;
}

/* Why section separators */
.why>div:not(:first-child){
  border-left:1px solid #d8d0c8;
  padding-left:28px;
}

/* Larger NABÍZÍME aligned with cards */
.offer{
  grid-template-columns:90px 1fr;
}
.vertical{
  font-size:82px !important;
  line-height:.85;
}

@media(max-width:1024px){
  .why>div:not(:first-child){
    border-left:none;
    padding-left:0;
  }
  .vertical{
    font-size:64px !important;
  }
}


/* ===== V10 additions ===== */

/* NABÍZÍME visible on mobile */
@media(max-width:1024px){
  .vertical{
    display:block !important;
    writing-mode:horizontal-tb !important;
    transform:none !important;
    font-size:56px !important;
    margin-bottom:24px !important;
    text-align:left;
  }
}

/* Graphics in bottom-right corners */
.i,.k,.s{overflow:hidden;position:relative;}

.i::after{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  border:4px solid rgba(43,38,36,.35);
  border-radius:50%;
  right:-110px;
  bottom:-110px;
}

.k::after{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  right:-20px;
  bottom:-20px;
  background-image:radial-gradient(rgba(43,38,36,.45) 2px,transparent 2px);
  background-size:18px 18px;
}

.s,.s h3,.s p,.s .offer-link{
  color:var(--dark) !important;
}

.s::after{
  content:"";
  position:absolute;
  width:180px;
  height:120px;
  right:-20px;
  bottom:-20px;
  background:
    repeating-linear-gradient(
      0deg,
      var(--dark),
      var(--dark) 4px,
      transparent 4px,
      transparent 16px
    );
}


/* ===== V11 ===== */
/* použij nadpis NABÍZÍME jako ve V8 */
.offer{
  grid-template-columns:50px 1fr !important;
}

.vertical{
  font-size:72px !important;
  letter-spacing:.08em !important;
  line-height:.9 !important;
}

@media(max-width:1024px){
  .vertical{
    font-size:48px !important;
    margin-bottom:20px !important;
  }
}


/* ===== V12 ===== */
/* Mobil: NABÍZÍME vždy nad kartami a nikdy schované */

@media(max-width:1024px){

  .offer{
    display:block !important;
  }

  .vertical{
    display:block !important;
    position:relative !important;
    z-index:5 !important;

    writing-mode:horizontal-tb !important;
    transform:none !important;

    font-size:56px !important;
    line-height:1 !important;

    margin:0 0 30px 0 !important;
    padding:0 !important;

    text-align:left !important;
  }

  .cards{
    margin-top:0 !important;
  }
}


/* ===== V13 ===== */

/* dvojvlnka pod hero textem a CTA */
.hero .btn.orange::after{
  content:"≈≈";
  display:block;
  margin-top:18px;
  color:var(--dark);
  font-size:34px;
  letter-spacing:6px;
  line-height:1;
}

/* footer podle původního layoutu */
.footer{
  min-height:520px !important;
}

.map{
  border-right:1px solid rgba(255,255,255,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.contact{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
}

.contact h3{
  font-family:'Bebas Neue',sans-serif;
  font-size:56px;
  margin:0 0 12px 0;
}


/* ===== V14 ===== */

/* zrušení krátké vlnovky */
.hero .btn.orange::after{
  content:none !important;
}

.hero-divider{
  width:120px;
  height:6px;
  background:var(--dark);
  margin:28px 0 32px 0;
}

.contact{
  display:grid !important;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:40px;
  align-items:start;
}

.contact-block h4{
  color:#fff;
  margin:0 0 14px 0;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.contact-block p{
  margin:8px 0;
}

.contact-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.contact-logo{
  justify-content:flex-start;
}

.footer-logo{
  margin-bottom:0 !important;
}

.icon{
  display:inline-block;
  width:22px;
  margin-right:8px;
}

@media(max-width:900px){
  .contact{
    grid-template-columns:1fr !important;
    gap:24px;
  }
}


/* ===== V15 ===== */

/* jiná vlnovka v newsletteru */
.news h2::after{
  display:none !important;
}

.news p::after{
  content:"";
  display:block;
  width:150px;
  height:8px;
  margin:18px auto 0 auto;

  background-image:
    radial-gradient(#2B2624 2px, transparent 2px);

  background-size:14px 8px;
  background-repeat:repeat-x;
}

/* zrušení mapy a nový social blok */
.footer{
  grid-template-columns:1fr !important;
}
.map{
  display:none !important;
}

.instagram-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  border:2px solid #fff;
  border-radius:18px;
  font-size:34px;
  text-decoration:none;
  color:#fff;
}


/* ===== V16 ===== */

/* AŤ TI NIC NEUTEČE - tečkovaná černá čára */
.news h2::after{
  content:"" !important;
  display:block;
  width:150px;
  height:8px;
  margin-top:12px;
  background-image:radial-gradient(#2B2624 2px, transparent 2px);
  background-size:14px 8px;
  background-repeat:repeat-x;
}

/* sjednocení ikon kontaktů */
.icon{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:24px !important;
  height:24px !important;
  font-size:18px !important;
  margin-right:10px !important;
  vertical-align:middle;
}


/* ===== V17 ===== */

/* Newsletter - kompaktnější obsah, blok zůstává stejně velký */
.news{
  grid-template-columns: 1fr 220px !important;
  justify-content:center;
}

.news > div:first-child{
  max-width:420px;
  margin:0 auto;
  text-align:center;
}

.news > div:last-child{
  display:flex;
  justify-content:center;
}

/* Menší footer podle obsahu */
.footer{
  min-height:220px !important;
  padding:20px 0;
}

.contact{
  gap:24px !important;
}

.contact-block p{
  margin:4px 0 !important;
}

.logo{
  margin-bottom:8px;
}


/* ===== V18 ===== */

/* Menu více doprava k CTA */
.header{
  grid-template-columns:220px 1fr 200px !important;
}

.nav{
  justify-content:flex-end !important;
  gap:42px !important;
  padding-right:30px;
}

/* Newsletter s osovou čárou */
.news{
  grid-template-columns:1fr 1px 1fr !important;
  align-items:center !important;
}

.news::before{
  content:none;
}

.news > div:first-child{
  justify-self:end;
  text-align:right !important;
  padding-right:40px;
}

.news > div:last-child{
  justify-self:start;
  padding-left:40px;
}

.news{
  position:relative;
}

.news:after{
  content:"";
  position:absolute;
  left:50%;
  top:20%;
  width:1px;
  height:60%;
  background:#d8d0c8;
  transform:translateX(-50%);
}

/* větší email ikona */
.icon{
  width:28px !important;
  height:28px !important;
  font-size:21px !important;
}


/* ===== V19 ===== */

/* Mobilní menu */
@media(max-width:900px){

  .header{
    grid-template-columns:1fr !important;
    row-gap:18px;
  }

  .nav{
    justify-content:flex-start !important;
    gap:18px !important;
    padding-right:0 !important;
    flex-wrap:wrap;
  }

  .header .btn{
    justify-self:start;
  }
}

/* Newsletter */
.news h2::after{
  margin-left:auto !important;
  margin-right:0 !important;
  transform:translateX(30px);
}

.news > div:last-child{
  padding-left:20px !important;
}

.news .btn{
  margin-left:-10px;
}


/* ===== V20 ===== */

/* Newsletter - tečky zarovnat s koncem textu */
.news h2::after{
  margin-left:auto !important;
  margin-right:0 !important;
  transform:none !important;
  width:150px;
}


/* ===== V21 ===== */

/* větší email ikona */
.icon{
  width:34px !important;
  height:34px !important;
  font-size:26px !important;
}


.why h2,
.current h2{
  font-size:60px !important;
}

/* ===== V26 FONT FIX ===== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

body{
  font-family:'Inter', Arial, sans-serif !important;
}

h1,h2,h3,
.logo,
.vertical,
.num,
.cta h2,
.news h2{
  font-family:'Bebas Neue','Arial Narrow',sans-serif !important;
  font-weight:400 !important;
  letter-spacing:.02em;
}


/* ===== V27 ===== */

/* Newsletter - mobil pod sebe bez překryvů */
@media(max-width:900px){

  .news{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
    text-align:center;
  }

  .news:after{
    display:none !important;
  }

  .news > div:first-child{
    justify-self:center !important;
    text-align:center !important;
    padding-right:0 !important;
  }

  .news > div:last-child{
    justify-self:center !important;
    padding-left:0 !important;
  }
}

/* Kontakty - neutrálnější bílé ikony */
.icon{
  color:#ffffff !important;
  opacity:.95;
}

/* Adresa zeleně */
.contact-block:nth-child(2),
.contact-block:nth-child(2) h4,
.contact-block:nth-child(2) p{
  color:#8b9850 !important;
}

/* Sleduj nás růžově */
.contact-block:nth-child(3),
.contact-block:nth-child(3) h4,
.contact-block:nth-child(3) p,
.instagram-link{
  color:#FFB7B8 !important;
  border-color:#FFB7B8 !important;
}


/* ===== V29 NEWSLETTER ===== */

.news{
  display:grid !important;
  grid-template-columns:1fr 1px auto !important;
  align-items:center;
}

.news > div:first-child{
  justify-self:end;
  text-align:right;
  max-width:360px;
  padding-right:40px;
}

.news > div:last-child{
  justify-self:start;
  padding-left:24px;
}

.news:after{
  content:"";
  position:absolute;
  left:50%;
  top:20%;
  width:1px;
  height:60%;
  background:rgba(43,38,36,.15);
  transform:translateX(-50%);
}

.news h2::after{
  margin-left:auto !important;
  margin-right:0 !important;
}

@media(max-width:900px){

  .news{
    grid-template-columns:1fr !important;
    gap:24px !important;
    text-align:center;
  }

  .news:after{
    display:none !important;
  }

  .news > div:first-child{
    max-width:none;
    padding-right:0;
    text-align:center !important;
    justify-self:center !important;
  }

  .news > div:last-child{
    padding-left:0;
    justify-self:center !important;
  }

  .news h2::after{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}


/* ===== V32 ===== */

/* Adresa bílá */
.contact-block:nth-child(2),
.contact-block:nth-child(2) h4,
.contact-block:nth-child(2) p{
  color:#ffffff !important;
}

/* Sleduj nás růžově */
.contact-block:nth-child(3),
.contact-block:nth-child(3) h4,
.contact-block:nth-child(3) p,
.instagram-link{
  color:#FFB7B8 !important;
  border-color:#FFB7B8 !important;
}

/* Slot pro logo */
.logo-slot{
  width:220px;
  height:70px;
  display:block;
}

/* Slot pro footer logo */
.footer-logo-slot{
  width:180px;
  height:60px;
  display:block;
}


/* ===== V34 NEWSLETTER STACKED ===== */

.news{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:24px !important;
}

.news:after{
  display:none !important;
}

.news > div:first-child{
  max-width:520px !important;
  padding:0 !important;
  text-align:center !important;
}

.news > div:last-child{
  padding:0 !important;
}

/* Mobilní chování ponechat */
@media(max-width:900px){

  .news{
    grid-template-columns:1fr !important;
  }
}

/* Sleduj nás oranžově */
.contact-block:nth-child(3),
.contact-block:nth-child(3) h4,
.contact-block:nth-child(3) p,
.instagram-link{
  color:#FA5C0E !important;
  border-color:#FA5C0E !important;
}


.logo{display:flex;align-items:center}
.logo img{max-height:72px;width:auto;display:block}

.footer-logo{margin-bottom:18px}
.footer-logo img{max-height:64px;width:auto;display:block}

.newsletter-form{
  display:flex;
  align-items:stretch !important;
  gap:0 !important;
}
.newsletter-form input{
  height:54px;
  min-width:260px;
  padding:0 18px;
  border:none;
  font-size:16px;
  font-family:Inter,sans-serif;
}
.newsletter-form .btn{
  min-width:220px;
  border:none;
  cursor:pointer;
}

@media(max-width:900px){
  .newsletter-form{
    flex-direction:column;
    width:100%;
  }
  .newsletter-form input,
  .newsletter-form .btn{
    width:100%;
    max-width:320px;
  }
}


.alive-green{color:var(--green)!important}

/* nabídka grafiky */
.i::after{content:"";position:absolute;width:220px;height:220px;border:4px solid rgba(43,38,36,.35);border-radius:50%;right:-110px;bottom:-110px}
.k::after{content:"";position:absolute;width:140px;height:140px;right:-20px;bottom:-20px;background-image:radial-gradient(rgba(43,38,36,.45) 2px,transparent 2px);background-size:18px 18px}
.s::after{content:"";position:absolute;width:180px;height:120px;right:-20px;bottom:-20px;background:repeating-linear-gradient(0deg,var(--dark),var(--dark) 4px,transparent 4px,transparent 16px)}

/* reference quotes */
.ref{position:relative}
.ref:before{
  content:"“";
  position:absolute;
  left:8px;
  top:-6px;
  font-size:82px;
  line-height:1;
  color:var(--orange);
  font-family:Georgia,serif;
}


/* ===== FINAL V6 NEWSLETTER FIX ===== */

.newsletter-form{
  display:flex;
  align-items:stretch !important;
  gap:0 !important;
}

.newsletter-form input{
  height:58px !important;
  min-width:280px !important;
  padding:0 18px !important;
  font-size:16px !important;
  font-family:'Inter',sans-serif !important;
  border:none !important;
  border-right:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.newsletter-form .btn{
  height:58px !important;
  min-width:280px !important;
  padding:0 24px !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  font-size:16px !important;
  font-family:'Inter',sans-serif !important;
  font-weight:600 !important;
}

@media(max-width:900px){
  .newsletter-form{
    gap:12px !important;
  }

  .newsletter-form input,
  .newsletter-form .btn{
    width:100% !important;
    max-width:320px !important;
    min-width:0 !important;
  }
}


/* ===== FINAL V7 NEWSLETTER ===== */

.newsletter-form .btn{
  min-width:auto !important;
  width:auto !important;
  padding:0 20px !important;
  white-space:nowrap;
}

@media(max-width:900px){

  .newsletter-form{
    flex-direction:column !important;
    align-items:center !important;
    gap:0 !important;
  }

  .newsletter-form input{
    width:320px !important;
    max-width:100% !important;
    margin:0 !important;
    border-bottom:1px solid rgba(0,0,0,.08) !important;
  }

  .newsletter-form .btn{
    width:320px !important;
    max-width:100% !important;
    margin:0 !important;
  }
}

.offer-link{
  text-decoration:none;
  transition:opacity .2s ease;
}
.offer-link:hover{
  opacity:.75;
}


/* ===== FINAL V9 MENU ALIGN ===== */
@media(min-width:1200px){
  .header{
    grid-template-columns:240px 1fr !important;
  }

  .nav{
    justify-content:flex-end !important;
    width:100%;
    padding-right:0 !important;
    gap:54px !important;
  }
}


/* ===== MOBILE SCROLL FIX ===== */
html,
body{
  overflow-x:hidden !important;
  overflow-y:auto !important;
  height:auto !important;
  min-height:100% !important;
  -webkit-overflow-scrolling:touch;
}

.wrap{
  overflow:visible !important;
}

@media(max-width:900px){
  .hero,
  .offer-hero{
    min-height:auto !important;
    height:auto !important;
  }
}


.offer-title-link{
  color:inherit;
  text-decoration:none;
  display:inline-block;
}
.offer-title-link:hover{
  opacity:.85;
}

@media(max-width:900px){

  .news h2::after{
    display:none !important;
  }

  .news p::after{
    content:"";
    display:block;
    width:150px;
    height:8px;
    margin:18px auto 0 auto;

    background-image:
      radial-gradient(#2B2624 2px, transparent 2px);

    background-size:14px 8px;
    background-repeat:repeat-x;
  }
}


.cta-offer-link{
  transition:
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}

.cta-offer-link:hover,
.cta-offer-link:focus,
.cta-offer-link:active{
  color:var(--orange) !important;
  background:var(--dark) !important;
}

.newsletter-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
}

#newsletter-message{
  margin-top:16px;
  text-align:center;
  font-weight:500;
  font-size:0.95rem;
}

.current{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  padding:80px 0;
  border-top:1px solid #ddd;
}

.current > div:not(:first-child){
  border-left:1px solid #d8d0c8;
  padding-left:28px;
}

.current img{
  width:100%;
  height:auto;
  display:block;
}

/* poslední dva sloupce tvoří jednu skupinu */
.no-right-border{
  border-right:none !important;
  padding-left:12px !important;
}

.no-left-border{
  border-left:none !important;
  padding-left:12px !important;
}

.current h2{
  font-size:60px !important;
}

@media(max-width:900px){

  .current{
    grid-template-columns:1fr;
  }

  .current > div:not(:first-child){
    border-left:none !important;
    padding-left:0 !important;
    margin-top:24px;
  }

  .no-left-border,
  .no-right-border{
    border:none !important;
    padding-left:0 !important;
  }
}