/*************** root ***************/
:root{
  /* Paleta farieb */
  --bg:#ede9e2;        /* pozadie stránky fdf9f2 */
  --surface:#e4dace;   /* boxy (karty) f4eade */
  --surface-2:#d1c8bc; /* striedavé sekcie f1e8dc */
  --header:#b1a89c;    /* pozadie headera d8c8b9 */
  --fg:#2d2323;        /* primárny text 2d2323 */
  --muted:#635051;     /* sekundárny text 635051 */
  --brand:#69464c;     /* Call to action (CTA) 69464c */
  --border:#69464c;    /* okraje 69464c */
  --radius:16px;
  --max:1280px;
}
/*************** end root ***************/


/*************** reset-base ***************/
*{box-sizing:border-box}
html{
  overflow-x:hidden;
}

body{
  max-width:100vw;
  overflow-x:visible;
}

html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--fg); background:var(--bg);
}
a{color:var(--brand);text-decoration:none; outline-offset:2px}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--brand)}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}

section > .container { padding-top: 20px; padding-bottom: 20px; }
section > .container > h2:first-child { margin-top: 0; }
/*************** end reset-base ***************/


/*************** typography ***************/
h1{font-size:clamp(28px,4vw,40px);line-height:1.1;margin:0 0 10px}
h2{font-size:clamp(22px,3vw,28px);margin:26px 0 10px}
p.lead{font-size:18px; color:var(--fg);margin:0 0 18px}
ul{padding-left:18px;margin:8px 0}

/* Link v nadpisoch vyzerá rovnako ako nadpis (spoločný základ) */
section h1 > a,
section h2 > a,
section h3 > a {
  color: inherit;
  text-decoration: none;
}

/* zvýraznenie h2 v home.php – doplnkové správanie */
section h2 > a{
  display:inline-block;
  transition: transform .3s ease;
}
section h2 > a:hover{
  text-decoration:none;
  transform: scale(1.21);
}

/* mobil */
@media (max-width: 768px){
  h2{margin:22px 0 10px}
}
/*************** end typography ***************/


/*************** utilities-layout ***************/
.section-alt{background:var(--surface-2)}
.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.price{font-weight:700}

@media (max-width: 768px){
  .grid.cols-3,.grid.cols-2{grid-template-columns:1fr}
}
/*************** end utilities-layout ***************/



/*************** card-badges ***************/
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
}
.card h3:first-child { margin-top: 0; }

.badges{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 20px}
.badge{padding:8px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--border);color:var(--fg);font-size:14px}

/* Obrázky v kartách – unified “hero” efekt */
#sluzby .card > img:first-child,
#specializacia .card > img:first-child,
#blog .card > img:first-child,
#recenzie .card > img:first-child {
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: var(--radius);
}
/*************** end card-badges ***************/


/*************** buttons ***************/
.btn{
  display:inline-block; padding:12px 18px; border-radius:999px;
  background:var(--brand); color:#fff; font-weight:600; border:0; text-align:center;
  transition:filter .15s ease, transform .02s ease;
  cursor:pointer;
  font-family:inherit;
  font-size:16px;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--fg)}

.btn.secondary{
  background:var(--surface); color:var(--brand); border:2px solid var(--brand)
}
.btn.ghost{
  background:transparent; color:var(--brand); border:2px solid var(--brand)
}

/* ak je v DOM native <button class="btn">, udrží rovnaký vzhľad */
button.btn{border:none}

/* mobil */
@media (max-width: 768px){
  .btn{padding:12px 16px}
}
/*************** end buttons ***************/


/*************** header-nav ***************/

header{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  z-index:999;
  background:var(--header);
  border-bottom:1px solid var(--border);
}

.nav{
  display:grid;
  grid-template-columns:auto 1fr auto; /* logo+title | menu | FB */
  align-items:center;
  gap:16px;
  padding:14px 0;
}

