/* ==========================================================================
   socios.css — "Os sócios", rodada de outubro (08/10/2026). design.md §12, §13.
   Substitui o antigo equipe.css.

   A foto vem só com o nome. Em telas com mouse (`hover: hover`) a partir de
   900px, o hover — ou o foco por teclado, por isso o card tem tabindex —
   escurece a foto e revela as credenciais sobre ela. Em toque, ou abaixo de
   900px, as credenciais ficam sempre visíveis abaixo do nome: nenhuma
   informação pode depender só de hover (design.md §13).
   ========================================================================== */

.socios__grade {
  display: grid;
  gap: var(--sp-7);
}

@media (min-width: 900px) {
  .socios__grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }
}

.socio {
  position: relative;
  display: flex;
  flex-direction: column;
}

.socio__foto {
  position: relative;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}

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

.socio__info {
  padding-top: var(--sp-5);
}

/* Escala com a tela para "FABIANA DOMINGUES C." caber em uma linha até 320px. */
.socio__nome {
  font-size: clamp(1.25rem, 6.4vw, 1.5rem);
  line-height: 1.2;
}

.socio__cv-inner .filete {
  margin-top: var(--sp-4);
}

.socio__credenciais {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--cor-secao-texto-secundario);
}

.socio__credenciais li + li {
  margin-top: var(--sp-2);
}

/* --- Com mouse: nome sobre a foto, CV revelado no hover/foco --- */
@media (hover: hover) and (min-width: 900px) {
  .socio {
    overflow: hidden;
  }

  /* Gradiente só na base, onde o nome se assenta — a foto continua limpa no
     resto. A segunda camada é o escurecimento do hover, em repouso a zero. */
  .socio__foto::before,
  .socio__foto::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .socio__foto::before {
    background: linear-gradient(
      to top,
      rgba(23, 23, 21, 0.75) 0%,
      rgba(23, 23, 21, 0.2) 30%,
      rgba(23, 23, 21, 0) 45%
    );
  }

  .socio__foto::after {
    background: rgba(23, 23, 21, 0.72);
    opacity: 0;
    transition: opacity 300ms var(--ease-padrao);
  }

  .socio__info {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 1;
    padding: var(--sp-6) var(--sp-5) 40px;
  }

  /* "FABIANA DOMINGUES C." é o nome mais longo e foi encurtado justamente
     para caber em uma linha (site.md §6). A 28px ele não cabe no card de
     397px com o padding; 26px no máximo, descendo com a largura. */
  .socio__nome {
    font-size: clamp(1.25rem, 1.85vw, 1.625rem);
  }

  /* Abre de 0 até a altura natural com `grid-template-rows: 0fr → 1fr`: anima
     a altura sem precisar de um valor fixo, e o conteúdo continua no DOM —
     o leitor de tela lê as credenciais mesmo com o card em repouso. */
  .socio__cv {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(12px);
    transition: grid-template-rows 300ms var(--ease-padrao),
      opacity 300ms var(--ease-padrao),
      transform 300ms var(--ease-padrao);
  }

  .socio__cv-inner {
    min-height: 0;
    overflow: hidden;
  }

  .socio__credenciais {
    color: rgba(249, 246, 234, 0.9);
  }

  .socio:hover .socio__foto::after,
  .socio:focus-visible .socio__foto::after {
    opacity: 1;
  }

  .socio:hover .socio__cv,
  .socio:focus-visible .socio__cv {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
  }
}