/* index.html only: photo hero, city ticker, teaser bands, type cards */

/* ---------- hero: photo pushed right, plain dark gradient into the copy on the left ----------
   Taller crop (hero-best.webp is now cropped top-to-bottom around the
   full group, ~1.82:1) so the section fills most of the screen's height
   the way the client's reference (Gražiai atrodantis tekstas.png) does,
   instead of the earlier short letterbox strip. */
.hero-shell{ padding:20px 12px 0; }
.hero{
  position:relative; overflow:hidden;
  background:var(--secondary); color:var(--secondary-foreground);
  border-radius:calc(var(--radius) + 0.4rem);
  max-width:2400px; margin:0 auto; padding:0;
  aspect-ratio:1.82/1;
}
.hero-photo-panel{ position:absolute; inset:0; z-index:1; }
.hero-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:right center;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(8,12,28,0.92) 0%, rgba(8,12,28,0.78) 32%, rgba(8,12,28,0.32) 55%, rgba(8,12,28,0) 72%);
}

.hero-inner{ position:relative; z-index:2; height:100%; display:flex; align-items:center; padding:0 40px; }
@media (min-width:1100px){ .hero-inner{ padding-left:64px; } }
.hero-copy{ max-width:560px; }
.eyebrow--line{
  background:none; padding:0; border-radius:0; gap:14px;
  color:var(--primary-light);
}
.eyebrow--line::before{ content:""; width:44px; height:1px; background:var(--primary-light); flex-shrink:0; }
.hero-title{
  font-family:'Playfair Display', var(--font-display);
  font-weight:700;
  font-size:clamp(2.2rem, 4.4vw, 4rem);
  line-height:1.08;
  margin:22px 0 20px;
  color:#ffffff;
  letter-spacing:-0.01em;
}
.hero-title em{ font-style:italic; font-weight:500; }
.hero-tagline{
  font-family:var(--font-mono);
  font-size:0.8rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#aab4d4;
  margin-bottom:26px;
}
.hero-sub{ font-size:1.05rem; line-height:1.55; color:#d3daed; max-width:46ch; margin-bottom:34px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:38px; }
.hero-ctas .btn{ display:inline-flex; align-items:center; gap:10px; }
.hero-ctas .btn svg{ width:16px; height:16px; transition:transform 0.2s var(--ease-out); }
.hero-ctas .btn:hover svg{ transform:translateX(3px); }
.stat-strip{
  border-top:1px solid rgba(255,255,255,0.2); padding-top:24px;
  display:flex; gap:40px; flex-wrap:wrap;
  margin-bottom:20px;
}
.stat-strip div{ display:flex; flex-direction:column; gap:4px; }
.stat-strip strong{
  font-family:'Playfair Display', var(--font-display); font-weight:700;
  font-size:1.8rem; color:#ffffff; font-variant-numeric:tabular-nums; line-height:1;
}
.stat-strip span{
  font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.08em;
  text-transform:uppercase; color:#aab4d4;
}
.hero-note{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.05em;
  color:#8f9ac2; margin:0;
}

@media (max-width:1040px){
  .hero{ aspect-ratio:1.5/1; }
  .hero-title{ font-size:clamp(1.9rem, 4.4vw, 2.8rem); margin:18px 0 16px; }
  .hero-copy{ max-width:460px; }
  .hero-sub{ margin-bottom:26px; }
  .hero-ctas{ margin-bottom:28px; }
  .stat-strip{ padding-top:18px; gap:28px; }
  .hero-scrim{ background:linear-gradient(to right, rgba(8,12,28,0.94) 0%, rgba(8,12,28,0.82) 42%, rgba(8,12,28,0.38) 64%, rgba(8,12,28,0) 82%); }
}

@media (max-width:880px){
  .hero-shell{ padding:16px 12px 0; }
  .hero{ aspect-ratio:auto; display:flex; flex-direction:column; }
  .hero-photo-panel{ position:relative; inset:auto; aspect-ratio:1.5/1; }
  .hero-photo{ object-position:right top; }
  .hero-scrim{ display:none; }
  .hero-inner{ position:static; height:auto; padding:28px 24px 30px; }
  .hero-copy{ max-width:none; }
  .hero-title{ margin:14px 0 14px; }
  .hero-sub{ margin-bottom:20px; max-width:none; }
  .hero-ctas{ margin-bottom:24px; }
  .stat-strip{ padding-top:16px; gap:24px; margin-bottom:16px; }
}

@media (max-width:520px){
  .hero-inner{ padding:24px 20px 26px; }
  .hero-title{ font-size:1.7rem; }
  .stat-strip{ gap:20px; row-gap:16px; }
}

/* ---------- city ticker ---------- */
.ticker{
  border-bottom:1px solid var(--border);
  padding:20px 0; margin-top:32px;
  overflow:hidden;
}
.ticker-track{
  display:flex; align-items:center; gap:40px;
  width:max-content;
  animation:tickerMove 44s linear infinite;
}
.ticker:hover .ticker-track{ animation-play-state:paused; }
.ticker .city{
  font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--muted-foreground); white-space:nowrap;
}
.tick-sq{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.tick-sq.c1{ background:var(--primary); }
.tick-sq.c2{ background:var(--teal); }
.tick-sq.c3{ background:var(--secondary); }
.tick-sq.c4{ background:var(--primary-light); }
@keyframes tickerMove{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .ticker-track{ animation:none; }
}

/* ---------- listings teaser band ---------- */
#skelbimai-teaser{
  background-color:var(--card);
  background-image:radial-gradient(rgba(14,20,43,0.05) 1px, transparent 1px);
  background-size:22px 22px;
}

/* ---------- property type cards ---------- */
.type-cards{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  margin-top:48px;
}
.type-card{
  position:relative; display:block; overflow:hidden;
  border-radius:var(--radius); text-decoration:none;
  aspect-ratio:4/5;
}
.type-card img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition:transform 0.4s ease;
}
.type-card:hover img{ transform:scale(1.05); }
.type-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,15,32,0.82) 0%, rgba(10,15,32,0.12) 45%, transparent 70%);
}
.type-card-label{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2;
  color:#fff; font-weight:700; font-size:1rem; line-height:1.3;
}
.type-card-label small{
  display:block; font-family:var(--font-mono); font-weight:400;
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:#c3cbe2; margin-top:4px;
}
@media (max-width:960px){ .type-cards{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .type-cards{ grid-template-columns:1fr; } .type-card{ aspect-ratio:3/2; } }

/* ---------- quotes teaser ---------- */
.quotes-teaser{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:960px){ .quotes-teaser{ grid-template-columns:1fr; } }