.logo{display:flex;align-items:center;gap:1rem;font-weight:700}
.logo .dot{width:10px;height:10px;border-radius:50%;background:var(--brand)}
.logo-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60vw}
.logo-img { height: 48px; width: auto; display: block; }

/* desktop menu – vycentrované */
.nav-links{
  display:flex;
  justify-content:center;
  gap:28px;
}
.nav-links a{
  color:var(--brand);
  font-weight:500;
  text-decoration:none;
  transition: color 0.5s ease, transform 0.3s ease;
}
.nav-links a:hover{
  color:var(--fg);
  transform: scale(1.1);
}

/* „Objednať sa“ ako bežná položka (ak historicky .btn) */
.nav-links .btn{
  background:transparent; border:0; color:var(--fg);
  padding:0; border-radius:0; font-weight:500; filter:none; transform:none;
}
.nav-links .btn:hover{ color:var(--brand); }

/* pravá strana – FB odkaz */
.social-link{
  justify-self:end;
  color:var(--brand);
  display:inline-flex;
  align-items:center;
  transition: color 0.5s ease, transform 0.3s ease;
}
.social-link:hover{
  color:var(--fg);
  transform: scale(1.1);
}
.fb-icon{ display:block }


/* prepnutie na burger skôr kvôli šírke menu */
@media (max-width: 900px){
  .nav-links{display:none}
}



/*************** end header-nav ***************/


/*************** burger-mobile-menu ***************/
.burger{display:none;background:transparent;border:0;padding:8px 6px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#111;margin:5px 0;border-radius:2px}

.mobile-menu{
  display:none; position:fixed; top:56px; left:0; right:0; z-index:25;
  background:var(--surface-2); border-bottom:1px solid var(--border);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
}
.mobile-menu a{display:block;padding:14px 20px;border-top:1px solid #f0ece6;color:var(--fg)}
.mobile-menu .btn{margin:10px 20px}
.mobile-menu.show{display:block}

/* zobrazenie burgeru pri užšej šírke */
@media (max-width: 900px){
  .burger{display:inline-block}
}
/* jemné doladenie na mobil */
@media (max-width: 768px){
  .mobile-menu .btn{width:100%}
}
/*************** end burger-mobile-menu ***************/


/*************** hero ***************/
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  padding:20px 0;
  align-items:start;
}
.hero > div:first-child{padding:0 16px}
.hero > div:first-child h1{margin-top:16px}
.hero > .card {margin: 0 1rem;}
.hero .card{background:var(--surface);border-radius:var(--radius);padding:16px 24px 24px}
.hero .card h2{margin-top:0}
.hero .card p{margin:10px 0 0}
.hero .card ul{margin:8px 0 12px}
.hero .card li + li{margin-top:6px}
.hero .card .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.hero .card .cta-row .btn{flex:1}

/* HERO – obrázok v ľavom stĺpci: vľavo s obtekaním */
.hero > div:first-child img:first-of-type{
  float: left;
  width: clamp(220px, 33%, 360px);
  height: auto;
  margin: 0 1rem 0.75rem 0;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: var(--radius);
  display: block;
}

/* nech kontajner obalí float */
.hero > div:first-child::after{
  content: "";
  display: block;
  clear: both;
}

/* HERO ako full-bleed container s paralax pozadím */
.container.hero{
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc((100vw - var(--max)) / 2 + 20px);
  padding-right: calc((100vw - var(--max)) / 2 + 20px);
  position: relative;
  overflow: hidden;
  --hero-parallax-y: 0px;       /* JS zapisuje posun */
  --hero-bg-opacity: 0.90;      /* prekrytie pozadia */
  background-color: var(--bg);
}
/* full-bleed pozadie (drž spodok fotky) */
.container.hero::before{
  content: "";
  position: absolute;
  inset: -5vh 0;
  background: url("../images/bg-paralax-2400.webp") center bottom / cover no-repeat;
  transform: translateY(var(--hero-parallax-y));
  opacity: var(--hero-bg-opacity);
  pointer-events: none;
  z-index: 0;
}
/* obsah nad pozadím */
.container.hero > *{ position: relative; z-index: 1; }

/* pozadie len pod ľavým stĺpcom */
.container.hero > :first-child{
  background: rgba(228,218,206,0.7);
  border: 1px solid rgba(105,70,76,1);
  border-radius: var(--radius);
  padding: 0 1rem 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  position: relative;
  z-index: 2;
}
.container.hero > :first-child::after{
  content: "";
  display: block;
  clear: both;
}
.container.hero .card { background: rgba(228,218,206,0.7); }

/* šírkové doladenia */
@media (min-width:1200px){
  .hero > div:first-child{max-width:70ch}
}

/* HERO – mobil */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; gap:20px}
  .hero .card .cta-row .btn{flex-basis:100%}
  .container.hero::before{ content:none; } /* vypnúť pozadie na menších šírkach */
  .container.hero > :first-child{
    background: none; border: 0; box-shadow: none; border-radius: 0;
  }
  .container.hero .card { background: var(--surface); }
}
@media (max-width: 768px){
  .hero > div:first-child img:first-of-type{
    float: none; width: 100%; margin: 0 0 1rem 0;
  }
}
/*************** end hero ***************/


