/* =====================================================================
   materia.css · Dr. Fabio Salomão
   Template da página interna de matéria do Blog. Cabeçalho editorial +
   coluna de leitura confortável em Marfim. Cor só via var(--…).
   ===================================================================== */

.materia{background:var(--marfim)}

/* ===== Cabeçalho da matéria ===== */
.mat-head{background:var(--marfim);padding:132px 0 0;border-bottom:1px solid transparent}
.mat-head-inner{max-width:900px}

.mat-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:20px}
.mat-section{font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--azul-profundo);background:var(--areia);border:1px solid var(--areia-escuro-01);padding:8px 14px;border-radius:var(--radius-pill)}
.mat-demo-badge{font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.02em;color:var(--marfim);background:var(--azul-profundo);padding:8px 14px;border-radius:var(--radius-pill)}

.mat-tags{gap:8px;margin-bottom:22px}
.mat-tags .tag{background:var(--marfim);border-color:var(--areia-escuro-01)}

.mat-head h1{color:var(--azul-profundo);max-width:16ch;margin-bottom:22px}
.mat-subtitle{font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--grafite);max-width:44ch;margin:0}

/* imagem obrigatória da matéria */
.mat-cover{margin-top:40px}
.mat-cover .frame{position:relative;aspect-ratio:16/9;border:6px solid var(--marfim);border-radius:var(--radius-img);box-shadow:var(--shadow-img);background:var(--nevoa)}
.mat-cover .frame .img-reveal{border-radius:calc(var(--radius-img) - 6px);height:100%}
.mat-cover .frame .media-ph{height:100%;min-height:0}

/* ===== Corpo da matéria ===== */
.mat-body{padding:56px 0 120px;background:var(--marfim)}
.mat-col{max-width:800px}

.mat-note{font-size:15px;line-height:1.55;color:var(--azul-profundo);background:var(--areia-claro-01);border:1px solid var(--areia-escuro-01);border-left:3px solid var(--nevoa);border-radius:var(--radius-tag);padding:18px 22px;margin-bottom:40px}

.mat-col > p{color:var(--grafite);font-size:18px;line-height:1.7;margin-bottom:22px}
.mat-col > p:last-of-type{margin-bottom:0}
.mat-col a:not(.btn):not(.mat-side-link){color:var(--azul-profundo);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--azul-claro-01);transition:color .3s,text-decoration-color .3s}
.mat-col a:not(.btn):not(.mat-side-link):hover{color:var(--azul-escuro-01);text-decoration-color:var(--azul-escuro-01)}

.mat-col h2{color:var(--azul-profundo);font-size:clamp(28px,3vw,38px);line-height:1.15;margin:56px 0 20px;max-width:22ch}
.mat-col h3{color:var(--azul-profundo);font-size:clamp(21px,2vw,27px);line-height:1.2;margin:36px 0 14px}

/* listas do corpo */
.mat-list{margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px}
.mat-list li{position:relative;padding-left:26px;color:var(--grafite);font-size:18px;line-height:1.6}
.mat-list li::before{content:"";position:absolute;left:4px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--azul-profundo);opacity:.55}

/* ===== CTA final contextual ===== */
.mat-cta{margin-top:56px;padding-top:40px;border-top:1px solid var(--marfim-escuro-01);display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.mat-cta-text{color:var(--azul-profundo);font-size:clamp(19px,1.9vw,23px);line-height:1.4;font-family:var(--font-display);max-width:24ch;margin:0}
.mat-side-link{font-weight:700;font-size:15px;color:var(--azul-profundo);display:inline-flex;align-items:center;gap:8px;min-height:44px}
.mat-side-link svg{transition:transform .35s var(--ease)}
.mat-side-link:hover svg{transform:translateX(4px)}

/* ===== Links internos relacionados ===== */
.mat-related{margin-top:64px}
.mat-related-title{font-size:clamp(24px,2.2vw,30px);color:var(--azul-profundo);margin:0 0 24px}
.mat-related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:0}
.mat-related-list a{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--areia-claro-01);border:1px solid var(--areia-escuro-01);border-radius:var(--radius-card);padding:24px 24px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease)}
.mat-related-list a:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);background:var(--areia)}
.mr-label{font-family:var(--font-display);font-size:20px;color:var(--azul-profundo)}
.mr-text{font-size:14.5px;line-height:1.5;color:var(--grafite)}

/* ===== Responsivo ===== */
@media (max-width:980px){
  .mat-head{padding:116px 0 0}
  .mat-body{padding:44px 0 96px}
  .mat-related-list{grid-template-columns:1fr;gap:14px}
}
@media (max-width:560px){
  .mat-head{padding:104px 0 0}
  .mat-cover{margin-top:32px}
  .mat-col > p,.mat-list li{font-size:16.5px}
  .mat-cta .btn{width:100%}
}