/*
Theme Name: Montcleaf
Theme URI: https://montcleaf.com
Author: Montcleaf
Author URI: https://montcleaf.com
Description: Tema custom leve para o Montcleaf — blog de net worth / riqueza / luxo. Direção "Bold magazine": preto, cinza e dourado no branco, bordas retas, mobile-first. Construído do zero seguindo o Design System e o CLAUDE.md.
Version: 0.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: montcleaf
*/

/* =====================================================================
   1 · TOKENS — fonte da verdade do Design System (Seção 9 do doc)
   ===================================================================== */
:root{
  /* cores */
  --bg:#FFFFFF;
  --ink:#17181C; --ink-deep:#0E0F12;
  --gold:#C9A24B; --gold-strong:#B8923F; --gold-text:#876722; --gold-tint:#F4ECD7;
  --surface:#F4F4F2; --border:#E6E5E2; --gray:#5F636B; --muted:#9A9CA2;

  /* tipografia */
  --font-display:'Archivo', sans-serif;
  --font-body:'Inter', sans-serif;

  /* raio (bordas retas — nada acima de 4px) */
  --r-sm:2px; --r-md:3px; --r-lg:4px;

  /* espaçamento (múltiplos de 4) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px;

  /* largura de conteúdo */
  --container:1120px;
}

/* =====================================================================
   2 · RESET básico
   ===================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body,h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{ margin:0; }
ul[role='list'],ol[role='list']{ list-style:none; padding:0; }
img,picture,svg,video{ max-width:100%; height:auto; display:block; }
input,button,textarea,select{ font:inherit; color:inherit; }
a{ color:inherit; }

/* =====================================================================
   3 · BASE — fundo branco, corpo em Inter
   ===================================================================== */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--s-4); /* 16px mínimo nas bordas (mobile) */
}

/* =====================================================================
   4 · TIPOGRAFIA — Archivo nos títulos, Inter no corpo (escala desktop)
   ===================================================================== */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-0.3px;
  line-height:1.15;
  color:var(--ink);
}
.display{ font-size:40px; line-height:1.05; letter-spacing:-0.5px; }
h1{ font-size:32px; line-height:1.15; }
h2{ font-size:24px; font-weight:700; line-height:1.2; }
h3{ font-size:19px; font-weight:700; line-height:1.25; }

p{ margin-bottom:var(--s-4); }
p:last-child{ margin-bottom:0; }

a{ text-decoration:none; }
a:hover{ text-decoration:underline; }

/* meta / crédito */
.meta{
  font-family:var(--font-body);
  font-weight:500;
  font-size:13px;
  color:var(--gray);
  letter-spacing:0;
}

/* eyebrow / pílula de rótulo — dourado legível sobre branco usa --gold-text */
.eyebrow{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--gold-text);
}

/* =====================================================================
   5 · ACENTOS — dourado pontual (regra 60-30-10)
   ===================================================================== */
.text-gold{ color:var(--gold-text); }      /* texto dourado sobre branco: SEMPRE #876722 */
.rule{ width:64px; height:3px; background:var(--gold); border:0; margin:var(--s-6) 0; }

/* pílula de categoria — tint é o padrão */
.pill{
  display:inline-block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--gold-text);
  background:var(--gold-tint);
  padding:4px 10px;
  border-radius:var(--r-sm);
}

/* botão "Next" — assinatura: preto com texto dourado (referência p/ Prompt 5) */
.btn-next{
  display:inline-block;
  background:var(--ink);
  color:var(--gold);
  font-family:var(--font-body);
  font-weight:600;
  padding:14px 22px;
  border-radius:var(--r-sm);
  border:0;
  min-height:44px;
}
.btn-next:hover{ text-decoration:none; }

/* =====================================================================
   6 · ACESSIBILIDADE — skip link / screen-reader-text
   ===================================================================== */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; padding:0; overflow:hidden;
  position:absolute !important; white-space:nowrap;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--ink); color:#FFF; padding:var(--s-2) var(--s-4);
}
.skip-link:focus{ left:var(--s-4); }

/* =====================================================================
   7 · HEADER + NAVEGAÇÃO (barra preta, wordmark, 5 categorias)
   ===================================================================== */
