/* ==========================================================================
   CLEANTIME: úpravy sekcií na úvodnej stránke
   (dlaždice služieb a krokov, stav pri hoveri, nadpis FAQ)

   Samostatný súbor zámerne. Pôvodné pravidlá sú v cleantime-home.css, čo je
   build výstup Tailwindu a pri najbližšom builde by sa zmeny v ňom stratili.

   Čo sa opravuje: zvýraznená dlaždica si nechávala svetlú deliacu linku
   (border-right) a k nej ešte vnútorný zelenkavý prstenec z box-shadow.
   Dve linky tesne vedľa seba pôsobili ako medzera a dlaždica vyzerala
   akoby sa zmenšila. Teraz sa podklad rozlieva až cez deliace linky, takže
   zvýraznená dlaždica je jedna súvislá plocha.
   ========================================================================== */

body[data-page="home"] .home-command .process li,
body[data-page="home"] .home-command .service-card {
  /* Aby linka nezmizla skokom, ale zhasla spolu s podkladom. */
  transition: background-color .5s cubic-bezier(.16, 1, .3, 1),
              border-color .5s cubic-bezier(.16, 1, .3, 1),
              border-radius .5s cubic-bezier(.16, 1, .3, 1),
              transform .5s cubic-bezier(.16, 1, .3, 1),
              box-shadow .5s cubic-bezier(.16, 1, .3, 1) !important;
}

body[data-page="home"] .home-command .process li:hover,
body[data-page="home"] .home-command .service-card:hover,
body[data-page="home"] .home-command .service-card:focus-within {
  /* Nad susedmi, inak by ich linky zostali navrchu. */
  z-index: 2;
  /* Celá dlaždica sa nadvihne, nielen text v nej. */
  transform: translate3d(0, -5px, 0);
  background-color: #e9f1f4;
  /* Vlastná deliaca linka zhasne; podklad ju pod sebou nahradí,
     pretože background-clip je štandardne border-box. */
  border-color: transparent;
  box-shadow:
    /* Prekryje deliacu linku susednej dlaždice zľava. */
    0 0 0 1px #e9f1f4,
    /* Jediný jemný obrys namiesto pôvodných dvoch liniek. */
    0 0 0 2px rgba(75, 106, 119, .13),
    /* Mäkký tieň pod nadvihnutou dlaždicou. */
    0 18px 38px rgba(23, 32, 28, .13);
}

/* --------------------------------------------------------------------------
   Zaoblené rohy nadvihnutej dlaždice.

   Dlaždice sedia v jednej mriežke a rohy im doteraz orezával až panel okolo
   nich. Len čo sa dlaždica pri hoveri nadvihne, vystúpi spod orezania a ukáže
   ostré rohy. Preto pri nadvihnutí dostane vlastný polomer. V pokoji ho mať
   nesmie: dlaždica je priehľadná a zaoblila by sa jej deliaca linka, ktorá je
   nakreslená ako border-right.

   Linka susednej dlaždice zľava sa musí schovať tiež, inak by vykúkala
   v zárezoch zaoblených rohov. Rieši to :has(), ktorý ako jediný vie siahnuť
   na predchádzajúceho súrodenca. Starší prehliadač pravidlo preskočí
   a zobrazí to, čo doteraz.
   -------------------------------------------------------------------------- */
body[data-page="home"] .home-command .process li:hover,
body[data-page="home"] .home-command .service-card:hover,
body[data-page="home"] .home-command .service-card:focus-within {
  border-radius: 18px;
}

body[data-page="home"] .home-command .process li:has(+ li:hover),
body[data-page="home"] .home-command .service-card:has(+ .service-card:hover),
body[data-page="home"] .home-command .service-card:has(+ .service-card:focus-within) {
  border-right-color: transparent;
}

/* Na mobile sú dlaždice pod sebou, delí ich border-bottom a panel má menší
   polomer, tak nech ho dlaždica nepreleze. */
@media (max-width: 760px) {
  body[data-page="home"] .home-command .process li:hover,
  body[data-page="home"] .home-command .service-card:hover,
  body[data-page="home"] .home-command .service-card:focus-within {
    border-radius: 14px;
  }
  body[data-page="home"] .home-command .process li:has(+ li:hover),
  body[data-page="home"] .home-command .service-card:has(+ .service-card:hover),
  body[data-page="home"] .home-command .service-card:has(+ .service-card:focus-within) {
    border-right-color: var(--line);
    border-bottom-color: transparent;
  }
}

