/* Página de Informações úteis.
   Mesmo fundo, mesma grelha e mesmos tokens do resto do site — nenhuma cor,
   tamanho ou peso novo é inventado aqui. */

.info {
  position: relative;
  background: #E5E5E5;
  min-height: 100vh;
  padding: clamp(240px, 26vw, 320px) var(--edge-margin) clamp(48px, 8vw, 96px);
}

.info-head {
  margin-bottom: clamp(56px, 8vw, 96px);
}

.info-title {
  font-family: 'elza', sans-serif;
  font-weight: var(--fw-regular);
  font-style: normal;
  color: #000;
  font-size: var(--text-hero);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-display);
  margin: 0;
}

.info-lead {
  font-family: 'elza', sans-serif;
  font-weight: var(--fw-regular);
  font-style: normal;
  color: #000;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  margin: clamp(20px, 2.6vw, 32px) 0 0;
  max-width: 34ch;
}

/* ---------- secções ---------- */

.info-section {
  margin-bottom: clamp(64px, 9vw, 112px);
}

.info-section:last-child {
  margin-bottom: 0;
}

.info-section-head {
  border-top: 1px solid #000;
  padding-top: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(32px, 5vw, 56px);
}

.info-section-title {
  font-family: 'elza', sans-serif;
  font-weight: var(--fw-medium);
  font-style: normal;
  color: #000;
  font-size: var(--text-h2);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  margin: 0;
}

.info-section-note {
  font-family: 'elza', sans-serif;
  font-weight: var(--fw-regular);
  font-style: normal;
  color: #000;
  font-size: var(--text-small);
  line-height: var(--lh-body);
  margin: clamp(10px, 1.2vw, 14px) 0 0;
  max-width: 52ch;
}

/* ---------- mapas em imagem ---------- */

/* A imagem manda na altura: são mapas desenhados, com proporções próprias, e
   forçar uma proporção fixa cortaria parte do desenho. */
.info-mapa {
  display: block;
}

.info-mapa img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #000;
}

/* O mapa dos TUB é quase quadrado, ao contrário do mapa do evento, que é
   panorâmico: à largura toda ficava com mais de um ecrã de altura. No
   desktop fica em metade do ecrã, com o texto da secção ao lado, na
   esquerda. Abaixo dos 900px empilham — texto primeiro, como no HTML. */
.info-duas-colunas {
  display: grid;
  gap: clamp(24px, 5vw, 32px);
}

@media (min-width: 900px) {
  .info-duas-colunas {
    /* Um terço para o texto, dois para a imagem: o mapa dos TUB tem detalhe
       a mais para caber em metade da página, e o texto é curto. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  /* Dentro da grelha o texto ocupa a coluna toda: o recuo aos dois terços
     que .info-intro traz por omissão é para quando atravessa a página. */
  .info-duas-colunas .info-intro {
    max-width: none;
    margin-left: 0;
  }
}

/* O mapa é desenhado e detalhado: encolhido à largura de um telemóvel os
   nomes das ruas deixam de se ler. Em vez de o pôr a deslizar dentro da
   página — que confunde, porque a página também rola — mostra-se pequeno,
   só para se perceber do que se trata, e oferece-se o ficheiro para guardar
   na galeria, onde se amplia com os gestos do costume. */
.info-mapa-acao {
  margin-top: clamp(20px, 2.6vw, 32px);
}

@media (min-width: 900px) {
  .info-mapa-acao {
    display: none;
  }
}

/* .info-botao não tem regras próprias: é o mesmo botão da homepage
   (.gallery-teaser-cta em style.css). */

/* ---------- lista de pontos ---------- */

/* Os pontos de TVDE são botões, não uma lista: cada um é uma acção — abre
   as direções no Google Maps. Mesma pill de contorno fino dos restantes
   botões do site. */
/* Uma grelha em vez de flex: assim todos os botões ficam com a mesma
   largura, independentemente do comprimento do nome. */
.info-locais {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 14px);
}

/* Empilhados nos dois terços da direita, alinhados com a imagem da secção
   acima: o texto fica no terço da esquerda e os botões seguem a mesma
   coluna do resto do conteúdo. Em fila horizontal ficavam soltos, sem
   nada com que se alinhassem. */
@media (min-width: 900px) {
  .info-locais {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 1.4vw, 16px);
    width: 66.67%;
    margin-left: 33.33%;
  }

  /* O texto e os botões lado a lado: sem isto o .info-intro ocupa a sua
     linha inteira e os botões começam bem abaixo dele, com um vazio grande
     por cima. */
  .info-tvde-corpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
  }

  .info-tvde-corpo .info-intro {
    max-width: 100%;
    margin-bottom: 0;
  }

  .info-tvde-corpo .info-locais {
    width: 100%;
    margin-left: 0;
  }
}

/* Aparência (caixa, tipografia, hover, luz) partilhada com o botão
   "Programação Completa" da homepage — ver .gallery-teaser-cta em style.css.
   Aqui fica só o que é próprio da grelha: altura igual em todos, mesmo
   quando um nome quebra em duas linhas. */
.info-local {
  text-align: center;
}

.info-local:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* Texto de abertura de secção: dois terços da largura, como as colunas de
   texto do resto do site — uma linha de leitura que atravessa o ecrã todo
   cansa a vista. */
.info-intro {
  font-family: 'elza', sans-serif;
  font-weight: var(--fw-regular);
  font-style: normal;
  color: #000;
  font-size: var(--text-body);
  line-height: var(--lh-body);
  margin: 0 0 clamp(32px, 5vw, 56px);
  max-width: 100%;
}

/* No terço da esquerda, encostado à margem: a imagem que vem a seguir fica
   com os dois terços da direita, e o texto lê-se numa coluna estreita em vez
   de atravessar a página. */
@media (min-width: 900px) {
  .info-intro {
    max-width: 33.33%;
    margin-left: 0;
  }
}