/* ==========================================================================
   05 — Diferenciais ("O que faz um cheesecake ser o de verdade")
   Figma: frame "Cardápio" 7057:330 (1440 × 868) · y 3476.65 no Desktop 7057:68
   - Cabeçalho 7057:331: título Anton 56 + texto Archivo 20, gap 80, items-center
   - Lista 7057:334: 3 cards "Cheesecake Info" (389.33 × 488), gap 24
     texto (p 32, gap 16) em cima + foto 4:3 (389.33 × 292, radius 24) embaixo
   - Tag 7057:1494 sobre a foto do 1º card (left 12 / top 12 da foto)
   ========================================================================== */


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

.diferenciais__inner {
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);                   /* gap-[80px] */
}

/* ---- Cabeçalho (7057:331) ---- */
.diferenciais__head {
  display: flex;
  align-items: center;
  gap: 80px;
  overflow-wrap: break-word;
}

.diferenciais__title,
.diferenciais__lead {
  flex: 1 0 0;
  min-width: 1px;
}

.diferenciais__title {                        /* 7057:332 */
  font-family: var(--font-display);
  font-weight: 400;
  /* 56px no Figma (1440); fluido abaixo disso para manter as 2 linhas do
     layout ("O que faz um cheesecake / ser o de verdade") entre 1024 e 1440. */
  font-size: clamp(40px, 3.8889vw, 56px);
  line-height: var(--lh-display);            /* 1.2 */
  text-transform: uppercase;
  text-wrap: balance;
}

.diferenciais__lead {                       /* 7057:333 */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--lh-body);               /* 1.4 → 28px */
}