/* Mriežka mala overflow: hidden kvôli zaobleným rohom, čím ale orezávala
   aj tieň a nadvihnutie zvýraznenej dlaždice. overflow: clip robí to isté,
   ale s overflow-clip-margin sa dá orezanie posunúť o kus ďalej, takže
   dlaždica má kam vystúpiť a rohy zostanú zaoblené.
   Staršie prehliadače bez podpory clip-margin orežú ako predtým. */
body[data-page="home"] .home-command .process ol,
body[data-page="home"] .home-command .service-grid {
  isolation: isolate;
  overflow: clip;
  overflow-clip-margin: 30px;
}

/* --------------------------------------------------------------------------
   Telefóny: dlaždice boli zbytočne vysoké.
   Na vine bola kombinácia min-height 250 px a margin-top: auto na spodnom
   riadku s cenou, ktorý sa tak odtláčal až na dno karty a v strede zostávalo
   prázdne miesto. Na mobile necháme kartu narásť len podľa obsahu.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* !important zámerne: pôvodné pravidlo je v cleantime-home.css, čo je
     build výstup Tailwindu. Má rovnakú špecifickosť aj rovnaký breakpoint,
     takže by o výsledku rozhodovalo len poradie súborov. Po prípadnom
     prebuildovaní by sa poradie mohlo zmeniť a výška by sa vrátila. */
  body[data-page="home"] .home-command .process li {
    min-height: 0 !important;
    padding: 15px 17px !important;
  }
  body[data-page="home"] .home-command .service-card {
    min-height: 0 !important;
    padding: 17px !important;
  }

  body[data-page="home"] .home-command .process h3 {
    margin: 0 0 4px !important;
    font-size: 1.18rem !important;
    line-height: 1.08 !important;
  }
  body[data-page="home"] .home-command .service-card h3 {
    margin: 0 0 5px !important;
    font-size: 1.26rem !important;
    line-height: 1.06 !important;
  }
  body[data-page="home"] .home-command .process p,
  body[data-page="home"] .home-command .service-card p {
    font-size: .84rem !important;
    line-height: 1.45 !important;
  }

  /* Cena a ikona nasledujú hneď za textom, nie na dne karty.
     Pôvodné margin-top: auto ich odtláčalo na dno a v strede vznikala diera. */
  body[data-page="home"] .home-command .service-bottom {
    margin-top: 12px !important;
  }
  body[data-page="home"] .home-command .service-bottom a {
    width: 36px !important; height: 36px !important;
  }
  body[data-page="home"] .home-command .service-number {
    margin-bottom: 2px !important;
    font-size: .68rem !important;
  }

  /* Lime žiara je počítaná na veľkú dlaždicu, na nízkej pôsobí ako fľak. */
  body[data-page="home"] .home-command .process li:before,
  body[data-page="home"] .home-command .service-card:before {
    background: radial-gradient(circle at 92% 0, hsla(198, 80%, 62%, .22), transparent 46%);
  }
}

/* Dotykové zariadenia: hover sa tam „zasekne" po klepnutí,
   takže zvýraznenie necháme len pre skutočný kurzor. */
