/* Blog: índice e artigos. Carrega depois de styles.css (variáveis, cabeçalho, rodapé). */
body.blog-page{ padding-bottom:0; }
.blog{ max-width:760px; margin:0 auto; padding:40px 24px 80px; width:100%; min-width:0; box-sizing:border-box; }  /* min-width:0: a fila de filtros (desliza na horizontal) não pode alargar a página */

.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:0 0 24px; font-size:0.82rem; color:var(--text-faint); }
.crumbs a{ color:var(--text-faint); text-decoration:none; }
.crumbs a:hover, .crumbs a:focus-visible{ color:var(--text); }
.crumbs [aria-current]{ color:var(--text-muted); }

.blog h1{ font-family:var(--font-display); font-weight:400; font-size:clamp(2.1rem, 5.4vw, 3.1rem); letter-spacing:0.02em; line-height:1.05; margin:0 0 12px; color:var(--text); text-wrap:balance; }
.blog-lead{ color:var(--text-muted); font-size:1.02rem; line-height:1.6; margin:0 0 36px; max-width:60ch; }

/* lista de artigos */
.post-list{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.post-card{
  display:block; padding:20px 22px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color 0.18s ease, background-color 0.18s ease, transform 0.25s var(--ease-out, ease);
}
.post-card:hover, .post-card:focus-visible{ border-color:var(--ember-dim); background:var(--surface-2); }
.post-card:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
/* «More guides»: estado normal = o antigo hover; hover = o antigo estado normal */
.post-more .post-card{ border-color:var(--ember-dim); background:var(--surface-2); }
.post-more .post-card:hover{ border-color:var(--line); background:var(--surface); }
.post-more .post-card:focus-visible{ border-color:var(--line); background:var(--surface); }
.post-card h2, .post-card h3{ font-family:var(--font-display); font-weight:400; letter-spacing:0.02em; line-height:1.1; color:var(--text); margin:0 0 8px; font-size:1.6rem; text-wrap:balance; }
.post-card p{ margin:0 0 12px; color:var(--text-muted); font-size:0.92rem; line-height:1.55; }
.post-card-meta{ display:block; color:var(--text-faint); font-size:0.78rem; }
.post-list.compact .post-card{ padding:14px 18px; }
.post-list.compact .post-card h3{ font-size:1.25rem; margin-bottom:4px; }

/* cards com imagem: a foto preenche todo o cartão e o texto fica por cima, como no carrossel da home */
.post-card.has-img{
  position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio:4 / 2; overflow:hidden; padding:20px 22px 22px; color:#fff; background:#151515;
}
.post-card.has-img:hover, .post-card.has-img:focus-visible{ border-color:var(--ember-dim); background:#151515; }
.post-card.has-img::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.30) 30%, rgba(0,0,0,.82) 62%, rgba(0,0,0,.92) 100%);
}
.post-card.has-img h2{ color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.55); }
.post-card.has-img p{ display:none; }
.post-card.has-img .post-card-meta{ color:#D2D2D2; }

/* artigo */
.post-meta{ color:var(--text-faint); font-size:0.82rem; margin:0 0 32px; padding-bottom:20px; border-bottom:1px solid var(--line-soft); }
.post-body{ color:var(--text-muted); font-size:1.02rem; line-height:1.75; }
.post-body > :first-child{ margin-top:0; }
.post-body p{ margin:0 0 1.15em; }
.post-body h2{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.55rem, 4vw, 2rem); letter-spacing:0.02em; line-height:1.1; color:var(--text); margin:2em 0 0.6em; scroll-margin-top:24px; text-wrap:balance; }
.post-body h3{ font-size:1.05rem; color:var(--text); margin:1.6em 0 0.4em; }
.post-body strong{ color:var(--text); font-weight:600; }
.post-body a{ color:var(--ember); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.post-body a:hover, .post-body a:focus-visible{ text-decoration-thickness:2px; }
.post-body ul, .post-body ol{ margin:0 0 1.2em; padding-left:1.4em; }
.post-body li{ margin:0 0 0.5em; padding-left:0.2em; }
.post-body li::marker{ color:var(--ember); }
.post-body code{ font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:0.9em; background:var(--surface-2); padding:1px 5px; border-radius:3px; }
.post-body blockquote{ margin:1.4em 0; padding:2px 0 2px 18px; border-left:2px solid var(--ember-dim); color:var(--text-muted); }

/* tabelas: rolam na horizontal em ecrãs estreitos, sem alargar a página */
.table-wrap{ overflow-x:auto; margin:0 0 1.4em; border:1px solid var(--line); border-radius:var(--radius); -webkit-overflow-scrolling:touch; }
.post-body table{ width:100%; border-collapse:collapse; font-size:0.92rem; line-height:1.45; }
.post-body th, .post-body td{ text-align:left; padding:10px 14px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
.post-body th{ color:var(--text); font-weight:600; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; background:var(--surface); }
.post-body tr:last-child td{ border-bottom:0; }

/* nota de afiliação (só em artigos com links de afiliado) */
.post-aff{ margin:2em 0 0; padding:12px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--text-muted); font-size:0.85rem; line-height:1.55; }
.post-aff a{ color:var(--ember); }

/* chamada para a ferramenta */
.post-cta{ margin:2.4em 0 0; padding:24px; border:1px solid var(--ember-dim); border-radius:var(--radius); background:linear-gradient(180deg, rgba(209,170,141,0.08), rgba(209,170,141,0.02)); }
.post-cta h2{ font-family:var(--font-display); font-weight:400; font-size:1.7rem; letter-spacing:0.02em; line-height:1.1; color:var(--text); margin:0 0 6px; }
.post-cta p{ margin:0 0 16px; color:var(--text-muted); font-size:0.95rem; line-height:1.55; }
.post-cta-btn{
  display:inline-block; padding:11px 22px; border-radius:999px; background:var(--ember); color:#121212;
  font-weight:600; font-size:0.92rem; text-decoration:none; transition:filter 0.18s ease, transform 0.18s ease;
}
.post-cta-btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.post-cta-btn:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }

