/* public/css/fm/route-alugue.css
 *
 * Layout das 8 sections do /alugue-nosso-espaco reconstruído (fatia 3). React-pura
 * sobre o PageShell, composta dos oficiais (fm-card, fm-accordion, fm-button) +
 * Carousel. Só layout aqui. Sobreposição assinatura (radius + margin negativo).
 */

/* —— container interno comum —— */
.fm-alugue-inner {
  box-sizing: border-box;
  max-width: var(--fm-max-width);
  margin: 0 auto;
  /* REGRA ÚNICA das transições: cada section sobe -radius (overlap), então a próxima
     "come" o padding por um raio. Por isso TOPO e FUNDO somam o raio: o conteúdo fica
     sempre space-16 de folga do topo arredondado E do início da próxima section (não
     cola nem é coberto). Laterais generosas (não colar nas bordas). */
  padding: calc(var(--fm-radius-screen) + var(--fm-space-16)) clamp(1.5rem, 5vw, 5rem)
    calc(var(--fm-radius-screen) + var(--fm-space-16));
}
.fm-alugue-center {
  text-align: center;
  margin-inline: auto;
}
h2.fm-alugue-center {
  max-width: 46rem;
}
.fm-alugue-lead {
  max-width: 50rem;
  margin: var(--fm-space-6) auto 0;
  color: var(--fm-gray-500);
}

/* —— hero escuro 100vh —— */
.fm-alugue-hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--fm-white);
  border-radius: var(--fm-radius-screen) var(--fm-radius-screen) 0 0;
  padding: var(--fm-space-16) var(--fm-space-6);
}
.fm-alugue-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fm-alugue-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1,18,34,0.5), rgba(1,18,34,0.82)); }
.fm-alugue-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--fm-space-4); max-width: 50rem; }
.fm-alugue-hero-inner .fm-display { color: var(--fm-white); }

/* —— sobreposição assinatura: cada section sobe pelo raio e revela a de trás nos
   cantos (= .section-*{radius + margin-top:-6rem}). Bg alterna white/surface p/ ler. —— */
.fm-alugue-infra,
.fm-alugue-sobre,
.fm-alugue-medida,
.fm-alugue-galeria,
.fm-alugue-3d,
.fm-alugue-clientes,
.fm-alugue-local {
  position: relative;
  margin-top: calc(-1 * var(--fm-radius-screen));
  border-top-left-radius: var(--fm-radius-screen);
  border-top-right-radius: var(--fm-radius-screen);
}
.fm-alugue-infra { z-index: 2; background: var(--fm-white); }
.fm-alugue-sobre { z-index: 3; background: var(--fm-surface); }
.fm-alugue-medida { z-index: 4; background: var(--fm-white); }
.fm-alugue-galeria { z-index: 5; background: var(--fm-surface); }
.fm-alugue-3d { z-index: 6; background: var(--fm-navy); color: var(--fm-white); }
.fm-alugue-clientes { z-index: 7; background: var(--fm-white); }
.fm-alugue-local { z-index: 8; background: var(--fm-surface); }

/* —— stats (mesma linguagem do hub: cards surface) —— */
.fm-alugue-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--fm-space-4);
  margin-top: var(--fm-space-12);
}
.fm-alugue-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--fm-space-1);
  text-align: center;
  background: var(--fm-white);
  border: 1px solid var(--fm-gray-100);
  border-radius: var(--fm-radius-lg);
  padding: var(--fm-space-12);
}
.fm-alugue-stat-num { font-family: var(--fm-font-display); font-size: 3rem; font-weight: 500; line-height: 1.2; color: var(--fm-navy); }
.fm-alugue-stat-label { font-family: var(--fm-font-body); text-transform: uppercase; letter-spacing: 1px; font-weight: 800; font-size: 1.125rem; color: var(--fm-navy); }
.fm-alugue-stat-sub { font-family: var(--fm-font-body); font-size: 0.9rem; color: var(--fm-gray-300); }

/* —— amenidades (ícone + label) —— */
.fm-alugue-amenidades-titulo { margin: var(--fm-space-16) auto var(--fm-space-6); color: var(--fm-gray-500); }
/* amenidades = card/icon (ícone + label JUNTOS no card, não legenda): superfície,
   ícone à esquerda + label, em grade de 2 colunas centrada e concisa. */
.fm-alugue-amenidades {
  list-style: none;
  margin: var(--fm-space-8) auto 0;
  padding: 0;
  max-width: 46rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--fm-space-4);
}
.fm-alugue-amenidade {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--fm-space-4);
  padding: var(--fm-space-4) var(--fm-space-6);
  background: var(--fm-surface);
  border-radius: var(--fm-radius-md);
  color: var(--fm-navy);
  font-weight: 600;
}
.fm-alugue-amenidade img {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex: none;
}

/* —— sobre: 2 cards de imagem —— */
.fm-alugue-sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fm-space-8);
  margin-top: var(--fm-space-12);
}
.fm-alugue-card-text { margin: 0; color: var(--fm-gray-500); }
/* hover igual aos cards do blog: levanta + sombra + leve zoom na imagem */
.fm-alugue-sobre-grid .fm-card {
  transition: transform 0.2s, box-shadow 0.2s;
}
.fm-alugue-sobre-grid .fm-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fm-shadow-md);
}
.fm-alugue-sobre-grid .fm-card .fm-card-media img {
  transition: transform 0.5s ease;
}
.fm-alugue-sobre-grid .fm-card:hover .fm-card-media img {
  transform: scale(1.03);
}
@media (max-width: 767px) { .fm-alugue-sobre-grid { grid-template-columns: 1fr; } }