.site-header{
  background:var(--ink);
  position:relative;
  z-index:20;
}
.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
}
.wordmark{
  font-family:var(--font-display);
  font-weight:800;
  font-size:24px;
  letter-spacing:-0.5px;
  color:#FFFFFF;
  line-height:1;
}
.wordmark .dot{ color:var(--gold); }          /* o ponto dourado (direção A do logo) */
.wordmark:hover{ text-decoration:none; }

/* lista de categorias */
.primary-nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:var(--s-6);
}
.primary-nav__link{
  font-family:var(--font-body);
  font-weight:500;
  font-size:15px;
  color:var(--muted);              /* links em cinza claro */
  letter-spacing:0.2px;
  padding:6px 0;
}
.primary-nav__link:hover{ color:#FFFFFF; text-decoration:none; }
.primary-nav__link.is-active{ color:var(--gold); }   /* categoria ativa em dourado */

/* botão hamburguer (escondido no desktop) */
.nav-toggle{
  display:none;
  background:transparent; border:0; cursor:pointer;
  width:44px; height:44px;            /* alvo de toque ≥ 44px */
  padding:0; margin:0; color:#FFFFFF;
  align-items:center; justify-content:center;
}
.nav-toggle__box{ position:relative; width:24px; height:2px; display:block; }
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after{
  content:''; position:absolute; left:0; width:24px; height:2px;
  background:#FFFFFF; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle__bar{ top:0; }
.nav-toggle__bar::before{ top:-7px; }
.nav-toggle__bar::after{ top:7px; }

.site-main{ padding-block:var(--s-12); }

/* =====================================================================
   8 · FOOTER (links legais/confiança + copyright)
   ===================================================================== */
.site-footer{
  background:var(--surface);
  border-top:0.5px solid var(--border);
  padding-block:var(--s-8);
  margin-top:var(--s-16);
}
.site-footer .wordmark{ color:var(--ink); font-size:18px; }
.site-footer .dot{ color:var(--gold-text); }   /* regra do dourado: acento sobre fundo claro usa #876722 */
.site-footer__tagline{ color:var(--gray); font-size:13px; margin-top:var(--s-1); }
.site-footer__brand{ margin-bottom:var(--s-6); }

.footer-nav__list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-6);
}
.footer-nav__link{
  font-family:var(--font-body);
  font-size:14px;
  color:var(--gray);
}
.footer-nav__link:hover{ color:var(--ink); }

.site-footer__copy{
  color:var(--gray);   /* contraste AA para texto pequeno (muted falha) */
  font-size:13px;
  margin-top:var(--s-6);
  padding-top:var(--s-4);
  border-top:0.5px solid var(--border);
}

/* =====================================================================
   9 · HERO de boas-vindas (placeholder do Prompt 1)
   ===================================================================== */
.intro{ max-width:680px; }
.intro .display{ margin-bottom:var(--s-4); }
.intro p{ font-size:19px; color:var(--gray); }
.swatches{ display:flex; gap:var(--s-2); margin-top:var(--s-8); }
.swatches span{
  width:48px; height:48px; border-radius:var(--r-lg);
  border:0.5px solid var(--border);
}
.sw-ink{ background:var(--ink); }
.sw-gold{ background:var(--gold); }
.sw-surface{ background:var(--surface); }
.sw-gray{ background:var(--gray); }

/* =====================================================================
   11 · HOME — cards, grid, hero, módulos, feed
   ===================================================================== */

/* --- módulos / cabeçalhos de seção --- */
.hero{ margin-bottom:var(--s-12); }
.module{ margin-bottom:var(--s-12); }
.module__head{ margin-bottom:var(--s-6); }
.module__head .eyebrow{ display:block; }

/* --- grid de cards (mobile-first: 1 coluna) --- */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-6);
}

/* --- card --- */
.card{
  position:relative;            /* base p/ stretched-link e pílula sobreposta */
  display:flex;
  flex-direction:column;
  background:var(--bg);
  border:0.5px solid var(--border);
  border-radius:var(--r-lg);   /* 4px máximo — imagem fica reta no topo via overflow */
  overflow:hidden;
}
.card__media{
  position:relative;
  display:block;
  margin:0;                    /* reset da <figure> */
  aspect-ratio:16 / 9;
  background:var(--ink);       /* base p/ fallback e enquanto a imagem carrega */
  overflow:hidden;
}
.card__img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;   /* hover sutil de zoom */
}
.card:hover .card__img{ transform:scale(1.05); }

