/* ============================================================
   MATERIAIS · lista (/materiais) e detalhe (/materiais/{slug})
   Usa os tokens de css/site.css; carregado só nessas duas rotas.
   ============================================================ */

/* ----- card (lista e "Outros materiais") ----- */
.materials-list{list-style:none;display:grid;gap:24px}
.material-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,40%);height:100%;
  background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden;
  transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s,box-shadow .35s}
.material-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow-soft)}
.mc-body{display:flex;flex-direction:column;gap:14px;padding:clamp(24px,3.4vw,44px)}
.mc-title{font-size:clamp(21px,2.3vw,28px);line-height:1.18;text-wrap:balance;transition:color .25s}
.material-card:hover .mc-title{color:var(--accent)}
.mc-summary{color:var(--ink-soft);font-size:15.5px;line-height:1.6;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mc-more{margin-top:auto;padding-top:6px;display:inline-flex;align-items:center;gap:8px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;color:var(--accent)}
.mc-more .arw{transition:transform .25s}
.material-card:hover .mc-more .arw{transform:translateX(5px)}
.mc-cover{display:flex;align-items:center;justify-content:center;padding:clamp(16px,2.2vw,28px);
  background:var(--surface-2);border-left:1px solid var(--line)}
.mc-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;
  box-shadow:0 22px 48px -22px rgba(0,0,0,0.8);transition:transform .55s}
.material-card:hover .mc-cover img{transform:scale(1.03)}
.mc-noimg{font-family:'Space Grotesk',sans-serif;font-size:56px;color:var(--accent);opacity:.4}
.materials-empty{color:var(--ink-soft);font-size:17px}

/* "Outros materiais": 2 cards lado a lado, capa em cima */
.materials-list-compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.materials-list-compact .material-card{grid-template-columns:minmax(0,1fr)}
.materials-list-compact .mc-cover{order:-1;border-left:0;border-bottom:1px solid var(--line)}
.materials-list-compact .mc-title{font-size:clamp(19px,1.9vw,23px)}

@media(max-width:760px){
  .material-card{grid-template-columns:minmax(0,1fr)}
  .mc-cover{order:-1;border-left:0;border-bottom:1px solid var(--line)}
  .materials-list-compact{grid-template-columns:minmax(0,1fr)}
}

/* ----- detalhe: hero ----- */
.material-hero{padding-bottom:clamp(96px,11vw,150px)}
.material-hero h1{max-width:24ch;font-size:clamp(34px,4.6vw,60px);margin-bottom:0;text-wrap:balance}
.material-hero .crumb{flex-wrap:wrap;row-gap:6px}

/* ----- detalhe: texto à esquerda, painel do formulário à direita ----- */
.material-detail{--md-pad:clamp(56px,7vw,90px);--md-pad-bottom:clamp(64px,8vw,110px);--md-overlap:clamp(48px,6vw,80px);
  position:relative;z-index:2;padding:var(--md-pad) 0 var(--md-pad-bottom)}
.material-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,500px);gap:clamp(40px,7vw,96px);align-items:start}
.material-detail.no-form .material-detail-grid{grid-template-columns:minmax(0,1fr)}
.material-about .kicker{margin-bottom:22px}

/* Painel sobe sobre o hero (e, com "Outros materiais", desce sobre a faixa seguinte). */
.material-form-panel{position:relative;margin-top:calc(-1 * (var(--md-pad) + var(--md-overlap)));
  background:var(--surface);border:1px solid var(--line-strong);border-radius:6px;box-shadow:var(--shadow);
  padding:clamp(30px,4vw,56px) clamp(24px,4.4vw,64px) clamp(40px,6vw,96px)}
/* Margem negativa = padding inferior + sobreposição: a seção termina antes do painel. */
.material-detail.has-others .material-form-panel{margin-bottom:calc(-1 * (var(--md-pad-bottom) + var(--md-overlap)))}
.material-others{background:var(--panel);border-top:1px solid var(--line)}

/* Formulário do CMS dentro do painel: sem o "card" próprio, só placeholders e linha inferior. */
.material-form-panel .lead-form-card{background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;padding:0}
.material-form-panel .lead-form-title{color:var(--ink);font-size:clamp(26px,2.8vw,34px);margin-bottom:30px}
.material-form-panel .lf-field{position:relative;margin-bottom:22px}
.material-form-panel .lf-field:has(input[placeholder]) label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.material-form-panel .lf-field input{padding:12px 4px}
.material-form-panel .lf-field input::placeholder{color:var(--ink-faint)}
.material-form-panel .lf-submit{width:auto;min-width:min(100%,260px);margin-top:14px}
.material-form-panel .form-dl{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media(max-width:900px){
  .material-hero{padding-bottom:70px}
  .material-detail-grid{grid-template-columns:minmax(0,1fr)}
  .material-form-panel,
  .material-detail.has-others .material-form-panel{margin:0;max-width:560px}
}