/* =====================================================================
   WORKNOTE — Casos Resolvidos (ver docs/DECISIONS.md D050/D051)
   Carregado SÓ pelas páginas de /casos-resolvidos/ e pela Home (bloco
   "Reparos reais feitos pela WorkNote"). Só layout e tokens já existentes:
   nenhuma regra aqui afeta artigos, páginas legadas ou outros blocos da Home —
   todo seletor é escopado por .case-*, .cases-*, .home-cases ou .case-page.
   ===================================================================== */

/* --- Grade de cards (Home, índice, "Outros casos") --- */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 1023px) { .cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .cases-grid { grid-template-columns: 1fr; gap: var(--space-5); } }

/* --- Card de caso (referência aprovada "alteração home") --- */
.case-card { display: flex; flex-direction: column; height: 100%; padding: 0; overflow: hidden; text-decoration: none; color: inherit; min-width: 0; border-radius: var(--radius-xl); }
.case-card__media { display: block; aspect-ratio: 17 / 6; background: var(--color-surface-alt); overflow: hidden; }
.case-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-base, .25s) var(--ease-standard, ease); }
.case-card:hover .case-card__media img { transform: scale(1.03); }
.case-card__body { display: flex; flex-direction: column; flex-grow: 1; padding: var(--space-5) var(--space-5) var(--space-6); }
.case-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.case-card__tag { font-weight: 600; color: var(--color-heading); }
.case-card__tag--defeito { background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface)); color: var(--color-accent); }
.case-card__title { font-size: var(--text-xl); line-height: 1.22; margin: 0 0 var(--space-3); color: var(--color-heading); }
.case-card__modelo, .case-card__contexto { display: block; }
.case-card__resumo { display: block; flex-grow: 1; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }
.case-card__cta { margin-top: var(--space-5); font-weight: 700; font-size: var(--text-sm); color: var(--color-accent); display: inline-flex; align-items: center; gap: var(--space-1); }
.case-card:hover .case-card__cta { text-decoration: underline; }
.case-arrow { flex: none; }

/* --- Acesso no hero da Home (D052/D053): card compacto abaixo de "Falar no WhatsApp" e
   "Ver serviços", centralizado sob o par de botões. O grupo .hero-d__actions passa a ter a
   largura dos dois botões (fit-content); contain: inline-size impede o card de alargá-lo, então
   os botões não mudam de posição nem de tamanho. Cor: --color-accent-2 (verde do selo "Garantido"),
   para não competir com o CTA principal. --- */
.hero-d__actions:has(> .hero-cases-card) { width: fit-content; max-width: 100%; }
/* No cálculo de largura do grupo (fit-content) o card ainda somaria o gap do flex (space-4) +
   padding + borda; a margem negativa anula essa soma e o left igual devolve o card ao lugar. */
.hero-cases-card { --hc-pl: .75rem; --hc-pr: 1rem; --hc-shift: calc(var(--space-4) + var(--hc-pl) + var(--hc-pr) + 2px); margin-inline-start: calc(-1 * var(--hc-shift)); position: relative; left: var(--hc-shift); flex: 0 0 100%; contain: inline-size; box-sizing: border-box; display: flex; align-items: center; gap: .85rem; padding: .7rem var(--hc-pr) .7rem var(--hc-pl); border: 1px solid color-mix(in srgb, var(--color-accent-2) 38%, transparent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--color-accent-2) 7%, var(--color-surface)); color: var(--color-text); text-decoration: none; transition: background var(--duration-base, .25s) var(--ease-standard, ease), border-color var(--duration-base, .25s) var(--ease-standard, ease); }
.hero-cases-card__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-accent-2) 35%, transparent); color: var(--color-accent-2); }
.hero-cases-card__icon svg { width: 18px; height: 18px; }
.hero-cases-card__texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hero-cases-card__eyebrow { font-family: var(--font-mono, inherit); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-2); }
.hero-cases-card__titulo { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--text-base); font-weight: 700; line-height: 1.25; color: var(--color-heading); }
.hero-cases-card__seta { width: 14px; height: 14px; flex: none; color: var(--color-accent-2); transition: transform var(--duration-base, .25s) var(--ease-standard, ease); }
.hero-cases-card__desc { font-size: var(--text-xs); line-height: 1.4; color: var(--color-text-muted); }
.hero-cases-card:hover { background: color-mix(in srgb, var(--color-accent-2) 13%, var(--color-surface)); border-color: var(--color-accent-2); }
.hero-cases-card:hover .hero-cases-card__seta { transform: translateX(3px); }
.hero-cases-card:focus-visible { outline: 2px solid var(--color-accent-2); outline-offset: 3px; }
@media (max-width: 639px) {
  .hero-d__actions:has(> .hero-cases-card) { width: auto; }
  .hero-cases-card { margin-inline-start: 0; left: 0; }
}

