/* ==========================================================================
   08 — Entrega
   Figma: "Entrega" 7057:490 (1440 × 678) · fileKey wKx5nynbRuELPfTDjiAWDg
   - Seção: bg cream-50, flex col, gap 80, items-center, padding 80px 112px
   - Header 7057:491 → título 7057:492 (Anton 56/1.2, uppercase, w 534, centrado)
   - Container 7057:1348: flex col, gap 48, items-center
     · Info section 7057:493: 4 colunas flex 1 (280 @1440), gap 32, items-start
       cada coluna: flex col, gap 24, items-center
       Delivery Badge 56×56, borda 1px red-700, radius 999, ícone 32 (29 no 2º)
       Container de texto: flex col, gap 8, lh 1.4, centrado
         título Anton 20 uppercase · texto Archivo Regular 18
     · Button 7073:396 → .btn.btn--primary (components.css)
   ========================================================================== */

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

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

/* Header 7057:491 */
.entrega__header {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 7057:492 — Anton 56 / 1.2, uppercase, w 534
   Fluido: 56px @1440 (3.8889vw) → mín. 40px. A largura acompanha o corpo
   (534/56 em = 534px @1440), então a quebra do Figma se mantém em qualquer
   tamanho; abaixo disso o max-width e o balance cuidam das linhas. */
.entrega__title {
  width: calc(1em * 534 / 56);
  max-width: 100%;
  font-size: clamp(40px, 3.8889vw, 56px);
  text-align: center;
  text-wrap: balance;
  color: var(--color-red-700);
  overflow-wrap: break-word;
}

/* Container 7057:1348 */
.entrega__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

/* Info section 7057:493 */
.entrega__list {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Colunas 7057:494 / 497 / 500 / 503 — flex-[1_0_0] */
.entrega__item {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-width: 1px;
}

/* Delivery Badge 7057:1287 … — 56×56, borda 1px, pill */
.entrega__badge {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-red-700);
  border-radius: var(--radius-pill);
}

/* Moldura do ícone (overflow-clip). O <img> ocupa a caixa do "Group" do Figma:
   mesmo tamanho da raiz do SVG, posição pelos insets do design. object-fit
   protege ícones trocados pelo Customizer (WP) contra distorção. */
.entrega__icon {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  overflow: clip;
}

.entrega__icon img {
  position: absolute;
  max-width: none;
  object-fit: contain;
}

/* fi_8929788 (7057:1349): Group inset 8.33% 20.83% 10.54% 20.83% + clip-path 32×32 */
.entrega__icon--local img {
  top: 8.33%;
  left: 20.83%;
  width: 18.6667px;
  height: 25.96px;
  -webkit-mask: url("../../images/08-entrega-icon-local-mask.svg") no-repeat -6.667px -2.667px / 32px 32px;
          mask: url("../../images/08-entrega-icon-local-mask.svg") no-repeat -6.667px -2.667px / 32px 32px;
  -webkit-mask-clip: no-clip;
          mask-clip: no-clip;
  mask-mode: alpha;
  mask-composite: intersect;
}

/* fi_2886665 (7057:1325): caixa 29×29, Group inset 5.88% 2.65% 5.88% 2.94% */
.entrega__icon--agenda {
  width: 29px;
  height: 29px;
}
.entrega__icon--agenda img {
  top: 5.88%;
  left: 2.94%;
  width: 27.3794px;
  height: 25.5882px;
}

/* fi_3400159 (7057:1329): Group inset 12.73% 0 */
.entrega__icon--gelado img {
  top: 12.73%;
  left: 0;
  width: 32px;
  height: 23.8543px;
}

/* fi_12660130 (7057:1356): vetor 32×32 direto */
.entrega__icon--ifood img {
  inset: 0;
  width: 32px;
  height: 32px;
}

/* Container de texto 7057:1315 … — gap 8, lh 1.4, centrado */
.entrega__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  line-height: var(--lh-body);                 /* leading-[1.4] */
  text-align: center;
  color: var(--color-red-700);
  overflow-wrap: break-word;
}

/* 7057:495 … — Anton 20, uppercase */
.entrega__item-title {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  line-height: inherit;
  text-transform: uppercase;
}

/* 7057:496 … — Archivo Regular 18, wdth 100 */
.entrega__item-text {
  width: 100%;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  font-variation-settings: "wdth" 100;
}

/* Bairros do iFood viram links para cada loja: sublinhado discreto para
   serem reconhecíveis como link sem mudar a cor do texto. */
.entrega__item-text a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.entrega__item-text a:hover,
.entrega__item-text a:focus-visible { color: var(--color-red-600); }


