/* Titulná stránka. Vlastnosti sú zámerne písané v jednom riadku ako v projekte Sysľovisko. */
.hero {
  position: relative; display: flex; align-items: flex-end; min-height: 720px; min-height: max(720px, 100svh); padding: calc(var(--header-height) + 80px) 0 86px; overflow: hidden; color: #fff; background: #4f493e; isolation: isolate;
}
.hero-slides, .hero-slide, .hero-shade {
  position: absolute; inset: 0;
}
.hero-slides {
  z-index: -3;
}
.hero-slide {
  z-index: 0; overflow: hidden; opacity: 0; transition: opacity 2000ms ease;
}
.hero-slide.is-active {
  z-index: 2; opacity: 1;
}
.hero-slide.is-leaving {
  z-index: 1; opacity: 1;
}
.hero-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 48%; transform: scale(1);
}
.hero-slide.is-active img, .hero-slide.is-leaving img {
  animation: hero-zoom 11s linear both;
}
.hero.is-paused .hero-slide img {
  animation-play-state: paused;
}
.hero-shade {
  z-index: -1; background: linear-gradient(180deg, rgba(24, 20, 16, 0.04) 45%, rgba(24, 20, 16, 0.3) 75%, rgba(24, 20, 16, 0.56) 100%); pointer-events: none;
}
.hero-content {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 36px;
}
.hero-copy {
  min-width: 0; max-width: 1200px;
}
.hero-eyebrow {
  margin-bottom: 18px; font-size: 16px; font-weight: 750; line-height: 1.5; letter-spacing: 0.18em; text-transform: uppercase;
}
.hero-title {
  font-size: clamp(44px, 3.65vw, 72px); font-weight: 750; line-height: 1.14; letter-spacing: -0.045em; text-wrap: balance; text-shadow: 0 2px 20px rgba(22, 18, 14, 0.12);
}
.hero-title > span {
  display: block;
}
.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px;
}
.hero-actions .button {
  min-height: 55px; padding: 13px 28px; font-size: 17px; border-radius: 17px;
}
.hero-meta {
  display: flex; flex-shrink: 0; align-items: center; gap: 24px; padding-bottom: 6px;
}
.hero-location {
  display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.5; white-space: nowrap;
}
.hero-location .icon {
  width: 27px; height: 27px; stroke-width: 1.8;
}
.hero-pause {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 9px; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 50%;
}
.hero-pause .icon {
  width: 16px; height: 16px;
}
.visit-info {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 34px 0;
}
.visit-info-item {
  display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 40px; padding: 0 24px; font-size: 18px; font-weight: 550; line-height: 1.4;
}
.visit-info-item + .visit-info-item {
  border-left: 1px solid var(--color-line);
}
.visit-info-item .icon {
  width: 42px; height: 42px; color: var(--color-accent-hover); stroke-width: 1.1;
}
.home-content {
  padding-bottom: 18px;
}
.home-section {
  margin-top: 40px;
}
.home-title {
  font-size: clamp(30px, 2.65vw, 48px); font-weight: 750; line-height: 1.16; letter-spacing: -0.045em; text-wrap: balance;
}
.home-copy p:not(.home-eyebrow) {
  margin-top: 20px; font-size: 18px; line-height: 1.65;
}
.home-copy .text-link {
  margin-top: 24px;
}
.home-eyebrow {
  display: flex; align-items: center; gap: 28px; margin-bottom: 24px; font-size: 14px; font-weight: 750; line-height: 1.5; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-hover);
}
.home-eyebrow::after {
  display: block; width: 110px; height: 1px; background: var(--color-line); content: "";
}
.welcome {
  display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: center; gap: 70px; margin-top: 22px;
}
.welcome-photo {
  height: 380px;
}
.comfort-section {
  display: grid; grid-template-columns: minmax(0, 0.86fr) repeat(3, minmax(0, 1fr)); align-items: center; gap: 28px; margin-top: 24px; padding: 34px 40px; background: linear-gradient(110deg, #fbeee3, #faf1e9); border-radius: 26px;
}
.comfort-section > h2 {
  font-size: 34px;
}
.comfort-item {
  display: flex; align-items: flex-start; gap: 20px; min-height: 100px; padding-left: 28px; border-left: 1px solid var(--color-line);
}
.comfort-item > .icon {
  width: 52px; height: 52px; color: var(--color-accent-hover); stroke-width: 1.1;
}
.comfort-item h3 {
  margin-bottom: 8px; font-size: 20px; font-weight: 750; line-height: 1.4; letter-spacing: -0.025em;
}
.comfort-item p {
  max-width: 300px; font-size: 15px; line-height: 1.6;
}
.experiences > h2 {
  margin-bottom: 24px;
}
.experience-grid {
  display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: center; gap: 64px;
}
.experience-photo {
  height: 340px;
}
.experience-copy {
  padding-left: 44px; border-left: 1px solid var(--color-line);
}
.experience-list {
  display: grid; gap: 24px; margin: 0 0 26px; padding: 0; list-style: none;
}
.experience-list li {
  display: flex; align-items: flex-start; gap: 22px;
}
.experience-list .icon {
  width: 40px; height: 40px; color: var(--color-accent-hover); stroke-width: 1.1;
}
.experience-list strong {
  display: block; margin-bottom: 2px; font-size: 21px; font-weight: 750; line-height: 1.4; letter-spacing: -0.025em;
}
.experience-list span {
  display: block; font-size: 16px; line-height: 1.5;
}
.video-section {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: center; gap: 36px; margin-top: 26px; padding: 18px; background: #faf4ed; border-radius: 26px;
}
.video-cover {
  height: 360px; border-radius: 20px;
}
.video-cover img {
  object-position: center 55%;
}
.video-play {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 64px; height: 64px; color: #fff; background: rgba(41, 28, 18, 0.22); border: 2px solid #fff; border-radius: 50%; transform: translate(-50%, -50%);
}
.video-play .icon {
  width: 28px; height: 28px; margin-left: 4px; stroke-width: 1.6;
}
.video-copy {
  padding: 12px 20px 12px 34px; border-left: 1px solid var(--color-line);
}
.video-copy .home-title {
  font-size: 36px;
}
.video-copy p {
  margin-top: 10px; font-size: 17px;
}
.contact-section {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 64px; margin-top: 64px; padding: 8px 0 18px;
}
.contact-copy {
  min-width: 0; padding: 16px 0;
}
.contact-callout {
  display: flex; flex-direction: column; align-items: flex-start; gap: 28px;
}
.contact-callout .home-title {
  max-width: 560px; font-size: 46px;
}
.contact-callout .button {
  min-height: 50px; padding: 12px 25px; font-size: 16px;
}
.contact-details {
  display: grid; gap: 16px; margin: 34px 0 0; padding: 30px 0 0; font-style: normal; border-top: 1px solid var(--color-line);
}
.contact-details a {
  display: flex; align-items: center; gap: 18px; width: fit-content; max-width: 100%; font-size: 18px; line-height: 1.6; overflow-wrap: anywhere;
}
.contact-details a:hover {
  color: var(--color-accent-hover);
}
.contact-details .icon {
  width: 23px; height: 23px; color: var(--color-accent-hover);
}
.contact-map {
  min-width: 0;
}
.google-map {
  height: 520px; overflow: hidden; background: #eee7df; border: 1px solid #e8ded4; border-radius: 26px;
}
.google-map iframe {
  display: block; width: 100%; height: 100%; border: 0;
}
.contact-map .text-link {
  display: flex; justify-content: flex-end; margin-top: 12px; font-size: 15px;
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.075); }
}
/* Spoločné priestory na titulke: text + mozaika 4 fotiek (veľká jedáleň, spoločenská, posedenie, hrnčeky). */
.home-spaces {
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 0.55fr) minmax(0, 0.55fr); grid-template-rows: 210px 210px; grid-template-areas: "copy big p2 p2" "copy big p3 p4"; gap: 16px; margin-top: 56px;
}
.home-spaces-copy {
  grid-area: copy; align-self: center; padding-right: 34px;
}
.home-spaces-photo {
  height: 100%; border-radius: 20px;
}
.home-spaces-photo-1 { grid-area: big; }
.home-spaces-photo-2 { grid-area: p2; }
.home-spaces-photo-3 { grid-area: p3; }
.home-spaces-photo-4 { grid-area: p4; }
@media (max-width: 1200px) {
  .home-spaces { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 180px 180px; grid-template-areas: "copy copy copy copy" "big big p2 p2" "big big p3 p4"; }
  .home-spaces-copy { max-width: 720px; padding: 0 0 12px; }
}
@media (max-width: 760px) {
  .home-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 230px 150px 150px; grid-template-areas: "copy copy" "big big" "p2 p2" "p3 p4"; gap: 10px; margin-top: 40px; }
  .home-spaces-photo { border-radius: 16px; }
}