/* ============================================================
   88W61 — vystytojo microsite (portfolio)
   Dizaino sistema: startuokNT.lt
   Struktūros referencas: 111w57.com (žr. _ref/notes/111w57-decode.md)
   ============================================================ */

/* --- 0. Šriftai — self-hosted, jokių išorinių užklausų -------- */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 300 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('../fonts/switzer-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* --- 1. Tokens ------------------------------------------------ */
:root {
  /* Paletė — trys reikšmės, kaip referense. Akcento spalvos NĖRA. */
  --paper:      #FFFFFF;
  --ink:        #7C7262;          /* visas tekstas — taupe, ne juodas */
  --ink-deep:   #4B463D;          /* tik duomenims (lentelė, skaičiai) */
  --ink-soft:   rgba(124,114,98,.62);
  --line:       rgba(124,114,98,.20);
  --line-soft:  rgba(124,114,98,.11);
  --wash:       #F6F4F0;          /* vos šiltesnis fonas sekcijų pauzėms */
  --on-image:   #FFFFFF;

  /* Grid — 24 stulpeliai, full-bleed (jokio max-width) */
  --gut:  19.2px;
  --pad:  19.2px;
  --cols: 24;

  /* Fluid tipografija: min → max @1440 (žr. dekodą §3) */
  --t-display: clamp(2.4rem,  6.25vw,  5.625rem);  /* 38 → 90 */
  --t-h1:      clamp(2rem,    4vw,     3.6rem);    /* 32 → 57.6 */
  --t-h2:      clamp(1.7rem,  3.13vw,  2.8rem);    /* 27 → 45 */
  --t-h3:      clamp(1.15rem, 1.73vw,  1.56rem);   /* 18 → 25 */
  --t-body:    clamp(.95rem,  1.11vw,  1rem);      /* 15 → 16 */
  --t-label:   .84rem;                             /* 13.44 */
  --t-micro:   .6rem;                              /* 9.6 */

  --serif: "Fraunces", "Times New Roman", serif;
  --sans:  "Switzer", -apple-system, "Helvetica Neue", Arial, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .9s;
}

/* Fraunces — display ašys užrakintos į „brangų" pjūvį */
.serif, h1, h2, h3, .display, blockquote {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300;
  letter-spacing: -.025em;
}

/* --- 2. Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* SVARBU: `.menu`/`.film` turi `display:flex`, o autoriaus taisyklė nugali naršyklės
   `[hidden]{display:none}` — be šito uždaryti overlay'ai lieka ant puslapio ir
   permatomi surenka visus paspaudimus. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
::selection { background: var(--ink); color: var(--paper); }

/* --- 3. Layout ------------------------------------------------ */
.max  { width: 100%; padding-inline: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); column-gap: var(--gut); }
.bleed { width: 100%; }

/* Sekcijų ritmas: statement → vaizdas → statement. Niekada du tekstai iš eilės. */
.sec      { padding-block: clamp(72px, 9vw, 152px); }
.sec--tight { padding-block: clamp(48px, 5vw, 88px); }
.sec--wash  { background: var(--wash); }

/* --- 4. Tipografinės rolės ------------------------------------ */
/* text-wrap: naršyklė subalansuoja lūžius — jokių našlaičių tipo „feet." */
.display   { font-size: var(--t-display); line-height: .96;  text-wrap: pretty; }
.h1        { font-size: var(--t-h1);      line-height: 1;     text-wrap: balance; }
.h2        { font-size: var(--t-h2);      line-height: 1.04;  text-wrap: balance; }
.h3        { font-size: var(--t-h3);      line-height: 1.28; }
.body-lg   { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.5; max-width: 46ch; }
.body      { max-width: 52ch; }

