/* ============================================================
   SAP SAN — ВНУТРІШНІ СТОРІНКИ
   ------------------------------------------------------------
   Будиночки · будиночок · басейн · галерея · правила ·
   контакти · бронювання.

   Внутрішні сторінки не повторюють композицію головної, але
   тримають той самий ритм: повношириний кадр зверху, вузька
   текстова колонка, тонкі лінії замість карток у рамках.
   ============================================================ */

/* ---------- ШАПКА СТОРІНКИ -------------------------------- */
.phero {
  position: relative;
  min-height: clamp(400px, 62vh, 660px);
  display: flex; align-items: flex-end;
  color: var(--paper);
  overflow: hidden; isolation: isolate;
}
.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.phero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(8,14,17,.82) 0%, rgba(8,14,17,.4) 34%, rgba(8,14,17,.08) 62%, rgba(8,14,17,.34) 100%);
}
.phero__body {
  width: 100%;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(2rem, 5vh, 3.4rem);
  display: grid; gap: 1rem;
}
.phero .crumbs { color: rgba(242,240,233,.72); }
.phero .crumbs span[aria-current] { color: var(--paper); }
.phero__title { max-width: 16ch; }
.phero__lead { color: rgba(242,240,233,.86); max-width: 46ch; }

/* ---------- СПИСОК БУДИНОЧКІВ -----------------------------
   Не картки в сітці, а чергування великих кадрів і текстових
   колонок: кожен будиночок отримує розворот, а не плитку.  */
.hlist { display: grid; gap: clamp(4rem, 12vh, 9rem); }

.hrow {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut); row-gap: clamp(1.4rem, 4vw, 2.4rem);
  align-items: center;
}
.hrow__media { grid-column: 1 / 8; }
.hrow__body  { grid-column: 9 / 13; }
/* Парні рядки дзеркальні — око не встигає звикнути до сітки */
.hrow:nth-child(even) .hrow__media { grid-column: 6 / 13; grid-row: 1; }
.hrow:nth-child(even) .hrow__body  { grid-column: 1 / 5;  grid-row: 1; }

@media (max-width: 980px) {
  .hrow__media, .hrow:nth-child(even) .hrow__media { grid-column: 1 / -1; grid-row: auto; }
  .hrow__body,  .hrow:nth-child(even) .hrow__body  { grid-column: 1 / -1; grid-row: auto; }
}

.hrow__media .figure { aspect-ratio: 16 / 10; }
.hrow__media .figure img { transition: transform 1.4s var(--e-out); }
.hrow__media:hover .figure img { transform: scale(1.035); }
.hrow__n {
  position: absolute; z-index: 2; left: 1rem; bottom: .6rem;
  font-family: var(--serif); font-size: clamp(2.2rem, 4.5vw, 3.6rem); font-weight: 300;
  line-height: 1; color: var(--paper); mix-blend-mode: difference;
}
.hrow__body { display: grid; gap: 1rem; align-content: center; }
.hrow__facts { display: grid; gap: .45rem; padding-block: .4rem; }
.hrow__facts div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .45rem; border-top: 1px solid var(--line-2); font-size: var(--t-small); }
.hrow__facts div b { font-weight: 400; color: var(--fg-mute); }
.hrow__price { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.hrow__price div b { display: block; font-family: var(--serif); font-size: var(--d4); font-weight: 300; line-height: 1; }
.hrow__price div span { display: block; margin-top: .2rem; font-size: var(--t-small); color: var(--fg-mute); }

/* ---------- ДЕТАЛЬ БУДИНОЧКА ------------------------------ */
.hdetail { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 900px) { .hdetail { grid-template-columns: 1fr; } }

.hdetail__main { display: grid; gap: clamp(2rem, 5vh, 3.2rem); }
.hdetail__desc { font-size: var(--t-lead); line-height: 1.66; color: var(--fg-soft); max-width: 56ch; }

.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.4rem; }
.specs div { display: grid; gap: .35rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.specs dt { font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); }
.specs dd { margin: 0; }

.amen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem 1.6rem; }
.amen li { position: relative; padding-left: 1.5rem; font-size: var(--t-small); color: var(--fg-soft); }
.amen li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid var(--accent);
}

.aside {
  position: sticky; top: clamp(5.5rem, 13vh, 7.5rem);
  display: grid; gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 70%, #fff);
}
@media (max-width: 900px) { .aside { position: static; } }
.aside__rate { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-top: 1px solid var(--line-2); }
.aside__rate:first-of-type { border-top: 0; }
.aside__rate dt b { display: block; font-weight: 400; }
.aside__rate dt span { display: block; font-size: var(--t-small); color: var(--fg-mute); }
.aside__rate dd { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 300; white-space: nowrap; }
.aside__note { font-size: var(--t-small); color: var(--fg-mute); }

