:root{
  --bg:#000;
  --fg:#fff;
  --brand-font:'Lexend Zetta',sans-serif;
  --body-font:'Montserrat',sans-serif;
  --header-h: 75px;  /* zvýšené tak, aby sedelo s novými paddingmi */
}

/* reset */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background-color:#fff;
  color:var(--fg);
  font-family:var(--body-font);
  line-height:1.5;
  overflow-x:hidden;

}

main { padding-top: var(--header-h); }

/* header */
.header{
  position:fixed; top:0; left:0; right:0;
  background:#080808;
  padding:34px 0 22px 0; /* top/right/bottom/left */
  z-index:50;
  font-size: 18px;
  display:flex; align-items:flex-start; justify-content:space-between;
}

.brand{
  font-family:'Lexend Zetta',sans-serif;
  font-weight:300;
  letter-spacing:-2.3px;   /* pôvodná hodnota */
  color:#fff;
  text-decoration:none;
  font-size:1.5em;         /* desktop */
  margin-left:20px;
}

.nav{
  margin-right:20px;
  margin-top:7px;
}
.nav ul{
  display:flex;
  gap:28px;
  list-style:none;
}
.nav a{
  color:#fff;
  text-decoration:none;
  font-family:'Montserrat',sans-serif;
  font-weight:400;
  letter-spacing:1px;
  font-size:18px;
  line-height:1;
}

.nav a:hover{
  text-decoration:none;
}

.nav ul li a{
  position: relative;
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 4px solid transparent;  /* 3–4px podľa chuti */
  transition: border-color .3s cubic-bezier(.58,.3,.005,1);
}
.nav ul li a:hover,
.nav ul li a:focus,
.nav ul li a[aria-current="page"]{
  border-bottom-color: #3f444b;          /* sivá z pôvodného */
}



.burger{display:none; background:none; border:0; cursor:pointer}
.burger span{display:block; width:22px; height:2px; background:var(--fg); margin:4px 0}

/* hero sekcia */
.hero{
  padding: 300px 0 450px 0;        /* <<< kľúčové: výška a výrez, 1:1 s pôvodným */
  display: flex;
  align-items: center;
  background-image: url('../images/vivi_home.jpg');
  background-repeat: no-repeat;
  background-size: cover;          /* vyplniť plochu, orez podľa potreby */
  background-position: center center; /* presne stred/stred ako v pôvodnom */
}

/* textový blok vľavo + vnútorné odsadenia podľa pôvodného */
.hero-inner{
  color: #fff;
  text-align: left;
  max-width: 1552px;
  width: 100%;
  margin: 0 auto;
  padding-left: 30px;
}

.hero-title{
  font-family: 'Lexend Zetta', sans-serif;
  font-weight: 400;
  letter-spacing: -1.5px;
  font-size: 3.5em;
  line-height: 1.12;
  margin: 0 0 0.25em 0;
  padding-right: 500px;
}

.hero-sub{
  font-family: 'Lexend Zetta', sans-serif;
  font-weight: 300;
  letter-spacing: -1.5px;
  font-size: 3em;
  line-height: 1.15;
  margin: 0;
  padding-right: 500px;
}

/* footer */
.footer{
  background:#000;
  font-size:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 0 32px 12px;
  color:var(--fg);
}
.footer-right{
  display:flex;
  align-items:center;
  padding-right:12px;
  gap:18px;
}
.footer a{
  color:var(--fg);
  text-decoration:none;
  font-size:inherit;
}
.footer a:hover{
  text-decoration:underline
}
.footer .ig{
  display:inline-flex;
  align-items:center
}

.footer .ig img {
  width: 28px;
  height: 28px;
}



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

  .header{ padding:34px 30px 22px 30px; }
  .brand{
    font-size:0.9em;
    margin-left:0;
   }

  .hero{
    background-image:url('../images/vivi_home.jpg');   /* rovnaký súbor */
    background-size:cover;
    background-position:center center;
    padding:300px 0 450px 0;
  }

  .hero-title{
    font-size: 1.3em;
    margin: 0 0 0.75em 0;
  }
  .hero-sub {
    font-size: 1.0em;
  }

  .burger{ display:block; }

  .nav{
    position: fixed;
    top: var(--header-h);
    right: 12px;
    width: max-content;      /* panel široký podľa obsahu */
    max-width: 90vw;
    background: #fff;        /* biele pozadie panelu */
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    display: none;           /* JS pridá .open */
    z-index: 1000;
    padding: 0;              /* bez vnútorných okrajov panelu */
  }
  .nav.open{ display:block; }

  .nav ul{
    display: block;          /* žiadny gap, nech hover kryje celý riadok */
    margin: 0;
    padding: 0;
  }
  .nav ul li{
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .nav ul li + li{
    border-top: 1px solid #eee; /* deliaca linka medzi položkami */
  }

  .nav ul li a{
    display: block;
    padding: 12px 16px;      /* spacing položiek */
    white-space: nowrap;
    color: #000;             /* text čierny v základe */
    text-decoration: none;   /* žiadny underline v burgeri */
    border: none;            /* vypne desktopový underline/border */
    transition: background-color .25s ease, color .25s ease;
  }
  .nav ul li a:hover,
  .nav ul li a:focus{
    background: #000;        /* invert na hover */
    color: #fff;             /* text biely */
  }


}


