/* ============================================================
   PHEELVOX · blog.css — o índice e a página de texto.

   Mesmo chão dos dossiês: mármore escuro por trás, folha creme por cima.
   Nada de paleta nova, nada de par tipográfico novo — o Cânone já decidiu.
   O que muda de um post para outro é o LAYOUT, e são três, escritos aqui à
   mão. O gerador escolhe entre eles; ele não inventa forma.
   ============================================================ */

/* ---------- Índice ---------- */

.bi { padding: clamp(96px, 15vh, 190px) 0 clamp(70px, 11vh, 130px); }

.bi-rot {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent); margin: 0 0 18px;
}
.bi-h1 {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(42px, 7vw, 96px); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); color: var(--paros); margin: 0 0 22px;
}
.bi-h1 em { font-style: italic; font-weight: 440; color: var(--paros); }
.bi-sub {
  font-family: var(--font-sans); font-size: clamp(15px, 1.5vw, 18px);
  line-height: var(--leading-normal); color: rgba(244, 241, 234, .74);
  max-width: 58ch; margin: 0 0 clamp(44px, 7vh, 78px);
}

.bi-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 3vh, 30px); }

.bi-item a {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px); align-items: center;
  background: #FAF7F0; color: #10141F; text-decoration: none;
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--shadow-lift);
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1);
}
/* o primeiro ocupa a largura toda: a chamada da capa não disputa com o resto */
.bi-item--primeiro a { grid-template-columns: minmax(0, 1fr); }
.bi-item--primeiro .bi-capa { aspect-ratio: 21 / 9; }
.bi-item--primeiro .bi-txt { padding: clamp(24px, 4vw, 44px); }
.bi-item--primeiro .bi-titulo { font-size: clamp(30px, 4.2vw, 54px); }

.bi-item a:hover, .bi-item a:focus-visible {
  transform: translateY(-3px); box-shadow: 0 22px 60px rgba(5, 14, 32, .3);
}
.bi-item a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.bi-capa { display: block; aspect-ratio: 16 / 10; background: var(--paros-3); }
/* `height: auto` obrigatório: com altura explícita no atributo, o aspect-ratio
   é ignorado e a placa mostra uma fatia vertical em vez da imagem. */
.bi-capa img { width: 100%; height: auto; aspect-ratio: inherit; object-fit: cover; display: block; }

.bi-txt { display: block; padding: clamp(18px, 2.6vw, 30px) clamp(18px, 2.6vw, 34px); }
.bi-meta {
  display: block; font-family: var(--font-mono); font-size: 11.5px;
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 12px;
}
.bi-sep { color: var(--accent); margin: 0 .35em; }
.bi-titulo {
  display: block; font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(22px, 2.4vw, 32px); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display); margin-bottom: 10px;
}
.bi-fina {
  display: block; font-family: var(--font-sans); font-size: 15px;
  line-height: var(--leading-normal); color: var(--text-secondary); max-width: 62ch;
}

.bi-vazio {
  background: #FAF7F0; color: var(--text-secondary); border-radius: var(--radius-sm);
  padding: clamp(28px, 5vw, 54px); font-family: var(--font-sans); font-size: 16px;
  line-height: var(--leading-normal);
}
.bi-vazio p { margin: 0; max-width: 52ch; }

@media (max-width: 760px) {
  .bi-item a { grid-template-columns: minmax(0, 1fr); }
  .bi-capa { aspect-ratio: 16 / 9; }
}

/* ---------- Página do texto ---------- */

.bp {
  width: min(1140px, 100% - clamp(24px, 8vw, 40px));
  margin: 0 auto; padding: clamp(96px, 15vh, 180px) 0 clamp(60px, 9vh, 110px);
  color: var(--paros);
}

.bp-meta {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: rgba(244, 241, 234, .6); margin: 0 0 18px;
}
.bp-sep { color: var(--accent); margin: 0 .35em; }

.bp-titulo {
  font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: clamp(34px, 5.4vw, 74px); line-height: var(--leading-display);
  letter-spacing: var(--tracking-display); margin: 0 0 20px; max-width: 20ch;
}
.bp-fina {
  font-family: var(--font-sans); font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.55; color: rgba(244, 241, 234, .78); max-width: 56ch; margin: 0;
}

