/* =====================================
   VL24 CORE — MAIN SYSTEM (2026)
   Clean, stable, scalable base
===================================== */


/* =====================
   RESET
===================== */

*,
*::before,
*::after{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
  overflow-y:auto;

  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color:#111;
}


/* =====================
   LAYOUT SYSTEM
===================== */

.container{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 24px;
}

/* full width sections */
.fullwidth{
  width:100%;
  max-width:none;
  padding-left:0;
  padding-right:0;
}

/* breakout from container */
.breakout{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}


/* =====================
   GENERIC SECTIONS
===================== */

.section,
.site-hero,
.section-services,
.site-works,
.vl24-works{
  padding:80px 0;
}

@media(max-width:768px){
  .section,
  .site-hero,
  .section-services,
  .site-works,
  .vl24-works{
    padding:50px 0;
  }
}


/* =====================
   GRIDS / CARDS
===================== */

/* SERVICES GRID FORCE (debug) */
.services-grid,
.vl24-services-grid,
.vl24-services .services-grid{
  display:grid !important;
  gap:40px !important;
}

/* AUTO */
.services-grid--auto,
.vl24-services-grid--auto{
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important;
}

/* 1/2/3/4/6 */
.services-grid--1, .vl24-services-grid--1{ grid-template-columns:1fr !important; }
.services-grid--2, .vl24-services-grid--2{ grid-template-columns:repeat(2,1fr) !important; }
.services-grid--3, .vl24-services-grid--3{ grid-template-columns:repeat(3,1fr) !important; }
.services-grid--4, .vl24-services-grid--4{ grid-template-columns:repeat(4,1fr) !important; }
.services-grid--6, .vl24-services-grid--6{ grid-template-columns:repeat(6,1fr) !important; }

@media(max-width:1200px){
  .services-grid--6, .vl24-services-grid--6{ grid-template-columns:repeat(3,1fr) !important; }
}
@media(max-width:1024px){
  .services-grid--6, .vl24-services-grid--6,
  .services-grid--4, .vl24-services-grid--4,
  .services-grid--3, .vl24-services-grid--3{
    grid-template-columns:repeat(2,1fr) !important;
  }
}
@media(max-width:640px){
  .services-grid,
  .vl24-services-grid{
    grid-template-columns:1fr !important;
  }
}


/* cards */

.service-card,
.work-card,
.vl24-work-card{
  background:#fff;
  border-radius:14px;
  padding:20px;

  box-shadow:0 6px 24px rgba(0,0,0,.06);

  transition:.25s ease;
}

.work-card{
  overflow:hidden;
}

.vl24-work-card:hover{
  transform:translateY(-4px);
}

.vl24-work-card img{
  width:100%;
  border-radius:10px;
  margin-bottom:12px;
}


/* =====================
   WORKS IMAGE
===================== */

.work-img{
  height:200px;
  background-size:cover;
  background-position:center;
}

.work-body{
  padding:20px;
}

.work-link{
  display:inline-block;
  margin-top:12px;

  color:#2563eb;
  font-weight:600;
}


/* =====================
   HERO CINEMATIC CORE
===================== */

.hero-cinematic{
  position:relative;

  width:100%;
  height:100vh;
  min-height:100vh;

  overflow:hidden;
  color:#fff;

  perspective:1200px;
}


/* SLIDES */

.hero-slides{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  overflow:hidden;
  z-index:0;

  will-change:transform;
}

.hero-slide{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:0;
  z-index:0;

  transform:scale(1.15);

  transition:
    opacity 1.2s ease,
    transform 8s cubic-bezier(.2,.8,.2,1);

  will-change:opacity, transform;

  backface-visibility:hidden;
  pointer-events:none;
}

.hero-slide.active{
  opacity:1;
  z-index:2;
}


/* =====================
   HERO MOTION PRESETS
===================== */

.motion-a{
  transform:scale(1.25) rotateY(3deg) rotateX(-2deg) translateX(-4%) translateY(2%);
}

.motion-b{
  transform:scale(1.3) rotateY(-4deg) rotateX(2deg) translateX(5%) translateY(-3%);
}

.motion-c{
  transform:scale(1.2) rotateY(2deg) rotateX(3deg) translateX(-2%) translateY(-4%);
}

.motion-d{
  transform:scale(1.35) rotateY(-3deg) rotateX(-2deg) translateX(3%) translateY(3%);
}


/* =====================
   HERO UI LAYERS
===================== */

.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
}

.hero-content,
.hero-meta{
  position:relative;
  z-index:5;
}


/* =====================
   ENERGY BADGE
===================== */

.hero-energy-badge{
  position:absolute;

  top:120px;
  right:var(--hero-edge,24px);

  z-index:8;
  pointer-events:none;
}

