/* ==========================================================================
   Home — estilos específicos das seções do miolo.
   Mobile-first; os breakpoints sobem para o layout do Figma (1512 / 1140).
   Depende de tokens.css, base.css, components.css.
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  /* No mobile o trecho do slide abaixo da foto é branco; no desktop a foto
     cobre o slide inteiro e o fundo escuro só aparece enquanto ela carrega. */
  background: var(--white);
}

@media (min-width: 64rem) {
  .hero {
    background: var(--gray-900);
  }
}

.hero__track {
  align-items: stretch;
}

/**
 * No mobile a foto tem altura própria (400px no frame) e o card sobe sobre a
 * base dela, terminando já no fundo branco. A partir de 1024px o card volta a
 * ficar dentro da foto, que passa a cobrir o slide inteiro.
 */
.hero__slide {
  position: relative;
  display: grid;
}

@media (min-width: 64rem) {
  .hero__slide {
    min-height: 34.25rem; /* 548px — altura do frame */
  }
}

.hero__media {
  position: relative;
  height: 25rem; /* 400px */
}

@media (min-width: 64rem) {
  .hero__media {
    position: absolute;
    inset: 0;
    height: auto;
  }
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Escurece a base no mobile para o card manter contraste sobre a foto. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(32 36 45 / 55%) 0%, rgb(32 36 45 / 25%) 45%, rgb(32 36 45 / 70%) 100%);
}

@media (min-width: 64rem) {
  .hero__media::after {
    background: linear-gradient(90deg, rgb(32 36 45 / 35%) 0%, rgb(32 36 45 / 0%) 55%);
  }
}

.hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  /* Sobrepõe os 112px finais da foto, como no frame. */
  margin-top: -7rem;
}

@media (min-width: 64rem) {
  .hero__inner {
    margin-top: 0;
    padding-block: var(--sp-16);
  }
}

.hero__card {
  --color-link: var(--us-orange-light);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: flex-start;
  width: 100%;
  padding: var(--sp-6);
  background: rgb(32 36 45 / 88%);
  border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
  .hero__card {
    max-width: 30.25rem;  /* 484px */
    padding: var(--sp-8);
    background: var(--gray-900);
  }
}

.hero__title {
  color: var(--white);
  /* Quebra gulosa: reproduz "UNISUAM Vocação / pra Transformar" do frame.
     text-wrap: balance espalharia o título em três linhas. */
  text-wrap: normal;
}

.hero__bullets {
  display: flex;
  flex-direction: column;
  color: var(--gray-200);
  font-size: clamp(var(--fs-md), 0.93rem + 0.4vw, var(--fs-h3));
  line-height: 1.45;
}

.hero__bullets strong {
  color: var(--white);
  font-weight: var(--fw-bold);
}

/**
 * O terceiro slide do hero é frase corrida, não lista — o deck (slide 9) traz
 * "Conheça nossos Programas de Stricto Sensu recomendados pela CAPES" como uma
 * linha só. Herda a mesma cor e escala de .hero__bullets para os três slides
 * ficarem tipograficamente iguais; o que muda é só a marcação.
 */
.hero__texto {
  color: var(--gray-200);
  font-size: clamp(var(--fs-md), 0.93rem + 0.4vw, var(--fs-h3));
  line-height: 1.45;
}

.hero__cta {
  margin-top: var(--sp-2);
}

/* Breadcrumb sobreposto ao topo do hero */
.hero__breadcrumb {
  position: absolute;
  z-index: 2;
  top: var(--sp-5);
  right: 0;
  left: 0;
}

/* No mobile as setas ficam no meio da foto — o slide inclui o card, que desce. */
.hero .carousel__arrow {
  top: 12.5rem;
}

@media (min-width: 64rem) {
  .hero .carousel__arrow {
    top: 50%;
  }
}

.hero__dots {
  padding-bottom: var(--sp-6);
  background: var(--white);
  margin-top: 0;
  padding-top: var(--sp-6);
}

/* ==========================================================================
   Da Graduação ao Pós-Doutorado
   ========================================================================== */

.nivel {
  padding: var(--sp-6);
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 64rem) {
  .nivel {
    padding: var(--sp-8);
  }
}

.nivel__head {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--color-border);
}

.nivel__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--sp-3);
  color: var(--us-orange);
}

