/* ==========================================================================
   CLEANTIME: stránka sesterskej značky LoveHome4U
   ========================================================================== */

body[data-page="lovehome4u"] { background: var(--paper); color: var(--ink); }

/* Výška hlavičky na jednom mieste. Hlavička je mimo toku, takže presne
   o toľko musí byť odsadená stránka pod ňou. Keby to boli dve nezávislé
   čísla, pri zmene jedného by vznikla medzera alebo prekryv. */
body[data-page="lovehome4u"] { --lh-header-h: 92px; }

body[data-page="lovehome4u"] .lh-page {
  overflow: clip;
  padding-top: var(--lh-header-h);
}

/* --- Hlavička ------------------------------------------------------------
   Prevzaté z legal.css, kde sú tie isté pravidlá scopované na
   body[data-page="legal"], takže sa sem samy nedostanú. Bez nich nemá ikonka
   v tlačidle „Rezervovať" rozmery: sú to PNG 512×512 a hlavička sa roztiahne
   na niekoľkonásobok. Rovnaký komentár je aj v legal.css — je to pasca, na
   ktorú sa na tomto webe narazí pri každej novej stránke.
   ------------------------------------------------------------------------- */
body[data-page="lovehome4u"] .site-header {
  /* Pevná, nie sticky. Plynulé rolovanie dáva #smooth-wrapper do
     position: fixed, takže obsah začína na vrchu okna a sticky hlavička
     v toku by pod sebou nedržala miesto — prekryla by úvodný panel. */
  position: fixed; z-index: 30; inset: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  width: 100%; min-height: var(--lh-header-h); padding: 18px clamp(24px, 5.5vw, 106px);
  border: 0; color: var(--ink);
  background: rgba(248, 248, 244, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: background-color .26s ease, color .22s ease;
}
body[data-page="lovehome4u"] .site-header .brand {
  display: inline-block; width: max-content; transform-origin: center;
  transition: transform .48s cubic-bezier(.16, 1, .3, 1) !important;
}

body[data-page="lovehome4u"] .site-header nav {
  position: relative; isolation: isolate; display: flex; gap: 2px; padding: 4px;
  border: 1px solid rgba(23, 32, 28, .12); border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
body[data-page="lovehome4u"] .site-header nav a {
  position: relative; z-index: 1; min-height: 34px; padding: 7px 13px;
  border-radius: 999px; font-size: .82rem; font-weight: 650;
  transition: color .2s ease;
}
body[data-page="lovehome4u"] .site-header nav a::after { content: none; }

/* app.js vkladá tento prvok do navigácie na každej stránke. Bez vlastného
   pravidla by ostal bežnou položkou flexu a pri prvom prejdení myšou by
   navigáciu rozšíril o šírku odkazu — odkazy by ušli spod kurzora.
   position: relative na nav je nosné: app.js počíta posun voči nemu. */
body[data-page="lovehome4u"] .site-header .nav-hover-indicator {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: 999px; background: rgba(23, 32, 28, .08); opacity: 0;
  transform: translateZ(0); pointer-events: none;
  transition: transform .46s cubic-bezier(.16, 1, .3, 1),
              width .46s cubic-bezier(.16, 1, .3, 1),
              opacity .16s ease !important;
}
body[data-page="lovehome4u"] .site-header .nav-hover-indicator.is-visible { opacity: 1; }

body[data-page="lovehome4u"] .site-header > .button {
  position: relative; isolation: isolate; justify-self: end; overflow: hidden;
  min-height: 42px; padding-inline: 18px;
  border: 1px solid var(--lime); background: var(--lime);
  transition: transform .48s cubic-bezier(.16, 1, .3, 1),
              box-shadow .48s cubic-bezier(.16, 1, .3, 1),
              background-color .28s ease !important;
}
body[data-page="lovehome4u"] .site-header .appointment-button { gap: 9px; }
body[data-page="lovehome4u"] .site-header .appointment-button > span { position: relative; z-index: 1; }
/* position: relative je tu nutné: obrázok vnútri je absolútny a bez neho by
   sa vzťahoval k hlavičke, nie k tomuto 16px štvorcu. */
body[data-page="lovehome4u"] .site-header .appointment-icon {
  position: relative; display: grid; flex: 0 0 16px;
  width: 16px; height: 16px; place-items: center;
}
body[data-page="lovehome4u"] .site-header .appointment-icon img {
  position: absolute; grid-area: 1 / 1; width: 100%; height: 100%;
  object-fit: contain; filter: invert(1); pointer-events: none;
  transition: opacity .18s ease, transform .52s cubic-bezier(.16, 1, .3, 1) !important;
}
body[data-page="lovehome4u"] .site-header .appointment-icon-hover { opacity: 0; transform: scale(.58) rotate(-28deg); }
body[data-page="lovehome4u"] .site-header .appointment-button:is(:hover, :focus-visible) .appointment-icon-default {
  opacity: 0; transform: scale(.58) rotate(28deg);
}
body[data-page="lovehome4u"] .site-header .appointment-button:is(:hover, :focus-visible) .appointment-icon-hover {
  opacity: 1; transform: scale(1) rotate(0deg);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="lovehome4u"] .site-header .brand:hover { transform: scale(1.2); }
  body[data-page="lovehome4u"] .site-header > .button:hover {
    background: #aee6ff; box-shadow: 0 14px 30px rgba(4, 15, 9, .28);
    transform: translate3d(0, -3px, 0) scale(1.025);
  }
}

@media (max-width: 760px) {
  /* mobile.css zmenšuje logo na 46px, hlavička je teda nižšia. */
  body[data-page="lovehome4u"] { --lh-header-h: 84px; }
  body[data-page="lovehome4u"] .site-header {
    grid-template-columns: 1fr auto; padding: 12px 5%;
  }
  body[data-page="lovehome4u"] .site-header nav,
  body[data-page="lovehome4u"] .site-header > .button { display: none; }
  body[data-page="lovehome4u"] .site-header nav.open {
    position: absolute; top: calc(100% + 8px); right: 5%; left: 5%;
    display: grid; padding: 8px; border-color: var(--line); border-radius: 16px;
    background: hsla(60, 22%, 96%, .97); box-shadow: var(--shadow); color: var(--ink);
  }
  body[data-page="lovehome4u"] .site-header nav.open a { padding: 11px 13px; }
  body[data-page="lovehome4u"] .menu-toggle { color: currentColor; }
}

/* --------------------------------------------------------------------------
   Úvodný panel
   -------------------------------------------------------------------------- */
body[data-page="lovehome4u"] .lh-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(40px, 6vw, 96px);
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(24px, 4vh, 56px) clamp(24px, 6vw, 80px) clamp(64px, 9vh, 120px);
}
body[data-page="lovehome4u"] .lh-hero h1 {
  max-width: 13ch;
  margin: 0;
  font: clamp(2.6rem, 5.4vw, 5rem) / .98 var(--serif);
  letter-spacing: -.055em;
}
body[data-page="lovehome4u"] .lh-hero-lead {
  max-width: 46ch;
  margin: clamp(22px, 3vw, 32px) 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.15vw, 1.14rem);
}
body[data-page="lovehome4u"] .lh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: clamp(26px, 3.5vw, 38px);
}
body[data-page="lovehome4u"] .lh-hero-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .84rem;
}
body[data-page="lovehome4u"] .lh-text-link {
  position: relative;
  font-size: .92rem;
  font-weight: 650;
}
body[data-page="lovehome4u"] .lh-text-link::after {
  position: absolute;
  right: 0;
  bottom: -3px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s;
}
body[data-page="lovehome4u"] .lh-text-link:is(:hover, :focus-visible)::after { transform: scaleX(1); }
body[data-page="lovehome4u"] .lh-text-link span { margin-left: 4px; font-size: 1.15em; }