/* ==========================================================================
   Responsivo — o Figma só tem o frame desktop 1440: tudo acima de 1199px fica
   intocado. Escala compacta dos tokens (--fs-t-* / --fs-m-* / --gap-m-*) e
   padrão mobile do site de referência (_ref/mobile-ref/SPEC.md → 08-entrega):
   ≤1199  4 colunas de ~200px ficariam espremidas → grade 2×2 centrada, mesma
          pilha do desktop (badge → título → texto) e mesmos tamanhos. Título
          → grade 64; grade → botão mantém os 48 do Figma (maior que o gap de
          40 entre linhas, então o botão não parece uma 5ª célula).
   ≤1023  2×2 compacta: título 40, badge 48 (ícone 24), título do item 20
          (literal do Figma — nunca maior que o desktop), texto 16/1.5.
   ≤767   lista "Nossos números" da referência: uma coluna, badge 40 (ícone
          20) à esquerda, título Anton 18 alinhado ao centro do badge, texto
          15/1.5 à esquerda, itens empilhados com gap 24 (itens de 2–3 linhas).
          Título da seção 28 centrado e CTA único centrado, largura automática.
   Os ícones são SVG posicionados em px (insets do Figma, máscara no 1º), então
   o tamanho menor vem de transform: scale na moldura — geometria preservada.
   ========================================================================== */

/* ---- Laptop / tablet grande (1024–1199) ---- */
@media (max-width: 1199.98px) {
  .entrega__inner { gap: 64px; }

  .entrega__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
    max-width: 760px;
  }

  .entrega__item { gap: 20px; }

  .entrega__item-title { text-wrap: balance; }

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

  /* Lista de links (lojas do iFood; modificador --links, também no tema WP
     quando o texto é só links): no toque, links de uma linha de texto medem
     ~17px e ficam a ~6px uns dos outros. Viram chips em pílula, 2 por linha,
     mesma largura, alvo de 44px (como os chips de sabor da seção 04). Os
     separadores ", " / " e " / "." continuam no DOM (leitores de tela leem a
     frase); font-size 0 só os tira da tela: viram itens flex de largura 0.
     Colunas com margem (não gap): o gap contaria os separadores vazios. */
  .entrega__text > .entrega__item-text--links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-self: center;
    row-gap: 8px;
    width: calc(100% + 8px);
    max-width: 348px;
    margin: 4px -4px 0;
    font-size: 0;
  }

  .entrega__item-text--links a {
    display: inline-flex;
    flex: 0 0 calc(50% - 8.5px);                        /* 2 por linha (0.5px de folga contra arredondamento) */
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 44px;                                   /* alvo de toque */
    margin-inline: 4px;                                 /* 8 entre chips */
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--color-red-700) 45%, transparent);
    border-radius: var(--radius-pill);
    font-size: var(--fs-t-body);                        /* 16 */
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  }

  .entrega__item-text--links a:hover,
  .entrega__item-text--links a:focus-visible,
  .entrega__item-text--links a:active {
    border-color: var(--color-red-700);
    background-color: var(--color-red-700-a08);
    color: var(--color-red-700);
  }
}

/* ---- Tablet (768–1023) ---- */
@media (max-width: 1023.98px) {
  .entrega__inner { gap: var(--content-gap); }          /* 48 */

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

  .entrega__list {
    gap: 40px 32px;
    max-width: 680px;
  }

  .entrega__item { gap: 16px; }

  .entrega__badge {
    width: 48px;
    height: 48px;
  }

  .entrega__icon { transform: scale(.75); }             /* 32 → 24 */

  .entrega__text { gap: 6px; }

  .entrega__item-title {
    font-size: 20px;                                    /* literal do Figma */
    line-height: 1.2;
  }

  .entrega__item-text {
    font-size: var(--fs-t-body);                        /* 16 */
    line-height: 1.5;
  }
}

/* ---- Mobile (≤767) ---- */
@media (max-width: 767.98px) {
  .entrega__inner { gap: var(--gap-m-lg); }             /* 32 */

  .entrega__title { font-size: var(--fs-m-h2); }        /* 28 */

  .entrega__body { gap: var(--gap-m-lg); }              /* 32 */

  .entrega__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pad-m-card);                             /* 24 */
    max-width: 480px;
  }

  .entrega__item {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--gap-m-md);                               /* 16 */
  }

  .entrega__badge {
    width: 40px;
    height: 40px;
  }

  .entrega__icon { transform: scale(.625); }            /* 32 → 20 */

  .entrega__text {
    flex: 1 1 0;
    min-width: 0;
    gap: 4px;
    padding-top: 9px;                                   /* (40 − 18 × 1.2) / 2: título no eixo do badge */
    text-align: left;
  }

  .entrega__item-title {
    font-size: 18px;                                    /* SPEC: --fs-m-h3 menor (16–18) */
    text-wrap: wrap;
  }

  /* pretty (não o balance global do mobile): a descrição usa a largura da
     coluna, como o item 1, e só evita a palavra sozinha na última linha */
  .entrega__item-text {
    font-size: var(--fs-m-body);                        /* 15 — corpo do mobile (14 ficava miúdo ao lado do título 18) */
    line-height: var(--lh-m-body);                      /* 1.5 */
    text-wrap: pretty !important;
  }

  /* chips centralizados na largura do item (do badge à margem direita), não
     só na coluna do texto: puxa os 40 do badge + 16 do gap para a esquerda */
  .entrega__text > .entrega__item-text--links {
    justify-content: center;
    align-self: auto;
    width: calc(100% + 40px + var(--gap-m-md) + 8px);
    max-width: none;
    margin: 20px -4px 0 calc(-40px - var(--gap-m-md) - 4px);  /* título/ícone → chips: 4 + 20 */
  }

  .entrega__item-text--links a { font-size: var(--fs-m-label); }   /* 14 */
}