/* ==========================================================================
   Páginas de unidade — Figma: nodes 2833-201 (Bonsucesso), 3003-363 (Bangu),
   3003-661 (Campo Grande) e 3005-1385 (Polos Digitais); mobile 3012-2055 /
   3012-2817.

   Escrito mobile-first: o frame mobile empilha tudo em uma coluna e o desktop
   abre em duas colunas de 558px com 24px de gutter (558 + 24 + 558 = 1140, a
   largura do container).

   Da linha "Polos Digitais" para baixo estão os blocos que só existem naquela
   página (indicadores, lista de polos e a faixa de polo parceiro).
   ========================================================================== */

/* ==========================================================================
   Intro
   ========================================================================== */

.unidade-intro__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 64rem) {
  .unidade-intro__grid {
    /* 500px de texto + 483px de imagem, com a imagem grudada na borda direita
       do container, como no frame. */
    gap: var(--sp-10);
    grid-template-columns: minmax(0, 1fr) 483px;
    align-items: start;
  }
}

.unidade-intro__p {
  margin-top: var(--sp-5);
  max-width: 30em;              /* 531px @18px, a largura do parágrafo no frame */
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

/* No mobile os três botões ocupam a largura inteira, um por linha. */
.unidade-intro__ancoras {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

@media (min-width: 48rem) {
  .unidade-intro__ancoras {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
}

.unidade-intro__media img {
  width: 100%;
  aspect-ratio: 483 / 365;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Onde estamos — faixa escura com o mapa em largura total do container
   ========================================================================== */

.onde__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 64rem) {
  .onde__grid {
    gap: var(--sp-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.onde__p {
  margin-top: var(--sp-5);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
}

/* Marcador nativo em vez do ::before de .forma__itens: aqui cada item tem
   markup dentro (<strong> + texto), e com flex o negrito viraria uma coluna
   separada do resto da linha. */
.onde__enderecos {
  margin-top: var(--sp-4);
  padding-left: var(--sp-6);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-body);
  list-style: disc;
}

/* Cartão do horário: um tom acima do fundo da faixa (gray-800 sobre gray-900). */
.onde__horario {
  display: flex;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) var(--sp-6);
  color: var(--color-text);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  line-height: var(--lh-snug);
  background: var(--surface-dark);
  border-radius: var(--radius-md);
}

.onde__horario strong {
  color: var(--white);
}

.onde__horario-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--us-orange);
}

.onde__mapa {
  overflow: hidden;
  margin-top: var(--sp-8);
  border-radius: var(--radius-md);
}

/* O mapa é um <iframe> — ver o comentário em home.css (.unidade__mapa .mapa). */
.onde__mapa .mapa {
  display: block;
  width: 100%;
  /* 1140x350 no desktop; no mobile o frame mostra um recorte mais quadrado. */
  aspect-ratio: 361 / 233;
  border: 0;
}

@media (min-width: 64rem) {
  .onde__mapa .mapa {
    aspect-ratio: 1140 / 350;
  }
}

/* ==========================================================================
   Infraestrutura — texto numa coluna, grade 2x2 de fotos na outra
   ========================================================================== */

.infra__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 64rem) {
  .infra__grid {
    gap: var(--sp-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

.infra__fotos {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.infra__foto {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.infra__foto img {
  width: 100%;
  aspect-ratio: 267 / 175;
  object-fit: cover;
}

/* O bloco "Tour pela unidade" saiu junto com a seção — deck, slide 22. Eram cinco
   regras (.tour, __titulo, __faixa e __nota) sem seletor nenhum no HTML. */

/* ==========================================================================
   Quem fez recomenda! — três cards de vídeo
   ========================================================================== */

.depoimentos__intro {
  max-width: 31em;              /* 558px @18px, como no frame */
  margin-bottom: var(--sp-8);
}

.depoimentos__list {
  gap: var(--sp-6);
}

.depoimento__media {
  margin-bottom: var(--sp-6);
}

.depoimento__media img {
  width: 100%;
  aspect-ratio: 364 / 204;
  object-fit: cover;
}

/* O texto dos cards é recuado 16px em relação à foto, como no frame. */
.depoimento__titulo,
.depoimento__texto {
  padding-inline: var(--sp-4);
}

.depoimento__titulo {
  font-size: clamp(var(--fs-h4), 1.1rem + 0.4vw, 1.375rem);
  line-height: var(--lh-snug);
  /* Sem balance: o frame quebra os títulos no fim da linha, não em blocos de
     larguras parecidas. */
  text-wrap: pretty;
}

.depoimento__texto {
  margin-top: var(--sp-3);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
}

/* ==========================================================================
   UNISUAM sempre perto de você — bloco final, tudo centralizado
   ========================================================================== */

.perto__titulo,
.perto__sub {
  text-align: center;
}

.perto__sub {
  margin-top: var(--sp-4);
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.4vw, var(--fs-h3));
}

.perto__links {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

@media (min-width: 48rem) {
  .perto__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-5);
    justify-content: center;
  }
}

/* ==========================================================================
   Polos Digitais — indicadores no topo

   No frame os três cartões ficam à direita, alinhados com o topo do H1. No
   mobile eles não caberiam em 170px cada, então viram uma linha de três colunas
   iguais com a tipografia reduzida — ainda uma linha só, como no desktop.
   ========================================================================== */

.polos-intro__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 64rem) {
  .polos-intro__grid {
    gap: var(--sp-10);
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
}

.polos-numeros {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 64rem) {
  .polos-numeros {
    gap: var(--sp-6);
    grid-template-columns: repeat(3, 170px);
  }
}

.polos-numero {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  padding: var(--sp-5) var(--sp-3);
  text-align: center;
  border: 2px solid var(--us-purple);
  border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
  .polos-numero {
    /* 154px de altura no frame. */
    min-height: 154px;
  }
}

.polos-numero__valor {
  color: var(--us-purple);
  font-size: clamp(1.25rem, 0.95rem + 1.2vw, var(--fs-h2));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

/* Duas linhas equilibradas, como no frame ("Polos / Digitais", "Cidades do /
   Sudeste", "Alunos / matriculados") — sem <br>, que não gera espaço no
   textContent e faria o leitor de tela anunciar "PolosDigitais". */
.polos-numero__rotulo {
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-sm), 0.8rem + 0.5vw, var(--fs-h3));
  line-height: var(--lh-snug);
  text-wrap: balance;
}

/* 24px cheios a partir do desktop: é o que faz os três rótulos caírem em duas
   linhas dentro dos 170px do cartão, como no frame. */
@media (min-width: 64rem) {
  .polos-numero__rotulo {
    font-size: var(--fs-h3);
  }
}

/* ==========================================================================
   Polos Digitais — lista de polos

   Cada linha é um cartão cinza com duas faixas: nome + "Saiba mais" em cima,
   separados por uma régua, e os três dados embaixo. No desktop os dados ficam
   nas mesmas três colunas do frame (endereço mais largo que os outros dois).
   ========================================================================== */

/* A lista começa logo abaixo do intro: no frame a régua está a 64px dos
   cartões, não aos 100px de --section-py. */
.polos-lista {
  padding-top: var(--sp-8);
}

/**
 * Regular, 24px: no frame este título não é um H2 em negrito como os das outras
 * seções — é um rótulo acima da lista. A régua fina do frame vem *antes* dele,
 * então é o border-top do próprio título (dentro do container, portanto com a
 * largura de 1140px que o frame desenha).
 */
.polos-lista__titulo {
  margin-bottom: var(--sp-5);
  padding-top: var(--sp-8);
  color: var(--color-heading);
  font-size: clamp(var(--fs-h4), 1.1rem + 0.6vw, var(--fs-h3));
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  border-top: 1px solid var(--color-border);
}

.polos-lista__itens {
  display: grid;
  gap: var(--sp-4);
}

.polo {
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface-alt);
  border-radius: var(--radius-md);
}

.polo__topo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--color-border-strong);
}