/* Mobil (max 767) – pôvodný mal stred a vlastné centrácie */
@media (max-width:767px){

  .header{ padding:34px 22px 22px 20px; }
  .brand{
    font-size:0.8em;
    margin-left:0;
  }
  .nav a{
    font-size:16px;
    margin-right:0;
   }

  .hero{
    padding-top: 50vh;             /* horný priestor podľa okna */
    padding-bottom: 50vh;          /* dolný priestor podľa okna */
    background-image: url('../images/vivi_home_mobile.jpg');
    background-size: cover;
    background-position: center 48%;
    background-repeat: no-repeat;
  }

  .hero-inner{
    position: absolute;
    top: 12%;          /* alebo podľa oka – približne kde má byť */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    max-width:335px;
    margin:0;          /* žiadny záporný margin */
  }

  .hero-title{
    font-size: 1.9em;
    padding-right: 0;
    letter-spacing: -1.5px;
    margin: 0;
  }

  .hero-sub{
    font-size: 1.9em;
    padding-right: 0;
  }

  .footer{
    flex-direction: column-reverse;       /* zľava doprava sa zmení na hore/dole */
    align-items: center;          /* zarovná stredovo */
    text-align: center;
    gap: 12px;                    /* medzera medzi blokmi */
  }

  .footer-left,
  .footer-right{
    padding:0;
  }
}






/* ABOUT */
.about-section{ padding:110px 20px 44px 0px; }
.about-wrap{
  max-width: 1140px; margin:0 auto;
  display:grid; grid-template-columns: 400px 1fr; gap:48px;
  align-items:start;
}
.about-photo img{ display:block; width:100%; height:auto; }
.section-title{
  font-family:'Lexend Zetta',sans-serif;
  font-weight:400;
  letter-spacing:-2.3px;
  font-size:38px; line-height:1.2;
  color:#000; margin:0 0 18px 0;
}

.about-section .section-title{
  font-weight: 300;  /* menší weight */
  font-size: 48px;   /* väčší font (uprav podľa oka) */
}

.about-copy{
  max-width: 600px;                 /* ~61.3% z 1140px */
}


.about-copy p{
  font-family:'Montserrat',sans-serif;
  font-size:18px;
  line-height:2;
  color: #717171;
  margin:0 0 14px 0;
}



/* MEASUREMENTS */
.meas-section{
  position: relative;
  color:#fff;
  background-image:
    linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8)),
    url('../images/photographic_studio.jpg');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, fixed;
}

.meas-inner{
  max-width: 1200px;
  margin:0 auto;
}

.meas-section .meas-inner{
  padding: 90px 20px 100px; /* o trochu nižšie od vrchu */
}


.meas-section .section-title{
  font-family: "Josefin Sans", sans-serif;
  font-weight: 600;
  font-size: 3.4em;
  text-align: center;
  letter-spacing: -2px; /* WP neudáva záporné */
}

.section-title.inverse{ color:#fff; }
.meas-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:53px;
  margin-top:67px;
}

.meas-list{ list-style:none; margin:0; padding:0; }
.meas-list li{
  font-family:'Montserrat',sans-serif;
  font-size:18px; line-height:1.9;
}





/* RESPONZÍVNE */
@media (max-width:1024px){
  .about-wrap{ grid-template-columns: 300px 1fr; gap:32px; }
  .meas-section .section-title{ font-size: 2.6em; }
}
@media (max-width:767px){
  .about-section{ padding:48px 20px; }

.about-wrap{
  display: grid;
  grid-template-columns: 1fr;      /* jeden stĺpec */
  grid-auto-flow: row;
}
.about-copy .section-title{
  text-align: center;
  font-size: 36px;
  margin-bottom: 0px;
}

/* urob z detí grid itemy, ale všetky na plnú šírku */
.about-copy{ display: contents; }
.about-wrap > *{ grid-column: 1 / -1; }
.about-copy > *{ grid-column: 1 / -1; }

/* poradie */
.about-copy .section-title{ grid-row: 1; }
.about-photo{
  grid-row: 2;
  max-width: 360px;
  margin: -15px auto 14px;
}


.section-title{ font-size:32px; }
.meas-inner{ padding:56px 20px; }
.meas-grid{ grid-template-columns: 1fr; gap:22px; }
.meas-section .section-title{ font-size: 2.25em; }

}









/* rovnaké odsadenie od fixnej hlavičky ako na about.html */
.portfolio-section{ padding:110px 20px 44px 0; }