.media-fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
}

/* pílula sobreposta no canto da imagem */
.pill--overlay{
  position:absolute;
  top:var(--s-2); left:var(--s-2);
  z-index:2;                   /* acima do stretched-link */
}

/* link do título cobre o card inteiro (clique em qualquer lugar) */
.card__title a::after{
  content:''; position:absolute; inset:0; z-index:1;
}

.card__body{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:var(--s-4);
  gap:var(--s-2);
}
.pill{ margin:0; }
.card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  line-height:1.25;
  letter-spacing:-0.2px;
}
.card__title a{ color:var(--ink); }
.card__title a:hover{ color:var(--gold-text); text-decoration:none; }
.card__dek{
  margin:0;
  color:var(--gray);
  font-size:15px;
  line-height:1.55;
  /* corta em 2 linhas */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__meta{ margin:0; color:var(--muted); }

/* --- card de destaque (hero) --- */
.card--feature .card__title{ font-size:28px; line-height:1.1; letter-spacing:-0.4px; }
.card--feature .card__dek{ font-size:17px; -webkit-line-clamp:3; }
.card--feature .card__body{ padding:var(--s-6); gap:var(--s-3); }

/* --- feed: paginação --- */
.pager{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:var(--s-2);
  margin-top:var(--s-8);
}
.pager .btn--next{ margin-left:auto; }   /* "Next" sempre à direita */

/* paginação numerada (archive) */
.pager .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px; padding:0 12px;
  border:0.5px solid var(--border); border-radius:var(--r-sm);
  color:var(--ink);
}
.pager .page-numbers.current{ background:var(--ink); color:var(--gold); border-color:var(--ink); }
.pager .page-numbers:hover{ border-color:var(--ink); text-decoration:none; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px;
  padding:12px 22px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  border-radius:var(--r-sm);
  border:0.5px solid transparent;
}
.btn:hover{ text-decoration:none; }
.btn--next{ background:var(--ink); color:var(--gold); }
.btn--next:hover{ background:var(--ink-deep); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--border); }
.btn--ghost:hover{ border-color:var(--ink); }

/* =====================================================================
   12 · GALERIA / SLIDESHOW (single.php) — o coração
   ===================================================================== */
.gallery{ max-width:760px; margin-inline:auto; }

.gallery-eyebrow{ display:inline-block; margin-bottom:var(--s-2); }
.gallery-eyebrow:hover{ text-decoration:none; }
.gallery-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:36px;
  line-height:1.1;
  letter-spacing:-0.4px;
  margin-bottom:var(--s-3);
}
.gallery-meta{ margin-bottom:var(--s-6); }
.gallery-cover{ margin:0 0 var(--s-8); }
.gallery-cover__img{ width:100%; height:auto; border-radius:var(--r-lg); display:block; }
/* disclaimer discreto: imagens ilustrativas / geradas por IA */
.image-disclaimer{ margin-top:var(--s-2); font-size:12px; line-height:1.4; color:var(--muted); font-style:italic; }

/* conteúdo dos slides */
.gallery-content img{ width:100%; height:auto; border-radius:var(--r-lg); display:block; }
.slide__media{ margin:0 0 var(--s-6); }
.slide__rank{
  font-family:var(--font-display);
  font-weight:700;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-0.3px;
  margin:var(--s-2) 0 var(--s-4);
}
.slide__rank .rank-num{ color:var(--gold-text); }   /* número em dourado legível */
.slide__worth{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--s-2);
  background:var(--gold-tint);
  color:var(--gold-text);
  font-family:var(--font-display);
  font-weight:700;
  font-size:18px;
  padding:var(--s-3) var(--s-4);
  border-radius:var(--r-sm);
  margin:var(--s-4) 0 var(--s-2);
}
.slide__worth strong{ font-size:24px; }
.slide__source{ display:block; font-size:12px; color:var(--muted); font-style:italic; margin:var(--s-1) 0 0; }
/* crédito da capa: mesma linha discreta, dentro da figcaption do disclaimer */
.gallery-cover .slide__source{ margin:0; }