/* ---- Lista de cards (7057:334) ---- */
.diferenciais__list {
  display: flex;
  align-items: stretch;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diferenciais__card {                         /* 7057:335 / 341 / 345 */
  position: relative;
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  justify-content: space-between;            /* texto no topo, foto na base */
  min-width: 1px;
  border-radius: 24px;
  background: var(--color-cream-25);
  color: var(--color-red-700);
}

.diferenciais__card--destaque {               /* card vermelho (7057:335) */
  background: var(--color-red-700);
  color: var(--color-cream-50);
}

.diferenciais__body {                         /* 7057:336 (p 32) + 7057:1477 (gap 16) */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  overflow-wrap: break-word;
}

.diferenciais__card-title {                   /* 7057:337 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: var(--lh-body);               /* 1.4 → 28px */
  text-transform: uppercase;
}

.diferenciais__card-text {                    /* 7057:338 */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  /* Figma: leading 1.4 (22.4px); o Figma arredonda cada linha para 22px
     (caixas de 66 / 88 px no metadata = 3 / 4 linhas × 22). */
  line-height: 22px;
}

/* ---- Foto 4:3 (7057:1414 / 1438 / 1440) ---- */
.diferenciais__media {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;                       /* 389.33 × 292 */
  margin: 0;
  border-radius: 24px;
  overflow: hidden;
}

.diferenciais__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ---- Tag "Na quantidade certa" (7057:1494) ---- */
.diferenciais__tag {
  position: absolute;
  top: 12px;                                 /* 208 no card − 196 do topo da foto */
  left: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;                 /* py 6 · pr 12 · pl 8 */
  border-radius: 14px;
  background: var(--color-red-950);
  color: var(--color-cream-50);
}

.diferenciais__tag-icon {                     /* 7057:1495 — 16 × 16 */
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.diferenciais__tag-text {                     /* 7057:1499 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;                         /* Figma: 14 × 1.4 arredondado (caixa 114 × 20 → tag 32) */
  text-transform: uppercase;
  white-space: nowrap;
}


/* ==========================================================================
   Responsivo (o Figma só tem o frame 1440; >= 1200 px nada muda)
   Padrão do site de referência (SPEC.md): título → texto → cards de largura
   total com a foto dentro do card, na base.
   - <= 1199: cabeçalho ainda em 2 colunas (texto 18px); 3 cards lado a lado
     com respiro interno menor (p 24).
   - <= 1023: cabeçalho empilha (título 40 → texto 18); cards em grade de 2
     colunas e o 1º card (destaque) ocupa a linha inteira na horizontal —
     texto à esquerda, foto à direita alinhada à 2ª coluna. Fotos 16:10 / 3:2.
   - <= 767: uma coluna — título 28 → texto 16 → 3 cards empilhados de largura
     total (título 20 → texto 15 → foto 16:10 dentro do card).
   O "card largo" do tablet é o 1º quando a quantidade de cards é ímpar (3 no
   layout; o CPT pode ter outra contagem): a grade nunca fica com buraco.
   Ele usa :where() para ter a mesma especificidade de .diferenciais__card /
   __body / __media e ser desfeito no mobile sem repetir seletores.
   ========================================================================== */
@media (max-width: 1199.98px) {
  .diferenciais__inner {
    gap: 64px;
  }

  .diferenciais__head {
    gap: 48px;
  }

  .diferenciais__lead {
    font-size: var(--fs-t-lead);             /* 18px */
    text-wrap: pretty;
  }

  .diferenciais__body {
    gap: 12px;
    padding: 24px;
  }

  .diferenciais__card-title {
    text-wrap: balance;                      /* evita "forno" sozinho na 2ª linha */
  }

  .diferenciais__card-text {
    text-wrap: pretty;
  }
}

@media (max-width: 1023.98px) {
  .diferenciais__inner {
    gap: var(--content-gap);                 /* 48px (32px no mobile) */
  }

  .diferenciais__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .diferenciais__title,
  .diferenciais__lead {
    flex: none;
    width: 100%;
    max-width: 640px;
  }

  .diferenciais__title {
    font-size: var(--fs-t-h2);               /* 40px */
  }

  .diferenciais__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .diferenciais__card {
    border-radius: 20px;
  }

  .diferenciais__media {
    aspect-ratio: 16 / 10;
    border-radius: 20px;
  }

  .diferenciais__card:where(:first-child:nth-last-child(odd)) {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 16px;                               /* = gap da grade → foto alinha à 2ª coluna */
  }

  :where(.diferenciais__card:first-child:nth-last-child(odd)) > .diferenciais__body {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding: 32px 8px 32px 24px;             /* texto alinhado ao dos outros cards (24) */
  }

  :where(.diferenciais__card:first-child:nth-last-child(odd)) > .diferenciais__media {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 3 / 2;
  }
}

/* Mobile (< 768): tipografia e raios do mobile. De 600 a 767 (celular
   deitado, tablet pequeno) continua a grade do tablet — card largo + 2 cards
   lado a lado —: em coluna única cada foto chegava a ~600 × 380 e a seção a
   ~1850px. A coluna única fica para < 600. */
@media (max-width: 767.98px) {
  .diferenciais__head {
    gap: var(--gap-m-md);                    /* 16px */
  }

  .diferenciais__title {
    max-width: none;
    font-size: var(--fs-m-h2);               /* 28px */
  }

  .diferenciais__lead {
    max-width: 36em;                         /* ~70 caracteres por linha (576px); < 600 ocupa a largura toda */
    font-size: var(--fs-m-lead);             /* 16px */
    line-height: var(--lh-m-body);           /* 1.5 */
  }

  .diferenciais__list {
    gap: var(--gap-m-md);                    /* 16px — mesmo ritmo do tablet, seção mais compacta */
  }

  .diferenciais__card {
    border-radius: var(--radius-m-card);     /* 16px */
  }

  .diferenciais__body {
    gap: var(--gap-m-sm);                    /* 12px */
  }

  .diferenciais__card-title {
    font-size: var(--fs-m-h3);               /* 20px */
    line-height: 1.25;
  }

  .diferenciais__card-text {
    font-size: var(--fs-m-body);             /* 15px */
    line-height: var(--lh-m-body);           /* 1.5 */
  }

  .diferenciais__media {
    border-radius: var(--radius-m-card);
  }

  .diferenciais__img {
    object-position: 50% 58%;                /* mantém o assunto (tigela / fatia / calda) */
  }
}

/* Celular em pé (< 600): uma coluna — 3 cards empilhados de largura total,
   texto em cima e foto 16:10 dentro do card, na base. */
@media (max-width: 599.98px) {
  .diferenciais__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .diferenciais__card {
    flex-direction: column;
    gap: 0;
  }

  .diferenciais__body {
    flex: none;
    justify-content: flex-start;
    padding: var(--pad-m-card);              /* 24px */
  }

  .diferenciais__media {
    flex: none;
    aspect-ratio: 16 / 10;                   /* 342 × 214 em 390 */
  }
}


/* ==========================================================================
   Motion (ver MOTION.md · coreografia em assets/js/sections/05-diferenciais.js)
   - Tag "na quantidade certa": entra com "pop" a partir do canto do ícone,
     com um leve overshoot (só enquanto [data-reveal] existe).
   - Hover (mouse): zoom suave na foto do card. Sem mudança de layout; em
     telas de toque e com reduced-motion nada acontece.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js-motion .diferenciais__tag[data-reveal] {
    --reveal-ease: cubic-bezier(.34, 1.4, .64, 1);
    --reveal-rotate: -6deg;
    transform-origin: 16px 50%;
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .diferenciais__img {
    transition: scale 600ms var(--motion-ease);
  }

  .diferenciais__card:hover .diferenciais__img {
    scale: 1.05;
  }
}