/* Стрічка кадрів будиночка: перший кадр удвічі ширший */
.shots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.6rem, 1.6vw, 1.2rem); }
.shots .figure { aspect-ratio: 4 / 3; }
.shots figure:first-child { grid-column: span 4; }
.shots figure:first-child .figure { aspect-ratio: 16 / 9; }
.shots figure:nth-child(2), .shots figure:nth-child(3) { grid-column: span 2; }
.shots figure:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 760px) {
  .shots { grid-template-columns: repeat(2, 1fr); }
  .shots figure:first-child { grid-column: span 2; }
  .shots figure:nth-child(n+2) { grid-column: span 1; }
}

/* Галерея будиночка на house.html: слайдер замість стрічки —
   одне фото на весь блок, стрілки, лічильник. touch-action:
   pan-y лишає вертикальний скрол сторінки пальцем природним,
   а горизонтальний свайп забирає під себе JS. */
.hgallery { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--slate); touch-action: pan-y; border-radius: 2px; }
.hgallery__track { display: flex; width: 100%; height: 100%; transition: transform .6s var(--e-io); will-change: transform; }
.hgallery__track.is-dragging { transition: none; }
.hgallery__slide { flex: 0 0 100%; width: 100%; height: 100%; }
.hgallery__slide .figure { width: 100%; height: 100%; }
.hgallery img { -webkit-user-drag: none; user-select: none; }

.hgallery__nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 3rem; height: 3rem; display: grid; place-items: center;
  color: var(--paper); border: 1px solid rgba(242,240,233,.28); border-radius: 100px;
  background: rgba(13,20,24,.3);
  transition: background-color .35s, color .35s;
}
.hgallery__nav:hover { background: var(--paper); color: var(--ink); }
.hgallery__nav--prev { left: clamp(.6rem, 2vw, 1.4rem); }
.hgallery__nav--next { right: clamp(.6rem, 2vw, 1.4rem); }
.hgallery__nav .ico { width: 1.2rem; }

.hgallery__count {
  position: absolute; z-index: 2; right: clamp(.8rem, 2vw, 1.4rem); bottom: clamp(.8rem, 2vw, 1.4rem);
  padding: .35rem .8rem; font-size: var(--t-small); letter-spacing: .04em;
  color: var(--paper); background: rgba(13,20,24,.45); border-radius: 100px;
}
@media (max-width: 640px) {
  .hgallery { aspect-ratio: 4 / 3; }
  .hgallery__nav { width: 2.5rem; height: 2.5rem; }
}

.others { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.others a { display: grid; gap: .8rem; }
.others .figure { aspect-ratio: 3 / 2; }
.others a:hover .figure img { transform: scale(1.04); }
.others .figure img { transition: transform 1.2s var(--e-out); }
.others b { font-family: var(--serif); font-size: var(--d4); font-weight: 300; }

/* ---------- ТАРИФИ ЯК ТАБЛИЦЯ ----------------------------- */
.rates { display: grid; }
.rates__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1.4rem; padding-block: .95rem; border-top: 1px solid var(--line); }
.rates__row:first-child { border-top: 0; }
.rates__row dt b { display: block; font-weight: 400; }
.rates__row dt span { display: block; font-size: var(--t-small); color: var(--fg-mute); }
.rates__row dd { margin: 0; font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 300; white-space: nowrap; }

/* ---------- ГАЛЕРЕЯ --------------------------------------- */
.gfilter { display: flex; flex-wrap: wrap; gap: .5rem; }
.gfilter button {
  padding: .55em 1.1em;
  font-size: var(--t-small); letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 100px;
  color: var(--fg-mute);
  transition: color .35s, border-color .35s, background-color .35s;
}
.gfilter button:hover { color: var(--fg); border-color: var(--fg); }
.gfilter button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }

.ggrid { columns: 3; column-gap: clamp(.7rem, 1.8vw, 1.4rem); }
@media (max-width: 900px) { .ggrid { columns: 2; } }
@media (max-width: 520px) { .ggrid { columns: 1; } }
.ggrid__item { position: relative; break-inside: avoid; margin-bottom: clamp(.7rem, 1.8vw, 1.4rem); }
.ggrid__item.is-hidden { display: none; }
.ggrid__item .figure img { transition: transform 1.2s var(--e-out); }
.ggrid__item:hover .figure img { transform: scale(1.04); }
.ggrid__cap {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 2;
  padding: .35em .8em;
  font-size: var(--t-label); letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper); background: rgba(9,15,18,.55); backdrop-filter: blur(6px);
  opacity: 0; transform: translateY(.4rem);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out);
}
.ggrid__item:hover .ggrid__cap, .ggrid__item:focus-within .ggrid__cap { opacity: 1; transform: none; }
.ggrid__item > button { position: absolute; inset: 0; z-index: 3; width: 100%; cursor: zoom-in; background: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 160;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8,13,16,.94); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .5s var(--e-out), visibility .5s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(94vw, 1600px); max-height: 82vh; width: auto; height: auto; object-fit: contain; }
.lightbox__cap { margin-top: 1rem; text-align: center; font-size: var(--t-small); color: rgba(242,240,233,.7); }
.lightbox__close, .lightbox__nav {
  position: absolute; z-index: 2;
  width: 3rem; height: 3rem; display: grid; place-items: center;
  color: var(--paper); border: 1px solid rgba(242,240,233,.28); border-radius: 100px;
  transition: background-color .35s, color .35s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--paper); color: var(--ink); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(.6rem, 2vw, 2rem); }