.post-more{ margin-top:3em; padding-top:28px; border-top:1px solid var(--line-soft); }
.post-more h2{ font-family:var(--font-display); font-weight:400; font-size:1.7rem; letter-spacing:0.02em; margin:0 0 16px; color:var(--text); }
.post-all{ display:inline-block; margin-top:16px; color:var(--ember); font-size:0.9rem; text-decoration:none; }
.post-all:hover, .post-all:focus-visible{ text-decoration:underline; text-underline-offset:3px; }

@media (max-width:720px){
  .blog{ padding:28px 16px 64px; }
  .post-card{ padding:16px 18px; }
  .post-body{ font-size:1rem; line-height:1.7; }
  .post-cta{ padding:20px 18px; }
  .post-cta-btn{ display:block; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  .post-card, .post-cta-btn{ transition:none; }
  .post-cta-btn:hover{ transform:none; }
}

@media (max-width:720px){
  /* em ecrãs estreitos a tabela quebra linha em vez de cortar a última coluna */
  .post-body th, .post-body td{ white-space:normal; padding:9px 10px; }
  .post-body th{ font-size:0.7rem; letter-spacing:0.04em; }
}

/* imagens: capa, figuras no texto e miniaturas no índice */
.post-cover{ margin:0 0 32px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); aspect-ratio:1200 / 630; }
.post-cover img, .post-fig img{ display:block; width:100%; height:auto; }
.post-fig{ margin:1.6em 0 1.8em; }
.post-fig picture{ display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface); }
.post-fig figcaption{ margin-top:10px; color:var(--text-faint); font-size:0.84rem; line-height:1.5; }
/* imagem de fundo dos cartões do índice, a preencher todo o cartão */
.post-card-img{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:#1a1a1a; }
.post-card-img picture, .post-card-img img{ display:block; width:100%; height:100%; }
.post-card-img img{ object-fit:cover; filter:brightness(.8) saturate(.9); transition:transform .5s ease, filter .3s ease; }
.post-card.has-img:hover .post-card-img img, .post-card.has-img:focus-visible .post-card-img img{ transform:scale(1.04); filter:brightness(.95) saturate(.95); }
@media (max-width:720px){
  .post-cover{ margin-bottom:24px; }
  .post-fig{ margin:1.4em -4px 1.6em; }
}

/* cabeçalho do blog: atalho para a ferramenta ao lado do idioma */
.blog-page .site-header .hdr-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hdr-tool{
  display:inline-flex; align-items:center; height:34px; padding:0 15px; border-radius:999px; white-space:nowrap;
  border:1px solid var(--ember-dim); color:var(--ember); font-size:0.82rem; font-weight:600; text-decoration:none;
  transition:background-color 0.18s ease, color 0.18s ease;
}
.hdr-tool:hover, .hdr-tool:focus-visible{ background:var(--ember); color:#121212; }
.hdr-tool:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
@media (max-width:720px){
  .blog-page .brand-tag{ display:none; }
}
@media (max-width:720px){
  .blog-page .site-header .brand{ flex:0 0 auto; }
  .blog-page .brand-logo img{ width:84px; height:auto; }
  .blog-page .site-header .hdr-actions{ gap:8px; }
  .hdr-tool{ height:32px; padding:0 11px; font-size:0.76rem; }
  .blog-page .lang-switch select{ padding-left:10px; padding-right:26px; }
}
/* ecrãs muito estreitos: o logótipo já leva à ferramenta */
@media (max-width:359px){
  .hdr-tool{ display:none; }
}

/* temas (categorias): etiqueta e filtro do índice */
.post-cat{ display:inline-block; margin:0 0 8px; color:var(--ember); font-size:0.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; }
.post > .post-cat{ margin-bottom:10px; }
.cat-filter{ display:flex; flex-wrap:wrap; gap:6px; margin:-12px 0 24px; }
.cat-chip{
  height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--text-muted); font-size:0.82rem; font-weight:500; cursor:pointer;
  transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cat-chip:hover{ border-color:var(--ember-dim); color:var(--text); }
.cat-chip.is-active{ background:var(--ember); border-color:var(--ember); color:#121212; font-weight:600; }
.cat-chip:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.post-list li[hidden]{ display:none; }

/* paginação do índice */
.pagination{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:32px 0 0; }
.page-btn{
  height:34px; min-width:34px; padding:0 12px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--text-muted); font-size:0.82rem; font-weight:500; cursor:pointer;
  transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.page-btn:hover{ border-color:var(--ember-dim); color:var(--text); }
.page-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.page-btn.is-active{ background:var(--ember); border-color:var(--ember); color:#121212; font-weight:600; cursor:default; }
.page-btn:disabled{ opacity:0.35; cursor:default; }
.page-btn.page-prev, .page-btn.page-next{ padding:0 16px; }
@media (min-width:721px){
  /* índice em duas colunas no desktop, o primeiro artigo em destaque */
  .blog:has(.post-list.grid){ max-width:1080px; }
  .post-list.grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .post-list.grid > li:first-child{ grid-column:1 / -1; }
  .post-list.grid > li:first-child .post-card h2{ font-size:2rem; }
  .post-list.grid .post-card{ height:100%; }
  /* impede que o cartão cresça com a altura da célula do grid (mantém o quadrado) */
  .post-list.grid .post-card.has-img{ height:auto; aspect-ratio:4 / 2; }
  /* destaque (primeiro card): imagem em 16:9 */
  .post-list.grid > li:first-child .post-card.has-img{ aspect-ratio:16 / 9; }
}

/* ══ Índice do blog: categorias fixas, monograma, capas 4/3 ═══════════════ */

/* A capa do artigo passa a 4/3 (a imagem é recortada, não esticada) e ganha
   sombra para se destacar da página. */
.post-cover{
  aspect-ratio:4 / 3;
  box-shadow:0 22px 48px -24px rgba(0,0,0,.85), 0 2px 0 rgba(255,255,255,.03) inset;
}
.post-cover img{ height:100%; object-fit:cover; }
.post-fig picture{ box-shadow:0 18px 40px -22px rgba(0,0,0,.8); }
/* os cartões do índice também são imagens: uma sombra dá-lhes relevo */
.post-card{ box-shadow:0 15px 34px -22px rgba(0,0,0,.85); }
.post-card:hover{ box-shadow:0 22px 44px -22px rgba(0,0,0,.95); }

/* botão de voltar dentro do artigo */
.post-back{
  display:inline-flex; align-items:center; gap:7px; margin:0 0 16px;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  color:var(--text-muted); font-size:0.82rem; font-weight:500; text-decoration:none;
  transition:color .18s ease, border-color .18s ease, background-color .18s ease;
}
.post-back:hover, .post-back:focus-visible{ color:var(--text); border-color:var(--line); background:transparent; }
.post-back span[aria-hidden]{ font-size:1.05em; line-height:1; }

/* O filtro de categorias fica colado ao topo quando o scroll o empurra.
   O fundo é um pseudo de largura total para tapar o conteúdo que passa por
   baixo (o filtro em si vive dentro da coluna do blog). */
.cat-filter{
  position:sticky; top:0; z-index:45;
  padding:10px 0;
  margin:-12px 0 24px;
}
.cat-filter::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:100vw;
  transform:translateX(-50%); z-index:-1;
  background:var(--bg);
  opacity:0; transition:opacity .16s ease;
  border-bottom:1px solid transparent;
}
.cat-filter.is-stuck{ padding-left:56px; }
.cat-filter.is-stuck::before{ opacity:1; border-bottom-color:var(--line); }
@media (min-width:761px){ .cat-filter.is-stuck{ padding-left:0; } }

/* Monograma fixo: aparece quando o logótipo do cabeçalho sai do ecrã. */
.blog-mark{
  position:fixed; z-index:60; top:12px; left:14px;
  width:42px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; box-shadow:none;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.blog-mark.is-on{ opacity:1; visibility:visible; transform:none; transition:opacity .18s ease, transform .18s ease, visibility 0s; }
.blog-mark img{ width:auto; height:24px; display:block; filter:drop-shadow(0 0 3px #121212) drop-shadow(0 0 6px #121212); }
@media (prefers-reduced-motion:reduce){ .blog-mark{ transition:none; } }

/* paginação centrada */
.pagination{ justify-content:center; }

/* No telemóvel as categorias ficam numa linha que desliza na horizontal: três
   filas fixas no topo tapavam um terço do ecrã. */
@media (max-width:720px){
  .cat-filter{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .cat-filter::-webkit-scrollbar{ display:none; }
  .cat-filter.is-stuck{ padding-left:56px; padding-right:16px; }
}

/* primeiro cartão do índice em destaque, 4/2 */
.post-list.grid > li:first-child .post-card.has-img{ aspect-ratio:4 / 2; }

/* categorias distribuídas pela largura do índice */
@media (min-width:721px){
  .cat-filter{ justify-content:space-between; }
  .cat-filter .cat-chip{ padding:0 11px; font-size:0.78rem; }
}

/* transição ao trocar de categoria */
@keyframes catIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.post-list.cat-fade > li:not([hidden]){ animation:catIn .26s ease-out both; }
.post-list.cat-fade > li:not([hidden]):nth-child(2){ animation-delay:.03s; }
.post-list.cat-fade > li:not([hidden]):nth-child(3){ animation-delay:.06s; }
.post-list.cat-fade > li:not([hidden]):nth-child(4){ animation-delay:.09s; }
.post-list.cat-fade > li:not([hidden]):nth-child(5){ animation-delay:.12s; }
.post-list.cat-fade > li:not([hidden]):nth-child(n+6){ animation-delay:.15s; }
.post-empty{ margin:26px 0 0; color:var(--text-faint); font-size:0.9rem; text-align:center; }

/* títulos dos artigos no telemóvel */
@media (max-width:720px){
  .post h1{ font-size:1.4rem; line-height:1.2; }
}

/* capa do artigo a 4/2 */
.post-cover{ aspect-ratio:4 / 2; }

/* primeiro parágrafo do artigo como entrada */
.post-body > :first-child{ font-size:1.25rem; line-height:1.6; }

/* ── Capas em destaque + Spotify só ao clique ─────────────────────────────
   Três capas (1/1) antes da lista de álbuns; o leitor do Spotify (iframe)
   só é criado ao clicar, num bloco largo por baixo da grelha. */
.rel-wall{ margin:6px 0 34px; }
.rel-h{
  margin:0 0 14px; font-family:var(--font-display); font-weight:400;
  font-size:1.55rem; letter-spacing:0.02em;
}
.rel-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; }
.rel-card{
  display:flex; flex-direction:column;
  padding:14px; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
}
.rel-cover{
  width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block;
  border-radius:10px; box-shadow:0 14px 30px -18px rgba(0,0,0,.85);
}
.rel-meta{ display:flex; flex-direction:column; gap:2px; margin:12px 0 10px; }
.rel-band{ font-size:0.68rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ember); }
.rel-album{ font-family:var(--font-display); font-weight:400; font-size:1.2rem; line-height:1.1; }
.rel-date{ font-size:0.74rem; color:var(--text-faint); }
.rel-btn{
  margin-top:auto; width:100%;
  padding:9px 12px; border-radius:999px;
  border:1px solid var(--ember); background:transparent; color:var(--ember);
  font-size:0.8rem; font-weight:600; cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.rel-btn:hover{ background:var(--ember); color:#121212; }
.rel-player{ margin:16px 0 0; }
.rel-player iframe{ display:block; width:100%; border:0; border-radius:12px; }
.rel-player iframe.bc{ width:400px; max-width:100%; height:470px; border-radius:8px; }
.post-body .rel-note{
  margin:0;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:0.74rem;
  color:var(--text-faint);
}
@media (max-width:720px){ .rel-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.rel-grid-2{ grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:0; }

/* ── Lightwindow do Bandcamp ───────────────────────────────────────────────
   O leitor do Bandcamp abre num modal (490 px de altura), só quando o
   visitante clica; nada é pedido a terceiros antes disso. */
.rel-modal{
  position:fixed; inset:0; z-index:9000;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(6,6,6,.86);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.rel-modal[hidden]{ display:none; }
.rel-modal-inner{
  position:relative; width:min(520px, 100%);
  background:var(--bg); border:1px solid var(--line);
  border-radius:16px; padding:14px;
  box-shadow:0 40px 90px rgba(0,0,0,.75);
}
.rel-modal-inner iframe{
  display:block; width:100%; height:auto;
  border:0; border-radius:8px;
}
.rel-modal-close{
  position:absolute; top:-16px; right:-16px;
  width:36px; height:36px; border-radius:50%;
  border:0; background:var(--ember); color:#121212;
  font-size:1.3rem; font-weight:700; line-height:1; cursor:pointer;
}
.rel-modal-close:hover{ background:#e3c1a4; }
body.rel-modal-open{ overflow:hidden; }

/* telemóvel: cartões com imagem mais altos (a 2:1 ficavam com ~180 px e o texto tapava a imagem) */
@media (max-width:720px){
  .post-list.grid .post-card.has-img{ aspect-ratio:4 / 3; height:auto; }
  .post-list.grid > li:first-child .post-card.has-img{ aspect-ratio:1 / 1; }
}