/* =========================================================
   Garaje XXL — layout reconstruit dupa garajexxl_site.jpg
   Referinta design: 1440 px latime, margine laterala 40 px
   Elementele decorative (logo header, filigrane, banda albastra)
   sunt exprimate procentual, ca sa se scaleze cu latimea ecranului.
   ========================================================= */

:root{
  --blue:        #00398C;  /* background */
  --blue-header: #1684FF;  /* banda header */
  --blue-row:    #1584FF;  /* banda + border randuri tabel */
  --orange:      #FF8F2D;  /* buton "Vezi harta" / fundal "Vedere 360" */

  --gutter: 40px;          /* margine laterala */
  --pad:    52px;          /* padding interior sectiuni */

  --fs-title:   32px;      /* Roboto Bold  — titluri sectiuni */
  --fs-space:   29px;      /* Roboto Bold  — "Spatiu depozitare 37 m2" */
  --fs-table:   20px;      /* Roboto Bold  — tabel */
  --fs-body:    14px;      /* Roboto Regular / Bold — text curent */

  --nav-size: 52px;        /* cerc sageata navigare */

  /* proportiile header-ului, raportate la latimea coloanei de continut */
  --bar-ratio: 1360/105;   /* 105 px la 1360 px */
  --logo-pct:  18.97%;     /* 258 px la 1360 px */
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  padding-inline:var(--gutter);   /* margine laterala 40px */
  background:var(--blue);
  font-family:"Roboto","Helvetica Neue",Arial,sans-serif;
  font-size:var(--fs-body);
  color:#000;
  overflow-x:hidden;
}

/* umbra care intuneca partea de sus a fundalului */
body::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:2234px;
  background:url("../images/background_shadow.png") no-repeat top center;
  background-size:100% 2234px;
  pointer-events:none;
  z-index:0;
}

body > *{ position:relative; z-index:1; }

img{ max-width:100%; height:auto; display:block; }

h2,h3,p,figure,table{ margin:0; }

a{ color:inherit; }

/* coloana de continut: 1360 px, centrata intre marginile laterale */
.wrap{
  max-width:1360px;
  margin-inline:auto;
}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:#fff;color:#000;padding:10px 16px;font-weight:700;
}
.skip-link:focus{ left:8px; top:8px; }

:where(a,button):focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{ position:relative; z-index:5; }   /* logo-ul depaseste banda albastra */

.header-inner{ position:relative; }

.header-bar{
  position:relative;
  aspect-ratio:var(--bar-ratio);
  min-height:44px;
  background:var(--blue-header);
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:0 2.28% 1.32%;          /* 31px / 18px la 1360px */
}

/* lumina difuza din header (header_effect.png) */
/*.header-effect{
  position:absolute;
  top:0; right:-1.69%;
  margin-top:-2.21%;
  width:68.01%;                   
  aspect-ratio:925/402;
  background:url("../images/header_effect.png") no-repeat center/100% 100%;
  pointer-events:none;
}*/
.header-effect{
	display:none;
}
/* filigran logo in header (logo_background_top.png) */
/*.header-watermark{
  position:absolute;
  top:0; right:-4.93%;
  margin-top:-1.69%;
  width:41.99%;                  
  aspect-ratio:571/182;
  background:url("../images/logo_background_top.png") no-repeat center/100% 100%;
  pointer-events:none;
}*/
.header-watermark{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
  background:url("../images/headerBackground.png") no-repeat top right;
  pointer-events:none;
  background-size:cover;
}

.header-address{
  position:relative;
  font-size:var(--fs-body);
  line-height:1;
  color:#000;
  white-space:nowrap;
}
.header-address a{ text-decoration:none; }
.header-address a:hover{ text-decoration:underline; }

.logo{
  position:absolute;
  left:0;
  top:0;
  width:var(--logo-pct);
  display:block;
  z-index:2;
}
.logo img{ width:100%; height:auto; }

/* =========================================================
   SLIDER
   ========================================================= */
.slider{
  position:relative;
  aspect-ratio:1360/747;
  overflow:hidden;
  background:#000;
  touch-action:pan-y;
}

.slides{
  display:flex;
  height:100%;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}

.slide{ flex:0 0 100%; height:100%; }

/* decupajul vertical din design (imaginea este ancorata aproape de marginea de sus) */
.slide img{ width:100%; height:100%; object-fit:cover; object-position:center 3%; }

