/* ==========================================================================
   Blog — modelo de artigo (prefixo .ar-)
   Depende de site.css (chrome .lt-: tokens, cabeçalho, botões, rótulos,
   cartão de ferramenta, rodapé) e de base.css (tokens de cor, fontes, motion).
   Camada institucional: vermelho, rosa, amarelo, preto, branco e cinzas.
   Figma: "09 - Artigo" (189:11236).
   ========================================================================== */

/* Seções de largura travada — 1 unidade = 1 px acima de 981 */
@media (min-width: 981px) {
  .ar-head,
  .ar-cover,
  .ar-body,
  .ar-cta,
  .ar-related,
  .ar-news,
  .lt-footer {
    --lt-u: 1px;
  }
}

/* Coluna do artigo: 1000 da prancheta (texto 596 + vão 64 + lateral 340). */
.ar-page {
  --ar-max: calc(1000 * var(--lt-u));
}

.ar-head__inner,
.ar-cover__frame,
.ar-cover figcaption,
.ar-body__inner,
.ar-cta__card,
.ar-related__inner {
  width: min(100%, var(--ar-max));
  margin-inline: auto;
}

/* ==========================================================================
   1. Cabeçalho do artigo — Figma 189:11297
   ========================================================================== */
.ar-head {
  padding: calc(56 * var(--lt-u)) var(--lt-gutter) 0;
}

.ar-head__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Volta discreta: a seta ↗ girada para ←, e anda para a esquerda no hover. */
.ar-back {
  margin-bottom: calc(48 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(12 * var(--lt-u));
  border-bottom-width: 1px;
}

.ar-back img {
  width: calc(16 * var(--lt-u));
  height: calc(16 * var(--lt-u));
  transform: rotate(-135deg);
}

.lt-textlink.ar-back:hover img {
  transform: rotate(-135deg) translate(2px, -2px);
}

.ar-head__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(16 * var(--lt-u));
}

.ar-head__read {
  color: var(--gray-600);
  font-size: calc(14 * var(--lt-u));
  line-height: 1;
}

.ar-head h1 {
  margin-top: calc(28 * var(--lt-u));
  color: var(--black);
  font-size: var(--lt-h1-leitura);
  line-height: 0.9;
}

.ar-head__dek {
  max-width: calc(760 * var(--lt-u));
  margin-top: calc(28 * var(--lt-u));
  color: var(--gray-700);
  font-size: calc(22 * var(--lt-u));
  line-height: 1.45;
}

/* Autoria: foto quadrada, nome e data. */
.ar-byline {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--lt-u));
  margin-top: calc(32 * var(--lt-u));
}

.ar-byline__photo {
  width: calc(48 * var(--lt-u));
  height: calc(48 * var(--lt-u));
  flex: 0 0 auto;
  object-fit: cover;
}

.ar-byline__who {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--lt-u));
}

.ar-byline__name {
  color: var(--ink);
  font-size: calc(16 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

.ar-byline__name a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.ar-byline__name a:hover {
  text-decoration-color: var(--red);
}

.ar-byline__name a:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 3px;
}

.ar-byline__date {
  color: var(--gray-600);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.3;
}

/* Tags: chip cinza sobre o branco, cantos retos, sem contorno. */
.ar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 * var(--lt-u));
  margin: calc(28 * var(--lt-u)) 0 0;
  padding: 0;
  list-style: none;
}

.ar-tags li {
  padding: calc(8 * var(--lt-u)) calc(12 * var(--lt-u));
  color: var(--ink);
  background: var(--gray-100);
  font-family: var(--lt-mono);
  font-size: calc(12 * var(--lt-u));
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ==========================================================================
   2. Imagem hero 16:9 com legenda — Figma 189:11355
   ========================================================================== */
.ar-cover {
  margin: 0;
  padding: calc(56 * var(--lt-u)) var(--lt-gutter) 0;
}

.ar-cover__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gray-100);
}

.ar-cover__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

.ar-cover figcaption {
  padding-top: calc(12 * var(--lt-u));
  color: var(--gray-600);
  font-size: calc(13 * var(--lt-u));
  line-height: 1.5;
}

/* ==========================================================================
   3. Corpo do artigo + barra lateral fixa — Figma 189:11478
   ========================================================================== */
.ar-body {
  padding: calc(72 * var(--lt-u)) var(--lt-gutter) calc(112 * var(--lt-u));
}

.ar-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(340 * var(--lt-u));
  align-items: start;
  column-gap: calc(64 * var(--lt-u));
}

/* Tipografia de leitura: 18 px, entrelinha 1,7, coluna de ~66 caracteres. */
.ar-prose {
  min-width: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.7;
}

.ar-prose > * + * {
  margin-top: 1.1em;
}

