/* Seção "Especialidades com atendimentos por telessaúde".
   Grade de cards quadrados, um por especialidade: ícone de traço no topo e o
   nome embaixo. Os ícones são SVG da biblioteca Lucide, injetados pelo
   specialties.js — aqui só o traço, o tamanho e a cor.
   Paleta e raios saem dos tokens do projeto. */

.specs {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: linear-gradient(180deg, var(--bege-3) 0%, var(--bege-2) 100%);
  color: var(--ink);
}
.specs__inner { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- cabeçalho */
/* Cabecalho e grade compartilham o mesmo eixo central: antes a grade tinha
   max-width sem margem automatica e encostava a esquerda, enquanto o texto
   corria ate 44rem — os dois blocos nunca se alinhavam entre si. */
.specs__head { max-width: 44rem; margin: 0 auto clamp(2.4rem, 5vw, 3.8rem); text-align: center; }
.specs__eyebrow { color: var(--marrom); justify-content: center; }
/* Segundo cabecalho: vem depois de uma grade, entao precisa do respiro que o
   primeiro recebe do topo da secao. */
.specs__head--seguinte { margin-top: clamp(3.4rem, 8vw, 6rem); }
.specs__eyebrow .eyebrow__dot { background: var(--rosa); }
.specs__title {
  margin-top: .9rem;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.1;
  letter-spacing: -.02em; color: var(--bordo);
  text-wrap: balance;
}
.specs__title em { font-style: italic; font-weight: 600; color: var(--marrom); }

/* -------------------------------------------------------------------- grade
   Contagem de colunas fixa por degrau (4 / 3 / 2), como na referência. Com
   auto-fit a grade abria 6 colunas em telas largas e os cards ficavam baixos
   demais em relação ao rótulo. */
.specs__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1rem);
  max-width: 62rem;
  margin-inline: auto;
}

/* DUAS CAMADAS:
     .specs__card  — a celula da grade (so layout);
     .specs__face  — o cartao visivel, com revelacao, hover e campo do ponteiro.
   A separacao nasceu para a deriva de inatividade nao brigar com o transform do
   mouse. A deriva saiu a pedido, mas a divisao fica: e ela que mantem um unico
   dono para o `transform` do cartao. */
.specs__card { display: flex; }

.specs__face {
  /* Um transform so, montado por variaveis: a revelacao de entrada (--reveal) e
     o hover (--lift) mexem na mesma propriedade, e se cada uma escrevesse
     `transform` por conta propria a ultima apagaria a outra. */
  --lift: 0px; --reveal: 0px;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .85rem;
  min-height: clamp(7.5rem, 13vw, 9.5rem);
  padding: clamp(1rem, 2vw, 1.4rem) .7rem;
  text-align: center;
  background: var(--bege-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  position: relative;
  transform: translate3d(0, calc(var(--lift) + var(--reveal)), 0);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease),
              border-color .35s ease, background .35s ease;
}
@media (hover: hover) and (pointer: fine) {
  .specs__card:hover .specs__face {
    --lift: -4px;
    background: #F6EADF;
    border-color: rgba(138, 81, 78, .3);
    box-shadow: var(--shadow-md);
  }
}

.specs__ic-box {
  display: grid; place-items: center;
  width: clamp(2rem, 3.4vw, 2.5rem); height: clamp(2rem, 3.4vw, 2.5rem);
  color: var(--bordo);
}
.specs__ic { width: 100%; height: 100%; display: block; }

/* Reserva duas linhas mesmo para nome curto. Sem isso, "Urologia" e
   "Otorrinolaringologia" deixam o icone em alturas diferentes e a grade perde a
   linha de base comum. */
.specs__name {
  display: grid; align-content: center;
  min-height: 2.5em;
  font-family: var(--font); font-weight: 600;
  font-size: clamp(.82rem, 1.05vw, .95rem); line-height: 1.25;
  letter-spacing: -.005em; color: var(--bordo);
  text-wrap: balance;
}

/* ---------------------------------------------------------------- revelação
   Só age depois que o specialties.js confirma que vai animar (.specs--armed).
   Sem essa classe tudo já nasce visível, então falha de JS não esconde a grade. */
.specs--armed .specs__head { opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.specs--armed .specs__card { opacity: 0; transition: opacity .6s var(--ease); }
.specs--armed .specs__card .specs__face { --reveal: 14px; }
.specs--armed .specs__card {
  /* --i chega do JS já como a coluna (0..3), então o atraso máximo fica em
     135ms em vez de crescer com os 24 cards. */
  transition-delay: calc(var(--i, 0) * 45ms);
}
.specs--armed .specs__head.is-in { opacity: 1; transform: none; }
.specs--armed .specs__card.is-in { opacity: 1; }
.specs--armed .specs__card.is-in .specs__face { --reveal: 0px; }

@media (max-width: 900px) {
  .specs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .specs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .specs__face { transition: none; }
  .specs--armed .specs__head { opacity: 1; transform: none; transition: none; }
  .specs--armed .specs__card { opacity: 1; transition: none; }
  .specs--armed .specs__card .specs__face { --reveal: 0px; }
}