.nivel__desc {
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.nivel__duracao {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
}

.nivel__body {
  display: grid;
  gap: var(--sp-8);
  padding-top: var(--sp-6);
}

@media (min-width: 64rem) {
  .nivel__body {
    gap: var(--sp-6);
    /* 340px de ingresso + o resto para as modalidades, como no frame */
    grid-template-columns: 21.25rem minmax(0, 1fr);
  }

  /**
   * Só a Graduação tem "Formas de ingresso". Nos outros três painéis
   * (Pós-Graduação, Mestrado e Doutorado, Cursos Livres) as modalidades são o
   * único filho — e sem isto caíam na PRIMEIRA coluna do grid, a de 21.25rem
   * fixos. As modalidades ficavam prensadas em 340px, onde só cabe uma coluna de
   * `minmax(13rem, …)`, e os três cards da Pós empilhavam um sobre o outro.
   *
   * `:only-child` e não `:has()` no pai: a condição é sobre este elemento, é
   * suportado em tudo, e não depende de o painel ter ou não outros irmãos futuros.
   */
  .nivel__modalidades:only-child {
    grid-column: 1 / -1;
  }

  /**
   * Ocupar as duas colunas resolve o esmagamento, mas abriria outro problema: numa
   * linha de ~1140px os cards da Pós ficariam bem mais largos que os da Graduação, e
   * as duas abas mostram o mesmo tipo de cartão. O teto reproduz a largura que as
   * modalidades têm na Graduação (o que resta depois da coluna de 21.25rem), então os
   * cards saem do mesmo tamanho em todas as abas.
   */
  .nivel__modalidades:only-child .modalidade-list {
    max-width: 46rem;
  }
}

.nivel__subtitle {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

/* ---------- Formas de ingresso ---------- */

.ingresso-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.ingresso-item {
  display: grid;
  gap: 0 var(--sp-3);
  grid-template-areas:
    "icon label"
    ".    detail";
  grid-template-columns: auto 1fr;
  padding: var(--sp-4);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}

.ingresso-item__icon {
  grid-area: icon;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--c);
}

.ingresso-item__label {
  grid-area: label;
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 1.2;
}

.ingresso-item__detail {
  grid-area: detail;
  margin-top: var(--sp-2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.ingresso-item__detail strong {
  color: var(--color-text);
}

/* ---------- Cards de modalidade ---------- */

.modalidade-list {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  /**
   * `auto-fill`, e não `auto-fit`: a diferença é o painel de um card só (Mestrado e
   * Doutorado, Cursos Livres). `auto-fit` colapsa as trilhas vazias, e o card único
   * herdava a largura inteira da linha — ~1140px de cartão para duas linhas de
   * texto. `auto-fill` mantém as trilhas reservadas, então o card fica do mesmo
   * tamanho que os da Graduação e alinhado à esquerda.
   *
   * O máximo da trilha continua `1fr`, e não um valor fixo: quando o `minmax()` tem
   * máximo definido, o `auto-fill` calcula quantas trilhas cabem usando o MÁXIMO, e
   * não o mínimo. Com `minmax(13rem, 20rem)` a Graduação passava a caber só dois
   * cards de 320px por linha e o terceiro descia — regressão que este comentário
   * existe para não deixar acontecer de novo.
   */
  .modalidade-list {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  }
}

.modalidade {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--white);
  border-top: 3px solid var(--c);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
}

.modalidade__top {
  display: flex;
  justify-content: flex-end;
  order: -1;
}

.modalidade__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  color: var(--white);
  background: linear-gradient(135deg, var(--c), var(--c-light));
  border-radius: var(--radius-pill);
}

.modalidade__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.modalidade__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.modalidade__text {
  color: var(--color-text-muted);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

.modalidade__cta {
  margin-top: auto;
}

/* O badge herda --c da modalidade */
.modalidade__badge {
  --c: inherit;
}

/* ==========================================================================
   Por que escolher a UNISUAM
   ========================================================================== */

.porque {
  /* Mesma razão de .section--dark: link laranja claro sobre fundo escuro. */
  --color-link: var(--us-orange-light);
  display: grid;
  overflow: hidden;
  background: var(--gray-800);
  border-radius: var(--radius-md);
}

@media (min-width: 64rem) {
  .porque {
    grid-template-columns: 22.875rem minmax(0, 1fr); /* 366px de imagem */
  }
}

.porque__media {
  min-height: 12rem;
}

.porque__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.porque__content {
  padding: var(--sp-6);
}

@media (min-width: 64rem) {
  .porque__content {
    padding: var(--sp-8);
  }
}

.porque__title {
  margin-bottom: var(--sp-6);
  color: var(--white);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
}

.porque__grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .porque__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.porque__item {
  padding-block: var(--sp-5);
  border-top: 1px solid rgb(255 255 255 / 12%);
}

/* Sem linha acima da primeira fila de cada coluna */
.porque__item:first-child {
  border-top: 0;
}

@media (min-width: 48rem) {
  .porque__item:nth-child(2) {
    border-top: 0;
  }

  /* Divisória vertical entre as duas colunas */
  .porque__item:nth-child(odd) {
    padding-right: var(--sp-6);
    border-right: 1px solid rgb(255 255 255 / 12%);
  }

  .porque__item:nth-child(even) {
    padding-left: var(--sp-6);
  }
}

.porque__item-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* A regra .porque__link saiu junto com os cinco CTAs da seção — deck, slide 14
   ("Tirar saiba mais e links após os atributos"). Sem seletor no HTML, a regra
   era CSS morto. */

/* ==========================================================================
   Unidades
   ========================================================================== */

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

@media (min-width: 64rem) {
  .unidade__grid {
    grid-template-columns: minmax(0, 728fr) minmax(0, 364fr);
  }
}

.unidade__mapa {
  overflow: hidden;
  border-radius: var(--radius-sm);
}

/**
 * O mapa é um <iframe> (includes/mapa.php), não mais uma captura de tela.
 *
 * `display: block` porque iframe é inline por padrão e sobraria a linha de base
 * embaixo, abrindo uma fresta entre o mapa e a borda arredondada do contêiner. O
 * `aspect-ratio` mantém a proporção do frame e reserva a altura antes de o iframe
 * carregar, então não há salto de layout (CLS).
 */
.unidade__mapa .mapa {
  display: block;
  width: 100%;
  aspect-ratio: 728 / 400;
  border: 0;
}

.unidade__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.unidade__value {
  margin-bottom: var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

.unidade__cta {
  margin-top: var(--sp-2);
}

/* ==========================================================================
   Impacto social / Pesquisa — ajustes de grade
   ========================================================================== */

.grid-3--stretch > .card {
  height: 100%;
}

/* ==========================================================================
   Notícias do Blog

   DESATIVADA a pedido. Para reativar, remova o display: none de .home-blog.
   O markup (includes/sections/home/blog.php), o conteúdo (data/home.php →
   'blog') e os estilos abaixo continuam no lugar.
   ========================================================================== */

.home-blog {
  display: none;
}

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

@media (min-width: 64rem) {
  .blog {
    grid-template-columns: minmax(0, 558fr) minmax(0, 558fr);
  }
}

.post__link {
  display: block;
  height: 100%;
}

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

.post__media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform var(--dur) var(--ease);
}

.post__link:hover .post__media img {
  transform: scale(1.04);
}

.post__date {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--color-link);
  font-size: var(--fs-sm);
}

/* ---------- Post em destaque ---------- */

.post--featured .post__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.post--featured .post__body {
  --color-link: var(--us-orange-light);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-6);
  background: var(--gray-800);
}