/* --- Bloco da Home --- */
.home-cases__head { display: flex; align-items: flex-start; gap: var(--space-5); max-width: 760px; margin: 0 0 var(--space-10) clamp(0px, 4vw, var(--space-12)); }
.home-cases__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: var(--shadow-card-rest, var(--shadow-1)); margin-top: var(--space-1); }
.home-cases__icon > span { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-accent) 16%, var(--color-surface)); color: var(--color-accent); }
.home-cases__icon svg { width: 22px; height: 22px; }
.home-cases__eyebrow { margin: 0 0 var(--space-2); font-family: var(--font-mono, inherit); font-size: var(--text-xs); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--color-text-muted); }
.home-cases__text h2 { margin: 0 0 var(--space-3); }
.home-cases__lead { margin: 0; font-size: var(--text-lg); line-height: 1.55; color: var(--color-text-muted); max-width: 60ch; }
.home-cases__more { display: flex; justify-content: center; margin-top: var(--space-10); }
.home-cases__btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: .85rem 2rem; border: 1.5px solid var(--color-accent); border-radius: var(--radius-full); color: var(--color-accent); font-weight: 700; font-size: var(--text-base); text-decoration: none; background: transparent; transition: background var(--duration-base, .25s) var(--ease-standard, ease), color var(--duration-base, .25s) var(--ease-standard, ease); }
.home-cases__btn:hover { background: var(--color-accent); color: var(--color-surface); }
@media (max-width: 639px) {
  .home-cases__head { gap: var(--space-4); margin-left: 0; margin-bottom: var(--space-8); }
  .home-cases__icon { width: 48px; height: 48px; }
  .home-cases__icon > span { width: 34px; height: 34px; }
  .home-cases__icon svg { width: 18px; height: 18px; }
  .home-cases__eyebrow { letter-spacing: .22em; }
  .home-cases__lead { font-size: var(--text-base); }
  .home-cases__more { margin-top: var(--space-8); }
  .home-cases__btn { width: 100%; justify-content: center; padding-inline: var(--space-4); text-align: center; white-space: normal; }
}

/* --- Páginas de caso: coluna de leitura de ~760px úteis (desktop).
   .container + max-width no mesmo elemento: o padding lateral do container
   é somado à largura para o texto ficar com 760px; no celular o padding
   (--container-padding) continua o mesmo. --- */
.case-page { --case-leitura: calc(760px + 2 * var(--container-padding)); }
.case-page .article-header__inner,
.case-page .article-body,
.case-page .article-faq,
.case-page .article-related { max-width: var(--case-leitura); }
.case-page .case-facts,
.case-page .article-cta { max-width: 760px; }
.case-page .article-footer-nav { max-width: 760px; }

/* --- Resumo do caso (ficha) --- */
.case-facts { max-width: 760px; margin: 0 auto; padding: var(--space-6) var(--space-8); background: var(--color-surface-alt); border-radius: var(--radius-xl); }
.case-facts h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.case-facts dl { display: grid; grid-template-columns: minmax(150px, max-content) 1fr; gap: var(--space-3) var(--space-6); margin: 0; }
.case-facts dt { font-weight: 700; color: var(--color-heading); font-size: var(--text-base); }
.case-facts dd { margin: 0; color: var(--color-text); font-size: var(--text-base); line-height: 1.55; }
@media (max-width: 639px) {
  .case-facts { padding: var(--space-5); }
  .case-facts dl { grid-template-columns: 1fr; gap: var(--space-1); }
  .case-facts dd { margin-bottom: var(--space-3); }
}

/* --- Seções: fato do caso x explicação geral --- */
.case-section__label { display: inline-block; margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent); }
.case-section--tecnico .case-section__label { color: var(--color-text-muted); }
.case-section--tecnico { padding-left: var(--space-5); border-left: 3px solid var(--color-border); }
@media (max-width: 639px) { .case-section--tecnico { padding-left: var(--space-4); } }

/* --- Fotos: quadro ~1:1 centralizado, proporção preservada (contain), clique amplia --- */
.case-figure { margin: var(--space-6) auto var(--space-8); max-width: 600px; }
.case-figure__zoom { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-alt); overflow: hidden; cursor: zoom-in; }
.case-figure--retrato .case-figure__zoom { aspect-ratio: 1 / 1; }
.case-figure__zoom img { display: block; width: 100%; height: 100%; object-fit: contain; }
.case-figure--paisagem .case-figure__zoom img { height: auto; max-height: 600px; }
.case-figure__hint { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-heading) 72%, transparent); color: var(--color-surface); font-size: var(--text-xs); font-weight: 600; opacity: .9; pointer-events: none; }
.case-figure__zoom:hover .case-figure__hint, .case-figure__zoom:focus-visible .case-figure__hint { opacity: 1; }
.case-figure__zoom:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.case-figure figcaption { margin-top: var(--space-3); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); text-align: center; }

.case-lightbox { position: fixed; inset: 0; margin: auto; height: fit-content; width: min(96vw, 1100px); max-height: 94vh; padding: var(--space-4); border: 0; border-radius: var(--radius-lg); background: var(--color-surface); }
.case-lightbox::backdrop { background: rgba(0, 0, 0, .78); }
.case-lightbox__img { display: block; width: 100%; height: auto; max-height: calc(94vh - 7rem); object-fit: contain; margin: 0 auto; }
.case-lightbox__legenda { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); text-align: center; }
.case-lightbox__fechar { position: absolute; top: var(--space-2); right: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-heading); cursor: pointer; box-shadow: var(--shadow-1); }
.case-lightbox__fechar svg { width: 20px; height: 20px; }

/* --- CTA no mobile: .btn global tem white-space: nowrap (system.css, não tocado);
   aqui o texto do botão pode quebrar, mesma técnica de D032/D034 --- */
@media (max-width: 639px) {
  .case-page .article-cta { padding: var(--space-6) var(--space-5); }
  .case-page .article-cta a.article-cta__botao { white-space: normal; max-width: 100%; text-align: center; }
}

/* --- Outros casos (rodapé da página) --- */
.case-others { padding-top: 0; }
.case-others h2 { margin-bottom: var(--space-5); }