.label {
  font-family: var(--sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
}
.micro {
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.num { font-variant-numeric: tabular-nums; }

/* --- 5. Nuorodos / mygtukai ----------------------------------- */
.arrow-link {
  display: inline-flex; align-items: center; gap: .7em;
  padding-block: .35em;
}
.arrow-link .ar {
  display: inline-block; width: 1em;
  transition: transform .45s var(--ease);
}
.arrow-link:hover .ar { transform: translateX(.4em); }

.btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 2.4em;
  border: 1px solid var(--line);
  padding: .85em 1.1em;
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.btn:hover { border-color: var(--ink); }
.btn .ar { transition: transform .45s var(--ease); }
.btn:hover .ar { transform: translateX(.35em); }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: var(--ink-deep); border-color: var(--ink-deep); }
.btn--on-image { border-color: rgba(255,255,255,.5); color: var(--on-image); }
.btn--on-image:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* --- 6. Header ------------------------------------------------ */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad);
  color: var(--on-image);
  transition: background-color .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Nuscrolinus — virsta balta juosta su hairline (kaip referense) */
.hdr.is-solid {
  background: var(--paper);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.hdr__menu { display: inline-flex; align-items: center; gap: .9em; }
.hdr__burger { display: block; width: 30px; }
.hdr__burger span {
  display: block; height: 1px; background: currentColor;
  transition: transform .4s var(--ease);
}
.hdr__burger span + span { margin-top: 6px; width: 68%; }
.hdr__menu:hover .hdr__burger span + span { width: 100%; }

/* Wordmark centre — matomas tik nuscrolinus */
.hdr__mark {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300;
  font-size: 1.35rem; letter-spacing: .12em;
  opacity: 0; transition: opacity .5s var(--ease);
  pointer-events: none;
}
.hdr.is-solid .hdr__mark { opacity: 1; }
.hdr__cta { font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase; font-weight: 500; }

/* --- 7. Hero -------------------------------------------------- */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* Vinjetė — kad tekstas laikytųsi ant bet kokio kadro */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(10,9,8,.42) 0%, rgba(10,9,8,0) 26%),
    linear-gradient(to top,    rgba(10,9,8,.55) 0%, rgba(10,9,8,0) 42%);
}
.hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 0 var(--pad) clamp(28px, 3.6vw, 48px);
  color: var(--on-image);
}
/* Wordmark laikosi viršutiniame trečdalyje — nelipa ant hero kadro veikėjo */
.hero__mark { flex: 1; padding-bottom: 8vh; }
/* Vertikalus wordmark — 111/W/57 logika */
.hero__mark {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .04em; text-align: center;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300;
  font-size: clamp(3.4rem, 7.6vw, 7rem);
  line-height: .88; letter-spacing: .04em;
}
.hero__mark span { display: block; }
.hero__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--gut); }
.hero__title { grid-column: 1; max-width: 20ch; text-wrap: balance; }
.hero__scroll { grid-column: 2; justify-self: center; display: grid; justify-items: center; gap: .8em; padding-bottom: .2em; }
.hero__scroll .line { width: 1px; height: 42px; background: rgba(255,255,255,.55); transform-origin: top; }
.hero__film { grid-column: 3; justify-self: end; }

/* --- 8. Statement --------------------------------------------- */
.statement { grid-column: 1 / span 21; }
.statement--narrow { grid-column: 1 / span 17; }
.statement__link { margin-top: clamp(28px, 3.2vw, 48px); }

/* --- 9. Vaizdų blokai ----------------------------------------- */
.figure { position: relative; overflow: hidden; }
.figure img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.figure__cap { margin-top: 1em; display: flex; justify-content: space-between; gap: 1em; }

/* Duo — nelygaus dydžio pora, skirtingi offsetai (ref §1 blokas 3) */
.duo { align-items: start; row-gap: 40px; }
.duo__a { grid-column: 1 / span 16; aspect-ratio: 4/3; }
.duo__b { grid-column: 18 / span 7; aspect-ratio: 3/4; margin-top: clamp(40px, 7vw, 110px); }

.full { aspect-ratio: 16/9; }

/* 3 kortelės */
.cards { row-gap: 48px; }
.card { grid-column: span 8; }
.card .figure { aspect-ratio: 4/3; margin-bottom: 1.1em; }
.card img { transition: transform 1.1s var(--ease); }
.card:hover img { transform: scale(1.035); }

