/* =======================================================================
   Single Imóvel — StyleKit
   - Usa tokens globais e aceita arredondamento padrão
   - Mapeia --radius-ui (fallback p/ --radius) em variáveis locais
   - Aplica overflow:hidden onde precisa cortar mídia
   ======================================================================= */

/* ---------- Root: normalização de tokens de raio ---------- */
[data-el="single.root"]{
  /* Derivados locais (evita depender de existir --radius-sm/md/lg) */
  --_rd-ui:  var(--radius-ui, var(--radius, 12px));
  --_rd-sm:  var(--radius-sm, var(--_rd-ui));
  --_rd-md:  var(--radius-md, var(--_rd-ui));
  --_rd-lg:  var(--radius-lg, calc(var(--_rd-ui) + 4px));
  --_rd-btn: var(--radius-btn, var(--_rd-ui));
}
/* =======================================================================
   HERO
   ======================================================================= */
   
[data-el="single.hero"]{
  position: relative;
  height: min(60vh, var(--hero-height-desktop, 520px));
  min-height: 320px;
  display: grid;
  align-items: end;
  margin: 0;
  color: #fff;

  /* Container pode ter raio, mas NÃO corta a mídia */
  border-radius: var(--_rd-lg);
  overflow: visible; /* <- antes: hidden */
}
@media (max-width: 900px){
  [data-el="single.hero"]{
    height: min(46vh, var(--hero-height-mobile, 340px));
    min-height: 260px;
  }
}

[data-el="single.hero"] .hero-media{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;

  /* Mídia SEM arredondamento (ignora o raio do container) */
  border-radius: 0 !important;
}

[data-el="single.hero"]::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:1;
  /* Gradiente continua com cantos arredondados para um acabamento melhor */
  border-radius: 0px !important;
  background: linear-gradient(to top,
    rgb(0 0 0 / .50) 0%,
    rgb(0 0 0 / .45) 38%,
    rgb(0 0 0 / .22) 68%,
    rgb(0 0 0 / 0) 100%);
}