/* štyri stĺpce */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}

.portfolio-grid img{
  width:100%;
  height:auto;
  display:block;
  transition: transform .3s ease;
}
.portfolio-grid img:hover{ transform: scale(1.15); }
a.lb-link img{ cursor: zoom-in; }

/* Lightbox */
.lb-overlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.92);
  display:none;
  align-items:center; justify-content:center;
  z-index:9999; padding:24px;
}
.lb-overlay.show{ display:flex; }
.lb-figure{ margin:0; text-align:center; max-width:90vw; max-height:90vh; }
.lb-image{ max-width:90vw; max-height:82vh; object-fit:contain; cursor:zoom-out; display:block; margin-inline:auto; }
.lb-counter{ color:#fff; opacity:.75; font-size:14px; margin-top:8px; }

/* Ovládanie */
.lb-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  border:0; background:rgba(0,0,0,.35); color:#fff;
  font-size:28px; padding:10px 14px; cursor:pointer; line-height:1;
}
.lb-prev{ left:12px; }
.lb-next{ right:12px; }
.lb-close{
  top:12px; right:12px; transform:none;
  font-size:34px; padding:6px 12px;
}
.lb-btn:focus{ outline:2px solid #fff; outline-offset:2px; }


/* rovnaké odsadenie a max šírka ako about.html */
.content-section {
  padding-top: 80px; /* rovnaké ako about */
  padding-bottom: 44px;
  background: #cecece;
}


.content-section .section-title {
  text-align: center;
  margin-bottom: 30px; /* ak chceš väčší/menší odstup od galérie, uprav túto hodnotu */
}

.content-section .container {
  max-width: 1160px; /* alebo menšia hodnota, napr. 900px */
  margin: 0 auto;
  padding: 0 20px;
}


.container {
  max-width: 1200px; /* alebo presne hodnota z about.css */
  margin: 0 auto;
  padding: 0 20px;
}



.portfolio-grid img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .3s ease;
}

.portfolio-grid img:hover {
  transform: scale(1.15);
}

a.lb-link img {
  cursor: zoom-in;
}

/* Portfolio – responzívny počet stĺpcov */
@media (max-width: 1024px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .portfolio-grid { grid-template-columns: repeat(1, 1fr); }
}








/* 2-stĺpcový kontakt */
.contact-grid {
  margin-top: 140px;
  margin-bottom: 180px;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 40px;
  align-items: start;
}

/* ľavý stĺpec – základ, necháme minimalisticky */
.contact-left h3 {
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 12px;
  color: #737373;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.23em;


}
.contact-left { margin-top: 120px; }

.contact-name {
  color: #737373;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.2em;
  margin: 0 0 16px;
}


/* FORM */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  gap: 16px;
}

/* vstupné prvky */
.contact-form input,
.contact-form textarea {
  font: inherit;
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid #737373;
  background: #d7d7d7;
  color: #737373;
  outline: none;
  box-shadow: none;
}

.contact-form textarea { height: 100px; }



.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #9fa4a8;
}

/* položky na celú šírku */
.contact-form .full { grid-column: 1 / -1; }

/* tlačidlo – šírka ako jedno pole (polovica mriežky), vycentrované pod textareou */
.contact-submit {
  color: #737373;
  grid-column: 1 / -1;     /* pod celou mriežkou */
  justify-self: center;    /* centrovať */
  width: 100%;              /* polovica = ako jedno pole (Name/Surname) */
  padding: 12px 0;
  border-radius: 8px;
  border: 0;
  border: 2px solid #737373;
  background: #d7d7d7;
  letter-spacing: .15em;
  cursor: pointer;
  box-shadow: none;
}



/* responzívne – na mobile všetko pod seba */
@media (max-width: 767px) {


  .contact-left{ text-align: center; }
  .contact-grid { margin-top: -130px; grid-template-columns: 1fr; gap: 24px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-name {letter-spacing: .35em;}
}







/* CONTACT – overlay modal */
.modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: none;
  align-items: center; justify-content: center;
  z-index: 10000;
  padding: 20px;
}
.modal.show{ display: flex; }
.modal-dialog{
  width: 100%;
  max-width: 420px;
  background: #fff;
  color: #111;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 18px 16px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.modal-dialog p{
  margin: 0 0 14px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; line-height: 1.6;
  color: #374151;
}
.modal-dialog.success p{ color:#1b5e20; }
.modal-dialog.error p{ color:#9a1b1b; }

.modal-close{
  display: inline-block;
  padding: 10px 16px;
  font: inherit;
  border-radius: 8px;
  border: 0;
  background: #111; color:#fff;
  cursor: pointer;
}
.modal-close:focus{ outline: 2px solid #111; outline-offset: 2px; }

/* mobile spacing */
@media (max-width:767px){
  .modal-dialog{ padding:16px 14px; }
}