/* —— espaço sob medida: imagem + accordion —— */
.fm-alugue-medida-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fm-space-16);
  align-items: center;
}
.fm-alugue-medida-img { width: 100%; height: 100%; max-height: 32rem; object-fit: cover; border-radius: var(--fm-radius-lg); }
.fm-alugue-medida-text { display: flex; flex-direction: column; gap: var(--fm-space-6); align-items: flex-start; }
.fm-alugue-medida-text .fm-alugue-lead { margin: 0; }
.fm-alugue-acc-texto { margin: 0; color: var(--fm-gray-500); }
@media (max-width: 767px) { .fm-alugue-medida-grid { grid-template-columns: 1fr; } }

/* —— galeria: carrossel —— */
.fm-alugue-galeria-cta { margin-top: var(--fm-space-8); }

/* —— carrossel (componente leve) —— */
.fm-carousel { position: relative; margin-top: var(--fm-space-12); }
.fm-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--fm-radius-lg);
  scrollbar-width: none;
}
.fm-carousel-track::-webkit-scrollbar { display: none; }
.fm-carousel-slide { flex: 0 0 100%; scroll-snap-align: start; }
.fm-carousel-slide img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.fm-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.9);
  color: var(--fm-navy);
  cursor: pointer;
  box-shadow: var(--fm-shadow-md);
}
.fm-carousel-arrow--prev { left: var(--fm-space-4); }
.fm-carousel-arrow--next { right: var(--fm-space-4); }
.fm-carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.fm-carousel-dots { display: flex; justify-content: center; gap: var(--fm-space-2); margin-top: var(--fm-space-6); }
.fm-carousel-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; border: 0; background: var(--fm-gray-100); cursor: pointer; padding: 0; }
.fm-carousel-dot.is-active { background: var(--fm-teal); width: 1.6rem; border-radius: 100rem; }

/* —— clientes: logos + depoimentos —— */
.fm-alugue-logos {
  list-style: none;
  margin: var(--fm-space-12) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--fm-space-12);
}
.fm-alugue-logos img { height: 2.25rem; width: auto; max-width: 8rem; object-fit: contain; filter: grayscale(1); opacity: 0.75; }
.fm-alugue-depoimentos {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 colunas (= original), porém mais estreitas */
  gap: var(--fm-space-6);
  max-width: 56rem;
  margin: var(--fm-space-16) auto 0;
}
.fm-alugue-depo { margin: 0; background: var(--fm-surface); border-radius: var(--fm-radius-lg); padding: var(--fm-space-8); }
.fm-alugue-depo-quote { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--fm-gray-700); font-style: italic; }
.fm-alugue-depo-autor { display: flex; flex-direction: column; margin-top: var(--fm-space-6); }
.fm-alugue-depo-nome { font-weight: 700; color: var(--fm-navy); }
.fm-alugue-depo-cargo { font-size: 0.9rem; color: var(--fm-gray-300); }
@media (max-width: 767px) { .fm-alugue-depoimentos { grid-template-columns: 1fr; } }

/* —— localização: topo em 2 colunas (texto à esquerda | mapa à direita); os 3 cards
   de números entram em LINHA abaixo (.fm-alugue-stats default = 3 colunas) —— */
.fm-alugue-local-top {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--fm-space-12);
  align-items: start;
  margin-top: var(--fm-space-12);
}
.fm-alugue-local-text {
  display: flex;
  flex-direction: column;
}
.fm-alugue-local-text .fm-alugue-lead {
  max-width: none;
  margin: var(--fm-space-4) 0 0;
}
/* números da localização: MESMAS classes dos stats de infra (.fm-alugue-stat-num/label/
   sub — Oswald 3rem navy), em 3 colunas dentro da coluna esquerda, SEM o card grande. */
.fm-alugue-local-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--fm-space-6);
  margin-top: var(--fm-space-8);
}
.fm-alugue-local-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (max-width: 479px) {
  .fm-alugue-local-stats { grid-template-columns: 1fr; }
}
.fm-alugue-mapa { border-radius: var(--fm-radius-lg); overflow: hidden; }
.fm-alugue-mapa iframe { display: block; width: 100%; height: 460px; border: 0; }
@media (max-width: 767px) {
  .fm-alugue-local-top { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .fm-alugue-stats { grid-template-columns: 1fr; }
}

/* —— modelo 3D: palco escuro com o <model-viewer> (após a galeria) —— */
.fm-alugue-3d h2 { color: var(--fm-white); }
.fm-alugue-3d .fm-alugue-lead { color: rgba(255, 255, 255, 0.72); }
.fm-alugue-3d-stage {
  position: relative;
  margin-top: var(--fm-space-12);
  border-radius: var(--fm-radius-lg);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 380px;
  background:
    radial-gradient(120% 130% at 50% 0%, rgba(255, 255, 255, 0.08), transparent 62%),
    rgba(255, 255, 255, 0.035);
}
.fm-alugue-3d-viewer {
  width: 100%;
  height: 100%;
  background-color: transparent;
  --poster-color: transparent;
  --progress-bar-color: var(--fm-teal);
}
.fm-alugue-3d-loading {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--fm-teal);
  animation: fm-3d-spin 0.8s linear infinite;
}
@keyframes fm-3d-spin { to { transform: rotate(360deg); } }
.fm-alugue-3d-hint { color: rgba(255, 255, 255, 0.55); margin-top: var(--fm-space-6); }
@media (max-width: 600px) {
  .fm-alugue-3d-stage { aspect-ratio: 3 / 4; min-height: 460px; }
}