/* Seção Sobre mim da home (Figma: Portfolio › 582:3664) — desktop + versão mobile/tablet no final
   86px abaixo da hero. Colunas proporcionais ao Figma em 1512px:
   texto 504 : espaço 174 : lista 722 (de 1400px de conteúdo), crescendo juntas até 1728px. */
.about {
  padding-block: var(--section-spacing);
  background: var(--color-background-secondary-white);
}

.about__inner {
  display: grid;
  grid-template-columns: minmax(0, 504fr) minmax(0, 722fr);
  column-gap: calc(100% * 174 / 1400);
  align-items: start;
}

/* ---------- Coluna de texto ---------- */
.about__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.about__title {
  margin: 0;
  color: var(--color-branding-default-purple);
  font-family: var(--font-family-display);
  font-size: var(--section-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--section-title-lh);
}

.about__text {
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-26);
}

.about__text p {
  margin: 0;
}

/* No Figma os parágrafos são separados por uma linha vazia (26px) */
.about__text p + p {
  margin-top: var(--line-height-26);
}

/* ---------- Coluna da lista de práticas (estática) ---------- */
.about__practices {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.about__tagline {
  margin: 0 0 calc(var(--space-76) - var(--space-24));
  align-self: flex-end;
  width: 240px;
  color: var(--color-branding-default-purple);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
  text-align: right;
}

.about__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

/* Divisor cinza de 2px acima de cada item e abaixo do último */
.about__list::after,
.practice-item::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--color-background-terciary-gray);
}

.practice-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.practice-item__body {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.practice-item__title {
  margin: 0;
  color: var(--color-branding-default-purple);
  font-size: var(--font-size-24);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-34);
}

.practice-item__text {
  margin: var(--space-4) 0 0;
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-26);
}

/* ---------- Mobile / tablet (< 1024px): coluna única ----------
   Título "Sobre mim" e a frase na mesma linha (frase à direita, alinhada ao topo do título);
   depois texto, "Conhecer mais" e a lista de práticas em largura total.
   As duas colunas viram "display: contents" para os filhos entrarem direto no grid. */
@media (max-width: 1023.98px) {
  .about__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "title tagline"
      "text  text"
      "link  link"
      "list  list";
    column-gap: var(--space-16);
    row-gap: var(--space-32);
  }

  .about__intro,
  .about__practices {
    display: contents;
  }

  .about__title {
    grid-area: title;
  }

  .about__tagline {
    grid-area: tagline;
    align-self: start;
    width: auto;
    margin: 0;
    text-align: right;
  }

  .about__text {
    grid-area: text;
  }

  .about__intro .award-link {
    grid-area: link;
    justify-self: start;
  }

  .about__list {
    grid-area: list;
    margin-top: var(--space-16);
  }

  .practice-item__body {
    align-items: flex-start;
  }
}