.hero-energy-badge img{
  width:220px;
  max-width:22vw;

  height:auto;
  display:block;

  filter:
    drop-shadow(0 10px 30px rgba(255,185,90,.7))
    drop-shadow(0 0 20px rgba(255,160,60,.45));
}


/* =====================
   LIGHTBOX
===================== */

.vl24-lightbox{
  position:fixed;
  inset:0;

  background:rgba(10,15,25,.9);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  pointer-events:none;

  transition:.25s ease;
  z-index:9999;
}

.vl24-lightbox.active{
  opacity:1;
  pointer-events:auto;
}

.vl24-lightbox img{
  max-width:90%;
  max-height:90%;

  border-radius:12px;

  box-shadow:0 40px 120px rgba(0,0,0,.6);
}

.vl24-lightbox-close{
  position:absolute;
  top:28px;
  right:32px;

  font-size:28px;
  color:#fff;

  cursor:pointer;
  opacity:.85;
}

.vl24-lightbox-close:hover{
  opacity:1;
}


/* =====================
   PROJECT HOVER
===================== */

.project-image{
  position:relative;
  overflow:hidden;
}

.project-zoom-btn{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.55);

  color:#fff;
  font-weight:600;
  font-size:15px;

  opacity:0;
  transition:.25s;
  pointer-events:none;
}

.project-image:hover .project-zoom-btn{
  opacity:1;
}

@media(max-width:768px){
  .project-zoom-btn{
    opacity:1;
    background:rgba(0,0,0,.35);
  }
}


/* =====================
   SCROLL OFFSET
===================== */

section[id]{
  scroll-margin-top:100px;
}


/* =====================
   SPACER
===================== */

.hero-spacer{
  height:90vh;
}

/* =====================
   GLOBAL WIDTH SYSTEM
===================== */

:root{
  --site-max: 1440px;   /* max sisu laius (reguleeri siit) */
  --site-pad: 24px;     /* ääre padding */
}

/* kõik keskjoonel olevad alad */
.site-wrap{
  max-width: var(--site-max);
  margin: 0 auto;
  padding-left: var(--site-pad);
  padding-right: var(--site-pad);
  width: 100%;
}

/* fullwidth sektsioonid */
.fullwidth{
  width:100%;
  max-width:none;
  padding:0;
}

/* =====================================
   VL24 FEATURE STRIP — ONE LINE GOLD (OVERRIDE)
===================================== */

.feature-strip{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;

  padding:28px 0;

  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.08), transparent 70%),
    linear-gradient(180deg,#121214 0%,#0a0a0c 100%);
  position:relative;
}

/* top/bottom gold hairlines */
.feature-strip::before,
.feature-strip::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,175,55,.85), transparent);
  pointer-events:none;
}
.feature-strip::before{ top:0; }
.feature-strip::after{ bottom:0; }

.feature-strip__viewport{
  width:100%;
  overflow:hidden;
}

/* ✅ force single row + slow scroll */
.feature-strip__track{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;

  width:max-content !important;
  white-space:nowrap !important;

  gap:0 !important; /* divider controls spacing */
  will-change:transform;
}

/* ✅ each item = icon left + text right (ONE LINE) */
.feature-strip__item{
  flex:0 0 auto !important;
  display:inline-flex !important;
  flex-direction:row !important;     /* ⭐ icon left */
  align-items:center !important;
  justify-content:flex-start !important;

  width:auto !important;             /* ⭐ no clamp boxes */
  padding:0 26px !important;

  text-align:left !important;
  white-space:nowrap !important;
  position:relative;
}

/* ✅ divider between items */
.feature-strip__item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:22px;
  background:linear-gradient(180deg, transparent, rgba(212,175,55,.85), transparent);
  opacity:.9;
}

/* ICONS */
.feature-strip__svg{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:12px;
  flex:0 0 auto;
}

.feature-strip__svg svg{
  width:28px !important;
  height:28px !important;
  display:block;

  /* reliable gold (no gradient-id dependencies) */
  fill:none;
  stroke:#d4af37;
  stroke-width:2;
  filter:drop-shadow(0 0 8px rgba(212,175,55,.22));
}

/* if you use <img> icons */
.feature-strip__img{
  width:28px !important;
  height:auto !important;
  display:block !important;
  margin-right:12px !important;
  flex:0 0 auto !important;
}