.polo__nome {
  color: var(--color-text-muted);
  font-size: clamp(var(--fs-md), 0.93rem + 0.3vw, var(--fs-body));
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
}

.polo__saiba {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--color-link);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.polo__saiba .icon {
  width: 1rem;
  height: 1rem;
  color: currentcolor;
}

/**
 * Enquanto o polo não tem página, "Saiba mais" sai como <span>: mantém o
 * desenho do frame sem virar link para lugar nenhum.
 *
 * gray-600 e não gray-500: em negrito de 14px sobre a linha cinza, o gray-500
 * dá 3,71:1 e reprova AA. Isso é escolha da implementação, não da paleta, então
 * não entra na dívida de marca — gray-600 dá 5,67:1.
 */
.polo__saiba--inerte {
  color: var(--color-text-muted);
}

.polo__dados {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

@media (min-width: 64rem) {
  .polo__dados {
    gap: var(--sp-6);
    /* 437 / 306 / 350 de 1140 no frame. */
    grid-template-columns: minmax(0, 437fr) minmax(0, 306fr) minmax(0, 350fr);
  }
}

.polo__dado dt {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
}

.polo__dado dt .icon {
  width: 0.75rem;
  height: 0.75rem;
  color: var(--color-text-muted);
}

.polo__dado dd {
  margin-top: var(--sp-1);
  /* Alinha com o rótulo, que é recuado pelo ícone de 12px + o gap de 8px. */
  padding-left: calc(0.75rem + var(--sp-2));
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-md);
}

/* ==========================================================================
   Polos Digitais — Seja um Polo Digital Parceiro
   ========================================================================== */

.parceiro__grid {
  display: grid;
  gap: var(--sp-8);
}

@media (min-width: 64rem) {
  .parceiro__grid {
    gap: var(--sp-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
  }
}

.parceiro__p {
  max-width: 23em;              /* 550px @24px, a largura no frame */
}

.parceiro__cta {
  margin-top: var(--sp-8);
}

@media (min-width: 48rem) {
  .parceiro__cta {
    /* 267px no frame — o botão não estica junto com a coluna. */
    width: 267px;
  }
}

/* Placeholder do vídeo: a mesma faixa cinza do tour das unidades. */
.parceiro__video {
  display: grid;
  place-items: center;
  aspect-ratio: 558 / 313;
  background: var(--gray-600);
  border-radius: var(--radius-md);
}

.parceiro__video .video-thumb__play {
  position: static;
  transform: none;
}