/* Capa (fase 1). Depende de css/base.css: tokens, .ink-band, .sec-head, .btn, hover assinatura (.hv) e movimento.
   Prefixo .h- é a abertura (matéria em destaque); .cp- é o resto da capa. */


/* abertura: matéria em destaque sobre tinta. Manchete na coluna larga (7 de 12, o mesmo corte das páginas internas) com o
   corpo do h1 das seções (.pg-h1); a imagem fica nas 5 colunas da direita e estica até a altura do texto. */
.h-pauta { padding-block: 48px; }
.h-pauta__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "story fig"; gap: 48px; }
.h-pauta__story { grid-area: story; align-self: center; min-width: 0; display: grid; justify-items: start; }
.h-pauta__title { font: 400 clamp(56px, 7.2vw, 112px)/.92 var(--serif); letter-spacing: -.025em; color: #F4F1E9; text-wrap: balance; }
.h-pauta__title a { color: inherit; }
.h-pauta__title em { font-style: italic; color: var(--orange); padding-inline-start: .11em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.h-pauta__lead { margin-top: 28px; max-width: 52ch; font-size: 19px; line-height: 1.5; color: #CBC6BB; text-wrap: pretty; }
.h-pauta__meta { margin-top: 16px; color: #CBC6BB; }
.h-pauta__meta .selo { margin-right: 12px; vertical-align: middle; }
.h-pauta__story .btn { margin-top: 28px; }

.h-pauta__fig { grid-area: fig; position: relative; display: block; min-height: 420px; border-radius: var(--r-media); overflow: hidden; background: #2C2C29; }
.h-pauta__fig .capa--hero { position: absolute; inset: 0; background: #2C2C29; }
.capa--hero picture { display: contents; }
.h-pauta__fig .capa__img { object-position: 58% center; }
.h-pauta__fig .g-canto { z-index: 3; color: #F4F1E9; opacity: .85; }
.g-canto--tl { top: 14px; left: 14px; }
.g-canto--tr { top: 14px; right: 14px; }
.g-canto--bl { bottom: 14px; left: 14px; }
.g-canto--br { bottom: 14px; right: 14px; }


/* o que saiu: lista principal da capa à esquerda; card de regras à direita na altura do próprio
   conteúdo, preso sob o header enquanto a lista rola (lista longa não abre vão entre as regras). */
.cp-saiu { padding-block: 56px 52px; }
.cp-saiu__head { align-items: flex-end; margin-bottom: 12px; }
.cp-lista { display: grid; grid-template-columns: minmax(0, 1fr) 368px; column-gap: 40px; }
.cp-lista__rows { grid-column: 1; display: grid; align-content: start; min-width: 0; }
.cp-row { position: relative; display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: 24px; align-items: start; padding-block: 20px; color: var(--ink); }
.cp-row > .trace { position: absolute; left: 0; right: 0; bottom: 0; }
.cp-row .capa--row { width: 160px; aspect-ratio: 4 / 3; border-radius: var(--r-menu); }
.cp-row__txt { min-width: 0; display: grid; gap: 8px; }
.cp-row__t { font: 400 30px/1.08 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.cp-row__t em { font-style: italic; color: var(--orange); }
.cp-row__r { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 16px; line-height: 1.5; color: var(--muted); }
.cp-row:focus-visible { outline-offset: 2px; border-radius: var(--r-ctl); }

.cp-regras { grid-column: 2; align-self: start; margin-top: 20px; padding: 4px 24px 8px; display: flex; flex-direction: column; }
/* só prende quando o card inteiro (~780px) cabe abaixo do header; tela baixa rola junto e não esconde a regra 05 */
@media (min-width: 961px) and (min-height: 900px) { .cp-regras { position: sticky; top: calc(var(--h-top) + 24px); } }
.cp-regras__head { display: grid; align-content: start; gap: 8px; padding-block: 20px 16px; }
.cp-regras__head h2 { font: 400 clamp(28px, 2.3vw, 34px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: pretty; }
.cp-regras__head h2 em { font-style: italic; color: var(--orange); }
.cp-regras__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.cp-regras__list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: first baseline; align-content: center; padding-block: 16px; border-top: 1px dashed var(--line); }
.cp-regras__n { font: italic 400 32px/1 var(--serif); color: var(--orange); }
.cp-regras__list p { font-size: 18px; line-height: 1.5; color: var(--ink); }

/* nosso critério: versão da referência do Kelvi (handoff/ref/manter-criterio-e-rodape.webp). Botão contornado sob o título,
   numerais grandes em coluna própria. Única adição: a seta se redesenha no hover. */
/* distância até o rodapé: 96 px (--s-24), a mesma das páginas internas */
.method-section { padding-bottom: var(--s-24); }
.method-panel { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 48px; padding: 44px 40px; border: 1px solid #5A5952; border-radius: var(--radius-card); background: #1D1D1B; color: #F4F1E9; }
.method-panel__intro { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; }
.method-panel__intro > .t-micro { display: inline-flex; align-items: center; gap: 8px; color: #CBC6BB; }
.method-panel__intro > .t-micro::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #F05A37; }
.method-panel__content { position: relative; z-index: 1; }
.method-panel h2 { max-width: 12ch; margin: 16px 0 28px; font: 400 clamp(38px, 4vw, 52px)/1.02 var(--serif); letter-spacing: -.02em; color: #F4F1E9; }
.method-panel h2 em { color: #F05A37; }
.method-panel__cta { min-height: 44px; width: max-content; padding: 0 18px; display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(244,241,233,.32); border-radius: 12px; background: rgba(29,29,27,.55); color: #F4F1E9; font-size: 16px; font-weight: 500; transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); }
.method-panel__cta:hover { border-color: #F4F1E9; background: rgba(29,29,27,.8); color: #F4F1E9; }
.method-panel__cta:active { transform: translateY(1px); }
.method-panel__cta:focus-visible { outline-color: #F4F1E9; }
.method-panel__cta .ui-icon { width: 18px; height: 18px; transition: transform var(--duration-fast) var(--ease-out); }
.method-panel__cta:hover .ui-icon { transform: translateX(2px); }
@media (hover: hover) { .method-panel__cta:hover .ui-icon { animation: hv-draw var(--dur-hv) var(--ease-out) both; } }
.method-panel__cta:focus-visible .ui-icon { animation: hv-draw var(--dur-hv) var(--ease-out) both; }
.method-panel__art { position: absolute; inset: 0 52% 0 0; z-index: -1; background: #1D1D1B image-set(url('/img/noir/claude-fable-5-1-cache-640.webp') 1x, url('/img/noir/claude-fable-5-1-cache.webp') 2x) center / cover; }
.method-panel__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29,29,27,.72), rgba(29,29,27,.2) 68%, rgba(29,29,27,.7)); }
.method-principles { width: 100%; padding: 0; margin: 0; list-style: none; }
.method-principles li { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 24px; align-items: first baseline; padding: 22px 0; border-top: 1px dashed #5A5952; }
.method-principles li:first-child { padding-top: 0; border-top: 0; }
.method-principles li:last-child { padding-bottom: 0; }
.method-principles li span { font: 400 36px/1 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: #F05A37; }
.method-principles li p { color: #F4F1E9; font-size: 18px; line-height: 1.5; }
[data-theme="dark"] .method-panel { box-shadow: none; }

@media (max-width: 1279px) {
  .cp-lista { grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; }
  .cp-row { grid-template-columns: 128px minmax(0, 1fr); column-gap: 20px; }
  .cp-row .capa--row { width: 128px; }
  .cp-row__t { font-size: 28px; }
  .cp-row__r { font-size: 15px; }
  .cp-regras__list p { font-size: 17px; }
}
@media (max-width: 1180px) {
  .h-pauta__in { gap: 32px; }
  .h-pauta__lead { font-size: 17px; }
  .method-panel { gap: 32px; padding: 32px; }
}
@media (max-width: 960px) {
  .cp-lista { grid-template-columns: 1fr; }
  .cp-regras { grid-column: 1; margin-top: 32px; }
}
@media (max-width: 860px) {
  .h-pauta { padding-block: 24px 32px; }
  .h-pauta__in { grid-template-columns: 1fr; grid-template-areas: "fig" "story"; gap: 24px; }
  .h-pauta__fig { min-height: 0; aspect-ratio: 3 / 2; }
  /* tablet: manchete na largura da imagem; embaixo a linha fina e, numa linha, data à esquerda e botão à direita */
  .h-pauta__story { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .h-pauta__title, .h-pauta__lead { grid-column: 1 / -1; }
  .h-pauta__lead { margin-top: 20px; max-width: none; font-size: 19px; }
  .h-pauta__meta { grid-column: 1; margin-top: 24px; }
  .h-pauta__story .btn { grid-column: 2; margin-top: 24px; }
  /* chips com área de toque de 40 px: o elemento cresce, a pílula desenhada continua com 28 px */
  .cp-saiu .chip { position: relative; isolation: isolate; height: var(--h-control-lg); border-color: transparent; background: transparent; }
  .cp-saiu .chip::before { content: ""; position: absolute; inset: 6px 0; z-index: -1; border: 1px solid var(--line); border-radius: inherit; background: var(--card); transition: background var(--dur-fast), border-color var(--dur-fast); }
  .cp-saiu .chip:hover { border-color: transparent; }
  .cp-saiu .chip:hover::before { border-color: var(--ctl); }
  .cp-saiu .chip[aria-pressed="true"] { background: transparent; border-color: transparent; }
  .cp-saiu .chip[aria-pressed="true"]::before { background: var(--ink); border-color: var(--ink); }
  .cp-saiu .chips { row-gap: 0; }
  .method-panel { grid-template-columns: 1fr; }
  .method-panel h2 { max-width: none; }
  .method-panel__art { inset: 0; opacity: 1; background-image: url('/img/noir/claude-fable-5-1-cache-960.webp'); background-position: center 42%; }
  .method-panel__art::after { background: linear-gradient(180deg, rgba(29,29,27,.56), rgba(29,29,27,.9) 58%); }
}
@media (max-width: 560px) {
  .h-pauta__story { grid-template-columns: minmax(0, 1fr); }
  .h-pauta__title, .h-pauta__lead, .h-pauta__meta, .h-pauta__story .btn { grid-column: 1; grid-row: auto; }
  .h-pauta__meta { margin-top: 16px; }
  .h-pauta__title { font-size: clamp(44px, 12.4vw, 56px); }
  .h-pauta__title em { padding-inline-start: 0; } /* no celular o recuo empurra "GPT-6" para a quebra no hífen (4 linhas) */
  .h-pauta__lead { font-size: 16px; }
  .h-pauta__story .btn { width: 100%; }
  .cp-saiu { padding-block: 40px; }
  .cp-row { grid-template-columns: minmax(0, 1fr) 88px; column-gap: 16px; padding-block: 16px; }
  .cp-row .capa--row { width: 88px; }
  .cp-row .capa--row { grid-column: 2; grid-row: 1; }
  .cp-row__txt { grid-column: 1; grid-row: 1; }
  .cp-row__t { font-size: 22px; }
  .cp-row__r { font-size: 13px; }
  .cp-regras { padding-inline: 20px; }
  .cp-regras__list p { font-size: 16px; }
  .cp-regras__list li { padding-block: 16px; }
  .method-panel { padding: 24px; }
  .method-panel h2 { font-size: 40px; }
  .method-panel__cta { width: 100%; justify-content: center; }
  .method-principles li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; }
  .method-principles li span { font-size: 28px; }
  .method-principles li p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .method-panel__cta .ui-icon { transition-duration: .01ms !important; animation: none !important; }
  .method-panel__cta:hover .ui-icon { transform: none; }
}
.cp-saiu [data-filtro] { display: none; }
.js .cp-saiu [data-filtro] { display: flex; }