/* navegação real Prev/Next — Next em DESTAQUE (grande, centralizado) */
.slide-nav{
  display:flex; flex-direction:column; align-items:center;
  gap:var(--s-3);
  margin:var(--s-12) 0;
  padding-top:var(--s-6);
  border-top:0.5px solid var(--border);
}
.slide-nav__next{
  width:100%; max-width:560px;
  justify-content:center;
  font-size:19px; font-weight:700;
  padding:20px 28px;
  letter-spacing:.2px;
  box-shadow:0 6px 18px rgba(23,24,28,.18);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.slide-nav__next:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(23,24,28,.24); }
.slide-nav__prev{ font-size:14px; min-height:40px; padding:8px 16px; }

/* placeholder do módulo "You might also like" (Prompt 8) */
.related-placeholder{ max-width:760px; margin:var(--s-12) auto 0; }
.placeholder-note{
  border:1px dashed var(--border);
  border-radius:var(--r-lg);
  padding:var(--s-8);
  text-align:center;
  color:var(--muted);
  font-size:14px;
  margin:0;
}

/* =====================================================================
   15 · TEIA DE LINKS — mega-menu, Random, sidebar, archive, links no corpo
   ===================================================================== */

/* mega-menu (dropdown desktop com posts de exemplo) */
.has-mega{ position:relative; }
.mega{
  position:absolute; top:100%; left:0; z-index:30;
  min-width:280px;
  background:#fff;
  border:0.5px solid var(--border);
  border-radius:var(--r-md);
  padding:var(--s-3);
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
}
.has-mega:hover .mega,
.has-mega:focus-within .mega{ opacity:1; visibility:visible; transform:none; }
.mega__list{ list-style:none; margin:0 0 var(--s-2); padding:0; display:grid; gap:2px; }
.mega__link{
  display:block; padding:var(--s-2);
  font-size:14px; line-height:1.3; color:var(--ink);
  border-radius:var(--r-sm);
}
.mega__link:hover{ background:var(--surface); text-decoration:none; color:var(--gold-text); }
.mega__all{
  display:inline-block; padding:var(--s-2) var(--s-2) 0;
  font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;
  color:var(--gold-text);
}

/* item Random */
.primary-nav__link--random{ color:var(--gold); }
.primary-nav__link--random:hover{ color:#fff; }

/* botão Random na sidebar */
.side-random{ width:100%; margin-bottom:var(--s-6); }

/* módulos compactos da sidebar */
.side-module{ margin-bottom:var(--s-8); }
.side-module__title{ display:block; margin-bottom:var(--s-3); }
.post-list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s-3); }
.post-list__link{ display:grid; grid-template-columns:72px 1fr; gap:var(--s-3); align-items:center; }
.post-list__link:hover{ text-decoration:none; }
.post-list__thumb{
  position:relative; display:block;
  width:72px; aspect-ratio:16 / 9;
  background:var(--ink); border-radius:var(--r-sm); overflow:hidden;
}
.post-list__thumb img{ width:100%; height:100%; object-fit:cover; }
.post-list__thumb .media-fallback svg{ width:22px; height:22px; }
.post-list__heading{
  display:block;
  font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.25;
  color:var(--ink);
}
.post-list__link:hover .post-list__heading{ color:var(--gold-text); }
.post-list__meta{ display:block; margin-top:2px; }

/* link interno no corpo do texto */
.entry-content a, .gallery-content a{ color:var(--gold-text); text-decoration:underline; }
.entry-content a:hover, .gallery-content a:hover{ color:var(--ink); }
.mc-inlink{ font-weight:600; }

/* busca / 404 / estado vazio */
.error-404{ max-width:680px; margin-inline:auto; }
.error-404 .gallery-title{ margin:var(--s-2) 0 var(--s-3); }
.search-form{ display:flex; gap:var(--s-2); margin:var(--s-6) 0; }
.search-field{
  flex:1; min-height:44px; padding:0 var(--s-3);
  border:0.5px solid var(--border); border-radius:var(--r-sm);
  font-size:16px; background:var(--bg); color:var(--ink);
}
.search-field:focus{ outline:2px solid var(--gold-text); outline-offset:1px; }
.empty-state{ max-width:680px; margin:var(--s-12) auto; text-align:center; color:var(--gray); }

/* archive (categoria) */
.archive-head{ margin-bottom:var(--s-8); }
.archive-title{
  font-family:var(--font-display); font-weight:800; font-size:36px;
  letter-spacing:-0.4px; margin-top:var(--s-2);
}
.archive-desc{ color:var(--gray); margin-top:var(--s-3); max-width:680px; }

