/* ==========================================================================
   Footer — compartilhado
   Figma "Footer" 7073:66 (1440 × 418) · bg #000 · flex column
   Main Container 7073:149: flex column, gap 32, items-center, pt 80 · pb 32 · px 112
     ├ Container 7073:67 (1216 × 232): flex, gap 80, items-start
     │   ├ 7073:73 (348): COMPRAR 7073:74 | A MARCA 7073:79 — flex gap 56
     │   │    cada coluna: flex column gap 16; título Anton 20/1.4 uppercase,
     │   │    links Archivo 18/1.4, cor #fbf5e7
     │   ├ 7073:68 (flex 1 → 360): column gap 32, items-center
     │   │    Logo 7073:69 148 × 150 (PNG → webp, object-cover)
     │   │    Texto 7073:71 Archivo 18/1.4, text-center
     │   └ 7073:97 (w 348): CONTATO 7073:84 | SOCIAL 7073:87 — flex gap 56,
     │        justify-end, items-end, text-right
     └ Copyright 7073:91 (1216 × 22): flex justify-between items-center
         ├ 7073:92 Archivo 16/1.4 nowrap
         └ Créditos 7073:93: flex gap 10 → "Criado por" + símbolo 7073:95 (20 × 16)
   Line-heights em px: o Figma arredonda a altura de linha para px inteiro
   (18 × 1.4 = 25.2 → 25; 16 × 1.4 = 22.4 → 22). Conferido no recorte: o
   Main Container mede 398 (80 + 232 + 32 + 22 + 32) e a 1ª linha do Pattern
   cai inteira na linha de pixel 398 — com 25.2/22.4 tudo desceria 0.8px.
   Pattern 7073:111 (1440 × 20): 3 linhas com gradiente dourado (SVG do Figma
     1440 × 21.25, preserveAspectRatio none) como fundo do div decorativo —
     o box de 20px recorta a linha de 2px como o frame do Figma.

   Responsivo (desktop-first; ≥1280 = Figma):
   - ≤1279.98: as laterais de 348px não deixam espaço para logo + texto no
     centro → a marca sobe para uma linha própria e os dois grupos de links
     ficam lado a lado embaixo (layout do desktop, sem botão flutuante).
   - ≤1023.98 (tablet): marca centralizada em cima com divisor; as 4 colunas
     numa linha (space-between, texto à esquerda); copyright e "Criado por"
     empilhados e centralizados (o botão flutuante do WhatsApp fica no canto
     inferior direito — nada do rodapé pode ficar embaixo dele).
   - ≤767.98 (mobile): mesma ordem em uma coluna — logo 104px + texto
     centralizados → divisor → colunas em grade 2 × 2 → divisor →
     copyright (2 linhas) e "Criado por" centralizados → pattern.
   ========================================================================== */

.site-footer {
  --footer-side-w: 348px;                        /* w-[348px] de 7073:97 (= largura de 7073:73) */
  --footer-rule: 1px solid rgba(251, 245, 231, 0.16); /* divisor tablet/mobile: cream-50 a 16% sobre preto */
  display: flex;
  flex-direction: column;
  background: var(--color-black);                /* bg-black */
  color: var(--color-cream-50);                  /* text-[#fbf5e7] */
  font-family: var(--font-body);
  line-height: var(--lh-body);                   /* leading-[1.4] */
}

/* ---------- Main Container (7073:149) ---------- */
.site-footer__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;                                     /* gap-[32px] */
  padding-top: var(--section-py);                /* pt-[80px] */
  padding-bottom: 32px;                          /* pb-[32px] */
}

/* ---------- Container 7073:67 — 348 | 1fr | 348, gap 80 ---------- */
.site-footer__row {
  display: grid;
  grid-template-columns: var(--footer-side-w) minmax(0, 1fr) var(--footer-side-w);
  column-gap: clamp(40px, 5.5556vw, 80px);       /* gap-[80px] @1440 */
  align-items: start;
  width: 100%;
}

/* Grupos de colunas de links (7073:73 / 7073:97) */
.site-footer__group {
  display: flex;
  align-items: flex-start;
  gap: 56px;                                     /* gap-[56px] */
}
.site-footer__group--end {
  justify-content: flex-end;                     /* justify-end */
  text-align: right;                             /* text-right */
}

/* Coluna (7073:74 / 79 / 84 / 87): flex column gap 16 */
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 16px;                                     /* gap-[16px] */
}
.site-footer__group--end .site-footer__col { align-items: flex-end; }