/* Logo je čierna kresba na bielom podklade, takže karta pod ním je biela.
   Akákoľvek farba by pri ňom vytvorila viditeľný svetlý štvorec. */
body[data-page="lovehome4u"] .lh-logo-card {
  display: grid;
  max-width: 420px;
  margin-inline: auto;
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 26px);
  background: var(--surface, #fff);
  box-shadow: var(--shadow);
  place-items: center;
}
body[data-page="lovehome4u"] .lh-logo-card img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 320px;
}

/* --------------------------------------------------------------------------
   Služby
   -------------------------------------------------------------------------- */
body[data-page="lovehome4u"] .lh-services {
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(56px, 9vh, 110px) clamp(24px, 6vw, 80px);
}
body[data-page="lovehome4u"] .lh-section-heading { margin-bottom: clamp(36px, 5vw, 60px); }
body[data-page="lovehome4u"] .lh-section-heading h2 {
  max-width: 18ch;
  margin: 0;
  font: clamp(2.1rem, 4.2vw, 4rem) / 1 var(--serif);
  letter-spacing: -.05em;
}

/* Rovnaká mriežka s vlasovými linkami ako sekcia Služby na úvodnej stránke,
   aby obe stránky pôsobili ako jeden web. Linky kreslí kontajner zhora
   a zľava, karty sprava a zdola, takže sa nezdvojujú. */
