/*
  Arte Dente — tema sobre o site.css do Dr. Douglas (mesma estrutura visual).
  Troca so a paleta bruta e o logo: marfim, areia, tinta e rose da Arte Dente.
  Carregar DEPOIS de site.css. Os blocos em @layer tokens/components vencem
  os do site.css por ordem de declaracao dentro da mesma camada.
*/
@layer tokens {
  :root {
    --paper: #F6F1EA;
    --paper-2: #ECE3D8;
    --paper-3: #E0D4C5;
    --white: #FFFCF8;
    --graphite: #231D1A;
    --graphite-2: #2F2723;
    --graphite-3: #3E3430;
    --champagne: #C98F7A;
    --champagne-soft: #DDAA96;
    --champagne-ink: #8A5443;

    --ink-soft: #4E443F;
    --muted: #5D524C;
    --line: rgba(35, 29, 26, .14);
    --line-strong: rgba(35, 29, 26, .42);
    --shadow: 0 var(--s-8) var(--s-21) rgba(35, 29, 26, .1);
    --shadow-soft: 0 var(--s-3) var(--s-13) rgba(35, 29, 26, .07);
  }

  .sec--dark,
  .foot {
    --ink-soft: rgba(246, 241, 234, .8);
    --muted: rgba(246, 241, 234, .66);
    --line: rgba(246, 241, 234, .16);
    --line-strong: rgba(246, 241, 234, .46);
  }

  .sec--alt {
    --muted: #574C46;
    --ink-soft: #4A403B;
    --line: rgba(35, 29, 26, .16);
  }
}

@layer components {
  /* Logo oficial (SVG em currentColor) aplicado por mascara: herda a cor do tema */
  .brand__logo {
    display: block;
    inline-size: clamp(8.125rem, 6rem + 6vw, 10.5rem);
    aspect-ratio: 2150 / 500;
    background: currentColor;
    -webkit-mask: url("/img/logo.svg") no-repeat center / contain;
    mask: url("/img/logo.svg") no-repeat center / contain;
  }

  .foot .brand__logo {
    margin-block-end: var(--s-8);
    color: var(--ink);
  }

  /* Equipe */
  .team {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .team figure {
    margin: 0;
  }

  .team img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
    border-radius: var(--radius);
    background: var(--bg-alt);
  }

  .team figcaption {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-block-start: var(--s-5);
  }

  .team b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--fs-md);
  }

  .team span {
    color: var(--muted);
    font-size: var(--fs-sm);
  }

  /* Video vertical do processo */
  .video-v {
    overflow: hidden;
    max-inline-size: 22rem;
    aspect-ratio: 9 / 16;
    margin-inline: auto;
    border-radius: var(--radius-lg);
    background: var(--graphite-2);
  }

  .video-v video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
}

/* Rodada 1 — alvos de toque (WCAG 2.5.8 / Fitts): mínimo 44px nos links de navegação */
@layer components {
  .menu a,
  .crumbs a {
    min-inline-size: 2.75rem;
    justify-content: center;
  }

  .crumbs a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
  }

  .meta a,
  .refs .back,
  .author .name,
  .foot li a {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.75rem;
    min-inline-size: 2.75rem;
  }
}

/* Rodada 2 — vídeo: controle de pausa (WCAG 2.2.2) e texto antes do vídeo no celular */
@layer components {
  .video-v {
    position: relative;
  }

  .video-v__btn {
    position: absolute;
    inset: auto var(--s-8) var(--s-8) auto;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--graphite) 72%, transparent);
    color: var(--paper);
    cursor: pointer;
  }

  .video-v__btn svg {
    inline-size: 1.25rem;
    fill: currentColor;
  }

  .video-v__btn .i-play,
  .video-v__btn.is-paused .i-pause {
    display: none;
  }

  .video-v__btn.is-paused .i-play {
    display: inline;
  }

  .video-v__btn:focus-visible {
    outline: 2px solid var(--champagne-soft);
    outline-offset: 3px;
  }

  @media (width < 50rem) {
    .grid-2--video > .video-v {
      order: 2;
      max-inline-size: 16rem;
    }
  }
}