/* Split — vaizdas ↔ tekstas */
.split { align-items: center; row-gap: 40px; }
.split__media { grid-column: 1 / span 11; aspect-ratio: 3/4; }
.split__body  { grid-column: 14 / span 9; }
.split--flip .split__media { grid-column: 14 / span 11; order: 2; }
.split--flip .split__body  { grid-column: 1 / span 9; order: 1; }
.split__body .h2 { margin-bottom: .55em; }
.split__body .body { margin-bottom: 2em; }
.split__eyebrow { margin-bottom: 1.6em; color: var(--ink-soft); }

/* --- 10. Skaičių juosta (mūsų priedas — ref jos neturi) ------- */
.facts { border-block: 1px solid var(--line); }
.facts__row { row-gap: 0; }
.fact {
  grid-column: span 4; /* ×6 = 24 */
  padding-block: clamp(30px, 3.4vw, 52px);
  border-left: 1px solid var(--line-soft);
  padding-left: clamp(14px, 1.4vw, 24px);
}
.fact:first-child { border-left: 0; padding-left: 0; }
.fact__n {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1; letter-spacing: -.03em;
  color: var(--ink-deep);
  margin-bottom: .5em;
}
.fact__n sup { font-size: .42em; vertical-align: super; letter-spacing: 0; }
.fact__l { color: var(--ink-soft); }

/* --- 11. Citata ------------------------------------------------ */
.quote { grid-column: 4 / span 18; text-align: center; }
.quote blockquote { margin: 0; font-size: var(--t-h2); line-height: 1.1; }
.quote figcaption { margin: clamp(28px, 3vw, 46px) auto 0; max-width: none; color: var(--ink-soft); }

/* --- 12. Butų paieška (mūsų „100×" blokas) -------------------- */
.avail__head { row-gap: 24px; margin-bottom: clamp(36px, 4vw, 64px); align-items: end; }
.avail__head .h2 { grid-column: 1 / span 13; }
.avail__head .body { grid-column: 15 / span 9; }

.avail__layout { row-gap: 48px; align-items: start; }
.stack   { grid-column: 1 / span 9; position: sticky; top: 84px; }
.results { grid-column: 11 / span 14; }


/* Filtrai */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.chip {
  border: 1px solid var(--line);
  padding: .5em .95em;
  font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; font-weight: 500;
  color: var(--ink-soft);
  transition: all .3s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* Lentelė */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left; font-weight: 500;
  font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0 1em .9em 0; border-bottom: 1px solid var(--line);
}
.tbl thead th:last-child, .tbl td:last-child { text-align: right; padding-right: 0; }
.tbl tbody tr {
  border-bottom: 1px solid var(--line-soft);
  transition: background-color .25s var(--ease);
}
.tbl tbody tr:hover { background: var(--wash); }
.tbl td {
  padding: 1.05em 1em 1.05em 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-deep);
}
.tbl .t-id { font-size: var(--t-label); letter-spacing: .06em; }
.tbl .is-sold td { color: var(--ink-soft); }
.tbl .is-sold .t-price { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Statusas be spalvos — taškelio užpildymas (ref neturi akcento spalvos) */
.dot {
  display: inline-block; width: .5em; height: .5em; border-radius: 50%;
  border: 1px solid var(--ink); margin-right: .7em; vertical-align: baseline;
}
.dot--free { background: var(--ink); }
.dot--held { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.dot--sold { background: none; opacity: .45; }

.t-act { font-size: var(--t-label); letter-spacing: .06em; text-transform: uppercase; }
.tbl tbody tr:hover .t-act .ar { transform: translateX(.35em); }
.tbl .t-act .ar { display: inline-block; transition: transform .4s var(--ease); }

.avail__empty { padding: 3em 0; color: var(--ink-soft); }
.avail__foot { margin-top: 28px; display: flex; justify-content: space-between; gap: 1.5em; flex-wrap: wrap; color: var(--ink-soft); }

/* --- 13. Rezervacijos forma ----------------------------------- */
.book__body { grid-column: 1 / span 10; }
.book__form { grid-column: 13 / span 11; }
.field { margin-bottom: 26px; }
.field label { display: block; margin-bottom: .6em; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink-deep);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line);
  padding: .55em 0; border-radius: 0;
  transition: border-color .35s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--ink);
}
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.book__note { margin-top: 1.4em; color: var(--ink-soft); font-size: var(--t-label); text-transform: none; letter-spacing: 0; }
.book__ok { display: none; padding: 1.2em 0; border-top: 1px solid var(--line); }
.book__ok.is-on { display: block; }