body[data-page="lovehome4u"] .lh-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
body[data-page="lovehome4u"] .lh-service-card {
  display: flex;
  min-height: 240px;
  flex-direction: column;
  padding: clamp(20px, 2.2vw, 30px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface, #fff);
}
body[data-page="lovehome4u"] .lh-service-number {
  margin: 0;
  color: #516d79;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
}
body[data-page="lovehome4u"] .lh-service-card h3 {
  margin: clamp(28px, 4vw, 44px) 0 12px;
  font: clamp(1.45rem, 1.9vw, 1.85rem) / 1.02 var(--serif);
  letter-spacing: -.04em;
}
body[data-page="lovehome4u"] .lh-service-card p {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}

/* Posledná karta dorovná riadok, aby vlasový rám mriežky nezostal otvorený,
   keď počet služieb nie je deliteľný počtom stĺpcov. Podmienky cez
   :nth-child() to udržia správne aj vtedy, keď sa počet služieb zmení. */
@media (min-width: 761px) and (max-width: 1000px) {
  body[data-page="lovehome4u"] .lh-service-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1001px) {
  body[data-page="lovehome4u"] .lh-service-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  body[data-page="lovehome4u"] .lh-service-card:last-child:nth-child(3n + 2) { grid-column: span 2; }
}

/* --------------------------------------------------------------------------
   Kontakt
   -------------------------------------------------------------------------- */
/* max-width samo o sebe nedrží okraj: pod 1280px sa box roztiahne na celú
   šírku a margin: auto vyjde na nulu, takže by tmavý panel lepil na obe
   hrany okna, kým sekcie nad ním sú odsadené. 1120 = 1280 − 2 × 80. */
body[data-page="lovehome4u"] .lh-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  align-items: center;
  gap: clamp(36px, 5vw, 80px);
  width: min(100% - 2 * clamp(24px, 6vw, 80px), 1120px);
  margin: 0 auto clamp(64px, 9vh, 120px);
  padding: clamp(48px, 6vw, 84px) clamp(28px, 5vw, 72px);
  border-radius: var(--radius-lg, 26px);
  background: var(--forest);
  color: #fff;
}
body[data-page="lovehome4u"] .lh-contact .eyebrow { color: var(--lime); }
body[data-page="lovehome4u"] .lh-contact h2 {
  max-width: 16ch;
  margin: 0 0 clamp(18px, 2.5vw, 26px);
  font: clamp(2rem, 3.6vw, 3.4rem) / 1.02 var(--serif);
  letter-spacing: -.05em;
}
/* :not(.eyebrow) je nutné — inak by toto pravidlo prebilo spodný okraj,
   ktorý .eyebrow dostáva zo style.css, a nadpis by sa zlepil s textom. */