.ar-prose h2 {
  color: var(--black);
  font-size: calc(56 * var(--lt-u));
  line-height: 0.92;
}

.ar-prose h3 {
  color: var(--black);
  font-size: calc(36 * var(--lt-u));
  line-height: 0.95;
}

.ar-prose > * + h2 {
  margin-top: calc(64 * var(--lt-u));
}

.ar-prose > * + h3 {
  margin-top: calc(48 * var(--lt-u));
}

.ar-prose > h2 + *,
.ar-prose > h3 + * {
  margin-top: calc(24 * var(--lt-u));
}

/* Âncoras do sumário: o título para abaixo do cabeçalho fixo, com folga. */
.ar-prose :is(h2, h3) {
  scroll-margin-top: calc(var(--lt-header-h) + 32px);
}

/* Caixas "Conceito" e "Dica prática": o fundo separa, sem contorno. */
.ar-prose > .ar-callout,
.ar-prose > .ar-quote {
  margin-block: calc(40 * var(--lt-u));
}

.ar-callout {
  padding: calc(28 * var(--lt-u)) calc(32 * var(--lt-u));
}

.ar-callout--concept {
  background: var(--pink-light);
}

.ar-callout--tip {
  background: var(--gray-100);
}

.ar-callout__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: calc(12 * var(--lt-u));
  color: var(--black);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ar-callout__label::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--red);
}

.ar-callout__text {
  color: var(--black);
  font-size: calc(24 * var(--lt-u));
  font-weight: 500;
  line-height: 1.35;
}

.ar-callout__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ar-callout__list li {
  position: relative;
  padding-left: 22px;
}

/* Marcador quadrado vermelho, alinhado ao meio da 1ª linha. */
.ar-callout__list li::before {
  content: "";
  position: absolute;
  top: calc(0.85em - 3px);
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--red);
}

/* Citação: o filete vermelho da citação da página Sobre. */
.ar-quote {
  margin-inline: 0;
  padding: calc(4 * var(--lt-u)) 0 calc(4 * var(--lt-u)) calc(24 * var(--lt-u));
  border-left: calc(5 * var(--lt-u)) solid var(--red);
}

.ar-quote p {
  color: var(--black);
  font-size: calc(28 * var(--lt-u));
  font-weight: 500;
  line-height: 1.25;
}

/* --- Barra lateral ------------------------------------------------------ */
.ar-side {
  position: sticky;
  top: calc(var(--lt-header-h) + 24px);
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--lt-u));
}

/* Tela baixa: a lateral inteira não caberia presa; ela rola com o texto. */
@media (max-height: 720px) {
  .ar-side {
    position: static;
  }
}

.ar-toc {
  padding: calc(28 * var(--lt-u));
  background: var(--gray-100);
}

.ar-toc__title {
  margin-bottom: calc(16 * var(--lt-u));
  color: var(--black);
  font-size: calc(32 * var(--lt-u));
  line-height: 0.95;
}

.ar-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ar-toc;
}

.ar-toc__list li {
  counter-increment: ar-toc;
}

.ar-toc__list a {
  display: flex;
  gap: 10px;
  padding: 9px 0 9px 14px;
  color: var(--gray-700);
  font-size: 15px;
  line-height: 1.4;
  box-shadow: inset 3px 0 0 transparent;
  transition: color 160ms ease, box-shadow 160ms ease;
}

.ar-toc__list a::before {
  content: counter(ar-toc) ".";
  flex: 0 0 auto;
  color: var(--gray-600);
  font-family: var(--lt-mono);
  font-size: 13px;
  line-height: calc(15px * 1.4);
}

.ar-toc__list a:hover,
.ar-toc__list a[aria-current="true"] {
  color: var(--black);
  box-shadow: inset 3px 0 0 var(--red);
}

.ar-toc__list a[aria-current="true"] {
  font-weight: 500;
}

.ar-toc__list a:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   4. CTA contextual — Figma 189:11511
   ========================================================================== */
.ar-cta {
  padding: 0 var(--lt-gutter) calc(112 * var(--lt-u));
}

.ar-cta__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(300 * var(--lt-u));
  align-items: center;
  gap: calc(48 * var(--lt-u));
  padding: calc(64 * var(--lt-u));
  overflow: hidden;
  color: var(--white);
  background: var(--black);
}

.ar-cta__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(24 * var(--lt-u));
  min-width: 0;
}

.ar-cta h2 {
  color: var(--white);
  font-size: min(calc(72 * var(--lt-u)), 5.6vw);
  line-height: 0.9;
}

.ar-cta .lt-btn {
  margin-top: calc(8 * var(--lt-u));
}

