/* =========================
   NovoSalão – HOME (page CSS)
   Nota: aplica apenas na Home.
   Para garantir isolamento, coloca a classe `ns-home` no Container/Section principal da Home (Elementor).
   ========================= */

/* =========================
   Secção: cartões HTML (serviços) – classes usadas dentro do widget HTML
   HTML esperado:
   <section class="ns-services">
     <div class="ns-grid"> ... </div>
   </section>
   ========================= */

/* (Se usares .ns-title / .ns-subtitle noutros blocos da Home) */
body.home .ns-home .ns-title{
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}

body.home .ns-home .ns-subtitle{
  margin: 5% 5%;
}

/* Wrapper (opcional) */
body.home .ns-home .ns-services{
  width: 100%;
}

/* Grid dos cartões */
body.home .ns-home .ns-services .ns-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 25px;
  align-items: start;
}

/* Cartão */
body.home .ns-home .ns-services .ns-card{
  display: flex;
  flex-direction: column;
}

/* Media */
body.home .ns-home .ns-services .ns-media{
  display: block;
  border-radius: 14px;
  overflow: hidden;
}

body.home .ns-home .ns-services .ns-media img{
  width: 100%;
  height: clamp(150px, 22vw, 300px);
  object-fit: cover;
  display: block;
}

/* Texto */
body.home .ns-home .ns-services .ns-card-title{
  margin: 8px 0 0;
  font-size: 1.1rem;
}

body.home .ns-home .ns-services .ns-card-text{
  margin: 0;
  opacity: .78;
  max-width: 56ch;
}

body.home .ns-home .ns-services .ns-link{
  margin-top: 6px;
  text-decoration: none;
  font-weight: 600;
  color: #0f0f0f;
}

body.home .ns-home .ns-services .ns-link span{
  display: inline-block;
  transform: translateY(-1px);
}

/* Responsivo */
@media (max-width: 820px){
  body.home .ns-home .ns-services .ns-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body.home .ns-home .ns-services .ns-media img{
    height: 240px;
  }
}

/* =========================
   HOME – Tabs / Atalhos Hero
   Secção exclusiva para os atalhos Premium / Desportivos / SUV

   ========================= */

body.home .ns-home .ns-tabs-wrap{
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

body.home .ns-home .ns-tabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 760px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

body.home .ns-home .ns-tab{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 18px;
  text-decoration: none;
  color: #111;
  font: 600 15px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  transition: background .2s ease, color .2s ease;
}

/* remove border no último tab */
body.home .ns-home .ns-tab:last-child{
  border-right: 0;
}

/* hover / ativo */
body.home .ns-home .ns-tab:hover{
  background: #f6f7f8;
}

body.home .ns-home .ns-tab.is-active{
  background: rgba(0,153,122,.08);
  color: #0a7f67;
}

/* Responsive */
@media (max-width: 768px){
  body.home .ns-home .ns-tabs{
    width: 640px;
  }
  body.home .ns-home .ns-tab{
    min-height: 52px;
    font-size: 14px;
    padding: 12px 14px;
  }
}

@media (max-width: 520px){
  body.home .ns-home .ns-tabs-wrap{
    margin-top: -18px;
  }
  body.home .ns-home .ns-tabs{
    grid-template-columns: 1fr;
    border-radius: 12px;
  }
  body.home .ns-home .ns-tab{
    border-right: 0;
    border-bottom: 1px solid #e6e6e6;
  }
  body.home .ns-home .ns-tab:last-child{
    border-bottom: 0;
  }
}


/* =========================
   HOME – Tabs / Atalhos Hero (FIX FINAL)
   CSS aplicado exatamente como definido,
   isolado à Home para override seguro
   ========================= */

body.home .ns-home .ns-tabs-wrap{
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center; /* puxa para cima (sobrepõe ao hero) */
  padding: 0 16px;
}

body.home .ns-home .ns-tabs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 760px;
  max-width: 100%;
  background: white;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

body.home .ns-home .ns-tab{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 18px;
  text-decoration: none;
  color: #111;
  font: 600 15px/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2px;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

/* Estado ativo: manter fundo branco (evita o "meio verde" no Premium) */
body.home .ns-home .ns-tab.is-active{
  background: #fff;
  color: #111;
}


/* Hover: apenas muda a cor do texto */
body.home .ns-home .ns-tab:hover{
  color: #1CA081;
}

/* Hover consistente: sem fundo cinza em nenhuma tab */
body.home .ns-home .ns-tab:hover{
  background: #fff !important;
  color: #1CA081;
}

/* --- Responsive --- */
@media (max-width: 768px){
  body.home .ns-home .ns-tabs{
    width: 640px;
  }
  body.home .ns-home .ns-tab{
    min-height: 52px;
    font-size: 14px;
    padding: 12px 14px;
  }
}

@media (max-width: 520px){
  body.home .ns-home .ns-tabs-wrap{
    margin-top: -18px;
  }
  body.home .ns-home .ns-tabs{
    grid-template-columns: 1fr; /* empilha no telemóvel */
    border-radius: 10px;
  }
  body.home .ns-home .ns-tab{
    border-right: 0;
    border-bottom: 1px solid #e6e6e6;
    justify-content: center;
  }
}


/* =========================
   HOME – Listings (Mobile)
   DECISÃO FINAL: esconder ano / carroçaria
   Motivo: libertar espaço para o título no mobile
   ========================= */

@media (max-width: 500px){

  body.home .stm-elementor_listings_grid .listing-car-item .car-subtitle,
  body.home .listing-car-item .car-subtitle{
    display: none !important;
  }

}



/* =========================
   HOME – Listings (Mobile)
   FIX (v3): título nunca entra no preço (wrapper real: .car-meta-top)
   ========================= */

@media (max-width: 500px){

  /* O topo do card (título + preço) reserva sempre espaço para o preço */
  body.home .stm-elementor_listings_grid .listing-car-item .car-meta-top,
  body.home .listing-car-item .car-meta-top{
    position: relative !important;
    padding-right: 120px !important; /* espaço fixo para o bloco do preço */
  }

  /* O preço fica sempre no mesmo sítio, sem empurrar/colidir com o título */
  body.home .stm-elementor_listings_grid .listing-car-item .car-meta-top > .price,
  body.home .listing-car-item .car-meta-top > .price{
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    float: none !important;
    white-space: nowrap !important;
  }

  /* Títulos longos: quebram linhas e ficam "presos" à área da esquerda */
  body.home .stm-elementor_listings_grid .listing-car-item .car-meta-top h3,
  body.home .listing-car-item .car-meta-top h3,
  body.home .stm-elementor_listings_grid .listing-car-item .car-meta-top .car-title,
  body.home .listing-car-item .car-meta-top .car-title{
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

}