/* ==========================================================================
   CASJ — Sobre | Tour Virtual (sobre-tour-virtual.html)
   Componente Figma: "Sobre | Tour Virtual" (2977:6343) — "Box Unidades" (2977:6607)
   ========================================================================== */

.tour-intro { padding-block: 64px; text-align: center; }

.unidades-box {
  background: #f4f7fc;
  border-radius: 16px;
  padding: 64px;
  margin-top: 40px;
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  text-align: left;
}

.unidades-tabs { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.unidade-tab {
  height: 58px;
  padding-inline: 20px;
  /* Largura fixa (não só um piso mínimo) igual à do maior rótulo — assim
     as 3 abas ficam do mesmo tamanho, em vez de cada uma se ajustar ao
     próprio texto. */
  width: 230px;
  flex: 0 0 auto;
  border: 2px solid #dbdbdb;
  border-radius: 12px;
  background: #f4f7fc;
  color: #62666b;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  text-align: center;
  transition: border-color .2s ease, color .2s ease;
}
.unidade-tab--active { border-color: var(--casj-azul); color: var(--casj-azul); }
.unidade-tab__arrow { display: none; }

/* Acordeão mobile (Figma "Tour Virtual" — variantes Aberto/Fechado): oculto
   no desktop/tablet, onde a versão original (abas + painel único,
   #unidadesTabs) continua valendo. Ver initUnidadesAccordion em main.js. */
.unidades-accordion { display: none; }

@media (max-width: 575.98px) {
  .unidades-tabs-wrap { display: none; }

  /* No frame mobile não existe a caixa cinza-azulada envolvendo tudo — as
     barras ficam direto sobre o fundo da seção. */
  /* Sem isso, o width: fit-content da regra base (pensado pro layout desktop,
     que precisa encolher em volta das abas) persiste aqui e faz a caixa
     encolher ao conteúdo mínimo em vez de ocupar a tela toda — é isso que
     gerava overflow horizontal e deixava os botões do acordeão com só
     ~230px de largura, centralizados, em vez de esticar full-bleed. */
  .unidades-box { background: transparent; padding: 0; margin-top: 24px; width: auto; }

  /* Sangra pra fora do padding lateral do .container-casj (1.5rem), deixando
     o acordeão colado nas bordas da tela — largura maior, como no frame. */
  .unidades-accordion { display: flex; flex-direction: column; gap: 14px; margin-inline: -1.5rem; }

  #unidadesAccordion .unidade-item { border-radius: 12px; overflow: hidden; }

  #unidadesAccordion .unidade-tab {
    position: relative;
    display: flex;
    align-items: center;
    /* Sem isso, o flex deixa o texto colado na esquerda (padding-inline
       assimétrico, 20px x 48px, por causa do espaço do ícone) — o
       text-align:center da regra base (pensado pra display:block) não
       tem efeito num container flex. */
    justify-content: center;
    width: 100%;
    min-width: 0;
    height: 60px;
    padding-block: 0;
    padding-inline: 20px 48px;
    border: 0;
    border-radius: 12px;
    background: var(--casj-azul);
    color: #fff;
    /* Sem isso, alguns navegadores (Safari/iOS em especial) aplicam o
       estilo nativo do <button> — inclusive um padding vertical próprio,
       que fazia o botão "fechado" ficar mais alto/inchado que o normal
       (o cabeçalho "aberto" não tinha esse padding extra por sorte de
       cascata, daí a diferença de tamanho entre os dois estados). */
    appearance: none;
    -webkit-appearance: none;
  }
  /* Precisa da mesma especificidade (ID) da regra base acima, senão o
     border-radius:12px de lá vence e os cantos de baixo nunca ficam retos
     quando o item está ativo. */
  #unidadesAccordion .unidade-item--active .unidade-tab { border-radius: 12px 12px 0 0; }

  #unidadesAccordion .unidade-tab__arrow {
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }

  /* Painel: fundo claro, cantos inferiores arredondados (o topo já fecha
     visualmente com a barra ativa acima) e texto centralizado, como no Figma
     — diferente do painel do desktop (#unidadesTabs), que é alinhado à
     esquerda em duas colunas (texto + foto). */
  .unidade-panel {
    display: none;
    background: #f4f7fc;
    border-radius: 0 0 12px 12px;
    padding: 20px;
    text-align: center;
  }
  .unidade-item--active .unidade-panel { display: block; }

  .unidade-panel .unidades-content__grade { font-size: 20px; margin-bottom: 16px; }

  .unidade-panel .unidade-contato {
    display: block;
    margin-bottom: 14px;
  }
  .unidade-panel .unidade-contato:last-child { margin-bottom: 0; }
  .unidade-panel .unidade-contato strong {
    margin-bottom: 4px;
  }
  .unidade-panel .unidade-contato strong i {
    color: var(--casj-azul);
    margin-right: 4px;
  }
  .unidade-panel .unidade-contato span { font-size: 16px; }
}

.unidades-content {
  display: flex;
  align-items: center;
  gap: 45px;
  margin-top: 64px;
  flex-wrap: wrap;
  /* Largura fixa (mesma lógica do .unidade-tab acima): sem isso, como
     .unidades-box é width:fit-content, a largura da foto varia conforme o
     tamanho do texto de cada unidade (endereço/horário mudam de uma pra
     outra) — 628 (máximo da foto) + 479 (máximo do texto) + 45 (gap) =
     1152px, o maior valor possível hoje. */
  width: 1152px;
  max-width: 100%;
}
.unidades-content__info { flex: 1 1 420px; max-width: 479px; }
.unidades-content__grade {
  font-family: var(--font-display);
  font-weight: 600;
  color: #0b192c;
  font-size: 26px;
  margin-bottom: 32px;
}
.unidade-contato {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.unidade-contato__icon {
  flex-shrink: 0;
  width: 33px;
  height: 33px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--casj-azul);
  font-size: 26px;
}
.unidade-contato strong {
  display: block;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  color: #0b192c;
  font-size: 20px;
  margin-bottom: 2px;
}
.unidade-contato span { display: block; color: #737373; font-size: 18px; line-height: 1.45; }

.unidades-content__image {
  flex: 1 1 420px;
  max-width: 628px;
  aspect-ratio: 628 / 582;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: -8px 8px 10px 0 rgba(0,0,0,.1);
}
.unidades-content__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 991.98px) {
  .unidades-box { padding: 32px; }
  .unidades-content { margin-top: 40px; }
}
@media (max-width: 575.98px) {
  .unidades-content__image { aspect-ratio: 1 / 1; }
}