[data-el="single.hero"] .hero-content{
  position: relative; z-index: 1;
  width: 1140px; max-width: 92%;
  margin: 0 auto 18px;
  padding: clamp(12px, 2vw, 20px) 0 clamp(18px, 3.6vh, 28px);
}
[data-el="single.hero"] .hero-region{
  font-weight: 700;
  font-size: clamp(.85rem, .8rem + .25vw, 1rem);
  color: color-mix(in srgb, var(--accent, #0a66ff) 88%, #ffffff 12%);
}
[data-el="single.hero"] .hero-title{
  margin: 6px 0 4px; color:#fff;
  font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); line-height: 1.1;
}
[data-el="single.hero"] .hero-sub{
  display: inline-flex; align-items: center; gap: .6rem;
  font-weight: 600; font-size: clamp(.95rem, .9rem + .3vw, 1.125rem);
  opacity: .98;
}
[data-el="single.hero"] .hero-amenity{ width:22px; height:22px; object-fit:contain; }

@media (max-width: 900px){
  [data-el="single.hero"] .hero-sub{ font-size:13px }
  [data-el="single.hero"] .hero-content{
    width:auto; padding:10px 20px; margin-right:30px;
  }
}


/* =======================================================================
   NAV
   ======================================================================= */
[data-el="single.nav"]{
  border-top: 1px solid var(--border, #e5e7eb);
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: var(--nav-bg, var(--surface, #f7f7f7));
  /* Se quiser nav com cantos, descomente:
  border-radius: var(--_rd-md);
  overflow: hidden;
  */
}
[data-el="single.nav"] ul{
  list-style: none; margin: 0 auto; padding: 0;
  width: min(1140px, 92%);
  display: flex; gap: 18px;
}
[data-el="single.nav"] a{
  position: relative; display: inline-block; padding: 12px 0;
  text-decoration: none; color: var(--page-text, #0f172a); font-weight: 600; white-space: nowrap;
}
[data-el="single.nav"] a:hover{ color: var(--accent, #0a66ff); }
[data-el="single.nav"] a::after{
  content:""; position:absolute; left:0; right:0; bottom:6px; height:3px;
  background: var(--accent, #0a66ff); border-radius: 3px;
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
[data-el="single.nav"] a.active::after{ transform: scaleX(1); }

@media (max-width: 900px){
  [data-el="single.nav"] ul{
    width:100%; padding:0 12px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  [data-el="single.nav"] ul::-webkit-scrollbar{ display:none; }
  [data-el="single.nav"] a{ font-size:.95rem; padding:10px 0; }
  [data-el="single.nav"] a::after{ bottom:4px; height:2px; }
}

/* =======================================================================
   SOBRE (texto + card)
   ======================================================================= */
[data-el="single.about"]{
  width: min(1140px, 92%);
  margin: 56px auto 60px;
  color: var(--page-text, #0f172a);
}
[data-el="single.about"] .about-grid{
  display: grid;
  grid-template-columns: 1fr min(380px, 38%);
  gap: 18px;
  align-items: start;
}

/* CTA dentro do texto */
[data-el="single.about"] .about-cta .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius: var(--_rd-btn);
  background: var(--accent, #0a66ff);
  color:#fff; text-decoration:none; font-weight:700;
}

/* Card lateral */
[data-el="single.about.card"]{
  position: sticky; top: 80px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--_rd-md);
  box-shadow: var(--shadow-soft, 0 4px 12px rgba(0,0,0,.08));
  padding: 14px;
  width: 100%;
  max-width: 100%;
  z-index: 2;
  overflow: hidden; /* bordas internas */
}
[data-el="single.about.card"] .card-chip{
  display:inline-block;
  background: var(--accent, #0a66ff); color:#fff; font-weight:800;
  border-radius: var(--_rd-sm);
  padding: 8px 14px; margin-bottom: 12px; font-size:.95rem;
}
[data-el="single.about.card"] .card-amenities{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
[data-el="single.about.card"] .card-amenities li{
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--_rd-sm);
  padding: 10px 8px;
  text-align:center; font-weight:600; font-size:.92rem;
  color: var(--page-text, #0f172a);
  overflow: hidden;
}
[data-el="single.about.card"] .card-amenities img{
  width:32px; height:32px; object-fit:contain; display:block; margin:0 auto 6px;
}
[data-el="single.about.card"] .card-placeholder{
  color: var(--subtext, var(--muted, #6b7280));
  padding: 8px 0 12px;
}
[data-el="single.about.card"] .card-wa{
  margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 14px; width:100%;
  border-radius: var(--_rd-btn);
  text-decoration:none; font-weight:600; box-sizing:border-box;
  border:2px solid var(--accent, #0a66ff);
  background:transparent; color: var(--accent, #0a66ff);
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s;
}
[data-el="single.about.card"] .card-wa:hover{
  background: var(--accent, #0a66ff); color:#fff;
}
[data-el="single.about.card"] .card-wa:active{ transform: translateY(1px); }
[data-el="single.about.card"] .card-wa-ic{ width:20px; height:20px; object-fit:contain; }

@media (max-width: 900px){
  [data-el="single.about"]{ margin: 28px auto 40px; }
  [data-el="single.about"] .about-grid{
    display:flex; flex-direction:column; gap:12px;
  }
  [data-el="single.about.card"]{
    order:-1; position:static; padding:12px; width:90%;
  }
  [data-el="single.about.card"] .card-chip{ padding:6px 10px; font-size:12px; margin-bottom:10px; }
  [data-el="single.about.card"] .card-amenities{ gap:8px; }
  [data-el="single.about.card"] .card-amenities li{ padding:8px 6px; font-size:12.5px; }
  [data-el="single.about.card"] .card-amenities img{ width:22px; height:22px; }
  [data-el="single.about.card"] .card-wa{ padding:10px 12px; font-size:14px; }
}

/* =======================================================================
   GALERIA
   ======================================================================= */
[data-el="single.gallery"]{ padding:20px 0; color: var(--page-text, #0f172a); }
[data-el="single.gallery"] .galeria-inner{ width:1140px; max-width:92%; margin:0 auto; }
[data-el="single.gallery"] .galeria-title{
  margin:0 0 18px; font-weight:800; font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
}
[data-el="single.gallery"] .media-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
[data-el="single.gallery"] .media-tabs .tab-btn{
  border:1px solid var(--border, #e5e7eb);
  background: var(--surface, #fff); color: var(--page-text, #0f172a);
  padding:8px 12px; border-radius: var(--_rd-btn);
  cursor:pointer; font-weight:600;
}
[data-el="single.gallery"] .media-tabs .tab-btn.active{
  background: var(--accent, #0a66ff); color:#fff; border-color: var(--accent, #0a66ff);
}
[data-el="single.gallery"] .media-container{
  margin-top:12px;
  border-radius: var(--_rd-lg);
  padding:8px;
  overflow: hidden; /* corta bordas do conteúdo ativo */
}
[data-el="single.gallery"] .media-carousel{ display:none; position:relative; }
[data-el="single.gallery"] .media-carousel.active{ display:block; }
[data-el="single.gallery"] .media-carousel .slide{ display:none; }
[data-el="single.gallery"] .media-carousel .slide.active{ display:block; }
[data-el="single.gallery"] .media-carousel .slide img{
  width:100%; height:auto; display:block;
  border-radius: inherit; /* herda do container arredondado */
}
[data-el="single.gallery"] .media-carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius: 50%; border:0;
  background: rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
[data-el="single.gallery"] .media-carousel .nav.prev{ left:8px; }
[data-el="single.gallery"] .media-carousel .nav.next{ right:8px; }
[data-el="single.gallery"] .media-carousel .nav img{ width:20px; height:20px; }
[data-el="single.gallery"] .carousel-dots{
  display:flex; justify-content:center; gap:8px; margin-top:10px;
}
[data-el="single.gallery"] .carousel-dots button{
  width:6px; height:6px; border:0; cursor:pointer; border-radius:999px;
  background: var(--border, #e5e7eb); transition: background .2s;
}
[data-el="single.gallery"] .carousel-dots button.active{ background: var(--accent, #0a66ff); }

@media (min-width: 901px){
  [data-el="single.gallery"] .media-container{ max-width: 820px; margin-top:20px; }
}

/* =======================================================================
   DIFERENCIAIS
   ======================================================================= */
[data-el="single.features"] .features-inner{
  width: min(1140px, 92%); margin: 100px auto;
}
[data-el="single.features"] h2{ margin:0 0 12px; }
[data-el="single.features"] .features-list{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px; list-style:none; margin:0; padding:0;
}
@media (max-width: 900px){
  [data-el="single.features"] .features-list{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
[data-el="single.features"] .features-item{
  display:flex; align-items:center; gap:8px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: var(--_rd-sm);
  padding:8px;
  overflow: hidden;
}
[data-el="single.features"] .features-item.is-hidden{ display:none; }
[data-el="single.features"] .features-item img{ width:32px; height:32px; object-fit:contain; }
[data-el="single.features"] .btn-toggle-features{
  margin-top:10px; padding:10px 14px; border-radius: var(--_rd-btn);
  border:1px solid var(--accent, #0a66ff); background:transparent;
  color: var(--accent, #0a66ff); font-weight:700; cursor:pointer;
}

/* =======================================================================
   LOCALIZAÇÃO
   ======================================================================= */
[data-el="single.location"] .loc-inner{
  width: min(1140px, 92%); margin: 80px auto;
  display:grid; grid-template-columns: 1.1fr .9fr; gap:18px;
}
@media (max-width: 900px){
  [data-el="single.location"] .loc-inner{ grid-template-columns:1fr; gap:16px; }
}
[data-el="single.location"] .loc-title{
  grid-column:1 / -1; margin:0 0 6px;
  font-weight:800; font-size: clamp(1.6rem, 1.2rem + 1vw, 2rem);
}
[data-el="single.location"] .loc-info{
  background: var(--surface, #fff);
  border:1px solid var(--border, #e5e7eb);
  border-radius: var(--_rd-md);
  padding:14px;
  overflow: hidden;
}
[data-el="single.location"] .loc-block{
  display:grid; grid-template-columns:44px 1fr; gap:10px;
  align-items:flex-start; margin:12px 0;
}
[data-el="single.location"] .loc-ic img{ width:36px; height:36px; object-fit:contain; display:block; }
[data-el="single.location"] .loc-label{ display:block; font-weight:800; }
[data-el="single.location"] .loc-address{ margin:6px 0 8px; }
[data-el="single.location"] .loc-how{
  display:block; font-size:.9rem; color: var(--subtext, var(--muted, #6b7280));
}
[data-el="single.location"] .loc-links{
  display:flex; gap:10px; margin-top:6px; flex-wrap:wrap;
}
[data-el="single.location"] .loc-links a{
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  background: var(--chip-bg, var(--surface, #fff)); color: var(--page-text, #0f172a);
  border-radius: var(--_rd-sm); padding:6px 10px;
  border:1px solid var(--border, #e5e7eb); font-weight:700; font-size:.95rem; line-height:1;
}
[data-el="single.location"] .loc-links a img{ width:25px; height:25px; }
@media (max-width: 900px){
  [data-el="single.location"] .loc-links a{ font-size:12px; padding:6px 8px; }
  [data-el="single.location"] .loc-ic img{ width:30px; height:30px; }
}

[data-el="single.location"] .loc-map .loc-map-inner{
  position:relative;
  border:1px solid var(--border, #e5e7eb);
  border-radius: var(--_rd-lg);
  overflow: hidden;
}
[data-el="single.location"] .loc-map iframe{
  width:100%; height:360px; border:0; display:block;
}
[data-el="single.location"] .loc-overlay{
  position:absolute; inset:0; display:grid; place-items:center;
  background: rgba(0,0,0,.45); color:#fff; font-weight:800; text-decoration:none;
  transition: background .2s ease;
}
[data-el="single.location"] .loc-overlay:hover{ background: rgba(0,0,0,.35); }
[data-el="single.location"] .loc-overlay.is-disabled{ pointer-events:none; }

/* =======================================================================
   REGIÃO
   ======================================================================= */
[data-el="single.region"]{ padding:80px 0; }
[data-el="single.region"] .region-inner{
  width:1140px; max-width:92%; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
}
[data-el="single.region"] .region-left img{
  width:100%; height:450px; display:block;
  border-radius: var(--_rd-lg); object-fit:cover;
}
[data-el="single.region"] .region-right h2{
  font-weight:800; margin-top:100px;
}
@media (max-width: 900px){
  [data-el="single.region"] .region-inner{ grid-template-columns:1fr; }
  [data-el="single.region"] .region-left img{ height:250px; }
  [data-el="single.region"] .region-right h2{ margin-top:20px; }
}

/* =======================================================================
   MODAL
   ======================================================================= */
[data-el="single.modal"][hidden]{ display:none !important; }
[data-el="single.modal"]{ position:fixed; inset:0; z-index:9999; }
[data-el="single.modal"] .modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.6); }
[data-el="single.modal"] .modal-dialog{
  position:relative; z-index:1;
  width:min(980px, 94vw); height:min(80vh, 680px);
  margin:6vh auto 0; background: var(--surface, #fff);
  border-radius: var(--_rd-lg);
  box-shadow: 0 12px 30px rgba(0,0,0,.45); padding:10px;
  display:flex; flex-direction:column;
  overflow: hidden; /* corta o vídeo dentro do modal */
}
[data-el="single.modal"] .modal-close{
  position:absolute; top:6px; right:10px;
  background:transparent; border:0; font-size:28px; line-height:1;
  cursor:pointer; color: var(--page-text, #0f172a);
}
[data-el="single.modal"] #video-holder{ flex:1; display:grid; place-items:center; }
[data-el="single.modal"] .vid-iframe{ width:100%; height:100%; border:0; border-radius: 10px; }
[data-el="single.modal"] .vid-file{ width:100%; height:100%; border-radius: 10px; background:#000; }

/* ====== Fix 1: Travar subtokens no raio global deste single ====== */
[data-el="single.root"]{
  /* todo mundo acompanha o --radius-ui */
  --radius-sm:  var(--radius-ui);
  --radius-md:  var(--radius-ui);
  --radius-lg:  var(--radius-ui);
  --radius-btn: var(--radius-ui);

  /* remove o offset de +4px do _rd-lg para 0px ser ZERO de verdade */
  --_rd-lg: var(--radius-lg, var(--_rd-ui));
}

/* ====== Fix 2: Setas da galeria deixam de ser “círculos fixos” ====== */
[data-el="single.gallery"] .media-carousel .nav{
  /* antes: 50% */
  border-radius: var(--_rd-btn);
}

/* ====== Fix 3: Garantir que botões/chips do card sigam o global ====== */
/* (reforça a intenção mesmo se algum CSS legado tentar sobrescrever) */
[data-el="single.about.card"] .card-wa,
[data-el="single.about.card"] .card-chip,
[data-el="single.features"] .btn-toggle-features{
  border-radius: var(--_rd-btn);
}

/* ====== (Opcional) Deixar os “dots” da galeria também seguirem o global
   Se quiser que até os pontinhos retinhos com 0px, descomente:

[data-el="single.gallery"] .carousel-dots button{
  border-radius: var(--_rd-sm);
}
*/