.site-footer__heading {
  width: 100%;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;                               /* text-[20px] */
  line-height: 28px;                             /* leading-[1.4] → 20 × 1.4 = 28 */
  text-transform: uppercase;
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 16px;                                     /* gap-[16px] */
  width: 100%;
  margin: 0;
}
.site-footer__list li { display: block; }

.site-footer__link {
  display: block;
  height: 25px;                                  /* 1.4 → 25.2 → 25 no Figma */
  padding-top: 1px;                              /* Archivo 18: o Chrome assenta o glifo ~1px acima do Figma; a caixa continua 25 */
  font-size: 18px;                               /* text-[18px] */
  line-height: 25px;
  color: var(--color-cream-50);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-cream-100);
  text-decoration: underline;
  text-decoration-thickness: from-font;
}
.site-footer__link:focus-visible { outline-color: var(--color-cream-50); }

/* ---------- Marca central (7073:68): column gap 32, items-center ---------- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;                                     /* gap-[32px] */
  min-width: 0;
}

.site-footer__logo {
  display: block;
  flex-shrink: 0;
  width: 148px;                                  /* w-[148px] */
  height: 150px;                                 /* h-[150px] */
}
.site-footer__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;                             /* object-cover */
}
.site-footer__logo:focus-visible { outline-color: var(--color-cream-50); border-radius: 50%; }

.site-footer__tagline {
  width: 100%;
  max-width: 360px;                              /* largura de 7073:70 @1440 */
  padding-top: 1px;                              /* mesmo ajuste de baseline dos links (Archivo 18) */
  margin-bottom: -1px;                           /* …sem mudar a altura da marca (232) */
  font-size: 18px;                               /* text-[18px] */
  line-height: 25px;                             /* 1.4 → 25.2 → 25 no Figma (2 linhas = 50) */
  text-align: center;
  text-wrap: pretty;                             /* evita palavra órfã quando a coluna estreita (<1440); em 1440 as 2 linhas do Figma não mudam */
}

/* ---------- Copyright (7073:91): justify-between, items-center ---------- */
.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  font-size: 16px;                               /* text-[16px] */
  line-height: 22px;                             /* 1.4 → 22.4 → 22 no Figma */
}
.site-footer__copy { white-space: nowrap; }

.site-footer__credits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                                     /* gap-[10px] */
  white-space: nowrap;
}
.site-footer__credits-logo {
  flex-shrink: 0;
  width: 20px;                                   /* w-[20px] */
  height: 16px;                                  /* h-[16px] */
}

/* ---------- Pattern (7073:111): 3 linhas douradas ---------- */
.site-footer__pattern {
  flex-shrink: 0;
  height: 20px;                                  /* h-[20px] */
  /* SVG 1440 × 21.25 esticado só na horizontal (linhas retas, sem distorção);
     +0.25px centra as linhas de 0.5/1/2px nas linhas de pixel como no recorte do Figma */
  background: url("../../images/footer-pattern.svg") 0 0.25px / 100% 21.25px no-repeat;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

/* ---------- < 1280px: marca em linha própria, links embaixo ---------- */
@media (max-width: 1279.98px) {
  .site-footer__row {
    grid-template-columns: auto auto;
    grid-template-areas:
      "brand brand"
      "start end";
    justify-content: space-between;
    row-gap: 56px;
  }
  .site-footer__group--start { grid-area: start; }
  .site-footer__group--end { grid-area: end; }
  .site-footer__brand { grid-area: brand; }
}

/* ---------- iPad deitado (1024–1199): mesmo layout de < 1280, mas é toque ----
   Área de toque de 44px nos links sem mexer no desenho: um ::after invisível
   estende o link 9.5px para cima e para baixo (25 + 19 = 44). */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .site-footer__link { position: relative; }
  .site-footer__link::after {
    content: "";
    position: absolute;
    inset: -9.5px 0;
  }
}