/* =====================================================================
   14 · PERFIL & NOTÍCIA
   ===================================================================== */
.profile, .news, .page-article{ max-width:760px; margin-inline:auto; }
.page-head{ margin-bottom:var(--s-6); }

/* conteúdo rico (páginas legais, corpo de artigo) */
.entry-content h2{ margin-top:var(--s-8); margin-bottom:var(--s-3); }
.entry-content h3{ margin-top:var(--s-6); margin-bottom:var(--s-2); }
.entry-content ul, .entry-content ol{ margin:0 0 var(--s-4); padding-left:var(--s-6); }
.entry-content li{ margin-bottom:var(--s-2); }

/* ficha rápida do perfil */
.profile-facts{
  background:var(--surface);
  border:0.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:var(--s-6);
  margin:var(--s-8) 0;
}
.profile-facts > .eyebrow{ display:block; margin-bottom:var(--s-3); }
.profile-facts dl{ margin:0; }
.profile-facts .fact{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4);
  padding:var(--s-3) 0;
  border-bottom:0.5px solid var(--border);
}
.profile-facts .fact:last-child{ border-bottom:0; padding-bottom:0; }
.profile-facts dt{ margin:0; color:var(--gray); font-size:14px; }
.profile-facts dd{
  margin:0; text-align:right;
  font-family:var(--font-display); font-weight:700; color:var(--ink);
}
.profile-facts .fact--worth dd{ font-size:22px; }

/* citação de fontes */
.article-sources{
  margin-top:var(--s-8);
  padding-top:var(--s-4);
  border-top:0.5px solid var(--border);
  color:var(--muted); font-size:13px; font-style:italic;
}

.news-date{ color:var(--gray); }

/* =====================================================================
   13 · ZONAS DE ANÚNCIO (mc_ad) — neutras, rotuladas, com respiro
   ===================================================================== */
.ad-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s-1);
  background:var(--surface);
  border:0.5px solid var(--border);
  border-radius:var(--r-sm);
  color:var(--muted);
  text-align:center;
  margin-block:var(--s-8);      /* respiro generoso acima/abaixo */
  padding:var(--s-4);
}
.ad-label{
  font-family:var(--font-body);
  font-size:11px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--muted);
}
.ad-size{ font-size:12px; color:var(--muted); opacity:.7; }

.ad-top{ min-height:100px; }
.ad-in_content{ min-height:250px; }
.ad-end{ min-height:280px; }
.ad-sidebar{ min-height:600px; position:sticky; top:var(--s-6); z-index:2; }   /* fica acima das listas que rolam por baixo */

/* anúncio de vídeo — player 16:9 com botão de play (placeholder) */
.ad-video{ background:transparent; border:0; padding:0; }
.ad-video__player{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:640px; aspect-ratio:16 / 9;
  background:var(--ink);
  border-radius:var(--r-sm);
  overflow:hidden;
}
.ad-video__play{
  width:64px; height:64px; border-radius:50%;
  background:var(--gold);
  display:flex; align-items:center; justify-content:center;
}
.ad-video__play::after{
  content:'';
  border-style:solid;
  border-width:12px 0 12px 20px;
  border-color:transparent transparent transparent var(--ink);
  margin-left:4px;   /* centraliza o triângulo */
}
.ad-video .ad-label{ margin-top:var(--s-2); }

