/*! GP RealEstate · 03-layout.css - Каркас: контейнер, секції, шапка, мобільне меню, футер. */

/* ── Контейнер і секції ─────────────────────────────────────────────────── */
.container{
  width:100%;max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(18px, 4vw, 32px);
}
.container-text{max-width:var(--container-text)}

.section{padding-block:var(--section-y)}
.section-tight{padding-block:calc(var(--section-y) * .55)}
.section-alt{background:var(--bg-alt)}
.section-dark{
  background:linear-gradient(160deg, var(--green-dark) 0%, var(--green-darker) 100%);
  color:#fff;
}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .lede,.section-dark p{color:rgba(255,255,255,.82)}
.section-dark .eyebrow{color:#9ADB84}

.section-head{
  display:grid;grid-template-columns:1fr;gap:var(--sp-4);
  margin-bottom:var(--sp-12);
}
.section-head h2{margin-top:var(--sp-2)}
@media (min-width:900px){
  .section-head{grid-template-columns:1.1fr .9fr;align-items:end;gap:var(--sp-10)}
}

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);
  min-height:var(--nav-h);
  display:flex;align-items:center;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav.is-scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.nav-inner{display:flex;align-items:center;gap:var(--sp-4);width:100%;min-width:0}
.nav-inner > *{min-width:0}

.brand{
  display:flex;align-items:center;gap:var(--sp-3);
  font-weight:700;font-size:18px;letter-spacing:-.02em;white-space:nowrap;flex:none;
}
.brand img,.brand svg{width:36px;height:36px;flex:none;object-fit:contain}
.brand-lockup{gap:14px}
.brand-logo img{width:142px;height:46px;object-fit:contain;object-position:left center}
.brand-descriptor{
  display:flex;align-items:center;min-height:34px;max-width:104px;
  padding-left:14px;border-left:1px solid var(--line);
  color:var(--ink-2);font-size:10px;font-weight:700;line-height:1.35;
  letter-spacing:.08em;text-transform:uppercase;white-space:normal
}
.brand-logo-footer{
  display:inline-flex;width:max-content;padding:0;background:transparent
}
.brand-logo-footer img{width:170px;height:auto}
.footer .brand-descriptor{border-left-color:rgba(255,255,255,.24);color:rgba(255,255,255,.66)}
.brand b{color:var(--green);font-weight:700}
.brand small{
  display:block;font-size:10px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);margin-top:-2px;
}

.nav-links{display:none;gap:var(--sp-1);margin-left:auto}
.nav-link{
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);
  font-size:14.5px;font-weight:500;white-space:nowrap;position:relative;
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.nav-link:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.nav-link.is-active{color:var(--green)}
.nav-link.is-active::after{
  content:"";position:absolute;left:var(--sp-4);right:var(--sp-4);bottom:5px;
  height:2px;border-radius:2px;background:var(--green);
}
@media (min-width:1240px){
  .nav-links{
    display:grid;
    grid-template-columns:70px 76px 76px 70px 126px 104px 88px;
    gap:0;
  }
  .nav-link{padding-inline:6px;text-align:center;font-size:14px}
  .nav-tail{margin-left:var(--sp-2)}
  .nav-tail .lang-switch{display:flex}
  .lang-switch button{padding-inline:9px}
}
@media (max-width:479px){
  .nav .brand-descriptor{display:none}
}

.nav-tail{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}

/* Перемикач мов */
.lang-switch{display:none;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-pill)}
.lang-switch button{
  display:flex;align-items:center;gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-pill);
  font-size:12px;font-weight:600;color:var(--ink-2);
  transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.lang-switch .flag{width:16px;height:11px;border-radius:2px;overflow:hidden;flex:none}
.lang-switch .flag svg{width:100%;height:100%}

.hamburger{
  display:grid;place-items:center;width:44px;height:44px;
  border-radius:var(--radius-sm);
  transition:background var(--dur-fast) var(--ease);
}
.hamburger:hover{background:color-mix(in srgb, var(--ink) 5%, transparent)}
.hamburger svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
@media (min-width:1240px){ .hamburger{display:none} }