/* --- 14. Explore + Footer ------------------------------------- */
.explore__list { grid-column: 1 / span 24; }
.explore__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2em; padding: clamp(20px, 2.3vw, 34px) 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-h3);
}
.explore__item:last-child { border-bottom: 1px solid var(--line); }
.explore__item .ar { transition: transform .45s var(--ease); }
.explore__item:hover .ar { transform: translateX(.5em); }

.ftr { padding-block: clamp(56px, 6vw, 96px) 28px; border-top: 1px solid var(--line); }
/* JAV rinkos teisinė eilutė (offering plan / fair housing) */
.ftr__legal {
  margin-top: clamp(40px, 4vw, 64px); padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  max-width: 78ch; line-height: 1.9;
}
.ftr__legal a { text-decoration: underline; text-underline-offset: .25em; }
.ftr__legal a:hover { color: var(--ink-deep); }
/* Kontaktų nuorodos — ne UPPERCASE (el. paštas didžiosiomis atrodo klaidingai) */
.contact-link { font-size: var(--t-body); letter-spacing: 0; text-transform: none; }
.contact-link + br + .contact-link { margin-top: .3em; }
html { scroll-padding-top: 80px; }
.ftr__cols { row-gap: 36px; }
.ftr__brand { grid-column: 1 / span 8; }
.ftr__nav   { grid-column: span 4; }
.ftr__nav h4 { margin: 0 0 1.4em; font-weight: 500; color: var(--ink-soft); font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; }
.ftr__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .8em; }
.ftr__nav a:hover { color: var(--ink-deep); }
.ftr__mark {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300; font-size: 1.6rem; letter-spacing: .12em; margin-bottom: 1em;
}
.ftr__bottom {
  margin-top: clamp(48px, 5vw, 80px); padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 1.5em; flex-wrap: wrap;
}


/* --- 15. Motion ----------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); }
.is-ready .reveal { transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* Eilučių atidengimas antraštėms */
.lines .ln { display: block; overflow: hidden; }
.lines .ln > span { display: block; transform: translateY(105%); }
.is-ready .lines .ln > span { transition: transform 1.05s var(--ease); }
.lines.in .ln > span { transform: none; }
.lines .ln:nth-child(2) > span { transition-delay: .07s; }
.lines .ln:nth-child(3) > span { transition-delay: .14s; }
.lines .ln:nth-child(4) > span { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .lines .ln > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --- 16. Responsive ------------------------------------------- */
@media (max-width: 1024px) {
  .statement, .statement--narrow { grid-column: 1 / span 24; }
  .duo__a { grid-column: 1 / span 24; }
  .duo__b { grid-column: 7 / span 12; margin-top: 0; }
  .card { grid-column: span 12; }
  .card:last-child { grid-column: span 24; }
  .split__media, .split--flip .split__media { grid-column: 1 / span 24; order: 1; aspect-ratio: 4/3; }
  .split__body,  .split--flip .split__body  { grid-column: 1 / span 24; order: 2; }
  .quote { grid-column: 1 / span 24; }
  .fact { grid-column: span 8; }
  .fact:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .avail__head .h2, .avail__head .body { grid-column: 1 / span 24; }
  .stack { grid-column: 1 / span 24; position: static; }
  .results { grid-column: 1 / span 24; }
  .book__body, .book__form { grid-column: 1 / span 24; }
  .ftr__brand { grid-column: 1 / span 24; }
  .ftr__nav { grid-column: span 8; }
}

@media (max-width: 640px) {
  :root { --gut: 12px; --pad: 16px; }
  .card, .card:last-child { grid-column: span 24; }
  .fact { grid-column: span 12; border-left: 0; padding-left: 0; }
  .hero__foot { grid-template-columns: 1fr; gap: 22px; }
  .hero__title { grid-column: 1; }
  .hero__scroll { display: none; }
  .hero__film { grid-column: 1; justify-self: start; }
  .ftr__nav { grid-column: span 12; }
  /* Lentelė → kortelės */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tbody tr { padding: 1.1em 0; }
  .tbl td { padding: .18em 0; text-align: left !important; }
  .tbl td[data-l]::before {
    content: attr(data-l) " ";
    font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft); margin-right: .7em;
  }
}