@media (hover: none) {
  body[data-page="home"] .home-command .process li:hover,
  body[data-page="home"] .home-command .service-card:hover {
    z-index: auto;
    transform: none;
    background-color: transparent;
    border-color: var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  body[data-page="home"] .home-command .process li:has(+ li:hover),
  body[data-page="home"] .home-command .service-card:has(+ .service-card:hover) {
    border-color: var(--line);
  }
}

/* ==========================================================================
   Nadpis nad sekciou Ako to funguje

   Pozadie tejto sekcie začína svetlým sivobéžovým odtieňom a pôvodná olivová
   #516d79 na ňom mala kontrast len 2,94:1. Pri drobnom písme s veľkým
   preložením medzi písmenami sa to takmer nedalo prečítať. Nová zelená má na
   tom istom mieste 4,74:1, čiže spĺňa normu AA, a je zreteľne zelenšia.

   Platí zámerne len pre túto sekciu. Rovnaký nadpis nad kontaktom a nad
   otázkami sedí na bielom podklade, tam pôvodná farba problém nemá.
   ========================================================================== */
body[data-page="home"] .home-command .process .section-heading .eyebrow {
  color: #1c4b5f;
}

/* ==========================================================================
   Nadpis sekcie FAQ

   Dve veci naraz:
   1. Blok bol dvojstĺpcová mriežka, kde eyebrow sedel vľavo a nadpis
      v druhom stĺpci, takže pôsobil odsunutý doprava. Teraz je jednostĺpcový
      a vycentrovaný.
   2. Mäkčeň nad „Č“ sa orezával. Nadpis má overflow: hidden zámerne, maskuje
      animáciu, pri ktorej slová vyletujú zdola (yPercent: 108 v app.js).
      Zrušiť ho teda nejde. Namiesto toho pridáme priestor navrchu cez padding
      a rovnakou zápornou vonkajšou medzerou vrátime nadpis na pôvodné miesto.
      Maska zospodu funguje ďalej, lebo dolný okraj sa nemení.
   ========================================================================== */
body[data-page="home"] .home-command .faq .section-heading {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
body[data-page="home"] .home-command .faq .section-heading .eyebrow {
  justify-content: center;
  margin-top: 0;
}
body[data-page="home"] .home-command .faq .section-heading h2 {
  padding-top: .2em;
  margin-top: -.2em;
}

@media (max-width: 760px) {
  body[data-page="home"] .home-command .faq .section-heading {
    gap: 10px;
  }
}

/* ==========================================================================
   Sekcia služieb: eyebrow k hornému okraju fotky

   figcaption bol prilepený k spodnému okraju (bottom: ...), takže „Služby“
   aj nadpis sedeli spolu dole. Namiesto presúvania prvkov v markupe
   roztiahneme figcaption na celú výšku fotky a obsah rozhodíme:
   eyebrow hore, nadpis dole.
   ========================================================================== */
body[data-page="home"] .home-command .services-feature figcaption {
  top: clamp(24px, 3.6vw, 44px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
body[data-page="home"] .home-command .services-feature .eyebrow {
  margin: 0;
}

@media (max-width: 760px) {
  body[data-page="home"] .home-command .services-feature figcaption {
    top: 22px;
    bottom: 26px;
  }
}

/* ==========================================================================
   Hero pri rolovaní

   JavaScript nastavoval premenné --hero-frame-scale, --hero-frame-shift
   a --hero-frame-radius, ale v CSS ich nič nepoužívalo, takže tretina
   animácie nerobila nič. Tu ich napájame a pridávame vrstvenie: obrázok,
   rám a text sa hýbu rôznou rýchlosťou, čo dáva pocit hĺbky.
   ========================================================================== */
body[data-page="home"] .hero-fullbleed {
  --hero-frame-scale: 1;
  --hero-frame-shift: 0px;
  --hero-frame-radius: 0px;
  --hero-copy-shift: 0px;
  --hero-copy-opacity: 1;
  --hero-image-blur: 0px;
  --hero-logo-shift: 0px;
  --hero-logo-scale: 1;
}

body[data-page="home"] .hero-fullbleed .hero-media {
  border-radius: var(--hero-frame-radius);
  overflow: clip;
  transform: translate3d(0, var(--hero-frame-shift), 0) scale(var(--hero-frame-scale));
  transform-origin: center top;
  will-change: transform, border-radius;
}

body[data-page="home"] .hero-fullbleed .hero-backdrop {
  filter: blur(var(--hero-image-blur));
}

/* Text sa posúva pomalšie než pozadie a skôr zhasína.

   !important je tu nutný, inak sa blednutie nikdy neprejaví: .reveal.in-view
   v motion-polish.css nastavuje opacity:1 !important pre dobehnutie vstupnej
   animácie pri načítaní stránky, a to prebije čokoľvek bez ohľadu na
   špecifickosť. Doteraz sa preto text pri rolovaní iba posúval, nikdy
   nezhasínal, hoci premenná --hero-copy-opacity sa počítala správne. */
body[data-page="home"] .hero-fullbleed .hero-content {
  transform: translate3d(0, var(--hero-copy-shift), 0) !important;
  opacity: var(--hero-copy-opacity) !important;
  will-change: transform, opacity;
}

/* Logo v hero: vlastná, rýchlejšia vrstva ako zvyšok textu okolo neho,
   práve ten rozdiel v rýchlosti pri rolovaní vytvára pocit hĺbky (paralaxa). */
body[data-page="home"] .hero-fullbleed .hero-content h1 {
  line-height: 0;
}

body[data-page="home"] .hero-fullbleed .hero-logo {
  display: block;
  width: clamp(220px, 26vw, 380px);
  height: auto;
  filter: drop-shadow(0 4px 30px rgba(2, 10, 6, .3));
  transform: translate3d(0, var(--hero-logo-shift), 0) scale(var(--hero-logo-scale));
  transform-origin: left center;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hero-fullbleed .hero-media,
  body[data-page="home"] .hero-fullbleed .hero-content,
  body[data-page="home"] .hero-fullbleed .hero-logo {
    transform: none;
    will-change: auto;
  }
  body[data-page="home"] .hero-fullbleed .hero-backdrop { filter: none; }
}

/* ==========================================================================
   "Robíme aj": kompaktný zoznam zvyšných služieb pod hlavnými dlaždicami.
   Bez neho boli na titulke vidno len 3 z 14 služieb a návštevník hľadajúci
   napr. upratovanie Airbnb bytu nenašiel na titulke nič.
   ========================================================================== */
body[data-page="home"] .home-command .services-more {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.services-more-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: max-content;
  margin: 0 auto;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 650;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}
.services-more-toggle::-webkit-details-marker { display: none; }
.services-more-toggle::marker { content: ''; }

@media (hover: hover) and (pointer: fine) {
  .services-more-toggle:hover { color: var(--ink); }
}

.services-more-chevron {
  transition: transform .42s cubic-bezier(.16, 1, .3, 1) !important;
}
.services-more[open] .services-more-chevron { transform: rotate(90deg); }
.services-more.is-closing .services-more-chevron { transform: rotate(0deg); }

.services-more-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .52s cubic-bezier(.16, 1, .3, 1) !important;
}
.services-more[open] .services-more-body { grid-template-rows: 1fr; }
/* Rovnaká špecificita ako pravidlo vyššie, ale zapísaná neskôr, takže počas
   zatvárania (open="" ešte drží, len pribudla trieda) vyhráva táto a výška
   sa animuje späť na 0fr namiesto toho, aby ju prehliadač zaseknutú nechal
   na polceste, keď napokon open="" naozaj zruší. */
.services-more.is-closing .services-more-body { grid-template-rows: 0fr; }

.services-more-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}
.services-more[open] .services-more-list { padding-top: 18px; }
.services-more.is-closing .services-more-list { padding-top: 0; }

.services-more-list a {
  padding: 7px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 650;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .services-more-list a:hover {
    border-color: var(--ink);
    background: var(--surface-soft, #eef3eb);
    transform: translateY(-1px);
  }
}

/* ==========================================================================
   Súhlas so spracovaním údajov pred odoslaním kontaktného formulára.
   Rovnaký vizuálny jazyk ako dialóg cookies (.cc-modal), len samostatná
   dvojica tlačidiel namiesto kategórií — vlastné triedy, nech to so
   súhlasom s cookies nič nezdieľa a dá sa to meniť nezávisle.
   ========================================================================== */
[data-contact-consent] {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
}
[data-contact-consent][hidden] { display: none; }

.contact-consent-overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 32, 25, .48);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1);
}
[data-contact-consent].is-in .contact-consent-overlay { opacity: 1; }

