@layer reset, base, components;

/* ==========================================================================
   Tokens — cores extraídas do banner original
   ========================================================================== */

:root {
  color-scheme: dark;

  --madeira-800: #1e0e05;
  --madeira-700: #2a1508;
  --madeira-600: #3a1d0a;
  --fogo-500: #fc8803;
  --brasa-400: #ff5c1a;
  --verde-300: #9dd3af;
  --verde-900: #14361f;
  --creme-50: #fdf7ee;
  --creme-300: #d9c5ad;

  --fundo: var(--madeira-800);
  --superficie: color-mix(in oklab, var(--madeira-700), black 25%);
  --borda: color-mix(in oklab, var(--fogo-500), transparent 82%);
  --texto: var(--creme-50);
  --texto-suave: var(--creme-300);

  --fonte-titulo: "Playfair Display", "Times New Roman", serif;
  --fonte-texto: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  --largura-max: 62rem;
  --respiro: clamp(2rem, 5vw, 3.25rem);
}

/* ==========================================================================
   Reset
   ========================================================================== */

@layer reset {
  :where(body, h1, h2, p, ul) {
    margin: 0;
  }

  :where(ul[role="list"]) {
    padding: 0;
    list-style: none;
  }

  :where(img, svg) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

@layer base {
  body {
    background-color: var(--fundo);
    /* Tábuas de madeira montadas com gradientes: sem emenda e sem custo de rede. */
    background-image:
      radial-gradient(115% 55% at 50% 0%, color-mix(in oklab, var(--madeira-600), transparent 45%) 0%, transparent 65%),
      repeating-linear-gradient(90deg,
        #0000 0 7.5rem,
        #00000059 7.5rem 7.6rem,
        #ffffff0a 7.6rem 7.75rem),
      repeating-linear-gradient(90deg,
        #ffffff05 0 0.6rem,
        #00000012 0.6rem 1.3rem);
    background-attachment: fixed;
    color: var(--texto);
    font-family: var(--fonte-texto);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
    line-height: 1.55;
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2 {
    font-family: var(--fonte-titulo);
    font-weight: 900;
    line-height: 1.02;
    text-transform: uppercase;
    text-wrap: balance;
  }

  :focus-visible {
    outline: 3px solid var(--fogo-500);
    outline-offset: 4px;
    border-radius: 0.25rem;
  }

  ::selection {
    background: var(--fogo-500);
    color: var(--madeira-800);
  }
}

/* ==========================================================================
   Componentes
   ========================================================================== */

@layer components {

  .envelope {
    inline-size: min(100% - 2.5rem, var(--largura-max));
    margin-inline: auto;
  }

  /* --- Cabeçalho ---------------------------------------------------------- */

  .topo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block-start: clamp(1rem, 3vw, 1.75rem);
  }

  .marca {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .marca img {
    inline-size: clamp(3rem, 8vw, 4rem);
    border-radius: 0.3rem;
    box-shadow: 0 3px 10px #000a;
  }

  .marca-texto {
    font-size: clamp(0.68rem, 0.6rem + 0.3vw, 0.8rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: start;
    color: var(--texto-suave);
  }

  .marca-texto b {
    display: block;
    color: var(--texto);
    letter-spacing: 0.17em;
  }

  /* A placa foi "desentortada" na exportação; o ângulo original volta aqui. */
  .placa {
    inline-size: clamp(9.5rem, 24vw, 14rem);
    rotate: -4.5deg;
    filter: drop-shadow(0 8px 16px #000a);
  }

  /* --- Ornamentos --------------------------------------------------------- */

  .ornamento {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    color: color-mix(in oklab, var(--creme-300), transparent 35%);
    font-size: clamp(0.68rem, 0.6rem + 0.4vw, 0.85rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    text-transform: uppercase;
  }

  .ornamento::before,
  .ornamento::after {
    content: "";
    block-size: 1px;
    inline-size: clamp(1.5rem, 8vw, 5rem);
    background: linear-gradient(to right, transparent, currentColor);
  }

  .ornamento::after {
    scale: -1 1;
  }

  .ornamento > span {
    white-space: nowrap;
  }

  /* --- Hero ---------------------------------------------------------------- */

  .ornamento:first-of-type {
    margin-block-start: clamp(1.75rem, 5vw, 3rem);
  }

  .hero-titulo {
    /* Palavras longas em Playfair 900 não quebram: o teto do clamp é medido
       para "CHURRASCO" caber inteiro já em telas de 320 px. */
    margin-block: 0.6rem;
    font-size: clamp(2.2rem, 0.6rem + 8.8vw, 5.75rem);
    letter-spacing: -0.005em;
    text-shadow: 0 4px 24px #000c;
  }

  .hero-lema {
    margin-block-start: var(--respiro);
    font-family: var(--fonte-titulo);
    font-size: clamp(1.5rem, 0.7rem + 4.1vw, 3.1rem);
    font-weight: 700;
    line-height: 1.1;
    text-transform: uppercase;
    text-wrap: balance;
    text-shadow: 0 3px 18px #000b;
  }

  .hero-lema .chama {
    display: block;
    color: var(--fogo-500);
  }

  .palco {
    inline-size: 100%;
    aspect-ratio: 1592 / 1128;
    margin-block-start: var(--respiro);
    object-fit: cover;
    border: 1px solid var(--borda);
    border-radius: 0.85rem;
    /* O brilho de brasa é box-shadow de propósito: sangra sem criar overflow. */
    box-shadow:
      0 2px 4px #0006,
      0 14px 36px #0009,
      0 0 90px 8px color-mix(in oklab, var(--brasa-400), transparent 83%);
  }

  /* --- Ícones (traço, não preenchidos) --------------------------------------- */

  .ico {
    flex: none;
    fill: none;
    stroke: var(--fogo-500);
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* --- Data e local ----------------------------------------------------------- */

  .info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem clamp(1.25rem, 4vw, 2.5rem);
    margin-block-start: clamp(1.25rem, 3vw, 1.75rem);
  }

  .info li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: clamp(0.9rem, 0.85rem + 0.3vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  /* Os três itens só cabem lado a lado a partir de ~860 px; abaixo disso eles
     quebram e um divisor sobraria pendurado no início da linha. */
  @media (min-width: 56rem) {
    .info li:not(:first-child)::before {
      content: "";
      align-self: stretch;
      inline-size: 1px;
      margin-inline-end: clamp(0.75rem, 2vw, 1.5rem);
      background: var(--borda);
    }
  }

  .info .ico {
    inline-size: 1.15rem;
  }

  /* --- Faixa verde (título da seção de redes) ------------------------------- */

  .faixa {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5ch;
    inline-size: fit-content;
    max-inline-size: 100%;
    margin-block-start: var(--respiro);
    margin-inline: auto;
    padding: 0.7rem clamp(1.25rem, 4vw, 2.25rem);
    border-radius: 999px;
    background: var(--verde-300);
    color: var(--verde-900);
    font-family: var(--fonte-texto);
    font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.25rem);
    font-weight: 400;
    line-height: 1.4;
    text-transform: none;
  }

  .faixa b {
    font-weight: 700;
  }

  /* --- Cartões de rede social ----------------------------------------------- */

  .redes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-block-start: 1.25rem;
  }

  /* Os cartões crescem juntos, mas param antes de virar faixas vazias. */
  .redes > li {
    display: flex;
    flex: 1 1 16rem;
    max-inline-size: 23rem;
  }

  .rede {
    inline-size: 100%;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.4rem 1.1rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: 0.85rem;
    background: linear-gradient(160deg, #ffffff0e, #0000 55%), var(--superficie);
    color: inherit;
    text-align: start;
    text-decoration: none;
    transition: translate 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }

  .rede:hover,
  .rede:focus-visible {
    translate: 0 -3px;
    border-color: color-mix(in oklab, var(--fogo-500), transparent 45%);
    box-shadow: 0 12px 28px #0009;
  }

  @media (prefers-reduced-motion: reduce) {
    .rede {
      transition: none;
    }

    .rede:hover,
    .rede:focus-visible {
      translate: none;
    }
  }

  .rede img {
    grid-row: span 2;
    inline-size: clamp(5.5rem, 20vw, 7rem);
    aspect-ratio: 1;
    padding: 0.4rem;
    border-radius: 0.4rem;
    background: #fff;
  }

  .rede-nome {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: end;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .rede-nome .ico {
    inline-size: 1.35rem;
  }

  .rede-arroba {
    align-self: start;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: 600;
    color: var(--fogo-500);
    overflow-wrap: anywhere;
  }

  /* --- Chamada final --------------------------------------------------------- */

  .convite {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
  }

  .convite-titulo {
    font-size: clamp(2.4rem, 0.2rem + 10.5vw, 6.5rem);
    letter-spacing: 0.02em;
    text-shadow: 0 4px 26px #000c;
  }

  .convite-linha {
    margin-block-start: 0.15rem;
    font-family: var(--fonte-titulo);
    font-size: clamp(1.25rem, 0.5rem + 3.5vw, 2.5rem);
    font-weight: 700;
    color: var(--fogo-500);
    text-transform: uppercase;
    text-wrap: balance;
  }

  /* --- Rodapé ---------------------------------------------------------------- */

  .rodape {
    margin-block-start: clamp(2.5rem, 6vw, 4rem);
    padding-block: 1.5rem 2.25rem;
    border-block-start: 1px solid #ffffff14;
    color: var(--texto-suave);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
  }

  /* --- Alto contraste --------------------------------------------------------- */

  @media (forced-colors: active) {
    .rede {
      border: 1px solid ButtonText;
    }
  }
}