/* ==========================================================================
   06 — Sobre ("Produção própria")
   Figma: 7057:349 (frame desktop, h 728) · bg cream-50 · flex gap 80 · py 80 · px 112
   - 7057:350  Image 568×568, radius 24, p 24, conteúdo alinhado embaixo/esquerda
     └ 7057:1481 Selo 141.812×141.802 (text-paths "5 MILHÕES DE FATIAS" /
                 "YES, WE HAVE IT" + ícone fi_3400159) → export SVG do node
   - 7057:352  Hero Container (flex-1 → 568) col gap 56, centrado na vertical
     ├ 7057:353  título Anton 56/1.2 + texto Archivo 18/1.4 (gap 24, § 16)
     └ 7057:356  especialista: foto 100×100 + nome Anton 20/1.4 + desc 16/1.4
   ========================================================================== */

.sobre {
  background: var(--color-cream-50);
  padding-block: var(--section-py);             /* py-[80px] */
}

/* 2 colunas iguais: imagem 568 | conteúdo flex-1 (= 568 no frame desktop) */
.sobre__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;                          /* items-center */
  column-gap: 80px;                             /* gap-[80px] */
}

/* ---------- Imagem + selo (7057:350) ---------- */
.sobre__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;                    /* justify-end */
  align-items: flex-start;                      /* items-start */
  aspect-ratio: 1 / 1;                          /* size-[568px] */
  padding: 24px;                                /* p-[24px] */
  border-radius: 24px;                          /* rounded-[24px] */
  overflow: hidden;
}

.sobre__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 24px;
}

/* Selo 7057:1481 — 141.812 × 141.802, overflow-clip */
.sobre__selo {
  position: relative;
  flex: none;
  width: 141.812px;
  height: 141.802px;
  overflow: hidden;
}
.sobre__selo img { max-width: none; }          /* SVG no tamanho nativo (142×142) */

/* ---------- Conteúdo (7057:352) ---------- */
.sobre__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 56px;                                    /* gap-[56px] */
  min-width: 0;
}

.sobre__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;                                    /* gap-[24px] */
  width: 100%;
  color: var(--color-red-700);
  overflow-wrap: break-word;
}

.sobre__title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 56px;                              /* text-[56px] */
  /* Figma: leading 1.2 (67.2px), mas o Figma arredonda a entrelinha para 67px
     (metadata: 2 linhas = 134). 67px reproduz a geometria. */
  line-height: 67px;
  text-transform: uppercase;
}

.sobre__body {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;                              /* text-[18px] */
  /* Figma: leading 1.4 (25.2px) arredondado para 25px
     (metadata: 6 linhas + § 16 = 166). */
  line-height: 25px;
}
.sobre__body p + p { margin-top: 16px; }       /* mb-[16px] no 1º parágrafo */
/* Chrome assenta a linha de base do Archivo 18/25 ~1px acima do Figma (caixas
   batem): desloca só os glifos, sem mexer na geometria medida. */
.sobre__body p {
  position: relative;
  top: 1px;
}

/* ---------- Especialista (7057:356) ---------- */
.sobre__especialista {
  display: flex;
  align-items: center;                          /* items-center */
  gap: 24px;                                    /* gap-[24px] */
  width: 100%;
}

.sobre__especialista-foto {
  flex: none;
  width: 100px;                                 /* size-[100px] */
  height: 100px;
  border-radius: 50%;                           /* Ellipse 1 */
  object-fit: cover;
}

.sobre__especialista-info {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;                                     /* gap-[8px] */
  min-width: 0;
  color: var(--color-red-700);
  line-height: var(--lh-body);                  /* leading-[1.4] */
  overflow-wrap: break-word;
}

.sobre__especialista-nome {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;                              /* text-[20px] → h 28 */
  text-transform: uppercase;
}

/* Ajuste do cliente: 2 linhas, quebra depois de "padrão de"
   ("…pelo padrão de" = 298px · com "forno" = 338px) */
.sobre__especialista-desc { max-width: 310px; }

.sobre__especialista-desc {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;                              /* text-[16px] */
  /* Figma: leading 1.4 (22.4px) arredondado para 22px (2 linhas = 44). */
  line-height: 22px;
}

/* ==========================================================================
   Responsivo — o Figma só tem desktop; >= 1200px nada muda.
   Escala do projeto: tokens --fs-t-* / --fs-m-* / --gap-m-* (tokens.css).
   A partir de 600: foto | texto em 2 colunas (como o Figma). Celular em pé
   (< 600): título → texto → assinatura → foto quadrada em card. A foto é 3:4
   (1047×1400); os recortes centrados mantêm a marca da caixa e a fatia (com
   a base) no quadro.
   ========================================================================== */

/* ---------- Laptop / tablet grande (1024–1199): 2 colunas mais justas ------
   Título fluido: 40px em 1024 → ~47px em 1199 (o literal 56 fica no desktop).
   A foto acompanha a altura da coluna de texto (stretch), nunca menor que um
   quadrado. */
@media (max-width: 1199.98px) {
  .sobre__inner { column-gap: 48px; }

  .sobre__media {
    align-self: stretch;
    width: 100%;                  /* largura = coluna; altura = trilha (≥ quadrado) */
    padding: 20px;
    border-radius: 20px;
  }
  .sobre__foto { border-radius: 20px; }

  .sobre__selo {
    width: 120px;
    height: 120px;
  }
  .sobre__selo img {
    width: 100%;
    height: 100%;
  }

  .sobre__content { gap: 40px; }
  .sobre__text { gap: 20px; }

  .sobre__title {
    font-size: clamp(var(--fs-t-h2), 3.889vw, 56px);
    line-height: 1.15;
    text-wrap: balance;
    hyphens: manual;
  }

  .sobre__body p {
    top: 0;
    text-wrap: pretty;
  }
  /* 3 linhas equilibradas quando a coluna aperta (768: "…receita / e pelo
     padrão de forno / da Casa do Cheesecake.", sem "da" no fim da linha) */
  .sobre__especialista-desc { text-wrap: balance; }

  .sobre__especialista { gap: 20px; }
  .sobre__especialista-foto {
    width: 80px;
    height: 80px;
  }
  .sobre__especialista-info { gap: 4px; }
  .sobre__especialista-nome {
    font-size: 20px;              /* como no desktop e nos títulos de card da 05 (24 competia com o título) */
    line-height: 1.3;
    text-wrap: balance;
  }
}

