/* ==========================================================================
   CASA PIETRA — PLANTA + GALERIA DA CASA
   Figma node 6700:913 (desktop) e 6700:860 (mobile).

   São duas seções irmãs. No desktop elas dividem uma única imagem de fundo,
   por isso o agrupador .floorplan-group. No mobile não há fundo.
   ========================================================================== */

.floorplan-group {
  position: relative;
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   BLOCO DA PLANTA
   -------------------------------------------------------------------------- */

.floorplan {
  /* Mobile: 80px acima, nada abaixo — a galeria logo abaixo tem o próprio topo */
  padding-block: 80px 0;
}

.floorplan__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.floorplan__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}

.floorplan__eyebrow {
  margin: 0;
  color: var(--color-primary-shade-1);
  text-transform: uppercase;
}

.floorplan__title {
  margin: 0;
  color: var(--color-primary-shade-1);
}

.floorplan__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

/* --------------------------------------------------------------------------
   PAINÉIS DAS ABAS
   -------------------------------------------------------------------------- */

.floorplan__panels {
  width: 100%;
  margin-top: 8px;
}

.floorplan__panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Plantas (térreo e 1º pavimento) — clicáveis, abrem no lightbox */
.floorplan__zoom {
  display: block;
  width: 100%;
  cursor: pointer;
}

.floorplan__zoom img {
  width: 100%;
  height: auto;
  /* Proporção do PNG exportado (640x467), preservada em todos os tamanhos */
  aspect-ratio: 640 / 467;
  object-fit: contain;
}

.floorplan__zoom:focus-visible {
  outline: var(--border-width-md) solid var(--color-primary-shade-1);
  outline-offset: 3px;
}

.floorplan__tour-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.floorplan__tour-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   LISTA DE DIFERENCIAIS
   -------------------------------------------------------------------------- */

.floorplan__list {
  display: grid;
  /* [DESVIO] Não há artboard mobile desta aba. Em coluna única os 48px do
     desktop ficariam soltos demais, então aqui a linha respira 24px. */
  row-gap: 24px;
  width: 100%;
  margin: 0;
  padding: 0;
}

.floorplan__list li {
  display: flex;
  align-items: center;
  gap: 16px;
}

.floorplan__list img {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.floorplan__list span {
  color: var(--color-gray-900);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   TOUR VIRTUAL — placeholder
   [DESVIO] O Figma mostra um thumbnail do tour com botão de expandir, mas
   esse thumbnail não veio no handoff. Aqui fica a área reservada com aviso,
   para o time de dev encaixar o embed.
   -------------------------------------------------------------------------- */

.floorplan__tour {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  aspect-ratio: 640 / 358;
  padding: 24px;
  text-align: center;
  background-color: var(--color-gray-200);
  border: var(--border-width-default) dashed var(--color-gray-500);
  color: var(--color-gray-700);
}

.floorplan__tour-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 43px;
  height: 44px;
  /* gray-400 a 80%, como no Figma */
  background-color: rgb(191 193 188 / 0.8);
}

.floorplan__tour-icon img {
  width: 22px;
  height: 23px;
}

.floorplan__tour-aviso {
  max-width: 46ch;
}

.floorplan__tour-link {
  color: var(--color-primary-shade-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.floorplan__tour-link:focus-visible {
  outline: var(--border-width-md) solid var(--color-primary-shade-1);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   GALERIA DA CASA — variante da .gallery
   -------------------------------------------------------------------------- */

.gallery--house {
  padding-block: 80px;
}

/* Overlay diferente do da galeria de diferenciais: aqui o Figma usa branco a
   70%, lá cinza-100 a 80%. */
.gallery--house .gallery__media::after {
  background-color: rgb(255 255 255 / 0.7);
}

/* ==========================================================================
   LG — 1366px
   O layout em duas colunas precisa de ~1024px só para texto + planta, então a
   virada acompanha o resto do projeto. O fundo entra junto: ele faz parte da
   composição de desktop.
   ========================================================================== */
@media (min-width: 1366px) {
  .floorplan-group {
    background-image: image-set(
      url("../assets/images/img-background-floor-plan-lg.jpg") 1x,
      url("../assets/images/img-background-floor-plan-lg@2x.jpg") 2x
    );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .floorplan {
    /* 80 da seção + 80 do bloco interno = 160 acima; 80 + 48 de gap = 128 abaixo */
    padding-block: 160px 128px;
  }

  .floorplan__inner {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }

  .floorplan__content {
    /* Largura do parágrafo em Bodoni no Figma */
    flex: 0 0 352px;
    align-items: flex-start;
    text-align: left;
  }

  .floorplan__tabs {
    /* No desktop as abas encolhem para o conteúdo, em vez de esticar */
    grid-template-columns: repeat(2, fit-content(100%));
    justify-content: start;
    width: auto;
  }

  .floorplan__panels {
    flex: 1 1 auto;
    margin-top: 0;
    min-width: 0;
  }

  .floorplan__zoom {
    width: 640px;
    max-width: 100%;
    margin-inline: auto;
  }

  .floorplan__tour {
    width: 640px;
    max-width: 100%;
    margin-inline: auto;
  }

  /* Figma: duas colunas de 288px e 1fr, com 32px entre elas e 48px entre linhas */
  .floorplan__list {
    grid-template-columns: 288px minmax(0, 1fr);
    column-gap: 32px;
    row-gap: 48px;
  }

  .gallery--house {
    padding-block: 0 80px;
  }

  /* Figma: 32px entre os slides desta galeria (a de diferenciais usa 56px) */
  .gallery--house ul.gallery__track {
    gap: 32px;
  }
}

@media (min-width: 1920px) {
  .floorplan-group {
    background-image: image-set(
      url("../assets/images/img-background-floor-plan-xl.jpg") 1x,
      url("../assets/images/img-background-floor-plan-xl@2x.jpg") 2x
    );
  }
}