/* =====================================================
   VB AUTO 2.0
   STYLE.CSS
   VERZE 1.0
===================================================== */

/* RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;font-size:16px;line-height:1.7;color:#222;background:#fff;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button,input,textarea{font:inherit}

/* ROOT */
:root{
--primary:#d62027;
--primary-dark:#b8151b;
--white:#fff;
--black:#1d1d1d;
--text:#555;
--background:#fff;
--light:#f6f6f6;
--border:#ececec;
--shadow:0 18px 45px rgba(0,0,0,.08);
--radius:18px;
--transition:.3s ease;
--container:1240px;
}

/* BASE */
.container{width:min(var(--container),92%);margin:auto}
section{padding:110px 0}
p{color:var(--text)}
h1{font-size:64px;line-height:1.1;font-weight:800}
h2{font-size:46px;line-height:1.2;font-weight:700}
h3{font-size:28px;font-weight:700}

.section-title{text-align:center;max-width:760px;margin:0 auto 70px}
.section-title span{display:inline-block;margin-bottom:12px;color:var(--primary);font-size:14px;font-weight:700;letter-spacing:2px}
.section-title h2{margin-bottom:20px}
.section-title p{font-size:18px}

.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 34px;border-radius:50px;font-weight:700;transition:var(--transition)}
.button--primary{background:var(--primary);color:#fff}
.button--primary:hover{background:var(--primary-dark)}
.button--secondary{border:2px solid #fff;color:#fff}
.button--secondary:hover{background:#fff;color:#222}

/* HEADER */
.header{position:fixed;top:0;left:0;width:100%;height:90px;background:rgba(255,255,255,.96);backdrop-filter:none;border-bottom:1px solid var(--border);z-index:1000}
.header .container{height:90px;max-width:1240px;width:min(var(--container),92%);display:grid;grid-template-columns:220px 1fr 220px;align-items:center;padding:0}
.logo{display:flex;align-items:center;justify-content:flex-start}
.logo img{height:58px}
.navigation{display:flex;align-items:center;justify-content:center}
.navigation__list{display:flex;align-items:center;justify-content:center;gap:34px;margin:0;padding:0}
.navigation__link{display:flex;align-items:center;height:90px;font:600 16px/1 'Inter',sans-serif;position:relative;transition:var(--transition)}
.navigation__link:hover,.navigation__link--active{color:var(--primary)}
.navigation__link::after{content:"";position:absolute;left:0;bottom:24px;width:0;height:2px;background:var(--primary);transition:var(--transition)}
.navigation__link:hover::after,.navigation__link--active::after{width:100%}
.header__actions{display:flex;justify-content:flex-end;align-items:center;width:220px}
.header__phone{font-weight:700}
.menu-toggle{display:none;width:46px;height:46px;background:none;border:none}
.menu-toggle span{display:block;width:28px;height:3px;margin:6px auto;background:#222}
/* HERO */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero__background,.hero__overlay{position:absolute;inset:0}
.hero__background img{width:100%;height:100%;object-fit:cover}
.hero__overlay{background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(0,0,0,.48))}
.hero .container{position:relative;z-index:2}
.hero__content{max-width:720px;color:#fff;padding-top:90px}
.hero__subtitle{display:inline-block;margin-bottom:24px;padding:10px 18px;border-radius:50px;background:rgba(214,32,39,.18);border:1px solid rgba(255,255,255,.18)}
.hero__content h1{margin-bottom:28px;color:#fff}
.hero__content p{margin-bottom:40px;font-size:20px;color:rgba(255,255,255,.92)}
.hero__buttons{display:flex;gap:18px;flex-wrap:wrap}

/* ABOUT */
.about{background:var(--light)}
.about__wrapper{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about__image{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.about__image img{transition:.45s}
.about__image:hover img{transform:scale(1.05)}
.about__content h3,.about__content p{margin-bottom:25px}
.about__list{margin:35px 0}
.about__list li{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.about__list li::before{content:"✓";display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff}

/* SERVICES */
.services__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.service-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:38px 34px;transition:var(--transition);box-shadow:0 8px 20px rgba(0,0,0,.03)}
.service-card:hover{transform:translateY(-10px);box-shadow:var(--shadow)}
.service-card__icon{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;margin-bottom:24px;overflow:hidden}
.service-card__icon img{width:84px;height:84px;object-fit:contain;display:block}
.service-card:hover .service-card__icon{background:#fff}

/* CTA */
.cta{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;text-align:center}
.cta__content{max-width:850px;margin:auto}
.cta__content span{display:inline-block;margin-bottom:18px;font-size:14px;font-weight:700;letter-spacing:2px}
.cta__content h2{color:#fff;margin-bottom:24px}
.cta__content p{max-width:700px;margin:0 auto 40px;color:#fff}
.cta__buttons{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}

/* CONTACT */
.contact-home{background:var(--light)}
.contact-home__wrapper{display:grid;grid-template-columns:1fr 1.1fr;gap:60px}
.contact-home__info{background:#fff;padding:45px;border-radius:var(--radius);box-shadow:var(--shadow)}
.contact-home__map{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.contact-home__map iframe{width:100%;min-height:420px;border:0}

/* FOOTER */
.footer{background:#1b1b1b;color:#d9d9d9;padding:80px 0 30px}
.footer__wrapper{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;margin-bottom:50px}
.footer__logo{height:60px;margin-bottom:25px}
.footer__column h4{color:#fff;margin-bottom:22px}
.footer__column p,.footer__column li{margin-bottom:14px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:25px;text-align:center;font-size:14px;color:#9d9d9d}

/* ANIMATION */
.fade-up{opacity:0;transform:translateY(40px);transition:.8s}
.fade-up.show{opacity:1;transform:none}

/* RESPONSIVE */
@media(max-width:992px){
h1{font-size:48px}h2{font-size:36px}
.navigation{
display:none;
position:absolute;
top:78px;
left:0;
width:100%;
background:#fff;
border-top:1px solid var(--border);
box-shadow:0 10px 24px rgba(0,0,0,.08);
z-index:2000;
}
.navigation.navigation--open{display:block}
.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
margin-left:auto;
cursor:pointer;
}
.header__actions{display:none!important;}
.about__wrapper,.contact-home__wrapper{grid-template-columns:1fr}
.services__grid{grid-template-columns:repeat(2,1fr)}
.footer__wrapper{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
section{padding:80px 0}
.header{height:78px}
.logo img{height:48px}
.hero{min-height:90vh}
.hero__content{text-align:center;max-width:100%;padding-top:70px}
.hero__content h1{font-size:38px}
.hero__buttons{justify-content:center}
.button{width:100%}
.services__grid,.footer__wrapper{grid-template-columns:1fr}
}
@media(max-width:480px){
h1{font-size:30px}h2{font-size:28px}h3{font-size:22px}
.container{width:94%}
.service-card{padding:30px 24px}
}


/* Header desktop/mobile */
.desktop-only{display:block}
.mobile-only{display:none}
.logo-right img{height:58px}

@media (max-width:992px){
.desktop-only{display:none}
.mobile-only{display:inline-flex}

.header{height:78px}
.header .container{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:10px;
}

.header__actions{
display:flex!important;
align-items:center;
justify-content:flex-end;
gap:8px;
}

.header__actions .button,
.header__phone{
display:inline-flex!important;
font-size:13px;
padding:8px 12px;
width:auto;
}

.menu-toggle{
display:flex!important;
flex-direction:column;
justify-content:center;
gap:6px;
width:46px;
height:46px;
background:none;
border:0;
margin-left:6px;
}

.menu-toggle span{
display:block!important;
width:28px;
height:3px;
margin:0!important;
background:#222!important;
border-radius:2px;
}
}


/* Desktop header unified */


@media (max-width:992px){
.navigation__list{display:flex;flex-direction:column;gap:0;padding:10px 0;}
.navigation__link{display:block;padding:14px 20px;}
}


@media (max-width:992px){
.header .container{
display:grid!important;
grid-template-columns:auto 1fr auto auto!important;
align-items:center!important;
gap:6px!important;
}
.mobile-header-actions{
display:flex!important;
flex-direction:column!important;
align-items:flex-end!important;
justify-content:center!important;
gap:2px!important;
}
.mobile-header-actions .header__phone,
.mobile-header-actions .button{
display:flex!important;
font-size:10px!important;
padding:2px 6px!important;
line-height:1!important;
width:auto!important;
}
.menu-toggle{
display:flex!important;
grid-column:4!important;
margin-left:0!important;
}
.navigation.navigation--open{
display:block!important;
max-height:33vh!important;
overflow:auto!important;
}
}


/* Mobile menu - show all items without scrolling */
@media (max-width:992px){
  .navigation.navigation--open{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
  }

  .navigation__list{
    gap:0 !important;
    padding:2px 0 !important;
  }

  .navigation__link{
    font-size:12px !important;
    padding:8px 16px !important;
    line-height:1.1 !important;
  }
}


/* === Mobile header layout fix === */
@media (max-width:992px){
  .header .container{
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
    align-items:center!important;
    gap:8px!important;
  }

  .logo{grid-column:1;align-self:center;}
  .mobile-header-actions{
    grid-column:2;
    display:flex!important;
    flex-direction:column;
    align-items:flex-end;
    justify-self:end;
    gap:2px;
  }

  .mobile-header-actions .header__phone,
  .mobile-header-actions .button{
    font-size:10px!important;
    padding:2px 6px!important;
    line-height:1!important;
  }

  .menu-toggle{
    grid-column:3!important;
    grid-row:1!important;
    align-self:center!important;
    justify-self:end!important;
    display:flex!important;
    position:static!important;
    margin:0!important;
    z-index:10001!important;
  }
}


/* Compact mobile dropdown - one third of screen */
@media (max-width:992px){
  .navigation{
    top:78px !important;
  }

  .navigation.navigation--open{
    display:block !important;
    height:33vh !important;
    max-height:33vh !important;
    overflow-y:hidden !important;
  }

  .navigation__list{
    height:100% !important;
    justify-content:flex-start !important;
    padding:0 !important;
    gap:0 !important;
  }

  .navigation__link{
    font-size:11px !important;
    padding:4px 16px !important;
    line-height:1 !important;
  }
}




/* === Desktop navigation stability fix === */
@media (min-width:993px){
.header .navigation__list{
align-items:stretch!important;
}
.header .navigation__link,
.header .navigation__link:hover,
.header .navigation__link:focus,
.header .navigation__link--active{
height:90px!important;
line-height:90px!important;
padding:0!important;
margin:0!important;
font-size:16px!important;
font-weight:600!important;
letter-spacing:0!important;
box-sizing:border-box!important;
}
.header .navigation__link::after{
bottom:24px!important;
}
}


/* Mobile icon size */
@media (max-width:768px){
  .service-card__icon{
    width:80px;
    height:80px;
    margin:0 auto 20px;
  }
  .service-card__icon img{
    width:64px;
    height:64px;
  }
}


/* Desktop - vycentrování obsahu karet služeb */
@media (min-width:993px){
  .service-card{
    text-align:center;
  }
  .service-card__icon{
    margin:0 auto 24px;
  }
  .service-card h3,
  .service-card p,
  .service-card div{
    text-align:center;
  }
}