.slider-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:var(--nav-size);
  height:var(--nav-size);
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.8);
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s;
}
.slider-nav:hover{ background:rgba(0,0,0,.95); }
.slider-prev{ left:28px; }
.slider-next{ right:28px; }

.slider-nav svg{
  width:12px;
  height:21px;                     /* dimensiune sageata navigare */
  fill:none;
  stroke:#fff;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* =========================================================
   LOCALIZARE
   ========================================================= */
.localizare{
  position:relative;
  background:var(--blue);
  min-height:109px;
  padding-block:18px 12px;
  padding-inline:var(--pad) 44px;
  color:#fff;
}

.localizare h2{
  font-size:var(--fs-title);
  font-weight:700;
  line-height:1;
  color:#fff;
}

.localizare p{
  margin-top:12px;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1;
  color:#fff;
}
.localizare p a{ text-decoration:none; }
.localizare p a:hover{ text-decoration:underline; }

.btn-map{
  position:absolute;
  right:44px;
  top:50%;
  transform:translateY(-50%);
  width:297px;
  height:59px;
  border-radius:999px;
  background:var(--orange);
  color:#000;
  font-size:var(--fs-body);
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:filter .2s;
}
.btn-map:hover{ filter:brightness(1.06); }

/* =========================================================
   PANOU ALB — Facilitati / Info Spatiu
   ========================================================= */
.panel{
  background:#fff;
  padding-block:19px 90px;
  padding-inline:var(--pad);
}

.section-title{
  font-size:var(--fs-title);
  font-weight:700;
  line-height:1;
  color:#000;
}

/* ---- iconite ---- */
.features{
  list-style:none;
  margin:60px auto 0;
  padding:0;
  width:873px;          /* aceeasi latime cu linia de sub iconite */
  max-width:100%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
}

.feature{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.feature img{
  width:107px;
  height:107px;
  max-width:100%;
}
.feature p{
  margin-top:27px;
  font-size:var(--fs-body);
  font-weight:700;
  line-height:17px;
  color:#000;
}

.rule{
  width:873px;
  max-width:100%;
  height:4px;
  margin:52px auto 0;
  border:0;
  background:var(--blue);
}

.rule + .section-title{ margin-top:55px; }

/* ---- schita spatiu ---- */
.size-figure{
  /* marginile negative reproduc suprapunerea din design
     (imaginea are spatiu alb generos sus si jos) */
  margin:-1.4% auto -5.5%;
  width:1147px;
  max-width:100%;
}

/* desenate peste marginea alba a schitei, trasa in sus prin margin negativ */
.section-title,
.space-title,
.spec{ position:relative; z-index:1; }

.space-title{
  font-size:var(--fs-space);
  font-weight:700;
  line-height:1;
  color:#000;
  margin-left:63px;   /* aliniat cu textul primei coloane din tabel */
}

/* ---- tabel: doua coloane independente, asezate alaturat ---- */
.spec{
  margin-top:23px;
  margin-left:50px;
  width:584px;
  max-width:100%;
  display:flex;
  align-items:flex-start;
}

.spec-col{
  border-collapse:collapse;
  table-layout:fixed;
  font-size:var(--fs-table);
  font-weight:700;
}
.spec-col:first-child{ flex:0 0 229px; }
.spec-col:last-child { flex:1 1 auto; min-width:0; }

.spec-col th,
.spec-col td{
  text-align:left;
  padding:0 0 0 13px;
  height:32px;
  vertical-align:middle;
}

.spec-col thead th{
  height:29px;
  background:var(--blue-row);
  color:#fff;
  font-weight:700;
}
.spec-col:first-child thead th{ border-radius:6px 0 0 6px; }
.spec-col:last-child  thead th{ border-radius:0 6px 6px 0; }

.spec-col tbody tr + tr td{ border-top:1px solid var(--blue-row); }
.spec-col tbody td{ color:#000; }
.spec-col tbody tr:first-child td{ height:34px; }

/* =========================================================
   VEDERE 360
   ========================================================= */
.view360{
  background:var(--orange);
  padding-block:30px 49px;
  padding-inline:28px;
}

.view360 h2{
  margin-left:24px;
  font-size:var(--fs-title);
  font-weight:700;
  line-height:1;
  color:#000;
}
.view360 h2 sup{ font-size:.55em; vertical-align:.75em; }

.view360-media{
  position:relative;
  width:100%;
  margin-top:33px;
  background:#000;
  aspect-ratio:1302/824;
  overflow:hidden;
}
.view360-media > img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* butonul acopera toata imaginea; el poarta si voalul intunecat,
   ca sa dispara odata cu el cand porneste tur-ul */
.view360-start{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.view360-start::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  transition:background .25s;
}
.view360-start:hover::before{ background:rgba(0,0,0,.42); }

.view360-badge{
  position:relative;
  z-index:1;
  width:272px;
  max-width:60%;
  pointer-events:none;
}

/* dupa click: tur-ul 360 ocupa tot blocul */
.view360-media iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  z-index:3;
}
.view360-media.is-live > img{ display:none; }

/* =========================================================
   FILM PREZENTARE + FOOTER
   ========================================================= */
.bottom{
  position:relative;
  overflow:hidden;
  /* full-bleed: filigranul de jos ajunge pana la marginile ecranului */
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  padding-bottom:171px;
}

/* Filigran logo (logo_background.png), scalat dupa latimea ecranului. */
.bottom-watermark{
  position:absolute;
  top:0; left:0;
  z-index:0;
  width:100%;
  aspect-ratio:1403/1098;
  margin-top:-7.06%;
  background:url("../images/logo_background.png") no-repeat 0 0/100% 100%;
  pointer-events:none;
}
/* Exportul din PSD are randul de text al footer-ului "ars" in imagine;
   randul acela exista ca text HTML, asa ca il acoperim aici. */
.bottom-watermark::after{
  content:"";
  position:absolute;
  left:67.4%; top:91.6%;
  width:30%; height:2.6%;
  background:var(--blue);
}

.film,
.site-footer{ position:relative; z-index:1; }

.film{ padding-top:92px; }

/* aceeasi latime cu blocul "Vedere 360" */
.video{
  position:relative;
  width:calc(100% - 56px);
  margin-inline:auto;
  aspect-ratio:1296/763;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.btn-film{
  width:377px;
  height:117px;
  max-width:80%;
  border:2px solid #fff;
  border-radius:999px;
  background:transparent;
  color:#fff;
  font-family:inherit;
  font-size:var(--fs-title);
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition:background .25s,color .25s;
}
.btn-film:hover{ background:#fff; color:#000; }

.site-footer{
  margin-top:45px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-inline:24px;
  color:#fff;
}
.footer-logo{ width:149px; flex:none; }

.site-footer p{
  margin-top:11px;
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.4;
  text-align:right;
}
.site-footer a{ text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* =========================================================
   LIGHTBOX (film de prezentare)
   ========================================================= */
.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 24px 24px;
  background:rgba(0,0,0,.9);
  animation:lb-in .2s ease-out;
}
@keyframes lb-in{ from{ opacity:0 } to{ opacity:1 } }

.lightbox-frame{
  position:relative;
  width:min(1100px,100%);
  aspect-ratio:16/9;
  background:#000;
}
.lightbox-frame iframe,
.lightbox-frame video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.lightbox-note{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  padding:24px;
  text-align:center;
  color:#fff;
  font-size:18px;
  line-height:1.5;
  border:2px solid rgba(255,255,255,.35);
}

.lightbox-close{
  position:absolute;
  top:-48px; right:0;
  width:40px; height:40px;
  padding:0;
  border:2px solid #fff;
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-size:20px;
  line-height:1;
  cursor:pointer;
  transition:background .2s,color .2s;
}
.lightbox-close:hover{ background:#fff; color:#000; }

body.lb-open{ overflow:hidden; }


.whatsapp-button {
	position: fixed;
	bottom: 20px; 
	right: 20px; 
	background-color: #25d366;
	border-radius: 50%;
	padding: 5px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease;
	z-index:3;
}

.whatsapp-button:hover {
	background-color: #128c7e;
}

.whatsapp-button img {
	width: 35px;
	height: 35px;
}
.phoneAppButton {
	position: fixed;
	bottom: 20px; 
	left: 20px; 
	background-color: #25d366;
	border-radius: 50%;
	padding: 5px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	transition: background-color 0.3s ease;
	z-index:3;
}

.phoneAppButton:hover {
	background-color: #128c7e;
}

.phoneAppButton img {
	width: 35px;
	height: 35px;
}
.setNewRowOnMb{
	display:none;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1200px){
  :root{ --pad:36px; }
  .space-title,
  .spec{ margin-left:0; }
  .spec-col:first-child{ flex:0 0 42%; }
}

/* --- tablete --- */
@media (max-width:1024px){
  :root{
    --gutter:24px;
    --pad:32px;
    --fs-title:28px;
    --fs-space:24px;
    --fs-table:17px;
    --nav-size:44px;
    --bar-ratio:1000/89.5;
    --logo-pct:22%;
  }

  .slider-prev{ left:16px; }
  .slider-next{ right:16px; }
  .slider-nav svg{ height:18px; width:10px; }

  .localizare{ min-height:0; padding-block:24px; }
  .btn-map{ width:250px; height:52px; right:var(--pad); }

  .panel{ padding-block:32px 56px; }
  .features{ margin-top:44px; }
  .rule{ margin-top:36px; }
  .rule + .section-title{ margin-top:40px; }

  .spec-col th,.spec-col td{ padding-left:10px; }

  .view360{ padding-block:24px; padding-inline:20px; }
  .view360 h2{ margin-left:0; }
  .view360-media{ margin-top:20px; }

  .bottom{ padding-bottom:80px; }
  .film{ padding-top:56px; }
  .video{ width:calc(100% - 0px); }
  .btn-film{ width:300px; height:92px; font-size:26px; }
  .site-footer{ margin-top:32px; padding-inline:20px; }
  .footer-logo{ width:120px; }
}

/* --- telefoane mari / tablete mici --- */
@media (max-width:820px){
  .localizare{ padding-block:22px; }
  .btn-map{
    position:static;
    transform:none;
    margin-top:20px;
    width:100%;
    max-width:297px;
  }

  .features{
    grid-template-columns:repeat(3,1fr);
    row-gap:34px;
  }

  .size-figure{ margin-block:8px; }
  .space-title{ margin-top:24px; }
}

/* --- telefoane --- */
@media (max-width:610px){
	  .spec-col thead th{ border-radius:6px!important; }
}
@media (max-width:600px){
  :root{
    --gutter:16px;
    --pad:20px;
    --fs-title:22px;
    --fs-space:19px;
    --fs-table:14px;
    --fs-body:13px;
    --nav-size:38px;
    --bar-ratio:1000/138;
    --logo-pct:34%;
  }

  /* pastram loc pentru logo, ca adresa sa nu intre sub el */
  .header-bar{ padding-left:calc(var(--logo-pct) + 10px); }
  .header-address{
    font-size:10px;
    white-space:normal;
    text-align:right;
    line-height:1.3;
  }

  .slider{ aspect-ratio:4/3; }
  .slider-prev{ left:10px; }
  .slider-next{ right:10px; }
  .slider-nav svg{ height:15px; width:9px; }

  .panel{ padding-block:26px 40px; }

  /* cate o facilitate pe rand: iconita stanga, text dreapta */
  .features{
    grid-template-columns:1fr;
    row-gap:22px;
    width:100%;
  }
  .feature{
    flex-direction:row;
    align-items:center;
    text-align:left;
    gap:18px;
  }
  .feature img{ width:72px; height:72px; flex:none; }
  .feature p{ margin-top:0; line-height:1.3; }
  .feature br{ display:none; }

  .rule{ height:3px; margin-top:30px; }

  /* cele doua coloane ale tabelului trec una sub alta */
  .spec{ flex-direction:column; width:100%; }
  .spec-col{ width:100%; }
  .spec-col:first-child{ flex:0 0 auto; margin-bottom:20px; }
  .spec-col:last-child{ flex:0 0 auto;  }
  .spec-col thead th{ border-radius:6px; height:auto; padding:7px 10px; }
  .spec-col th,.spec-col td{ height:auto; padding:9px 10px; }
  .spec-col tbody tr:first-child td{ height:auto; }

  .view360 h2 sup{ vertical-align:.6em; }
  

  .btn-film{ width:220px; height:64px; font-size:19px; }

  .bottom{ padding-bottom:48px; }
  .film{ padding-top:36px; }

  .site-footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:16px;
    padding-inline:0;
  }
  .site-footer p{ margin-top:0; text-align:center; }
  .footer-logo{ width:96px; }

  .lightbox{ padding:56px 12px 12px; }
  
  .hideOnMb{
	  display:none;
	  clear:both;
  }
  .setNewRowOnMb{
	  display:block;
  }
}

@media (prefers-reduced-motion:reduce){
  .slides{ transition:none; }
  .lightbox{ animation:none; }
}