/* vídeo flutuante (floating player) — dispensável, canto inferior direito */
.floating-video{
  position:fixed; right:16px; bottom:16px; z-index:60;
  width:320px; max-width:calc(100vw - 32px);
  background:var(--ink);
  border-radius:var(--r-md);
  box-shadow:0 14px 36px rgba(0,0,0,.32);
  padding:var(--s-2);
  opacity:0; transform:translateY(12px);
  transition:opacity .2s ease, transform .2s ease;
}
.floating-video.is-visible{ opacity:1; transform:none; }
.floating-video[hidden]{ display:none; }
.floating-video .ad-label{ display:block; color:var(--muted); font-size:10px; margin-bottom:var(--s-1); }
.floating-video .ad-video__player{ width:100%; aspect-ratio:16 / 9; }
.floating-video .ad-video__play{ width:52px; height:52px; }
.floating-video__close{
  position:absolute; top:-12px; right:-12px;
  width:30px; height:30px; border-radius:50%;
  background:#fff; color:var(--ink);
  border:0.5px solid var(--border);
  font-size:18px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.floating-video__close:hover{ background:var(--surface); }
/* no mobile usamos a âncora fixa; evita dois sticky (Better Ads) */
@media (max-width:1023px){ .floating-video{ display:none; } }

/* âncora fixa do mobile — escondida por padrão; ativada só no mobile */
.ad-anchor{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  min-height:56px; margin:0;
  border:0; border-top:0.5px solid var(--border); border-radius:0;
  display:none;
}

/* layout da galeria: conteúdo + sidebar (sidebar só desktop) */
.gallery-sidebar{ display:none; }

/* =====================================================================
   10 · MOBILE & breakpoints
   ===================================================================== */
@media (max-width:767px){
  /* escala tipográfica reduzida */
  .display{ font-size:30px; }
  h1{ font-size:26px; }
  h2{ font-size:21px; }
  h3{ font-size:18px; }
  body{ font-size:16px; line-height:1.65; }
  .intro p{ font-size:17px; }

  /* mostra o hamburguer */
  .nav-toggle{ display:inline-flex; }

  /* nav vira painel dropdown abaixo da barra preta */
  .primary-nav{
    position:absolute;
    left:0; right:0; top:100%;
    background:var(--ink);
    border-top:0.5px solid rgba(255,255,255,.12);
    max-height:0; overflow:hidden;
    transition:max-height .25s ease;
  }
  .primary-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:var(--s-2) var(--s-4) var(--s-4);
  }
  .primary-nav__item{ border-bottom:0.5px solid rgba(255,255,255,.08); }
  .primary-nav__item:last-child{ border-bottom:0; }
  .primary-nav__link{
    display:flex; align-items:center;
    min-height:44px;               /* alvo de toque */
    font-size:16px;
  }

  /* estado aberto (classe no body via JS) */
  .nav-open .primary-nav{ max-height:70vh; }
  .nav-open .nav-toggle__bar{ background:transparent; }            /* vira X */
  .nav-open .nav-toggle__bar::before{ transform:translateY(7px) rotate(45deg); }
  .nav-open .nav-toggle__bar::after{ transform:translateY(-7px) rotate(-45deg); }

  /* galeria no mobile */
  .gallery-title{ font-size:26px; }
  .slide__rank{ font-size:22px; }
  /* o .slide-nav já é coluna com Next grande full-width (base) */

  /* âncora de anúncio fixa no rodapé (só mobile) */
  .ad-anchor{ display:flex; flex-direction:row; gap:var(--s-2); align-items:center; }
  body{ padding-bottom:64px; }              /* espaço pra âncora não cobrir o conteúdo */

  /* mega-menu vira lista aninhada dentro do painel hamburguer */
  .mega{
    position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; background:transparent; border:0; box-shadow:none;
    padding:0 0 var(--s-2) var(--s-4);
  }
  .mega__link{ color:var(--muted); padding:0; min-height:44px; display:flex; align-items:center; }  /* alvo de toque */
  .mega__link:hover{ background:transparent; color:#fff; }
  .mega__all{ color:var(--gold); padding-left:0; min-height:44px; display:inline-flex; align-items:center; }
}

/* tablet: 2 colunas + hero horizontal */
@media (min-width:768px){
  .container{ padding-inline:var(--s-6); } /* 24px no desktop/tablet */

  .card-grid{ grid-template-columns:repeat(2, 1fr); }

  .card--feature{
    display:grid;
    grid-template-columns:1.5fr 1fr;
    align-items:stretch;
  }
  /* no grid, a largura vem da coluna e a altura da linha; sem aspect-ratio
     (que recalcularia a largura pela altura e estouraria sobre o texto). */
  .card--feature .card__media{ height:100%; aspect-ratio:auto; min-width:0; }
  .card--feature .card__body{ justify-content:center; min-width:0; }
  .card--feature .card__title{ font-size:34px; }
}

/* desktop: 3 colunas */
@media (min-width:1024px){
  .card-grid{ grid-template-columns:repeat(3, 1fr); }
  .card--feature .card__title{ font-size:40px; line-height:1.05; }

  /* galeria com sidebar de anúncio */
  .gallery-layout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    gap:var(--s-16);            /* mais respiro: anúncio mais à direita, longe do texto */
    align-items:start;
  }
  .gallery-sidebar{ display:block; }
}