/* ==========================================================================
   BIO — MENTE POR TRÁS DA MKS
   Entre o contexto (carrossel) e o objetivo.
   ========================================================================== */

.bio {
  background: var(--cream);
  color: var(--charcoal);
  padding-block: clamp(4rem, 9vw, 8rem);
}

.bio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

/* --------------------------------------------------------------------------
   Coluna de texto + barra vertical
   -------------------------------------------------------------------------- */

.bio__texto {
  position: relative;
  padding-left: clamp(1.4rem, 2.4vw, 2rem);
}

/* A barra acompanha a leitura: trilho claro por baixo, preenchimento
   por cima. O trecho do cabeçalho é mint, o do corpo é carvão —
   o ponto da troca (--corte) vem do JS, medido na altura do cabeçalho. */
.bio__barra {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--charcoal) 8%, transparent);
  overflow: hidden;
}
.bio__barra::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--mint) 0 var(--corte, 22%),
    var(--charcoal) var(--corte, 22%) 100%
  );
  clip-path: inset(0 0 calc((1 - var(--avanco, 0)) * 100%) 0);
}

.bio__cabeca { padding-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }

.bio__chamada {
  font-size: var(--fs-micro);
  color: var(--charcoal);
}

.bio__nome {
  margin-top: 0.1em;
  font-size: clamp(2.2rem, 1.3rem + 3.2vw, 3.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--mint);
}

.bio__cargo {
  margin-top: 0.5em;
  font-size: var(--fs-body);
  color: var(--charcoal);
}

.bio__corpo {
  display: flex;
  flex-direction: column;
  gap: 1.3em;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--charcoal);
  text-wrap: pretty;
}
.bio__corpo strong { font-weight: 700; }

/* --------------------------------------------------------------------------
   Foto com moldura mint
   -------------------------------------------------------------------------- */

.bio__foto {
  padding: clamp(8px, 1vw, 12px);
  border-radius: clamp(28px, 3.4vw, 44px);
  background: var(--mint);
  box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--teal) 55%, transparent);
}
.bio__foto img {
  width: 100%;
  height: auto;          /* anula o height="1250" do HTML */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: clamp(20px, 2.6vw, 34px);
}

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .bio__grid { grid-template-columns: 1fr; }
  /* no celular a foto vem primeiro, apresentando antes de contar */
  .bio__foto {
    order: -1;
    width: min(420px, 100%);
    margin-inline: auto;
  }
}