/* PT Academy — página "Instalações". Carrega depois do styles.css.

   A página é curta de propósito: o peso todo está no passeio virtual em
   4:3. Hero curto → passeio → lista de espaços → faixa de fecho. */

/* ---------- Hero ---------- */

/* Reaproveita o .hero da homepage, mais baixo: o passeio tem de se ver
   sem ser preciso muito scroll. */
.hero--instalacoes {
  height: 72dvh;
  min-height: 460px;
}

.hero__photo--rua {
  background-image: url('./assets/walkthrough/rua.webp');
}

/* ---------- Passeio virtual ---------- */

.passeio {
  padding: clamp(64px, 10vw, 120px) clamp(24px, 4vw, 48px);
  background: var(--color-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 5vw, 64px);
}

.passeio__cabeca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  max-width: 830px;
  text-align: center;
}

.passeio__titulo {
  margin: 0;
  font: 400 clamp(38px, 6vw, 96px)/0.95 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.passeio__titulo em {
  color: var(--color-red);
  font-style: normal;
}

.passeio__lead {
  margin: 0;
  max-width: 560px;
  color: #ccc;
  font: 400 17px/1.6 var(--font-body);
}

/* O passeio tem de caber inteiro no ecrã, por baixo do nav fixo, para se
   verem todos os botões ao mesmo tempo. A altura não se pode impor ao
   palco (partia o 4:3 ou punha barras pretas), por isso limita-se a
   largura a partir dela: 150px são o nav (96px) e folga. O mínimo de
   320px só pesa em ecrãs deitados muito baixos. */
.passeio__moldura {
  margin: 0;
  width: 100%;
  max-width: min(1180px, max(320px, calc((100dvh - 150px) * 4 / 3)));
}

/* A tela é só moldura: borda, risca vermelha e cantos. Não leva o 4:3 —
   com a borda incluída a caixa de dentro deixava de o ser e o componente
   punha barras pretas dos lados. */
.passeio__tela {
  position: relative;
  background: #000;
  border: 1px solid var(--color-line);
  border-top: 3px solid var(--color-red);
}

/* O palco é onde o componente monta. Sem borda, exatamente 4:3: é esta
   caixa que o walkthrough.js mede, e as coordenadas de cada ponto são
   percentagens dela. O 4:3 fica também no CSS para a altura estar certa
   antes de o módulo correr (sem saltos) e sem JS.
   isolation: os z-index do componente ficam cá dentro e os cantos da
   moldura passam sempre por cima. */
.passeio__palco {
  width: 100%;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}

.passeio__sem-js {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.passeio__erro {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 24px;
  color: rgba(255, 255, 255, .55);
  font: 600 11px/1.6 var(--font-body);
  letter-spacing: .28em;
  text-align: center;
  text-transform: uppercase;
}

/* Cantos de visor: quatro cantos em L, a vermelho. Ficam entre a borda e
   os botões de margem do componente (a 22px), para não os tocarem. */
.passeio__canto {
  position: absolute;
  z-index: 1;
  width: 14px;
  height: 14px;
  border: 0 solid var(--color-red);
  pointer-events: none;
}
.passeio__canto--no { left: 8px;  top: 8px;    border-left-width: 2px;  border-top-width: 2px; }
.passeio__canto--ne { right: 8px; top: 8px;    border-right-width: 2px; border-top-width: 2px; }
.passeio__canto--so { left: 8px;  bottom: 8px; border-left-width: 2px;  border-bottom-width: 2px; }
.passeio__canto--se { right: 8px; bottom: 8px; border-right-width: 2px; border-bottom-width: 2px; }

/* ---------- Espaços ---------- */

.espacos {
  padding: clamp(64px, 10vw, 120px) clamp(24px, 4vw, 48px);
  background: var(--color-black-alt);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 64px);
}

.espacos__cabeca {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.espacos__titulo {
  margin: 0;
  max-width: 830px;
  font: 400 clamp(38px, 6vw, 96px)/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Quadro: linhas corridas de ponta a ponta, sem caixas. Número
   esbatido à esquerda, nome grande, localização à direita. */
.quadro {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

/* A segunda fila da grelha é a foto do espaço, fechada a 0fr. No hover
   passa a 1fr e a linha abre espaço para baixo; a transição de
   grid-template-rows é o que deixa animar até à altura real. */
.quadro__espaco {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 0fr;
  align-items: baseline;
  column-gap: clamp(16px, 3vw, 48px);
  padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 24px);
  border-bottom: 1px solid var(--color-line);
  transition:
    background-color .25s ease,
    grid-template-rows .55s cubic-bezier(.22, .61, .36, 1);
}
.quadro__espaco:hover {
  background: var(--color-maroon);
}

/* A risca vermelha da esquerda abre de cima para baixo no hover —
   a linha não se mexe nem cresce, só muda de temperatura. */
.quadro__espaco::before {
  content: '';
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 3px;
  background: var(--color-red);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.quadro__espaco:hover::before {
  transform: scaleY(1);
}

.quadro__numero {
  color: rgba(255, 255, 255, .2);
  font: 400 clamp(20px, 1.8vw, 26px)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.quadro__espaco:hover .quadro__numero {
  color: var(--color-red);
}

.quadro__nome {
  margin: 0;
  font: 400 clamp(26px, 3.4vw, 52px)/1 var(--font-display);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.quadro__nota {
  margin: 0;
  max-width: 30ch;
  color: #666;
  font: 600 12px/1.5 var(--font-body);
  letter-spacing: .16em;
  text-align: right;
  text-transform: uppercase;
  transition: color .25s ease;
}
.quadro__espaco:hover .quadro__nota {
  color: var(--color-red-light);
}

/* Fotos do espaço. .quadro__foto é a fila que abre (min-height: 0 e
   overflow: hidden, senão o 0fr não fecha); a moldura dá o 4:3 e o corte;
   cada foto é uma .quadro__foto-camada lá dentro, criada pelo
   instalacoes.js. Ficam alinhadas com o nome, não com o número.

   As urls não estão aqui de propósito: um background-image no CSS é
   descarregado logo que o elemento existe, mesmo numa fila fechada a 0px
   — eram ~1,9 MB ao abrir a página. O script só cria a camada (com --foto)
   depois de a imagem estar descodificada, para nunca se ver a meio. */
.quadro__foto {
  grid-column: 2 / -1;
  grid-row: 2;
  align-self: stretch;
  min-height: 0;
  overflow: hidden;
}

/* 4:3, o rácio de todas as fotos: com o cover a foto entra inteira, sem
   corte. À largura toda da linha abria até 750px de altura, por isso a
   largura fica limitada — 280 a 460px, ou seja 210 a 345px de altura. */
.quadro__foto-moldura {
  position: relative;
  width: min(100%, clamp(280px, 32vw, 460px));
  aspect-ratio: 4 / 3;
  margin-top: clamp(16px, 1.8vw, 24px);
  overflow: hidden;
}
/* Uma camada por foto, todas empilhadas. A ativa sobe (z-index 1) e entra
   em .5s; a que sai fica por baixo, inteira, e só apaga depois de coberta
   (.5s de atraso) — sem isto as duas ficavam a meio ao mesmo tempo e via-se
   o bordô por trás. No hover todas passam de scale(1.12) para 1, como as
   outras fotografias do site. */
.quadro__foto-camada {
  position: absolute;
  inset: 0;
  background-image: var(--foto, none);
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform: scale(1.12);
  transition:
    opacity .5s ease .5s,
    transform 1.1s cubic-bezier(.22, .61, .36, 1);
}
.quadro__foto-camada--ativa {
  z-index: 1;
  opacity: 1;
  transition:
    opacity .5s ease,
    transform 1.1s cubic-bezier(.22, .61, .36, 1);
}

/* Riscas por baixo da moldura, uma por foto, só nos espaços com várias:
   dizem que há mais do que uma e qual se está a ver. Mesma largura da
   moldura. */
.quadro__foto-marcas {
  display: flex;
  gap: 6px;
  width: min(100%, clamp(280px, 32vw, 460px));
  margin-top: 12px;
}

.quadro__foto-marca {
  flex: 1;
  height: 2px;
  background: var(--color-line);
  transition: background-color .35s ease;
}
.quadro__foto-marca--ativa {
  background: var(--color-red);
}

/* Só onde há cursor: num ecrã tátil não há hover, e um toque a abrir
   300px de foto empurrava a lista toda. Abre com 120ms de atraso para
   um cursor a atravessar a lista não abrir todas as linhas por onde
   passa; fecha logo. */
@media (hover: hover) {
  .quadro__espaco:hover {
    grid-template-rows: auto 1fr;
    transition-delay: 0s, .12s;
  }
  .quadro__espaco:hover .quadro__foto-camada {
    transform: scale(1);
  }
}

/* ---------- Responsive ---------- */

/* A localização deixa de caber ao lado do nome: passa para baixo,
   alinhada à esquerda, na mesma coluna. */
@media (max-width: 900px) {
  .quadro__espaco {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 0fr;
  }
  /* Margem e não row-gap: um row-gap também ficava por cima da fila da
     foto fechada e deixava a linha mais alta sem nada à vista. */
  .quadro__nota {
    grid-column: 2;
    max-width: none;
    margin-top: 10px;
    text-align: left;
  }
  .quadro__foto {
    grid-row: 3;
  }
}

@media (max-width: 900px) and (hover: hover) {
  .quadro__espaco:hover {
    grid-template-rows: auto auto 1fr;
  }
}

/* ---------- Movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  .quadro__espaco,
  .quadro__espaco::before,
  .quadro__numero,
  .quadro__nota,
  .quadro__foto-camada,
  .quadro__foto-marca {
    transition: none;
  }
}