/* ============================================================
   17. Daugiapuslapė sistema (poskyriai, meniu, filmas, hero video)
   ============================================================ */

/* Skip link — klaviatūrai */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: .8em 1.2em;
  font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase;
}
.skip:focus { left: 0; }

/* Vidiniuose puslapiuose header'is baltas nuo pat viršaus → turinys pastumiamas */
body.is-inner { padding-top: 58px; }

/* --- Poskyrio hero: vaizdas + antraštė PO juo (ne ant, kad tekstas visada skaitomas) --- */
.phero { position: relative; }
.phero__media { width: 100%; aspect-ratio: 21/9; }
.phero--short .phero__media { aspect-ratio: 21/8; }
.phero__media img { width: 100%; height: 100%; object-fit: cover; }
.phero__body { padding-top: clamp(36px, 4.4vw, 72px); }
.phero__text { grid-column: 1 / span 20; }
.phero__text .micro { margin-bottom: 1.4em; }

/* --- Lead: trumpas sakinys + pastraipos --- */
.lead { row-gap: 32px; align-items: start; }
.lead__a { grid-column: 1 / span 11; }
.lead__b { grid-column: 14 / span 10; }

/* --- Specifikacijų sąrašas (dt/dd hairline eilutės) --- */
.spec { grid-column: 1 / span 24; margin: 0; }
.spec__row {
  display: grid; grid-template-columns: 7fr 17fr; gap: var(--gut);
  padding: 1.05em 0; border-top: 1px solid var(--line-soft);
}
.spec__row:last-child { border-bottom: 1px solid var(--line-soft); }
.spec dt {
  font-size: var(--t-label); letter-spacing: .07em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-soft);
}
.spec dd { margin: 0; color: var(--ink-deep); }

/* --- Meniu (full-screen overlay) --- */
.menu {
  position: fixed; inset: 0; z-index: 55;
  background: var(--paper);
  display: flex; align-items: center;
  opacity: 0; transition: opacity .45s var(--ease);
}
.menu.is-open { opacity: 1; }
.menu__inner { width: 100%; }
.menu__list { grid-column: 1 / span 13; list-style: none; margin: 0; padding: 0; }
.menu__list a {
  display: block; padding: .28em 0;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300; letter-spacing: -.025em;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.1;
  color: var(--ink-soft);
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.menu__list a:hover { color: var(--ink-deep); transform: translateX(.14em); }
.menu__side { grid-column: 16 / span 9; align-self: end; }
.hdr.is-menu-open .hdr__burger span:first-child { transform: translateY(3.5px) rotate(12deg); }
.hdr.is-menu-open .hdr__burger span + span { transform: translateY(-3.5px) rotate(-12deg); width: 100%; }

/* --- Hero video ant statinio kadro --- */
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.2s var(--ease);
}
.hero__video.is-on { opacity: 1; }

