/* Componente Hero da home (Figma: Portfolio › 511:3263, dentro de 582:3657) — desktop + versão mobile/tablet no final
   Padding 56px, espaço de 112px acima dos cards, cards 200px.
   A foto ocupa 1/3 da largura do conteúdo (proporção 400:467 do Figma) e define a altura da linha.
   A hero tenta ocupar (altura da tela − header − 32px): se sobrar espaço, o espaço acima dos
   cards vai até 112px; se faltar, ele cai para 40px e a hero passa da primeira rolagem. */
.hero {
  --hero-padding: var(--space-56);
  --hero-cards-h: 200px;
  --hero-gap: var(--space-112);
  --hero-gap-min: var(--space-40);
  --hero-bottom-peek: var(--space-32);
  --hero-caption-h: calc(2 * var(--line-height-22) + var(--space-24));
  /* Largura do conteúdo ≈ janela (máx. 1728px) − margens; usada só para estimar a altura natural */
  --hero-content-w: calc(min(100vw, var(--layout-max-width)) - 2 * var(--layout-gutter));
  --hero-photo-h: calc(var(--hero-content-w) / 3 * 467 / 400);
  --hero-natural-h: calc(2 * var(--hero-padding) + var(--hero-photo-h) + var(--hero-caption-h) + var(--hero-gap) + var(--hero-cards-h));
  --hero-fold-h: calc(100svh - var(--header-height) - var(--hero-bottom-peek));

  background: var(--color-background-default-lavender);
  border-radius: 0 0 var(--radius-header) var(--radius-header);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--hero-gap-min);
  min-height: min(var(--hero-fold-h), var(--hero-natural-h));
  padding-block: var(--hero-padding);
}

/* ---------- Linha principal: texto + foto (1/3) ---------- */
.hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(100% / 3);
  column-gap: clamp(var(--space-48), 12.7vw, var(--space-192));
}

/* Eyebrow no topo e título + botão centralizados na altura da foto.
   - padding inferior desconta a legenda que fica abaixo da foto;
   - as margens automáticas dividem o espaço livre; o padding inferior do título
     compensa a altura do eyebrow + espaço mínimo, mantendo o centro igual ao da foto;
   - sem espaço suficiente, o título fica logo abaixo do eyebrow (mínimo 24px), sem sobrepor. */
.hero__intro {
  --hero-eyebrow-h: 20px;
  --hero-eyebrow-gap: var(--space-24);

  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: var(--hero-caption-h);
}

.hero__intro .hero__eyebrow {
  margin-bottom: var(--hero-eyebrow-gap);
  line-height: var(--line-height-26);
}

.hero__headline {
  margin-block: auto;
  padding-bottom: calc(var(--hero-eyebrow-h) + var(--hero-eyebrow-gap));
}

.hero__eyebrow {
  margin: 0;
  color: var(--color-branding-default-purple);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
}

/* Cada frase em um bloco, para o equilíbrio valer só dentro dela e evitar palavra sozinha em telas estreitas */
.hero__eyebrow span {
  display: block;
  text-wrap: balance;
}

.hero__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
}

.hero__title {
  max-width: 808px;
  margin: 0;
  color: var(--color-branding-default-purple);
  font-family: var(--font-family-display);
  font-size: var(--font-size-56);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-58);
}

.hero__title-highlight {
  color: var(--color-branding-secondary);
}

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

.hero__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 467;
  object-fit: cover;
  border-radius: 20px 40px 160px 40px;
}

.hero__caption {
  color: var(--color-branding-default-purple);
  font-size: var(--font-size-20);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-22);
  text-wrap: balance; /* quando não cabe em uma linha, evita palavra sozinha na segunda */
}

/* ---------- Cards de destaque ----------
   4 colunas iguais separadas por divisores lavanda de 4px (o gap mostra o fundo lavanda). */
.hero__highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  flex-shrink: 0;
  height: var(--hero-cards-h);
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-background-default-lavender);
}

.hero__highlight {
  display: flex;
}

.hero-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-16);
  padding: 0 var(--space-40) 0 var(--space-48);
  background: var(--color-background-secondary-white);
  transition: background-color var(--motion-duration) var(--motion-easing);
}

.hero-card__title {
  margin: 0;
  color: var(--color-branding-default-purple);
  font-size: var(--font-size-40);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-34);
}

.hero-card__text {
  margin: 0;
  color: var(--color-neutrals-primary-black);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-normal);
}

/* Seta ↗ (asset do DS 582:4199) em Gray 1 — mesma cor no hover (decisão do usuário);
   no hover só desloca 2px. */
.hero-card__arrow {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  transition: transform var(--motion-duration) var(--motion-easing);
}

/* Hover: fundo Gray 2 (pedido da usuária) */
a.hero-card:focus-visible {
  background: var(--color-neutrals-gray-2);
}

@media (hover: hover) {
  a.hero-card:hover {
    background: var(--color-neutrals-gray-2);
  }
}

a.hero-card:focus-visible .hero-card__arrow {
  transform: translate(2px, -2px);
}

@media (hover: hover) {
  a.hero-card:hover .hero-card__arrow {
    transform: translate(2px, -2px);
  }
}

a.hero-card:focus-visible {
  outline-offset: -4px;
}

/* ---------- Desktop estreito (1024–1365px) ----------
   Com 4 colunas os títulos de 40px não cabem (ex.: "experiência"): cards em grade 2×2,
   altura conforme o conteúdo (mínimo 200px, como no Figma). */
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .hero {
    --hero-cards-h: 404px; /* 2 linhas de 200px + divisor de 4px, para a estimativa de altura */
  }

  .hero__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }

  .hero-card {
    min-width: 0;
    min-height: 200px;
    padding-block: var(--space-40);
  }
}

/* ---------- Mobile / tablet (< 1024px): coluna única (proposta aprovada) ----------
   Ordem: eyebrow, título, "Ver cases", foto em largura total + legenda, cards 2×2.
   Sem a regra de caber na primeira rolagem. */
@media (max-width: 1023.98px) {
  .hero {
    --hero-padding: var(--space-32);
  }

  .hero__inner {
    gap: var(--space-40);
    min-height: 0;
  }

  .hero__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-40);
  }

  .hero__intro {
    padding-bottom: 0;
  }

  .hero__headline {
    margin-block: 0;
    padding-bottom: 0;
  }

  .hero__title {
    font-size: var(--font-size-32);
    line-height: var(--line-height-36);
  }

  /* Foto + legenda: no máximo 480px, centralizadas na tela */
  .hero__profile {
    align-self: center;
    width: 100%;
    max-width: 480px;
  }

  .hero__photo {
    border-radius: 20px 40px 120px 40px;
  }

  .hero__highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: auto;
  }

  .hero-card {
    justify-content: flex-start;
    gap: var(--space-8);
    min-width: 0;
    min-height: 160px;
    padding: var(--space-48) var(--space-16) var(--space-24);
  }

  .hero-card__title {
    font-size: var(--font-size-24);
    line-height: var(--line-height-28);
  }

  .hero-card__text {
    font-size: var(--font-size-14);
  }

  .hero-card__arrow {
    top: var(--space-12);
    right: var(--space-12);
  }
}