/*************** cta-bar ***************/
.cta-bar{
  position:fixed; right:16px; bottom:16px; z-index:30;
  display:flex; gap:10px;
}
/* mobil – drží šírku */
@media (max-width: 768px){
  .cta-bar{left:16px; right:16px; bottom:12px; gap:8px}
  .cta-bar .btn{flex:1; padding:12px 14px}
}
/*************** end cta-bar ***************/


/*************** recenzie ***************/
#recenzie #rec-track{
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: .25rem 0 .5rem 0;
  scrollbar-width: none;      /* Firefox – skryť lištu */
  -ms-overflow-style: none;   /* Starý IE/Edge */
}
#recenzie #rec-track::-webkit-scrollbar{ display: none } /* Chrome/Safari/Opera */

#recenzie #rec-track .card.recenzia{
  flex: 0 0 100%;
  scroll-snap-align: start;   /* žiadny flex-basis/width v CSS */
}

#recenzie .recenzia{ border-left:4px solid var(--brand); padding-left:14px; }
#recenzie .card > *:first-child { margin-top: 0; }

/* HOME recenzie – track layout */
#recenzie #rec-track{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#recenzie #rec-track::-webkit-scrollbar{ display:none; }

/* PC: 3 karty vedľa seba */
#recenzie #rec-track .card.recenzia{
  flex:0 0 calc((100% - 32px) / 3);
  scroll-snap-align:start;
}

/* Mobil: 1 karta na šírku */
@media (max-width:768px){
  #recenzie #rec-track .card.recenzia{
    flex:0 0 100%;
  }
}


/*************** end recenzie ***************/




/*************** blog ***************/
#blog .card {
  display: block;
  margin-bottom: 1.5rem;       /* zjednotené bez !important */
  border-left:4px solid var(--brand);
}
#blog .card > *:first-child { margin-top: 0; }
#blog .card h3 { margin-bottom: 8px; }
#blog .card p { margin: 0; }
#blog .card .card-actions { display: flex; justify-content: flex-end; }

/* odkazy ako karty */
#blog a.card {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 16px;
  transition: box-shadow .2s ease, transform .2s ease;
}
#blog a.card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}


/* mobil – drobné úpravy */
@media (max-width: 768px){
  #blog .card{ margin-bottom: 1rem; }
}
/*************** end blog ***************/


/*************** article (clanok) ***************/
.clanok h1 { margin-top: 0; margin-bottom: 16px; }
.clanok .lead { margin-bottom: 16px; }
.clanok h2 { margin-top: 24px; margin-bottom: 12px; }
.clanok h3 { margin-top: 16px; margin-bottom: 8px; }
.clanok p { margin: 0 0 12px; }
.clanok ul { margin: 0 0 12px 18px;}
.clanok h1 + img { margin-right: 2rem !important; }

