/* Blog: the section on the home, the listing page and the article pages. It lives at the top of the
   building, in the fog, so it is light like "sobre" and "contato". Prefix fcb-. Colours from surreal.css. */

/* base of the blog pages, which do not load styles.css */
.fcb-pagina{margin:0;font-family:var(--fc-text)}
.fcb-pagina *{box-sizing:border-box}
.fcb-pagina a{color:inherit;text-decoration:none}
.fcb-pagina img{max-width:100%}

/* ---------- cards, shared by the three places ---------- */
.fcb__grade{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fcb-card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;background:var(--fc-prata);box-shadow:inset 0 0 0 1px #3b434a1f;color:var(--fc-grafite);text-decoration:none;transition:box-shadow .25s ease}
.fcb-card:hover{box-shadow:inset 0 0 0 1px var(--fc-grafite)}
.fcb-card__capa{position:relative;aspect-ratio:16/10;overflow:hidden;background:#c9ced2}
.fcb-card__capa img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.fcb-card:hover .fcb-card__capa img{transform:scale(1.05)}
.fcb-card__tag{position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:99px;background:var(--fc-prata);font:500 12px/1.3 var(--fc-ui);color:var(--fc-grafite)}
.fcb-card__tag--rascunho{left:auto;right:12px;background:var(--fc-luz)}
.fcb-card__corpo{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.fcb-card h3{font-size:22px;line-height:1.2;margin:0 0 12px}
.fcb-card p{font-size:15px;line-height:1.6;color:#4A5157;margin:0 0 18px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fcb-card__meta{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font:400 13px/1.2 var(--fc-ui);color:#5E666D}
.fcb-card__autor{display:flex;align-items:center;gap:8px;color:#3A4146}
.fcb-card__autor img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.fcb__mais{display:flex;justify-content:center;margin-top:48px}
.fcb__mais[hidden]{display:none}
.fc-pill--contorno{background:transparent;color:var(--fc-grafite);box-shadow:inset 0 0 0 1px #3b434a66}
.fc-pill--contorno:hover{background:var(--fc-grafite);color:var(--fc-prata)}
.fcb-vazio{padding:32px 0;font-size:17px;color:#4A5157}
.fcb-vazio[hidden]{display:none}
.fcb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- the section on the home ---------- */
.fcb{position:relative;z-index:2;background:var(--fc-nevoa);color:var(--fc-grafite);padding:clamp(72px,8vw,120px) var(--fc-gutter)}
.fcb__cabeca{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 64px;align-items:end;margin-bottom:48px}
.fcb__rotulo{margin:0 0 18px;font:500 14px/1.2 var(--fc-ui);color:#4F575D}
.fcb .fc-lede,.fcb-topo .fc-lede{max-width:46ch}
.fcb .fc-lede{color:#3A4146}

/* ---------- the listing page and the top of an article ---------- */
.fcb-topo{background:var(--fc-grafite);color:var(--fc-prata);padding:140px var(--fc-gutter) 56px}
.fcb-topo__linha{display:flex;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid #ffffff26;font:400 13px/1.3 var(--fc-ui);color:var(--fc-concreto)}
.fcb-topo__linha a{color:var(--fc-muted)}
.fcb-topo__linha a:hover{color:var(--fc-prata)}
.fcb-topo__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:end;margin-top:40px}
.fcb-topo h1{font-size:clamp(36px,4.6vw,66px);max-width:16ch}
.fcb-topo .fc-lede{color:var(--fc-muted)}
.fcb-filtros{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.fcb-filtros button{padding:9px 16px;border-radius:99px;border:1px solid #ffffff33;background:transparent;color:var(--fc-prata);font:500 13px/1.2 var(--fc-ui);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.fcb-filtros button:hover{border-color:#ffffff80}
.fcb-filtros button[aria-pressed="true"]{background:var(--fc-prata);color:var(--fc-grafite);border-color:var(--fc-prata)}
.fcb-lista{background:var(--fc-nevoa);color:var(--fc-grafite);padding:56px var(--fc-gutter) clamp(90px,10vw,140px)}

/* ---------- an article ---------- */
.fcb-meta{display:grid;grid-template-columns:1fr 1fr;gap:18px 0;margin:0}
.fcb-meta div{padding:4px 0}
.fcb-meta div:nth-child(even){padding-left:24px;border-left:1px solid #ffffff26}
.fcb-meta div:nth-child(odd){padding-right:24px}
.fcb-meta dt{font:400 12px/1.3 var(--fc-ui);color:var(--fc-concreto);margin-bottom:6px}
.fcb-meta dd{margin:0;font:500 15px/1.3 var(--fc-ui);color:var(--fc-prata)}
.fcb-capa{background:linear-gradient(180deg,var(--fc-grafite) 50%,var(--fc-nevoa) 50%);padding:48px var(--fc-gutter) 0}
.fcb-capa div{max-width:var(--fc-max);margin:0 auto;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#c9ced2;box-shadow:0 30px 80px #0005}
.fcb-capa img{display:block;width:100%;height:100%;object-fit:cover}
.fcb-corpo{background:var(--fc-nevoa);color:var(--fc-grafite);padding:56px var(--fc-gutter) clamp(70px,8vw,110px)}
.fcb-corpo__grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;max-width:var(--fc-max);margin:0 auto}
.fcb-sumario{position:sticky;top:110px;align-self:start}
.fcb-sumario span{display:block;font:500 12px/1.3 var(--fc-ui);color:#4F575D;margin-bottom:14px}
.fcb-sumario ol{list-style:none;margin:0;padding:0;border-left:1px solid #3b434a33}
.fcb-sumario a{display:block;padding:8px 0 8px 16px;margin-left:-1px;border-left:1px solid transparent;font:400 14px/1.4 var(--fc-ui);color:#4A5157;text-decoration:none}
.fcb-sumario a:hover,.fcb-sumario a.is-atual{color:var(--fc-grafite);border-left-color:var(--fc-grafite)}
.fcb-texto{max-width:68ch}
.fcb-texto .fcb-lead{font-size:clamp(19px,1.6vw,22px);line-height:1.6;color:#2D3338;margin:0 0 28px}
.fcb-texto p{font-size:17px;line-height:1.8;color:#3A4146;margin:0 0 18px}
.fcb-texto h2{font-size:clamp(24px,2.2vw,30px);line-height:1.15;margin:48px 0 16px;max-width:none;scroll-margin-top:100px}
.fcb-texto h3{font-size:20px;margin:32px 0 12px}
.fcb-texto ul,.fcb-texto ol{margin:0 0 20px;padding-left:22px;font-size:17px;line-height:1.75;color:#3A4146}
.fcb-texto li{margin-bottom:8px}
.fcb-texto strong{color:var(--fc-grafite);font-weight:600}
.fcb-texto a{color:var(--fc-grafite);text-decoration:underline;text-underline-offset:3px}
.fcb-texto .article-highlight{font-family:var(--fc-text);font-style:italic;font-size:clamp(21px,1.8vw,25px);line-height:1.45;color:var(--fc-grafite);padding:6px 0 6px 22px;border-left:3px solid var(--fc-luz);margin:28px 0}
.fcb-rascunho{margin:0 0 28px;padding:12px 16px;border-radius:8px;background:#e2ae6233;border:1px solid #e2ae6280;font:400 14px/1.5 var(--fc-ui);color:#3A4146}
.fcb-autor{display:flex;align-items:center;gap:18px;margin-top:56px;padding-top:28px;border-top:1px solid #3b434a33}
.fcb-autor img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.fcb-autor span{display:block;font:400 12px var(--fc-ui);color:#4F575D}
.fcb-autor b{display:block;font:500 16px var(--fc-ui);color:var(--fc-grafite);margin:4px 0}
.fcb-autor a{font:500 14px var(--fc-ui);color:var(--fc-grafite);text-decoration:underline;text-underline-offset:3px}
.fcb-relacionados{background:var(--fc-nevoa);color:var(--fc-grafite);padding:0 var(--fc-gutter) clamp(70px,8vw,110px)}
.fcb-relacionados h2{font-size:clamp(28px,3vw,40px);margin-bottom:28px}
.fcb-relacionados .fcb__grade{grid-template-columns:repeat(2,minmax(0,1fr))}
.fcb-cta{background:linear-gradient(180deg,var(--fc-nevoa),var(--fc-prata));color:var(--fc-grafite);padding:clamp(60px,7vw,100px) var(--fc-gutter)}
.fcb-cta .fc-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center}
.fcb-cta h2{font-size:clamp(28px,3.4vw,46px)}
.fcb-cta p{margin-top:12px;color:#3A4146;max-width:46ch}
.fcb-cta__acoes{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  .fcb__grade,.fcb-relacionados .fcb__grade{grid-template-columns:1fr}
  .fcb__cabeca,.fcb-topo__grid,.fcb-cta .fc-wrap{grid-template-columns:1fr}
  .fcb-corpo__grid{grid-template-columns:1fr;gap:32px}
  .fcb-sumario{position:static}
  .fcb-topo{padding-top:120px}
  .fcb-card h3{font-size:20px}
}
@media (prefers-reduced-motion:reduce){
  .fcb-card,.fcb-card__capa img,.fcb-filtros button{transition:none}
  .fcb-card:hover .fcb-card__capa img{transform:none}
}

/* ---------- Visual B: the blog at night, in the site's own graphite, with the façade covers ----------
   Turned on with ?visual=b (blog.js keeps it for the session). Visual A is the light version above. */
html.fcb-escuro .fcb-pagina,html.fcb-escuro .fcb,html.fcb-escuro .fcb-lista,html.fcb-escuro .fcb-corpo,html.fcb-escuro .fcb-relacionados{background:var(--fc-grafite);color:var(--fc-prata)}
html.fcb-escuro .fcb{box-shadow:inset 0 1px #ffffff14}
html.fcb-escuro .fcb .fc-lede,html.fcb-escuro .fcb-vazio,html.fcb-escuro .fcb-texto p,html.fcb-escuro .fcb-texto ul,html.fcb-escuro .fcb-texto ol,html.fcb-escuro .fcb-cta p{color:var(--fc-muted)}
html.fcb-escuro .fcb__rotulo,html.fcb-escuro .fcb-sumario span,html.fcb-escuro .fcb-autor span{color:var(--fc-concreto)}
html.fcb-escuro .fcb-card{background:#22272c;box-shadow:inset 0 0 0 1px #ffffff14;color:var(--fc-prata)}
html.fcb-escuro .fcb-card:hover{box-shadow:inset 0 0 0 1px #ffffff40,0 24px 60px -30px #000}
html.fcb-escuro .fcb-card__capa{background:#171b1f}
html.fcb-escuro .fcb-card__tag{background:#1d2125cc;color:var(--fc-prata);box-shadow:inset 0 0 0 1px #ffffff26;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.fcb-escuro .fcb-card__tag--rascunho{background:var(--fc-luz);color:var(--fc-grafite)}
html.fcb-escuro .fcb-card p{color:var(--fc-muted)}
html.fcb-escuro .fcb-card__meta{color:var(--fc-concreto)}
html.fcb-escuro .fcb-card__autor{color:var(--fc-muted)}
html.fcb-escuro .fc-pill--contorno{color:var(--fc-prata);box-shadow:inset 0 0 0 1px #ffffff40}
html.fcb-escuro .fc-pill--contorno:hover{background:var(--fc-prata);color:var(--fc-grafite)}
html.fcb-escuro .fcb-capa{background:var(--fc-grafite)}
html.fcb-escuro .fcb-capa div{background:#171b1f;box-shadow:0 30px 80px #000a}
html.fcb-escuro .fcb-texto .fcb-lead,html.fcb-escuro .fcb-texto strong,html.fcb-escuro .fcb-texto a,html.fcb-escuro .fcb-texto .article-highlight,html.fcb-escuro .fcb-autor b,html.fcb-escuro .fcb-autor a{color:var(--fc-prata)}
html.fcb-escuro .fcb-texto .article-highlight{border-left-color:var(--fc-luz)}
html.fcb-escuro .fcb-rascunho{background:#e2ae621f;border-color:#e2ae6266;color:var(--fc-muted)}
html.fcb-escuro .fcb-sumario ol{border-left-color:#ffffff1f}
html.fcb-escuro .fcb-sumario a{color:var(--fc-muted)}
html.fcb-escuro .fcb-sumario a:hover,html.fcb-escuro .fcb-sumario a.is-atual{color:var(--fc-prata);border-left-color:var(--fc-luz)}
html.fcb-escuro .fcb-autor{border-top-color:#ffffff1f}
html.fcb-escuro .fcb-cta{background:linear-gradient(180deg,var(--fc-grafite),#121518);color:var(--fc-prata)}

/* Dedo: "Voltar ao blog" tinha 17px de altura. A borda transparente dá 43px de alvo e a margem negativa
   devolve o espaço, então a linha do topo do artigo fica exatamente onde estava. */
@media (pointer:coarse){
  .fcb-topo__linha a{border-block:13px solid transparent;margin-block:-13px}
}