/* ── Мобільне меню ──────────────────────────────────────────────────────── */
.mobile-menu{
  position:fixed;inset:0;z-index:var(--z-overlay);
  background:var(--bg);
  padding:var(--sp-5) clamp(18px,5vw,28px) var(--sp-10);
  overflow-y:auto;
  display:flex;flex-direction:column;gap:var(--sp-6);
  /* Закрите меню повністю прибране з потоку й з accessibility-дерева */
  visibility:hidden;opacity:0;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),
             transform var(--dur) var(--ease),
             visibility 0s linear var(--dur);
}
.mobile-menu.is-open{
  visibility:visible;opacity:1;transform:none;
  transition-delay:0s;
}
.mobile-menu-top{display:flex;justify-content:flex-end}
.mobile-close{
  display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-sm);
}
.mobile-close svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.mobile-links{display:grid;gap:var(--sp-1)}
.mobile-links a{
  padding:var(--sp-4);border-radius:var(--radius-sm);
  font-size:18px;font-weight:600;
  transition:background var(--dur-fast) var(--ease);
}
.mobile-links a:hover{background:var(--surface-2)}
.lang-switch.is-mobile{display:flex;align-self:flex-start}
@media (min-width:1240px){ .lang-switch.is-mobile{display:none} }

/* ── Футер ──────────────────────────────────────────────────────────────── */
.footer{
  background:var(--green-darker);color:rgba(255,255,255,.72);
  padding-block:var(--sp-16) var(--sp-8);
}
.footer h4{color:#fff;font-size:var(--fs-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:var(--sp-4)}
.footer a{transition:color var(--dur-fast) var(--ease)}
.footer a:hover{color:#fff}
.footer .brand{color:#fff}
.footer .brand b{color:#9ADB84}
.footer .brand small{color:rgba(255,255,255,.5)}

.foot-grid{display:grid;gap:var(--sp-10);grid-template-columns:1fr}
@media (min-width:640px){ .foot-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .foot-grid{grid-template-columns:1.6fr repeat(3,1fr)} }
.foot-col ul{display:grid;gap:var(--sp-3);font-size:var(--fs-sm)}
.foot-brand p{margin-top:var(--sp-4);font-size:var(--fs-sm);max-width:38ch}

.foot-bottom{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);justify-content:space-between;align-items:center;
  margin-top:var(--sp-12);padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.12);
  font-size:var(--fs-xs);
}
.foot-social{display:flex;gap:var(--sp-3)}
.foot-social a{
  display:grid;place-items:center;width:38px;height:38px;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.foot-social a:hover{background:rgba(255,255,255,.12);border-color:transparent}
.foot-social svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}

/* ── Плаваючі дії (WhatsApp / дзвінок) ──────────────────────────────────── */
.fab-stack{
  position:fixed;right:clamp(14px,3vw,24px);bottom:clamp(14px,3vw,24px);
  z-index:var(--z-sticky);display:grid;gap:var(--sp-3);
}
.fab{
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--green);color:#fff;box-shadow:var(--shadow-lg);
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab svg{width:26px;height:26px;fill:currentColor}
.fab-wa{background:#25D366}

/* ── Режим під-сторінки (SPA-роутер) ────────────────────────────────────── */
.page{display:none}
.page.is-active{display:block}
body.is-subpage .home-view{display:none}

.page-hero{
  padding-block:calc(var(--nav-h) + var(--sp-10)) var(--sp-12);
  background:linear-gradient(160deg, var(--green-dark) 0%, var(--green-darker) 100%);
  color:#fff;
}
.page-hero h1{color:#fff;margin-bottom:var(--sp-4)}
.page-hero .lede{color:rgba(255,255,255,.8)}
.crumb{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  margin-bottom:var(--sp-6);
  font-size:var(--fs-sm);font-weight:500;color:rgba(255,255,255,.7);
  transition:color var(--dur-fast) var(--ease);
}
.crumb:hover{color:#fff}
.crumb svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.page-body{padding-block:var(--sp-12) var(--section-y)}

/* Головна прихована в режимі під-сторінки - але шапка/футер лишаються */
main{min-height:60vh}