/* ---------- Tablet (768–1023) ---------- */
@media (max-width: 1023.98px) {
  .site-footer__main {
    gap: 32px;
    padding-bottom: 32px;
  }

  /* marca em cima, as 4 colunas numa linha: os grupos viram "transparentes"
     para a grade (div sem semântica — display: contents é seguro) */
  .site-footer__row {
    grid-template-columns: repeat(4, auto);
    grid-template-areas: none;
    justify-content: space-between;
    column-gap: 24px;
    row-gap: 40px;
  }
  .site-footer__group { display: contents; }
  .site-footer__group--end { text-align: left; }
  .site-footer__group--end .site-footer__col { align-items: stretch; }

  .site-footer__brand {
    grid-area: 1 / 1 / 2 / -1;                   /* linha 1 inteira; as colunas fluem para as linhas seguintes */
    gap: 24px;
    padding-bottom: 40px;
    border-bottom: var(--footer-rule);
  }
  .site-footer__logo {
    width: 120px;
    height: auto;
    aspect-ratio: 148 / 150;
  }
  .site-footer__tagline {
    max-width: 400px;
    padding-top: 0;
    margin-bottom: 0;
    font-size: var(--fs-t-body);                 /* 16 */
    line-height: 1.5;
    text-wrap: balance;
  }

  .site-footer__col { gap: 8px; }
  .site-footer__heading {
    font-size: 18px;                             /* entre label (16) e título de card (24) da escala tablet */
    line-height: 1.4;
  }
  .site-footer__list { gap: 0; }
  /* alvo de toque 44px: o respiro entre os links vem da própria área clicável */
  .site-footer__link {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 44px;
    padding-block: 0;
    font-size: var(--fs-t-body);                 /* 16 */
    line-height: 1.4;
  }

  /* copyright + crédito empilhados e centralizados (livres do botão flutuante) */
  .site-footer__bottom {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding-top: 40px;                           /* = respiro acima do divisor (32 + sobra do toque do último link) */
    border-top: var(--footer-rule);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
  }
  /* WP: com link de crédito preenchido, o símbolo 20 × 16 ganha área de toque de 44px sem mudar a linha */
  .site-footer__credits a {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    margin: -11.5px -12px;
  }
}

/* ---------- Mobile (< 768) ---------- */
@media (max-width: 767.98px) {
  .site-footer__main {
    gap: var(--gap-m-lg);                        /* 32 */
    padding-bottom: 24px;
  }

  /* 2 × 2 (pedido do cliente) — Comprar | A marca em cima, Contato | Social
     embaixo; colunas de larguras iguais e o mesmo espaçamento (24) entre as
     colunas e entre as duas linhas, cada uma centrada como a marca e o copyright */
  .site-footer__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    justify-items: center;
    gap: 24px;
    /* a área de toque do último link (44) sobra ~11px abaixo do texto: desconta
       para o respiro texto → divisor ficar igual ao divisor → títulos (~38) */
    margin-bottom: calc((15px * 1.5 - 44px) / 2);
    text-align: center;
  }
  .site-footer .site-footer__col,
  .site-footer .site-footer__group--end .site-footer__col,
  .site-footer .site-footer__list { align-items: center; text-align: center; }
  .site-footer .site-footer__heading { align-self: center; text-align: center; }
  .site-footer .site-footer__link { justify-content: center; }

  .site-footer__brand {
    justify-self: stretch;                       /* divisor na largura toda, igual ao de baixo */
    gap: var(--gap-m-md);                        /* 16 */
    margin-bottom: 8px;                          /* 24 + 8 = 32 do divisor até os títulos */
    padding-bottom: var(--gap-m-lg);             /* 32 */
  }
  .site-footer__logo { width: 104px; }
  .site-footer__tagline {
    max-width: 320px;
    font-size: var(--fs-m-body);                 /* 15 */
    line-height: var(--lh-m-body);               /* 1.5 */
  }

  .site-footer__col { gap: 4px; }
  .site-footer__heading {
    font-size: 16px;                             /* ref: títulos do rodapé 15–16 */
    line-height: 1.5;
  }
  .site-footer__link {
    font-size: var(--fs-m-body);                 /* 15 */
    line-height: var(--lh-m-body);
  }

  .site-footer__bottom {
    padding-top: var(--gap-m-lg);                /* 32 = respiro acima do divisor */
    font-size: var(--fs-m-small);                /* 14 */
  }
  .site-footer__copy {
    white-space: normal;
    text-wrap: balance;
  }
  /* "A Casa do Cheesecake ®" / "todos os direitos reservados": o separador vira a quebra de linha */
  .site-footer__sep {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

/* 320–359: colunas de ~122px — links em 14 para "Nossa especialista" caber numa linha */
@media (max-width: 359.98px) {
  .site-footer__row { column-gap: 12px; }
  .site-footer__link { font-size: var(--fs-m-small); }   /* 14 */
}