/* =========================================================
   Component — Tabs + Showcase (Seção 3)
   ========================================================= */

/* Stroke de 1px no topo da seção dos tabs — divisão entre as seções */
.tabs-section {
  border-block-start: 1px solid #D6D6D8;
}

.showcase__head {
  display: grid;
  gap: var(--space-5);
  margin-block-end: var(--space-6);
}

@media (min-width: 960px) {
  .showcase__head {
    /* coluna do título FIXA em 532px (fr não cresce até 532 ao lado de outra fr);
       a coluna do texto ocupa o restante. */
    grid-template-columns: 532px minmax(0, 1fr);
    align-items: end;            /* coluna direita alinhada à base, igual ao título */
    gap: var(--space-9);
  }
  .showcase__subtitle { justify-self: end; }   /* encosta à direita só no layout 2-col */
}

.showcase__title {
  font-size: var(--fs-2xl);     /* mesmo tamanho do título da seção de localização */
  font-weight: var(--fw-regular);
  max-width: 532px;             /* preenche a coluna de 532px */
  letter-spacing: -1px;
}

.showcase__subtitle {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  max-width: 508px;
  text-align: left;            /* texto alinhado à esquerda */
}

/* Tabs — barra segmentada (cores conforme protótipo Figma) */
.tabs {
  display: flex;
  gap: var(--space-2);
  background: #FAFAFA;
  border: 1px solid #F2F2F2;
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-block-end: var(--space-5);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__btn {
  flex: 1 1 0;
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-align: center;
  color: #455337;
  background: transparent;
  border-radius: var(--radius-sm);
  transition: background var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std);
  white-space: nowrap;
}

/* Mobile: scroll horizontal não é descoberto pelo usuário → grid 2×2.
   São 4 tabs, então todos ficam visíveis de uma vez, sem deslizar. */
@media (max-width: 600px) {
  .tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    overflow: visible;
  }
  .tabs__btn { padding-inline: var(--space-3); }
}

.tabs__btn[aria-selected="true"] {
  background: #AEB29B;
  color: #455337;
}

.tabs__btn:hover:not([aria-selected="true"]) {
  background: rgba(142, 153, 116, 0.12);
}

/* Showcase carousel */
.showcase__stage {
  position: relative;
  overflow: hidden;
}

.showcase__slides {
  display: flex;
  transition: transform var(--dur-slow) var(--ease-out);
  touch-action: pan-y;          /* permite scroll vertical; horizontal é o swipe */
  cursor: grab;
}
.showcase__slides:active { cursor: grabbing; }

.showcase__slide {
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  background: var(--color-night);
}

.showcase__slide img {
  width: 100%; height: 100%; object-fit: cover;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

/* Aba "Plantas" (carrossel / lightbox fechado): imagens são brancas →
   borda de 1px p/ dar limite. Usa border real (box-shadow inset some atrás
   do conteúdo do <img>). O lightbox não é afetado (usa .lightbox__img). */
.showcase__stage[data-type="plantas"] .showcase__slide img {
  border: 1px solid #D6D6D8;
  box-sizing: border-box;
}

/* Ancoragem pela base em TODAS as abas, exceto "Plantas".
   Em fachada/living/áreas o corte (cover) tira a base da imagem; ancorar embaixo
   preserva o térreo/piso. Em "Plantas" mantemos o enquadramento central (a planta
   precisa aparecer inteira, com a borda branca em volta). */
.showcase__stage:not([data-type="plantas"]) .showcase__slide img {
  object-position: bottom;
}

/* Legenda (nome do arquivo) sobre cada imagem — sobre gradiente preto→transparente,
   legível sem caixa. Padrão replicado do projeto Smart. O padding inferior maior
   mantém o texto acima da fileira de dots do carrossel. */
.showcase__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-7) var(--space-5) var(--space-6);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  color: var(--color-white);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;        /* não bloqueia o clique p/ ampliar (lightbox) */
  z-index: 1;
}

/* Aba "Plantas": fundo branco → legenda em fonte escura, sem gradiente/sombra */
.showcase__stage[data-type="plantas"] .showcase__caption {
  color: var(--color-ink);
  background: none;
  text-shadow: none;
}

/* Estado sem imagens cadastradas para o tipo */
.showcase__slide--empty {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,0.7);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--space-6);
}
.showcase__slide--empty img { cursor: default; }

.showcase__nav {
  position: absolute;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  color: var(--color-white);
  /* leve blur atrás da seta para dar contraste sobre a imagem */
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  opacity: 0.9;
  transition: opacity var(--dur-base) var(--ease-std),
              background var(--dur-base) var(--ease-std);
}
.showcase__nav:hover { opacity: 1; background: rgba(0, 0, 0, 0.45); }
.showcase__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
.showcase__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); }

/* Botão de tela cheia — surge no hover/foco sobre a galeria */
.showcase__expand {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  color: var(--color-white);
  border: 1px solid rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.25);
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity var(--dur-base) var(--ease-std),
              transform var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-std);
}
.showcase__expand:hover { background: rgba(0,0,0,0.45); }

.showcase__stage:hover .showcase__expand,
.showcase__stage:focus-within .showcase__expand {
  opacity: 1;
  transform: translateY(0);
}

/* Em telas de toque (sem hover) o botão fica sempre visível */
@media (hover: none) {
  .showcase__expand { opacity: 1; transform: none; }
}

.showcase__dots {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

.showcase__dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.5);
  transition: background var(--dur-base) var(--ease-std);
}
.showcase__dot[aria-current="true"] { background: var(--color-white); }

/* Aba "Plantas": as imagens têm fundo branco → dots escuros p/ contraste */
.showcase__stage[data-type="plantas"] .showcase__dot { background: rgba(0, 0, 0, 0.3); }
.showcase__stage[data-type="plantas"] .showcase__dot[aria-current="true"] { background: var(--color-ink); }