.contact-consent-dialog {
  position: relative;
  width: min(460px, 100%);
  padding: 34px 32px 32px;
  background: var(--paper);
  border-radius: var(--radius-lg, 26px);
  box-shadow: 0 30px 70px rgba(16, 32, 25, .3);
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(.98);
  transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1);
}
[data-contact-consent].is-in .contact-consent-dialog { opacity: 1; transform: none; }

.contact-consent-dialog h2 {
  font: clamp(1.7rem, 3.2vw, 2.1rem)/1.05 var(--serif);
  letter-spacing: -.04em;
  margin: 12px 0 14px;
}
.contact-consent-text {
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.6;
  margin: 0 0 26px;
}
.contact-consent-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-consent-text a:hover { color: #22779c; }

.contact-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-consent-cancel,
.contact-consent-confirm {
  border-radius: 999px;
  padding: 13px 18px;
  font-size: .87rem;
  font-weight: 650;
  text-align: center;
  transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-consent-cancel {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.contact-consent-confirm {
  border: 0;
  background: var(--lime);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .contact-consent-cancel:hover { background: var(--surface-soft, #eef3eb); border-color: var(--ink); }
  .contact-consent-confirm:hover { background: #aee6ff; transform: translate3d(0, -2px, 0); box-shadow: 0 8px 18px rgba(23, 32, 28, .16); }
}

.contact-consent-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
  transition: background-color .25s ease, color .25s ease;
}
.contact-consent-close:hover { background: rgba(23, 32, 28, .07); color: var(--ink); }

body.contact-consent-lock { overflow: hidden; }

@media (max-width: 620px) {
  [data-contact-consent] { padding: 12px; }
  .contact-consent-dialog { padding: 28px 22px 24px; border-radius: var(--radius, 18px); }
  .contact-consent-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-consent-overlay, .contact-consent-dialog, .contact-consent-confirm {
    transition-duration: .01ms !important;
  }
  .contact-consent-dialog { transform: none !important; }
  .contact-consent-confirm:hover { transform: none; }
}