.post--featured .post__title {
  color: var(--white);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.post__cta {
  margin-top: auto;
}

/* ---------- Posts laterais ---------- */

.blog__side {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .blog__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.blog__side .post__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.post__media--side {
  border-radius: var(--radius-md);
}

.post__title--side {
  color: var(--color-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

.blog__side .link-arrow {
  margin-top: auto;
}

/* ==========================================================================
   Tabela dos Polos Digitais (accordion da home)

   Os 32 polos entram como tabela, e não como o accordion de mapa das outras três
   unidades — deck, slide 18. São 32 endereços em 17 cidades: um iframe de mapa por
   polo dariam 32 iframes dentro de um <details> da home.
   ========================================================================== */

/**
 * O `overflow-x` fica no invólucro, não na tabela: em telas estreitas as quatro
 * colunas não cabem, e sem isso a página inteira ganharia rolagem horizontal.
 * `max-height` + rolagem vertical impede que o accordion aberto empurre o resto da
 * home 32 linhas para baixo.
 */
.polos-tabela__wrap {
  max-height: 26rem;
  margin-top: var(--sp-5);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.polos-tabela {
  width: 100%;
  font-size: var(--fs-xs);
  border-collapse: collapse;
}

/* `sticky` mantém o cabeçalho visível durante a rolagem das 32 linhas. */
.polos-tabela thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--gray-100);
}

.polos-tabela th,
.polos-tabela td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.polos-tabela tbody th {
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.polos-tabela tbody tr:last-child th,
.polos-tabela tbody tr:last-child td {
  border-bottom: 0;
}

@media (min-width: 48rem) {
  .polos-tabela {
    font-size: var(--fs-sm);
  }
}