/* as três aberturas */
.bp-abre { margin-bottom: clamp(34px, 6vh, 66px); }

.bp-abre--colunas {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(26px, 4vw, 56px); align-items: center;
}

.bp-frase {
  font-family: var(--font-display); font-weight: 440; font-style: italic;
  font-size: clamp(26px, 3.6vw, 46px); line-height: 1.2;
  letter-spacing: var(--tracking-display);
  color: var(--paros); margin: 0 0 26px; padding-left: clamp(16px, 2vw, 28px);
  border-left: 2px solid transparent;
  /* Ícor só em fissura: aqui a borda É a fissura, e não fundo */
  border-image: var(--ichor) 1;
  max-width: 24ch;
}
.bp-abre--citacao .bp-titulo { font-size: clamp(26px, 3.4vw, 44px); }

/* figuras */
.bp-fig { margin: 0 0 clamp(28px, 5vh, 56px); }
.bp-fig img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  display: block; border-radius: var(--radius-sm); background: var(--nero-3);
}
.bp-fig figcaption {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5;
  letter-spacing: .04em; color: rgba(244, 241, 234, .55);
  margin-top: 10px; max-width: 62ch;
}
.bp-fig--cheia { margin-bottom: clamp(26px, 4vh, 48px); }
.bp-fig--lado { margin: 0; }
.bp-fig--faixa img { aspect-ratio: 21 / 9; }
.bp-fig--meio { margin: clamp(26px, 4vh, 46px) 0; }

/* o corpo: folha creme, porque texto longo não se lê sobre pedra */
.bp-corpo {
  background: #FAF7F0; color: #10141F; border-radius: var(--radius-sm);
  padding: clamp(30px, 5vw, 66px) clamp(22px, 5vw, 78px);
  box-shadow: var(--shadow-lift);
}
.bp-corpo p {
  font-family: var(--font-sans); font-size: clamp(16px, 1.15vw, 17.5px);
  line-height: 1.72; color: var(--text-primary);
  max-width: 68ch; margin: 0 auto clamp(18px, 2.4vh, 26px);
}
.bp-corpo p:last-child { margin-bottom: 0; }
/* a primeira linha ganha corpo, como abertura de revista */
.bp-corpo > p:first-child { font-size: clamp(17px, 1.35vw, 19.5px); color: #10141F; }

.bp-corpo .bp-fig { max-width: 68ch; margin-left: auto; margin-right: auto; }
.bp-corpo .bp-fig figcaption { color: var(--text-tertiary); }

/* o gancho: onde o texto encosta no que a casa vende */
.bp-gancho {
  margin: clamp(32px, 5vh, 60px) auto 0; max-width: 68ch;
  background: rgba(244, 241, 234, .05);
  border: 1px solid rgba(240, 86, 31, .3); border-radius: var(--radius-sm);
  padding: clamp(24px, 4vw, 40px);
}
.bp-gancho-rot {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.bp-gancho-txt {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(19px, 2.1vw, 26px);
  line-height: 1.32; letter-spacing: var(--tracking-display);
  color: var(--paros); margin: 0 0 22px; max-width: 34ch;
}

/* a origem, sempre visível: o texto é nosso, a notícia é de quem a publicou */
.bp-fonte {
  margin: clamp(26px, 4vh, 44px) auto 0; max-width: 68ch;
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
  color: rgba(244, 241, 234, .5);
}
.bp-fonte a { color: rgba(244, 241, 234, .78); text-decoration: underline; text-underline-offset: 3px; }
.bp-fonte a:hover { color: var(--accent); }

.bp-volta { margin: clamp(30px, 5vh, 52px) auto 0; max-width: 68ch; }
.bp-volta a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: rgba(244, 241, 234, .72); text-decoration: none;
}
.bp-volta a:hover { color: var(--accent); }

@media (max-width: 860px) {
  .bp-abre--colunas { grid-template-columns: minmax(0, 1fr); }
  .bp-fig--faixa img { aspect-ratio: 16 / 10; }
}

/* quem pede menos movimento não recebe nenhum */
@media (prefers-reduced-motion: reduce) {
  .bi-item a { transition: none; }
  .bi-item a:hover, .bi-item a:focus-visible { transform: none; }
}