/* tabuľka v článku */
.clanok table { width: 100%; border-collapse: collapse; }
.clanok thead th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--border);
}
.clanok tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.clanok tbody tr:last-child td { border-bottom: 0; }

/* mobil */
@media (max-width: 768px){
  .clanok thead th, .clanok tbody td{ padding: 8px 10px; }
}
/*************** end article (clanok) ***************/


/*************** cennik ***************/
#cennik .card {
  margin-bottom: 2rem;
}

#cennik table {
  width: 100%;
  border-collapse: collapse;
}

#cennik tbody tr + tr {
  border-top: 1px solid rgba(0,0,0,0.08);
}

#cennik td {
  padding: 12px 0;
  vertical-align: top;
}

#cennik td.col-sluzba {
  padding-right: 16px;
}

#cennik .sluzba-nazov {
  font-weight: 600;
}

#cennik .sluzba-popis {
  font-size: 0.9em;
  color: var(--muted);
  margin-top: 2px;
}

#cennik td.col-cas {
  white-space: nowrap;
  text-align: center;
  padding: 12px 16px;
}

#cennik td.col-cena {
  white-space: nowrap;
  text-align: right;
}


@media (max-width: 768px) {
  #cennik table { display: table; width: 100%; border-collapse: collapse; }
  #cennik tbody { display: table-row-group; }
  #cennik tr { display: table-row; }
  #cennik td { display: table-cell; vertical-align: top; padding: 6px 0; }

  #cennik td.col-cas  { white-space: nowrap; text-align: center; }
  #cennik td.col-cena { white-space: nowrap; text-align: right; }

  #cennik td.col-cas, #cennik td.col-cena { padding: 4px 2px; }
}


/*************** end cennik ***************/


/*************** cennik-home ***************/
#cennik .cennik-mini{
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

#cennik .cennik-mini td{
  padding: 6px 0;
  vertical-align: top;
}

#cennik .cennik-mini td:last-child{
  text-align: right;
  white-space: nowrap;
  padding-left: 14px;
}

#cennik .cennik-mini tr + tr td{
  border-top: 1px solid rgba(0,0,0,0.08);
}


#cennik .grid + .card{ margin-top: 16px; }


#cennik .grid {
  margin-bottom: 0;
}

#cennik .grid .card {
  margin-bottom: 0;
}


@media (max-width: 768px) {
  /* HOME cenník: vždy ponechať tabuľkové správanie (neprebíjať na block) */
  #cennik table.cennik-mini { display: table; width: 100%; border-collapse: collapse; }
  #cennik table.cennik-mini tbody { display: table-row-group; }
  #cennik table.cennik-mini tr { display: table-row; }
  #cennik table.cennik-mini td { display: table-cell; vertical-align: top; padding: 6px 0; }

  /* názov nech sa zalamuje, cena nech drží riadok a je vpravo */
  #cennik table.cennik-mini td:first-child { padding-right: 12px; }
  #cennik table.cennik-mini td:last-child {
    white-space: nowrap;
    text-align: right;
    font-weight: 600;
    padding-left: 14px;
  }
}


/*************** end cennik-home ***************/

/*************** faq ***************/
.faq-card{
  padding:14px;
}

.faq-item + .faq-item{
  border-top:1px solid var(--border);
  margin-top:12px;
  padding-top:12px;
}

.faq-card h3{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.25;
}

.faq-card p{
  margin:0;
}
/*************** end faq ***************/

/*************** mhd ***************/

#mhd .mhd-card h3{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.25;
}

#mhd .mhd-card p{
  margin:0;
}

#mhd .mhd-card-inner{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

#mhd .mhd-img{
  flex:0 0 33%;
}

#mhd .mhd-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
}

#mhd .mhd-content{
  flex:1;
  display:flex;
  flex-direction:column;
}

#mhd .mhd-content h3{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.25;
}

#mhd .mhd-content p{
  margin:0;
}

#mhd .mhd-content a{
  display:inline-block;
  margin-top:15px;
  align-self:flex-end;
}