/* TEXT — metallic gold like header */
.feature-strip__text{
  display:inline-block !important;
  white-space:nowrap !important;

  font-family:"Space Grotesk", sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.06em;

  background:linear-gradient(
    180deg,
    #fff3c4 0%,
    #e8c86a 22%,
    #d4af37 50%,
    #f6e7a3 74%,
    #b8962e 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  text-shadow:
    0 1px 0 rgba(255,255,255,.10),
    0 0 12px rgba(212,175,55,.18);
}

/* keep your pause on hover */
.feature-strip:hover .feature-strip__track{
  animation-play-state:paused;
}

/* scroll keyframes (seamless) */
@keyframes vl24FeatureScroll{
  from{ transform:translate3d(0,0,0); }
  to{ transform:translate3d(-50%,0,0); }
}

/* responsive */
@media (max-width:768px){
  .feature-strip{ padding:22px 0; }
  .feature-strip__item{ padding:0 18px !important; }
  .feature-strip__svg svg{ width:24px !important; height:24px !important; }
  .feature-strip__text{ font-size:13px; }
}

/* ===============================
   APARTMENT SINGLE — PREMIUM ADMIN UI
=============================== */

#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-body{
  padding:16px;
}

#vl24-builder .vl24-section[data-type="apartment_single"] h4{
  margin:18px 0 10px;
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#1e293b;
}

/* label + field spacing */
#vl24-builder .vl24-section[data-type="apartment_single"] p{
  margin:0 0 12px;
}

#vl24-builder .vl24-section[data-type="apartment_single"] label{
  display:block;
  font-weight:700;
  font-size:12px;
  margin:0 0 6px;
  color:#334155;
}

/* inputs spacing */
#vl24-builder .vl24-section[data-type="apartment_single"] .widefat,
#vl24-builder .vl24-section[data-type="apartment_single"] .small-text,
#vl24-builder .vl24-section[data-type="apartment_single"] textarea{
  margin:0;
}

#vl24-builder .vl24-section[data-type="apartment_single"] .widefat{
  margin-bottom:10px;
}

/* divider */
#vl24-builder .vl24-section[data-type="apartment_single"] hr{
  margin:18px 0;
  border:0;
  border-top:1px solid #e5e7eb;
}

/* image block (plan + etc) */
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-image{
  background:#fafafa;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px;
  margin:10px 0 12px;

  display:flex;
  flex-direction:column;
  gap:10px;
}

#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-image-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* remove X (plan block) */
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-image .vl24-remove-img{
  color:#dc2626;
  font-weight:800;
  cursor:pointer;
  padding:4px 8px;
  border-radius:8px;
}
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-image .vl24-remove-img:hover{
  background:#fee2e2;
}

/* DOCS + NEARBY lists -> cards */
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-docs,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-nearby{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:10px 0 14px;
}

#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-doc-item,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-nearby-item{
  background:#fafafa;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:14px 44px 14px 14px; /* paremale ruum X jaoks */
  position:relative;

  display:flex;
  flex-direction:column;
  gap:10px;
}

/* X nupp docs/nearby */
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-doc,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-nearby{
  position:absolute;
  top:10px;
  right:10px;

  width:26px;
  height:26px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  cursor:pointer;

  color:#dc2626;
  font-weight:900;
  line-height:1;
}

#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-doc:hover,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-nearby:hover{
  background:#fee2e2;
}

/* Gallery block */
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-gallery-preview{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(90px,1fr));
  gap:10px;
  margin:10px 0 12px;
}

#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-gallery-preview .vl24-thumb{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  border:1px solid #e5e7eb;
  background:#fff;
}

#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-gallery-preview img{
  width:100%;
  height:auto;
  display:block;
}

/* gallery X (kui kasutasime eraldi klassi) */
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-gallery-img{
  position:absolute;
  top:6px;
  right:6px;

  width:22px;
  height:22px;

  background:#dc2626;
  color:#fff;
  border-radius:50%;

  font-size:12px;
  line-height:22px;
  text-align:center;

  cursor:pointer;
  font-weight:900;
  opacity:.95;
}

#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-remove-gallery-img:hover{
  opacity:1;
  transform:scale(1.03);
}

/* Buttons spacing */
#vl24-builder .vl24-section[data-type="apartment_single"] .button{
  margin-top:6px;
}

/* Responsive grids inside this section (reuse your grid rules, but ensure spacing) */
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-grid2,
#vl24-builder .vl24-section[data-type="apartment_single"] .vl24-grid3{
  margin-bottom:10px;
}

@media (max-width:900px){
  #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-grid3{
    grid-template-columns:1fr;
  }
  #vl24-builder .vl24-section[data-type="apartment_single"] .vl24-grid2{
    grid-template-columns:1fr;
  }
}

:root{
  --header-h: 100px;
}

.hero{
  position:relative;
  overflow:hidden;
}

.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.hero-video--mobile{
  display:none;
}

@media (max-width:768px){

  .hero-video--desktop{
    display:none;
  }

  .hero-video--mobile{
    display:block;
  }

}

.hero-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:var(--hero-x) var(--hero-y);
  z-index:0;
}

.hero-overlay,
.hero-content{
  position:relative;
  z-index:2;
}