/* --- Filmo lightbox --- */
.film {
  position: fixed; inset: 0; z-index: 80;
  background: #12100E;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .5s var(--ease);
}
.film.is-open { opacity: 1; }
.film__stage { width: min(94vw, 1360px); }
.film__video { width: 100%; height: auto; aspect-ratio: 16/9; background: #000; }
.film__close {
  position: absolute; top: 18px; right: 22px;
  font-size: 30px; line-height: 1; color: #fff; opacity: .8;
  padding: .2em .3em;
}
.film__close:hover { opacity: 1; }

@media (max-width: 1024px) {
  .phero__text { grid-column: 1 / span 24; }
  .lead__a, .lead__b { grid-column: 1 / span 24; }
  .spec__row { grid-template-columns: 1fr; gap: .35em; }
  .menu__list { grid-column: 1 / span 24; }
  .menu__side { grid-column: 1 / span 24; margin-top: 40px; }
  .menu { align-items: flex-start; padding-top: 96px; overflow-y: auto; }
}
@media (max-width: 640px) {
  .phero__media, .phero--short .phero__media { aspect-ratio: 4/3; }
  body.is-inner { padding-top: 54px; }
}

/* Filmo mygtukas meniu sąraše — atrodo kaip nuoroda */
.menu__film {
  display: block; padding: .28em 0; text-align: left;
  font-family: var(--serif);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300; letter-spacing: -.025em;
  font-size: clamp(2rem, 4.4vw, 3.6rem); line-height: 1.1;
  color: var(--ink-soft);
  transition: color .3s var(--ease), transform .4s var(--ease);
}
.menu__film:hover { color: var(--ink-deep); transform: translateX(.14em); }

/* ============================================================
   18. Pastato pjūvis — spaudi ant buto, ne ant eilutės
   ============================================================ */
.tower { width: 100%; height: auto; display: block; overflow: visible; }

/* Karūna ir podiumas — kontekstas, ne prekė */
.tw-crown { fill: none; stroke: var(--line); stroke-width: 1; }
.tw-pod   { fill: var(--line-soft); stroke: var(--line); stroke-width: 1; }
.tw-ground{ stroke: var(--line); stroke-width: 1; }
.tw-pod-t { font-family: var(--sans); font-size: 9px; font-weight: 500; letter-spacing: .16em;
            fill: var(--ink-soft); text-anchor: middle; }
.tw-pod-s { font-family: var(--sans); font-size: 7px; letter-spacing: .16em;
            fill: var(--ink-soft); text-anchor: middle; opacity: .8; }
.tw-num   { font-family: var(--sans); font-size: 8.5px; letter-spacing: .06em;
            fill: var(--ink-soft); text-anchor: end; font-variant-numeric: tabular-nums; }


/* Tooltip prie pelės */
.twtip {
  position: absolute; z-index: 40; pointer-events: none;
  background: var(--ink); color: var(--paper);
  padding: .7em .9em; display: grid; gap: .15em;
  font-size: var(--t-label); line-height: 1.35;
  opacity: 0; transform: translateY(3px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  white-space: nowrap;
}
.twtip.is-on { opacity: 1; transform: none; }
.twtip b { font-weight: 500; letter-spacing: .04em; }
.twtip span { opacity: .78; font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; }

/* Pasirinkto buto veiksmas po fasadu */
.unitact { margin-top: 26px; display: grid; gap: 10px; }
.unitact__cta { width: 100%; }
.unitact__clear { color: var(--ink-soft); text-align: left; padding: .3em 0; }
.unitact__clear:hover { color: var(--ink-deep); }
.unitact__note { color: var(--ink-soft); font-size: var(--t-label); }

@media (max-width: 1024px) {
  .stack { max-width: 340px; margin-inline: auto; }
}

/* --- Fasado išpjovos, langai ir išnaša --------------------------- */
/* Išpjova — buto anga fasade */
.tw-bay  { fill: var(--paper); stroke: var(--line); stroke-width: .7; }
.tw-bay.tw-sold { fill: var(--line-soft); }
.tw-bay.is-sel  { stroke: var(--ink-deep); stroke-width: 1.6; }

/* Langai — statusas užpildymu, ne spalva */
.tw-win { stroke: var(--ink); stroke-width: .55; pointer-events: none;
          transition: fill-opacity .25s var(--ease); }
.tw-w-free { fill: var(--ink); fill-opacity: .8; }
.tw-w-held { fill: url(#hatch); }
.tw-w-sold { fill: none; opacity: .3; }
.tw-win.is-sel { fill: var(--ink-deep); fill-opacity: 1; }
.tw-w-sold.is-sel { fill: none; opacity: .75; }

/* Taikinys per visą išpjovą — pataikyti lengva, matosi tik langai */
.tw-hit { fill: transparent; cursor: pointer; pointer-events: all; outline: none; }
.tw-hit:hover ~ .tw-win, .tw-hit:focus-visible ~ .tw-win { fill-opacity: 1; }
svg.tower g:hover .tw-win { fill-opacity: 1; }

/* Išnaša — kaip brėžinio anotacija */
.co-lead { fill: none; stroke: var(--ink); stroke-width: .8; }
.co-dot  { fill: var(--ink); }
.co-box  { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.co-id { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: .1em; fill: var(--ink-deep); }
.co-s  { font-family: var(--sans); font-size: 7.5px; letter-spacing: .13em; fill: var(--ink-soft); }
.co-p  { font-family: var(--serif); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
         font-size: 15px; fill: var(--ink-deep); }
.co-div { stroke: var(--line); stroke-width: 1; }
.co-cta { font-family: var(--sans); font-size: 8.5px; font-weight: 500; letter-spacing: .13em;
          fill: var(--ink-deep); pointer-events: none; }
.co-hit { fill: transparent; cursor: pointer; pointer-events: all; outline: none; }
.co-hit:hover ~ .co-cta, .co-hit:focus-visible ~ .co-cta { fill: var(--ink); }

/* --- Behind the glass: automatika, kuri kitaip liktų nematoma ------ */
.glass {
  position: fixed; z-index: 70; right: var(--pad); bottom: var(--pad);
  width: min(420px, calc(100vw - var(--pad) * 2));
  background: var(--ink); color: var(--paper);
  padding: 22px 24px 20px;
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  max-height: calc(100vh - var(--pad) * 2); overflow-y: auto;
}
.glass.is-on { opacity: 1; transform: none; }
.glass__tag { color: rgba(255,255,255,.55); margin-bottom: 14px; }
.glass__close { position: absolute; top: 12px; right: 14px; font-size: 20px; line-height: 1; color: rgba(255,255,255,.6); }
.glass__close:hover { color: #fff; }
.glass__num {
  font-family: var(--serif); font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 144;
  font-weight: 300; font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; margin-bottom: .35em;
}
.glass__lede { font-size: var(--t-label); line-height: 1.5; color: rgba(255,255,255,.8); }
.glass__steps { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: g; }
.glass__steps li {
  display: grid; grid-template-columns: 1.6em 1fr; gap: .2em 0;
  padding: .55em 0; border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--t-label);
}
.glass__steps li::before {
  counter-increment: g; content: counter(g);
  font-size: var(--t-micro); color: rgba(255,255,255,.45); padding-top: .25em;
}
.glass__steps em { grid-column: 2; font-style: normal; font-size: var(--t-micro);
                   letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.glass__msg { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.22); }
.glass__msg .micro { color: rgba(255,255,255,.5); }
.glass__msg p { margin-top: .5em; font-size: var(--t-label); line-height: 1.45; color: rgba(255,255,255,.9); }
.glass__foot { margin-top: 16px; display: grid; gap: .35em; }
.glass__foot .micro { color: rgba(255,255,255,.42); }

/* Vaizdas pro langą išnašoje — atsakymas į „o kaip atrodo tas butas?" */
.co-img { }
.co-imgline { fill: none; stroke: var(--ink); stroke-width: 1; }
.co-cap { font-family: var(--sans); font-size: 6.5px; letter-spacing: .16em;
          fill: #fff; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 2px; }