/* mobil */
@media (max-width:768px){
  #mhd .mhd-card-inner{
    flex-direction:column;
  }

  #mhd .mhd-img{
    flex:unset;
    width:100%;
  }
}

/*************** end mhd ***************/

/*************** parking ***************/

#parking .mhd-card h3{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.25;
}

#parking .mhd-card p{
  margin:0;
}

#parking .mhd-card-inner{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

#parking .mhd-img{
  flex:0 0 33%;
}

#parking .mhd-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:8px;
}

#parking .mhd-content{
  flex:1;
  display:flex;
  flex-direction:column;
}

#parking .mhd-content h3{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.25;
}

#parking .mhd-content p{
  margin:0;
}

#parking .mhd-content a{
  display:inline-block;
  margin-top:15px;
  align-self:flex-end;
}

/* mobil */
@media (max-width:768px){
  #parking .mhd-card-inner{
    flex-direction:column;
  }

  #parking .mhd-img{
    flex:unset;
    width:100%;
  }
}

/*************** end parking ***************/


/*************** recenzie-page ***************/

/* Summary karta */
.rec-summary{
  margin-top: 1rem;
}

.rec-summary-top{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}

.rec-summary-score{
  display:flex;
  align-items:center;
  gap:16px;
}

.rec-summary .rec-cta{
  display:flex;
  justify-content:flex-end;
}

.rec-avg-num{
  font-size:42px;
  font-weight:800;
  line-height:1;
}

.rec-avg-stars{
  margin-bottom:4px;
}

.rec-avg-total{
  color:var(--muted);
}

.rec-summary-sources{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

.rec-summary-message{
  margin-top:14px;
  margin-bottom:10px;
}

.rec-summary-slogan{
  margin:0 0 18px 0;
  max-width:91ch;
  text-align: justify;
}

.rec-cta{
  margin-top:14px;
}

.rec-cta-right{
  display:flex;
  justify-content:flex-end;
}


/* Hviezdy */
.rec-star-lg{
  width:22px;
  height:22px;
  vertical-align:-0.18em;
}

.rec-star-sm{
  width:1rem;
  height:1rem;
  vertical-align:-0.125em;
}

/* Grid zoznam */
.rec-list{
  margin-top:1rem;
}

/* Hlavička karty */
.rec-card-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}

/* Ikona zdroja */
.rec-source-icon{
  width:20px;
  height:20px;
  object-fit:contain;
}

/* Load more */
.rec-load-wrap{
  display:flex;
  justify-content:center;
  margin-top:16px;
}

/* Spodná CTA karta */
.rec-bottom-cta{
  margin-top:18px;
}

.rec-bottom-title{
  margin-top:0;
}

.rec-bottom-lead{
  margin-bottom:0;
}

/* Recenzia bez textu */
.card.recenzia.is-empty p{
  display:none;
}

@media (max-width:768px){
  .rec-cta-right{
    justify-content:center;
  }
}

/*************** end recenzie-page ***************/



/*************** forms ***************/

.req{
  color:#c62828;
  font-weight:600;
}

#contactForm .captcha{
  margin-top:5px;
}


form input,
form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--muted);
  font-size: 18px;
  font-family: inherit;
}
form input:focus-visible,
form textarea:focus-visible{
  outline:2px solid var(--brand);
}

/* mobil */
@media (max-width: 768px){
  form input, form textarea{ font-size:16px }
}


/* 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:768px){
  .modal-dialog{ padding:16px 14px; }
}
/*************** end forms ***************/







/*************** footer ***************/
footer{
  padding:38px 0;
  border-top:1px solid var(--border);
  color:var(--muted);
  background: var(--header);
}
footer .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
footer .container > *{ margin: 0; }
footer a{ color: inherit; text-decoration: none; }
footer a:hover{ text-decoration: underline; }

/* mobil */
@media (max-width: 768px){
  footer{ padding:28px 0; }
}
/*************** end footer ***************/