/* Sobre o preto, o hover do botão amarelo vai ao branco (como no CTA final). */
.ar-cta .lt-btn--accent:hover {
  color: var(--black);
  background-color: var(--white);
}

/* Ilustração inclinada: a foto do kit num cartão em pé, girado 10°. */
.ar-cta__art {
  justify-self: center;
  width: calc(200 * var(--lt-u));
  aspect-ratio: 200 / 264;
  overflow: hidden;
  background: var(--ink);
  transform: rotate(10deg);
}

.ar-cta__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 45% 50%;
}

/* ==========================================================================
   5. Artigos relacionados — Figma 189:11512 (cartão .hm-article da home)
   ========================================================================== */
.ar-related {
  padding: calc(112 * var(--lt-u)) var(--lt-gutter);
  background: var(--gray-100);
}

.ar-related__inner {
  display: flex;
  flex-direction: column;
  gap: calc(48 * var(--lt-u));
}

.ar-related h2 {
  font-size: calc(64 * var(--lt-u));
  line-height: 0.92;
}

.ar-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(18 * var(--lt-u));
}

.ar-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--white);
  border-bottom: calc(5 * var(--lt-u)) solid var(--pink-light); /* filete rosa da paleta */
}

.ar-card__media {
  display: block;
  height: round(calc(200 * var(--lt-u)), 1px);
  overflow: hidden;
  background: var(--gray-400);
}

.ar-card__media img {
  width: 100%;
  height: calc(100% + 1px);
  object-fit: cover;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ar-card:hover .ar-card__media img {
  transform: scale(1.04);
}

.ar-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: calc(10 * var(--lt-u));
  padding: calc(24 * var(--lt-u));
}

.ar-card__cat {
  color: var(--gray-600);
  font-family: var(--lt-mono);
  font-size: calc(11 * var(--lt-u));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ar-card__title {
  color: var(--ink);
  font-size: calc(20 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

.ar-card__byline {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--lt-u));
  margin-top: auto;
  padding-top: calc(14 * var(--lt-u));
}

.ar-card__byline img {
  width: calc(36 * var(--lt-u));
  height: calc(36 * var(--lt-u));
  flex: 0 0 auto;
  object-fit: cover;
}

.ar-card__who {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--lt-u));
  min-width: 0;
}

.ar-card__author {
  color: var(--ink);
  font-size: calc(14 * var(--lt-u));
  font-weight: 500;
  line-height: 1.3;
}

.ar-card__meta {
  color: var(--gray-600);
  font-size: calc(13 * var(--lt-u));
  line-height: 1.3;
}

.ar-card:focus-visible {
  outline: 3px solid var(--lt-focus);
  outline-offset: 4px;
}

/* ==========================================================================
   6. Newsletter — Figma 189:11631, igual à newsletter do blog (amarela)
   ========================================================================== */
/* O hover do botão preto é amarelo no site: sobre este fundo ele vira vermelho. */
.ar-news {
  --lt-dark-hover-bg: var(--red);
  --lt-dark-hover-ink: var(--white);
  --lt-dark-hover-icon: none;
  padding: calc(120 * var(--lt-u)) var(--lt-gutter);
  background: var(--yellow);
}

.ar-news__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 1216, a coluna do site: com 760 o título ia a três linhas com espaço sobrando. */
  width: min(100%, var(--lt-max));
  margin-inline: auto;
  text-align: center;
}

.ar-news h2 {
  font-size: calc(80 * var(--lt-u));
  line-height: 0.9;
}

.ar-news__lead {
  max-width: calc(560 * var(--lt-u));
  margin-top: calc(24 * var(--lt-u));
  color: var(--ink);
  font-size: calc(19 * var(--lt-u));
  line-height: 1.5;
}

.ar-news__form {
  display: flex;
  width: min(100%, calc(600 * var(--lt-u)));
  margin-top: calc(40 * var(--lt-u));
}

/* Campo branco com o ícone de e-mail à esquerda, como no blog. */
.ar-news__field {
  position: relative;
  display: flex;
  flex: 1;
  min-width: 0;
}

.ar-news__icon {
  position: absolute;
  top: 50%;
  left: calc(20 * var(--lt-u));
  width: calc(18 * var(--lt-u));
  height: calc(18 * var(--lt-u));
  translate: 0 -50%;
  pointer-events: none;
}

.ar-news__form input {
  flex: 1;
  min-width: 0;
  min-height: calc(56 * var(--lt-u));
  padding: 0 calc(20 * var(--lt-u)) 0 calc(50 * var(--lt-u));
  color: var(--ink);
  background: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  border: 0;
  border-radius: 0;
}

.ar-news__form input::placeholder {
  color: var(--gray-600);
}