/* ---------- Tablet (768–1023): 2 colunas, como no desktop e em 1024 --------
   Foto | texto lado a lado (a foto acompanha a altura do texto, retrato ~3:4,
   quase a foto inteira), em vez de empilhar uma foto 4:3 de 700px de largura
   sob o texto: a seção fica ~35% mais baixa e sem o vazio à direita do texto
   (antes limitado a 38em). Título 40 → texto 16/1.5 → assinatura. */
@media (max-width: 1023.98px) {
  .sobre__inner { column-gap: 32px; }

  .sobre__selo {
    width: 96px;
    height: 96px;
  }

  .sobre__content { gap: 32px; }
  .sobre__text { gap: 16px; }

  .sobre__title { font-size: var(--fs-t-h2); }

  .sobre__body {
    font-size: var(--fs-t-body);
    line-height: 1.5;
  }
  .sobre__body p + p { margin-top: 12px; }

  .sobre__especialista { gap: 16px; }
  .sobre__especialista-foto {
    width: 64px;
    height: 64px;
  }
  .sobre__especialista-desc { line-height: 1.45; }
}

/* ---------- Mobile (< 768) ---------------------------------------------------
   Tipografia, selo e raios do mobile. De 600 a 767 (celular deitado, tablet
   pequeno) segue foto | texto em 2 colunas, como no tablet: em coluna única
   a foto quadrada chegava a ~680 × 680 e o texto a ~95 caracteres por linha. */
@media (max-width: 767.98px) {
  .sobre__media {
    padding: var(--gap-m-md);
    border-radius: var(--radius-m-card);
  }
  .sobre__foto {
    border-radius: var(--radius-m-card);
    object-position: 50% 50%;
  }

  /* 142 → 80–92 (proporção preservada; texto do selo em contorno no SVG) */
  .sobre__selo {
    width: clamp(80px, 22vw, 92px);
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .sobre__content { gap: 24px; }
  .sobre__text { gap: var(--gap-m-md); }

  .sobre__title { font-size: var(--fs-m-h2); }

  .sobre__body {
    font-size: var(--fs-m-body);
    line-height: var(--lh-m-body);
  }
  .sobre__body p + p { margin-top: var(--gap-m-sm); }

  .sobre__especialista {
    gap: var(--gap-m-md);
    padding-top: 24px;
    border-top: 1px solid var(--color-red-700-a15);
  }
  .sobre__especialista-foto {
    width: 56px;
    height: 56px;
  }
  .sobre__especialista-nome {
    font-size: var(--fs-m-h3);
    line-height: 1.2;
  }
  .sobre__especialista-desc {
    font-size: var(--fs-m-small);
    line-height: 1.45;
  }
}

/* ---------- Celular em pé (< 600) ---------------------------------------------
   Título → texto → assinatura → foto em card arredondado dentro das margens
   (como os cards da 05; nada encostado na borda da tela nem colado na seção
   seguinte). Card quadrado, recorte centrado, selo no
   canto inferior esquerdo: é a composição do desktop (568 × 568, selo 25%
   da largura) em miniatura — o selo cai na mesma área escura da foto. */
@media (max-width: 599.98px) {
  .sobre__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--gap-m-lg);
  }

  .sobre__media {
    order: 2;                     /* foto depois do texto (DOM inalterado) */
    align-self: auto;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}

/* ==========================================================================
   Motion (ver MOTION.md · coreografia em assets/js/sections/06-sobre.js)
   Só ajustes das entradas do motor e um hover sutil; nenhuma regra de layout.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* selo (imagem única: texto + ícone) — entra girando como um carimbo */
  .sobre__selo { --reveal-rotate: -28deg; }
  /* retrato redondo: pop quase sem giro (rosto não "tomba") */
  .sobre__especialista-foto { --reveal-rotate: -4deg; }
}

/* Hover (só dispositivos com cursor): a foto aproxima de leve dentro da
   moldura e o selo gira um pouco — mesmo zoom das fotos de cards. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sobre__foto,
  .sobre__selo {
    transition: scale 600ms var(--motion-ease), rotate 900ms var(--motion-ease);
  }
  .sobre__media:hover .sobre__foto { scale: 1.04; }
  .sobre__media:hover .sobre__selo { rotate: -12deg; }
}

/* Selo "5 milhões de fatias · Yes, we have it": o anel de texto gira sem parar
   no sentido horário (pedido do cliente); o bolinho do centro fica parado.
   O <img> gira com o centro mascarado e uma cópia só do ícone fica por cima
   (06-sobre-selo-icone.svg, mesmo viewBox 142×142). Estado parado = SVG original. */
@media (prefers-reduced-motion: no-preference) {
  .sobre__selo img {
    animation: cdc-spin 22s linear infinite;
    -webkit-mask: radial-gradient(circle closest-side, transparent 0 56%, #000 57%);
            mask: radial-gradient(circle closest-side, transparent 0 56%, #000 57%);
  }
  .sobre__selo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../../images/06-sobre-selo-icone.svg") center / 100% 100% no-repeat;
    pointer-events: none;
  }
}