.lightbox__nav--next { right: clamp(.6rem, 2vw, 2rem); }
.lightbox .ico { width: 1.2rem; }

/* ---------- ПРАВИЛА --------------------------------------- */
.rules__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .rules__grid { grid-template-columns: 1fr; } }
.rules__nav { position: sticky; top: clamp(5.5rem, 13vh, 7.5rem); display: grid; gap: .4rem; }
@media (max-width: 860px) { .rules__nav { position: static; } }
.rules__nav a { padding-block: .5rem; font-size: var(--t-small); color: var(--fg-mute); border-top: 1px solid var(--line-2); transition: color .35s, padding-left .5s var(--e-out); }
.rules__nav a:hover { color: var(--accent); padding-left: .5rem; }
.faq__group + .faq__group { margin-top: clamp(2.4rem, 6vh, 4rem); }

/* ---------- БРОНЮВАННЯ ------------------------------------ */
.booking__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
@media (max-width: 980px) { .booking__grid { grid-template-columns: 1fr; } }

.tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--line); margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
.tabs button {
  position: relative;
  padding: .9em 1.4em;
  font-size: var(--t-small); letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-mute);
  transition: color .4s;
}
.tabs button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--e-out);
}
.tabs button[aria-selected="true"] { color: var(--fg); }
.tabs button[aria-selected="true"]::after { transform: scaleX(1); }

.bside { display: grid; gap: 1.6rem; align-content: start; }
.bside__card { display: grid; gap: .7rem; padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid var(--line); }
.bside__card b { font-family: var(--serif); font-size: var(--d4); font-weight: 300; }

/* ---------- КОНТАКТИ -------------------------------------- */
.cmap { position: relative; height: clamp(380px, 60vh, 680px); background: var(--paper-2); }
.cmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.3) contrast(1.04); }

/* Ембед центрований рівно по координатах SAP SAN, тому мітка
   завжди опиняється в центрі карти — гаряча зона над нею веде
   на справжній запис у Google Maps (без цього клік по мітці
   давав лише «координати», без назви й телефону). */
.cmap__pin { position: absolute; z-index: 2; left: 50%; top: 50%; width: 68px; height: 92px; transform: translate(-50%, -100%); }
.cmap__pin::after {
  content: ''; position: absolute; left: 50%; bottom: 6px; width: 34px; height: 34px;
  transform: translateX(-50%); border-radius: 50%;
  background: transparent; transition: background-color .3s;
}
.cmap__pin:hover::after, .cmap__pin:focus-visible::after { background: rgba(13,20,24,.12); }

.hours { display: grid; gap: .5rem; }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-top: 1px solid var(--line-2); font-size: var(--t-small); }
.hours div:first-child { border-top: 0; }

/* ---------- ФІНАЛЬНИЙ CTA ----------------------------------
   Спільний для головної й внутрішніх сторінок (houses.html,
   pool.html) — тому живе тут, у файлі, підключеному всюди,
   а не в home.css, який лінкований не на кожній сторінці. */
.finale { position: relative; color: var(--paper); isolation: isolate; }
.finale__media { position: absolute; inset: 0; z-index: -2; }
.finale__media picture, .finale__media img { width: 100%; height: 100%; object-fit: cover; }
.finale::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(8,14,17,.86), rgba(8,14,17,.55) 55%, rgba(8,14,17,.4));
}
.finale__body {
  min-height: clamp(520px, 88vh, 860px);
  display: grid; align-content: center; justify-items: center; gap: 1.3rem;
  text-align: center;
  /* Більше повітря згори: сокіл раніше стояв майже впритул до
     верхньої межі кадру й лягав на фотографію без запасу. */
  padding-block: clamp(5.5rem, 15vh, 9rem) clamp(4rem, 12vh, 8rem);
}
.finale__body .rule-bird { width: min(560px, 78vw); color: var(--foam); margin-bottom: .6rem; }
.finale__body .display { max-width: 15ch; }
.finale__body .lead { color: rgba(242,240,233,.82); max-width: 46ch; }
.finale__body .btn--light { --btn-hover: var(--water); margin-top: .4rem; }