/* Foco: filete preto na base do campo, por dentro (sem moldura em volta). */
.ar-news__form input:focus,
.ar-news__form input:focus-visible {
  outline: none;
  box-shadow: inset 0 calc(-3 * var(--lt-u)) 0 var(--black);
}

.ar-news__form .lt-btn {
  flex: 0 0 auto;
}

/* Recado de "em breve": branco com texto preto, logo abaixo do campo (sobre o amarelo). */
.ar-news__status {
  width: min(100%, calc(600 * var(--lt-u)));
  margin-top: calc(12 * var(--lt-u));
  padding: calc(14 * var(--lt-u)) calc(18 * var(--lt-u));
  color: var(--black);
  background: var(--white);
  font-size: calc(15 * var(--lt-u));
  line-height: 1.5;
  text-align: left;
}

.ar-news__status[hidden] {
  display: none;
}

.ar-news__status a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ar-news__status a:focus-visible {
  outline: 3px solid var(--black);
  outline-offset: 2px;
}

/* Aviso de dados: o padrão de todos os formulários do site (o da lista de espera do curso). */
.ar-news__note {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: calc(8 * var(--lt-u));
  max-width: calc(560 * var(--lt-u));
  margin-inline: auto;
  margin-top: calc(24 * var(--lt-u));
  color: var(--gray-700);
  font-size: calc(14 * var(--lt-u));
  line-height: 1.5;
  text-align: left;
}

.ar-news__note img {
  width: calc(14 * var(--lt-u));
  height: calc(14 * var(--lt-u));
  flex: 0 0 auto;
  margin-top: calc(3 * var(--lt-u));
}

.ar-news__note strong {
  color: var(--black);
  font-weight: 500;
}

.ar-news__note a {
  color: var(--black);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ar-news__note a:hover {
  text-decoration-color: var(--red);
}

/* ==========================================================================
   Responsivo
   ========================================================================== */
/*
 * Abaixo de 1100 a coluna de texto ao lado da lateral ficaria com menos de 45
 * caracteres por linha: o corpo vira uma coluna só, com medida de leitura, o
 * sumário sobe para antes do texto e a caixa desce para depois.
 */
@media (max-width: 1099px) {
  .ar-body__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .ar-side {
    display: contents;
  }

  .ar-prose,
  .ar-toc {
    width: 100%;
    max-width: 680px;
  }

  .ar-toc {
    order: -1;
  }

}

@media (max-width: 980px) {

  .ar-prose h2 {
    font-size: clamp(40px, 7vw, 56px);
  }

  .ar-cta__card {
    grid-template-columns: minmax(0, 1fr) 200px;
    padding: 48px;
  }

  .ar-cta h2,
  .ar-news h2 {
    font-size: clamp(44px, 8vw, 72px);
  }

  .ar-cta__art {
    width: 170px;
  }

  /* A pergunta do rótulo pode quebrar em duas linhas na coluna estreita. */
  .ar-cta .lt-label span {
    padding-block: 5px;
    line-height: 1.4;
    white-space: normal;
  }

  .ar-related h2 {
    font-size: clamp(40px, 8.4vw, 64px);
  }

  .ar-related__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ar-card__media {
    height: 220px;
  }

  .ar-related,
  .ar-news {
    padding-block: 80px;
  }
}

@media (max-width: 620px) {
  .ar-head {
    padding-top: 32px;
  }

  .ar-back {
    margin-bottom: 32px;
  }

  .ar-head h1 {
    margin-top: 20px;
  }

  .ar-head__dek {
    margin-top: 20px;
    font-size: 18px;
  }

  .ar-head__read {
    font-size: 13px;
  }

  .ar-cover {
    padding-top: 36px;
  }

  .ar-body {
    padding-top: 48px;
    padding-bottom: 72px;
  }

  .ar-prose {
    font-size: 17px;
  }

  .ar-prose h2 {
    font-size: clamp(36px, 10.6vw, 44px);
  }

  .ar-prose > * + h2 {
    margin-top: 48px;
  }

  .ar-callout {
    padding: 22px 20px;
  }

  .ar-callout__text {
    font-size: 20px;
  }

  .ar-quote p {
    font-size: 22px;
  }

  .ar-toc {
    padding: 22px 20px;
  }

  .ar-cta {
    padding-bottom: 72px;
  }

  .ar-cta__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 36px 24px 48px;
  }

  .ar-cta h2,
  .ar-news h2 {
    font-size: clamp(40px, 11.5vw, 52px);
  }

  .ar-cta__art {
    width: 150px;
  }

  .ar-related,
  .ar-news {
    padding-block: 64px;
  }

  .ar-news__form {
    flex-direction: column;
    gap: 10px;
  }

  .ar-news__form .lt-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ar-card__media img,
  .ar-back img {
    transition: none;
  }
}