/* Rodada 3 — rodapé separado do bloco final (Gestalt: região comum) e compacto no celular */
@layer components {
  .foot {
    --bg: #171210;
    border-block-start: 1px solid color-mix(in srgb, var(--champagne) 38%, transparent);
  }

  .foot li {
    min-block-size: 0;
  }

  .foot ul {
    gap: 0;
  }

  .foot li:not(:has(a)) {
    padding-block: var(--s-2);
  }

  @media (width < 40rem) {
    .foot__grid {
      grid-template-columns: 1fr 1fr;
      gap: var(--s-21) var(--s-8);
    }

    .foot__grid > div:first-child,
    .foot__grid > div:last-child {
      grid-column: 1 / -1;
    }
  }
}

/* Rodada 4 — equipe em 2 colunas no celular (menos rolagem; Lei de proximidade) */
@layer components {
  .team {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  }

  @media (width < 30rem) {
    .team {
      gap: var(--s-13) var(--s-5);
    }

    .team b {
      font-size: var(--fs-base);
    }
  }
}

/* Rodada 5 — bloco de outros tratamentos com título e sinalização de WhatsApp (Nielsen: correspondência e visibilidade) */
@layer components {
  .outros {
    margin-block-start: var(--s-34);
    padding-block-start: var(--s-21);
    border-block-start: 1px solid var(--line);
  }

  .outros h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--fs-md);
  }

  .outros p {
    margin-block-start: var(--s-3);
    color: var(--muted);
  }

  .outros .chips {
    margin-block-start: var(--s-13);
  }

  .outros .chips a {
    gap: var(--s-3);
  }

  .chip-wa {
    inline-size: 1rem;
    block-size: 1rem;
    fill: currentColor;
    opacity: .8;
  }
}

/* Rodada 6 — hero equilibrado no desktop: título menor, CTA acima da dobra, foto centralizada */
@layer components {
  .hero--home h1 {
    font-size: clamp(2.625rem, 1.3rem + 4vw, 4.5rem);
    max-inline-size: 15ch;
  }

  @media (width >= 62rem) {
    .hero--home .grid-2 {
      align-items: center;
    }

    .hero--home .hero__img {
      max-block-size: min(40rem, 78vh);
      justify-self: end;
      inline-size: 100%;
      max-inline-size: calc(min(40rem, 78vh) * .8);
    }
  }
}

/* Rodada 8 — foco visível também no mapa incorporado (WCAG 2.4.7) */
@layer components {
  .mapa:focus-within,
  .mapa.is-foco {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
}

/* Rodada 9 — LCP: o título principal já pinta visível (a animação de entrada partia de opacity 0) */
@layer utilities {
  .hero--home h1 {
    animation: none;
  }
}

/* Rodada 10 — legenda do logo legível (mínimo 11px; ainda discreta) */
@layer components {
  .brand small {
    font-size: .75rem;
    letter-spacing: .16em;
  }

}

/* Fora de camada de propósito: o ux.css compartilhado é sem camada e venceria */
.article .ux-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
}

/* Leitura: linhas do artigo com no máximo ~72 caracteres (legibilidade) */
@layer components {
  .article p,
  .article li,
  .article blockquote {
    max-inline-size: 72ch;
  }
}

/* Ajustes do revisor: links das referências, linha das referências, assinatura no celular, nota de revisão */
.refs li a[target="_blank"],
.post-faq__ask a,
.post-more__guide a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
}

@layer components {
  .refs ol {
    max-inline-size: 72ch;
  }

  .reviewed {
    color: var(--ink-soft);
    font-size: .875rem;
  }

  @media (width < 30rem) {
    .meta {
      display: grid;
      gap: var(--s-2);
    }

    .meta > *::before,
    .meta > *::after {
      content: none !important;
    }
  }
}

/* Pendências do revisor: topo do tablet aproveitando a largura e ritmo de espaçamento menos repetitivo */
@layer components {
  @media (40rem <= width < 62rem) {
    .hero--home h1 {
      font-size: clamp(3.25rem, 1.5rem + 4.5vw, 4rem);
      max-inline-size: 18ch;
    }

    .hero--home .lead {
      max-inline-size: 56ch;
    }

    .hero--home .hero__img {
      max-inline-size: 34rem;
      justify-self: center;
      inline-size: 100%;
    }
  }

  /* bloco de título mais coeso (eyebrow > título > texto), respiro grande só entre seções */
  .eyebrow + h2 {
    margin-block-start: var(--s-3);
  }

  .sec h2 + .lead.mt-13 {
    margin-block-start: var(--s-8);
  }

  .sec h2 + .grid-3.mt-21,
  .sec h2 + .team.mt-21 {
    margin-block-start: var(--s-34);
  }
}