/* 25/10 · o /blog e os artigos na D2 (server/siteD/blogD.ts). Sobre a moldura da d2 e o zona.css (capa, cartões das
   praias, pílulas): aqui só o que é do blog. Sem letra ciano (regra do dono de 18/10): o ciano fica nos traços. */

/* ---------- a capa ---------- */
.bl-capa .pz-h1 { max-width: 18ch; }
.bl-capa .pz-ctas:empty { display: none; }
.bl-portas { margin: 30px 0 0; }
.bl-portas .zn-pilula[aria-current="page"], .bl-temas .zn-pilula[aria-current="page"] { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.bl-quando { margin: 18px 0 0; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--claro); }
.bl-capa-artigo .pz-h1 { max-width: 22ch; font-size: var(--t2); line-height: 1.02; }

/* ---------- os temas ---------- */
.bl-temas-sec { padding-top: clamp(40px, 5vw, 56px); }
.bl-temas .zn-pilula b { font-size: 14px; }
.bl-temas .zn-pilula small { font-variant-numeric: tabular-nums; }

/* ---------- o artigo e a escola em destaque ---------- */
.bl-destaques { padding-top: clamp(40px, 5vw, 64px); }
.bl-destaques-g { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; }
.bl-largo { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: 24px; overflow: hidden; text-decoration: none; color: var(--espuma);
  background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .35s var(--ease), box-shadow .3s var(--ease); }
.bl-largo:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 26px 50px -30px rgba(0,0,0,.9); }
.bl-largo:focus-visible { outline: 2px solid var(--ciano); outline-offset: 3px; }
.bl-largo-f { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #0B2638; }
.bl-largo-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bl-largo:hover .bl-largo-f img { transform: scale(1.04); }
.bl-largo-t { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.bl-largo-t .etq { color: var(--claro); }
.bl-largo-h { margin: 0; font-size: var(--t4); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.bl-feat .bl-largo-h { font-size: var(--t3); line-height: 1.08; letter-spacing: -.03em; }
.bl-largo-d { font-size: 15px; line-height: 1.55; color: var(--claro); }

/* ---------- cada tema ---------- */
.bl-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.bl-cab .lead { margin: 12px 0 0; }
.bl-conta { font-size: clamp(40px, 4.4vw, 60px); line-height: 1; color: rgba(255,255,255,.22); }
.bl-cartao .zn-praia-f { aspect-ratio: 16 / 10; }
.bl-data { position: absolute; left: 14px; bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.86); }
.bl-logo { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #fff; }
.bl-logo img { position: static !important; width: 64% !important; height: auto !important; max-height: 70%; object-fit: contain; transform: none !important; }
.bl-logo ~ .bl-data { color: #334155; }
.bl-c-t { margin: 0; font-size: 18px; line-height: 1.28; font-weight: 800; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.bl-ler { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: #fff; }
.bl-ler svg { width: 16px; height: 16px; color: var(--claro); transition: transform .3s var(--ease); }
.bl-cartao:hover .bl-ler svg, .bl-largo:hover .bl-ler svg { transform: translateX(4px); }
.bl-cartao .zn-praia-t { display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* o mesmo «Ver todos os artigos (N)» de hoje: uma caixa escondida e o rótulo que a marca */
.bl-mais-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bl-mais-cb:not(:checked) ~ .bl-grelha > a:nth-child(n+7) { display: none; }
.bl-mais { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 18px auto 0; padding: 0 24px; width: fit-content; border-radius: 9999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); font-weight: 700; font-size: 15px; color: #fff; cursor: pointer; transition: background-color .2s; }
.bl-mais:hover { background: rgba(255,255,255,.06); }
.bl-mais-cb:checked ~ .bl-mais { display: none; }
.bl-mais-cb:focus-visible ~ .bl-mais { outline: 2px solid var(--ciano); outline-offset: 3px; }

/* ---------- o artigo: o corpo de hoje, na coluna de leitura da D ---------- */
.bl-artigo { padding-top: clamp(40px, 5vw, 64px); }
.bl-artigo-in { max-width: 760px; }
.bl-artigo .card { background: rgba(255,255,255,.035); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); border-radius: 24px; padding: 22px 24px; color: var(--claro); }
.bl-artigo .card.blog-leitura { padding: 0; box-shadow: none; background: transparent; }
.bl-artigo .blog-body { max-width: none; font-family: inherit; }
.bl-artigo .blog-body h2, .bl-artigo .blog-body h3, .bl-artigo .card h2 { font-family: inherit; color: #fff; }
.bl-artigo .blog-leitura .blog-body h3 { border-left-color: var(--ciano-e); }
.bl-artigo .blog-body a, .bl-artigo .card a:not(.tag):not(.az-bt):not(.az-mais):not([class^="bse-"]) { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255,255,255,.35); border-bottom: 0; }
.bl-artigo .blog-body a:hover, .bl-artigo .card a:hover { text-decoration-color: currentColor; }
.bl-artigo .blog-body a[style*="background"] { color: #04121A !important; text-decoration: none; border-radius: 9999px !important; }
.bl-artigo .card h2 { font-size: var(--t4); line-height: 1.2; letter-spacing: -.01em; }
.bl-artigo .card p { color: var(--claro) !important; }
.bl-artigo .meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-artigo .meta-row .tag { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 9999px; text-decoration: none; color: #fff;
  background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); font-size: 14px; font-weight: 600; transition: background-color .2s; }
.bl-artigo .meta-row .tag:hover { background: rgba(255,255,255,.08); }

/* o Surf Today da zona no fim do artigo (o mesmo de pele.css, para a página D2, que não carrega a pele) */
.sbd-zona-blog { padding: 56px 0 24px; }
.sbd-zona-blog .wrap { max-width: 1160px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 0; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,.1); }
.sbd-zb-etq { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #CBD5E1; }
.sbd-zb-t { margin: 6px 0 4px; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; color: #F1F5F9; }
.sbd-zb-conta { margin: 0 0 18px; font-size: 15px; color: #94A3B8; }
.sbd-zona-blog ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.sbd-zona-blog li { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.sbd-zona-blog li a { color: #F1F5F9; font-size: 17px; font-weight: 700; text-decoration: none; }
.sbd-zona-blog li span { color: #CBD5E1; font-size: 14px; }
.sbd-zona-blog li small { color: #94A3B8; font-size: 13px; }
.sbd-zb-ir { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- telemóvel ---------- */
@media (max-width: 980px) {
  .bl-destaques-g { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bl-portas .zn-pilula, .bl-temas .zn-pilula { flex: 1 1 100%; justify-content: space-between; }
  .bl-mais-cb:not(:checked) ~ .bl-grelha > a:nth-child(n+5) { display: none; }
  .bl-capa-artigo .pz-h1 { font-size: clamp(30px, 8.4vw, 40px); }
  .bl-artigo .card { padding: 18px; }
  .bl-largo-t { padding: 18px; }
}