body[data-page="lovehome4u"] .lh-contact-copy p:not(.eyebrow) {
  max-width: 44ch;
  margin: 0;
  color: #c1ccc4;
}
body[data-page="lovehome4u"] .lh-contact-lines { display: grid; gap: 12px; }
body[data-page="lovehome4u"] .lh-contact-line {
  display: grid;
  padding: 16px 20px;
  border: 1px solid hsla(0, 0%, 100%, .18);
  border-radius: 14px;
  background: hsla(0, 0%, 100%, .05);
  gap: 4px;
  transition: background-color .25s ease, border-color .25s ease, transform .3s var(--ease-out, ease);
}
/* Klávesové zameranie musí fungovať vždy, aj na dotykových zariadeniach,
   preto je oddelené od hover pravidla nižšie. */
body[data-page="lovehome4u"] .lh-contact-line:focus-visible {
  border-color: var(--lime);
  background: hsla(0, 0%, 100%, .1);
}
body[data-page="lovehome4u"] .lh-contact-line span {
  color: var(--lime);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
body[data-page="lovehome4u"] .lh-contact-line strong {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.02em;
  /* Dlhý e-mail sa na úzkom displeji zalomí, namiesto aby roztiahol kartu. */
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   Päta

   Tie isté pravidlá majú ostatné stránky vo svojich vlastných štýloch,
   scopované na svoju hodnotu data-page. Bez nich sa päta prepadne na
   zastarané pravidlo footer{} zo style.css: veľký nadpis by vyšiel ako
   drobný sivý text a obe tlačidlá by ukázali svoju bežnú aj hoverovú
   ikonu naraz, obe v plnej veľkosti 512px.
   -------------------------------------------------------------------------- */
body[data-page="lovehome4u"] .site-footer {
  display: block; width: 100%; margin: 0;
  padding: clamp(56px, 7vw, 104px) 0 24px;
  border: 0; border-top: 1px solid rgba(23, 32, 28, .13);
  background: var(--paper); color: var(--ink); font-size: 1rem;
}
body[data-page="lovehome4u"] .site-footer .footer-main {
  display: grid;
  gap: 22px clamp(36px, 6vw, 94px);
  width: min(1160px, calc(100% - 96px));
  margin: 0 auto;
  padding-bottom: clamp(32px, 4vw, 54px);
}
body[data-page="lovehome4u"] .site-footer h2 {
  margin: 0; color: var(--ink);
  font: clamp(4.3rem, 9.8vw, 9.3rem) / .8 var(--serif);
  letter-spacing: -.08em;
}
body[data-page="lovehome4u"] .site-footer .footer-actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px;
}
body[data-page="lovehome4u"] .site-footer .footer-booking,
body[data-page="lovehome4u"] .site-footer .footer-about {
  display: inline-flex; align-items: center; justify-content: center; gap: 15px;
  min-height: 50px; padding: 12px 19px;
  border: 1px solid rgba(75, 106, 119, .45); border-radius: 999px;
  color: #425e6b; font-size: .83rem; font-weight: 800;
  transition: background-color .36s cubic-bezier(.16, 1, .3, 1),
              color .36s cubic-bezier(.16, 1, .3, 1),
              transform .36s cubic-bezier(.16, 1, .3, 1) !important;
}
body[data-page="lovehome4u"] .site-footer .footer-about {
  border-color: rgba(23, 32, 28, .22); color: var(--ink);
}
body[data-page="lovehome4u"] .site-footer .footer-booking-icon,
body[data-page="lovehome4u"] .site-footer .footer-about-icon {
  position: relative; display: grid; width: 20px; height: 20px; flex: 0 0 20px;
  place-items: center; overflow: hidden;
}
body[data-page="lovehome4u"] .site-footer .footer-booking-icon img,
body[data-page="lovehome4u"] .site-footer .footer-about-icon img {
  grid-area: 1 / 1; width: 18px; height: 18px;
  object-fit: contain; pointer-events: none;
  transition: opacity .22s ease, transform .42s cubic-bezier(.16, 1, .3, 1) !important;
}
body[data-page="lovehome4u"] .site-footer .footer-booking-icon-hover { opacity: 0; transform: scale(.68) rotate(-16deg); }
body[data-page="lovehome4u"] .site-footer .footer-about-icon-hover   { opacity: 0; transform: scale(.7) rotate(-10deg); }

/* --------------------------------------------------------------------------
   Efekty pri prejdení myšou

   Zapnuté len tam, kde naozaj existuje kurzor. Na dotykovom displeji hover
   po klepnutí neskončí a karta by ostala visieť v zvýraznenom stave.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  body[data-page="lovehome4u"] .lh-service-card:hover { background: #e9f1f4; transform: translateY(-5px); }
  /* Na modrom podklade by bol bežný sivý text len 4,47:1. */
  body[data-page="lovehome4u"] .lh-service-card:hover p { color: #5b6862; }
  body[data-page="lovehome4u"] .lh-contact-line:hover {
    border-color: var(--lime);
    background: hsla(0, 0%, 100%, .1);
    transform: translateX(4px);
  }
  body[data-page="lovehome4u"] .site-footer .footer-booking:hover {
    background: var(--lime); color: var(--ink); transform: scale(1.035);
  }
  body[data-page="lovehome4u"] .site-footer .footer-booking:hover .footer-booking-icon-default { opacity: 0; transform: scale(.68) rotate(16deg); }
  body[data-page="lovehome4u"] .site-footer .footer-booking:hover .footer-booking-icon-hover { opacity: 1; transform: scale(1) rotate(0); }
  body[data-page="lovehome4u"] .site-footer .footer-about:hover {
    border-color: var(--ink); background: rgba(23, 32, 28, .08); transform: scale(1.035);
  }
  body[data-page="lovehome4u"] .site-footer .footer-about:hover .footer-about-icon { transform: scale(1.08); }
  body[data-page="lovehome4u"] .site-footer .footer-about:hover .footer-about-icon-default { opacity: 0; transform: scale(.72) rotate(10deg); }
  body[data-page="lovehome4u"] .site-footer .footer-about:hover .footer-about-icon-hover { opacity: 1; transform: scale(1) rotate(0); }
}

/* --------------------------------------------------------------------------
   Užšie displeje
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  body[data-page="lovehome4u"] .lh-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  body[data-page="lovehome4u"] .lh-hero,
  body[data-page="lovehome4u"] .lh-contact { grid-template-columns: 1fr; }
  /* Logo ide pod text: na mobile má prednosť veta, ktorá povie, čo firma robí. */
  body[data-page="lovehome4u"] .lh-hero-media { order: 2; }
  body[data-page="lovehome4u"] .lh-logo-card { max-width: 300px; }
  body[data-page="lovehome4u"] .lh-service-grid { grid-template-columns: 1fr; }
  body[data-page="lovehome4u"] .lh-service-card { min-height: 0; }
  body[data-page="lovehome4u"] .lh-service-card h3 { margin-top: 22px; }
  body[data-page="lovehome4u"] .lh-hero-actions .button { width: 100%; }
}

/* Na najužších displejoch má e-mail prednosť pred odsadením karty: inak by sa
   „lovehome4u@yahoo.com" zlomil uprostred slova — zavináč ani bodka nie sú
   miesta, kde by sa text podľa pravidiel smel deliť. */
@media (max-width: 420px) {
  body[data-page="lovehome4u"] .lh-contact { padding-inline: 20px; }
  body[data-page="lovehome4u"] .lh-contact-line { padding-inline: 14px; }
  body[data-page="lovehome4u"] .lh-contact-line strong { font-size: 1.15rem; }
}

/* Musí zostať za blokom s hover efektmi, aby ho prebilo. */
@media (prefers-reduced-motion: reduce) {
  body[data-page="lovehome4u"] .lh-service-card,
  body[data-page="lovehome4u"] .lh-contact-line { transition: none; }
  body[data-page="lovehome4u"] .lh-service-card:hover { transform: none; }
  body[data-page="lovehome4u"] .lh-contact-line:hover { transform: none; }
  body[data-page="lovehome4u"] .site-footer .footer-booking:hover,
  body[data-page="lovehome4u"] .site-footer .footer-about:hover { transform: none; }
}