/**
 * MEMES BOVINOS — Components
 * Design System Fase 3
 *
 * Índice:
 *  01. Assinatura Gráfica
 *  02. Labels de Editoria
 *  03. Cabeçalhos de Seção
 *  04. Metadata
 *  05. Cards — MB Hero
 *  06. Cards — MB Featured
 *  07. Cards — MB Standard
 *  08. Cards — MB Horizontal
 *  09. Cards — MB Compact
 *  10. Cards — MB Ranking
 *  11. Botões
 *  12. Trending Bar
 *  13. Breaking News
 *  14. Variações Caprichoso / Garantido
 */

/* ═══════════════════════════════════════════════════════════
   01. ASSINATURA GRÁFICA
   Elemento visual proprietário — inspirado na curva do rio,
   chifre do boi e arena de Parintins.
   Traço angular verde institucional — simples, editorial.
═══════════════════════════════════════════════════════════ */

.mb-sig {
  display: inline-block;
  flex-shrink: 0;
  width: 4px;
  height: 1.1em;
  background: linear-gradient(
    175deg,
    var(--mb-brand-green) 0%,
    var(--mb-brand-green-dark) 100%
  );
  border-radius: 2px 1px 3px 2px;
  transform: skewX(-7deg);
  vertical-align: middle;
  position: relative;
}

/* Variante dupla — destaques especiais */
.mb-sig--double {
  box-shadow: 5px 0 0 var(--mb-gold-500);
}

/* Variante Caprichoso */
.mb-sig--caprichoso {
  background: linear-gradient(175deg, var(--mb-caprichoso) 0%, var(--mb-caprichoso-dark) 100%);
}

/* Variante Garantido */
.mb-sig--garantido {
  background: linear-gradient(175deg, var(--mb-garantido) 0%, var(--mb-garantido-dark) 100%);
}

/* ── Pseudo-elemento para seções ── */
.mb-sig-before::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 0.85em;
  background: linear-gradient(175deg, var(--mb-brand-green) 0%, var(--mb-brand-green-dark) 100%);
  border-radius: 2px 1px 3px 2px;
  transform: skewX(-7deg);
  margin-right: var(--mb-space-3);
  vertical-align: middle;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   02. LABELS DE EDITORIA
   Pequenas, fortes, identificáveis — não competem com a headline
═══════════════════════════════════════════════════════════ */

.mb-label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 3px var(--mb-space-3);
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-label);
  font-weight: var(--mb-weight-bold);
  letter-spacing: var(--mb-tracking-widest);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border-radius: var(--mb-radius-xs);
  white-space: nowrap;
  transition:
    background-color var(--mb-transition-fast),
    color var(--mb-transition-fast);

  /* Padrão: grafite editorial */
  background-color: var(--mb-charcoal-800);
  color: var(--mb-white);
}

.mb-label:hover {
  background-color: var(--mb-charcoal-700);
  color: var(--mb-white);
}

/* Variantes por editoria */
.mb-label--parintins       { background-color: var(--mb-charcoal-700);  color: var(--mb-gold-300); }
.mb-label--bumbas          { background-color: var(--mb-charcoal-800);  color: var(--mb-white); border-bottom: 2px solid var(--mb-gold-500); }
.mb-label--politica        { background-color: var(--mb-charcoal-800);  color: var(--mb-gold-500); }
.mb-label--bastidores      { background-color: var(--mb-gray-700);      color: var(--mb-white); }
.mb-label--fofoca          { background-color: var(--mb-earth-600);     color: var(--mb-white); }
.mb-label--manaus          { background-color: var(--mb-charcoal-700);  color: var(--mb-brand-green); }
.mb-label--amazonas        { background-color: var(--mb-charcoal-900);  color: var(--mb-brand-green); border-bottom: 2px solid var(--mb-gold-500); }
.mb-label--brasil          { background-color: var(--mb-gray-800);      color: var(--mb-white); }
.mb-label--entretenimento  { background-color: var(--mb-gold-700);      color: var(--mb-white); }
.mb-label--viral           { background-color: var(--mb-gold-500);      color: var(--mb-black); }

/* Editoriais — Caprichoso e Garantido */
/* Sempre com label textual — não depender só de cor (acessibilidade) */
.mb-label--caprichoso {
  background-color: var(--mb-caprichoso);
  color: var(--mb-white);
}
.mb-label--caprichoso:hover { background-color: var(--mb-caprichoso-dark); color: var(--mb-white); }

.mb-label--garantido {
  background-color: var(--mb-garantido);
  color: var(--mb-white);
}
.mb-label--garantido:hover { background-color: var(--mb-garantido-dark); color: var(--mb-white); }

/* Variante outline — sobre fundos escuros */
.mb-label--outline {
  background-color: transparent;
  border: 1px solid currentColor;
  color: var(--mb-white);
}

/* ═══════════════════════════════════════════════════════════
   03. CABEÇALHOS DE SEÇÃO
   Linguagem visual comum para todas as seções
═══════════════════════════════════════════════════════════ */

.mb-section-header {
  display: flex;
  align-items: center;
  gap: var(--mb-space-3);
  margin-bottom: var(--mb-space-5);
  padding-bottom: var(--mb-space-4);
  border-bottom: var(--mb-border-width) solid var(--mb-border);
  position: relative;
}

/* Linha de destaque sob o título */
.mb-section-header::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 48px;
  height: 3px;
  background: var(--mb-gold-500);
  border-radius: var(--mb-radius-full);
}

.mb-section-header__title {
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-interface);
  font-weight: var(--mb-weight-bold);
  letter-spacing: var(--mb-tracking-widest);
  text-transform: uppercase;
  color: var(--mb-text-primary);
  display: flex;
  align-items: center;
  gap: var(--mb-space-3);
}

.mb-section-header__link {
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-interface);
  font-weight: var(--mb-weight-medium);
  color: var(--mb-text-muted);
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--mb-space-2);
  transition: color var(--mb-transition-fast);
}

.mb-section-header__link:hover { color: var(--mb-accent); }

/* Variante Caprichoso */
.mb-section-header--caprichoso::after { background: var(--mb-caprichoso); }
.mb-section-header--caprichoso .mb-sig { background: linear-gradient(175deg, var(--mb-caprichoso) 0%, var(--mb-caprichoso-dark) 100%); }

/* Variante Garantido */
.mb-section-header--garantido::after { background: var(--mb-garantido); }
.mb-section-header--garantido .mb-sig { background: linear-gradient(175deg, var(--mb-garantido) 0%, var(--mb-garantido-dark) 100%); }

/* ═══════════════════════════════════════════════════════════
   04. METADATA
   Data, autor, tempo de leitura
═══════════════════════════════════════════════════════════ */

.mb-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mb-space-2);
  font-size: var(--mb-text-interface);
  color: var(--mb-text-muted);
  line-height: 1;
}

.mb-meta__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mb-meta__sep {
  width: 3px;
  height: 3px;
  background: var(--mb-gray-400);
  border-radius: 50%;
  flex-shrink: 0;
}

.mb-meta__author {
  font-weight: var(--mb-weight-medium);
  color: var(--mb-text-secondary);
}

/* ═══════════════════════════════════════════════════════════
   05. MB HERO
   Card dominante — imagem com gradiente e texto sobre
   Usado no topo da home e em destaques especiais
═══════════════════════════════════════════════════════════ */

.mb-card-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--mb-radius-img);
  display: block;
  color: var(--mb-white);
  text-decoration: none;
}

.mb-card-hero__image {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
}

.mb-card-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mb-transition-slow);
}

.mb-card-hero:hover .mb-card-hero__image img {
  transform: scale(1.03);
}

/* Gradiente sobre a imagem */
.mb-card-hero__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 10, 9, 0.92) 0%,
    rgba(8, 10, 9, 0.45)  45%,
    transparent           100%
  );
  pointer-events: none;
}

.mb-card-hero__body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--mb-space-5) var(--mb-space-5) var(--mb-space-5);
  z-index: var(--mb-z-raised);
}

.mb-card-hero__label {
  margin-bottom: var(--mb-space-3);
}

.mb-card-hero__title {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-hero);
  font-weight: var(--mb-weight-black);
  line-height: var(--mb-leading-tight);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-white);
  margin-bottom: var(--mb-space-3);
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
  max-width: 74%;
}

.mb-card-hero__excerpt {
  font-size: var(--mb-text-card-sm);
  color: rgba(255,255,255,0.82);
  line-height: var(--mb-leading-normal);
  margin-bottom: var(--mb-space-4);
  max-width: 70%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mb-card-hero__meta {
  color: rgba(255,255,255,0.7);
}
/* Hero fills grid column height when in stretch grid */
.mb-hero-grid__main .mb-card-hero {
  height: 100%;
}

.mb-hero-grid__main .mb-card-hero__image {
  aspect-ratio: unset;
  height: 100%;
  position: absolute;
  inset: 0;
}

.mb-hero-grid__main .mb-card-hero {
  position: relative;
}



/* ═══════════════════════════════════════════════════════════
   06. MB FEATURED
   Destaque secundário — imagem acima, texto abaixo
═══════════════════════════════════════════════════════════ */

.mb-card-featured {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--mb-surface);
  border-radius: var(--mb-radius-img);
  overflow: hidden;
  transition: box-shadow var(--mb-transition-normal);
}

.mb-card-featured:hover { box-shadow: var(--mb-shadow-sm); }

.mb-card-featured__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mb-card-featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mb-transition-slow);
}

.mb-card-featured:hover .mb-card-featured__image img {
  transform: scale(1.03);
}

.mb-card-featured__body {
  padding: var(--mb-space-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
}

.mb-card-featured__label { margin-bottom: var(--mb-space-1); }

.mb-card-featured__title {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-card-lg);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-snug);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mb-transition-fast);
}

.mb-card-featured:hover .mb-card-featured__title { color: var(--mb-accent); }

.mb-card-featured__meta { margin-top: auto; padding-top: var(--mb-space-2); }


/* ═══════════════════════════════════════════════════════════
   06b. MB HERO SECONDARY + TERTIARY
   Destaques assimétricos da primeira dobra
═══════════════════════════════════════════════════════════ */

/* Nível 2 — destaque secundário: imagem + corpo proeminente */
.mb-hero-secondary {
  display: flex;
  flex-direction: column;
  background: var(--mb-surface);
  border-radius: var(--mb-radius-img);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--mb-transition-normal);
}

.mb-hero-secondary:hover { box-shadow: var(--mb-shadow-md); }

.mb-hero-secondary__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.mb-hero-secondary__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mb-transition-slow);
}

.mb-hero-secondary:hover .mb-hero-secondary__image img {
  transform: scale(1.03);
}

.mb-hero-secondary__body {
  padding: var(--mb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
  flex: 1;
}

.mb-hero-secondary__title {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-card-lg);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-snug);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mb-transition-fast);
}

.mb-hero-secondary:hover .mb-hero-secondary__title { color: var(--mb-accent); }

.mb-hero-secondary__meta { margin-top: auto; padding-top: var(--mb-space-1); }

/* Nível 3 — destaque terciário: thumbnail + headline horizontal */
.mb-hero-tertiary {
  display: flex;
  flex-direction: row;
  gap: var(--mb-space-3);
  background: var(--mb-surface);
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
  padding-top: var(--mb-grid-gap);
  border-top: 1px solid var(--mb-border);
  transition: opacity var(--mb-transition-fast);
}

.mb-hero-tertiary:hover { opacity: 0.85; }

.mb-hero-tertiary__thumb {
  width: 42%;
  flex-shrink: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--mb-radius-sm);
}

.mb-hero-tertiary__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mb-transition-slow);
}

.mb-hero-tertiary:hover .mb-hero-tertiary__thumb img {
  transform: scale(1.04);
}

.mb-hero-tertiary__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
  padding: var(--mb-space-1) 0;
  min-width: 0;
}

.mb-hero-tertiary__title {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-card-sm);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-snug);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mb-transition-fast);
}

.mb-hero-tertiary:hover .mb-hero-tertiary__title { color: var(--mb-accent); }

.mb-hero-tertiary__meta { margin-top: auto; }

/* ═══════════════════════════════════════════════════════════
   06c. MB CARD SIDE
   Card lateral horizontal: imagem esquerda + texto direita
   Usado na coluna lateral do hero grid
═══════════════════════════════════════════════════════════ */

.mb-card-side {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  overflow: hidden;
  background: var(--mb-surface);
  border: 1px solid rgba(15,18,17,0.10);
  border-radius: var(--mb-radius-sm);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: box-shadow var(--mb-transition-normal);
}

.mb-card-side:hover { box-shadow: var(--mb-shadow-sm); }

.mb-card-side__image {
  overflow: hidden;
  height: 100%;
  min-height: 0;
}

.mb-card-side__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--mb-transition-slow);
}

.mb-card-side:hover .mb-card-side__image img {
  transform: scale(1.03);
}

.mb-card-side__body {
  padding: var(--mb-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
  justify-content: center;
  min-width: 0;
  overflow: hidden;
}

.mb-card-side__title {
  font-family: var(--mb-font-headline);
  font-size: clamp(1.05rem, 1.5vw, 1.65rem);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-snug);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mb-transition-fast);
}

.mb-card-side:hover .mb-card-side__title { color: var(--mb-accent); }

.mb-card-side__meta { margin-top: auto; }

/* Hierarquia editorial — secundário (1º) > terciário (2º) */
.mb-hero-side > .mb-card-side:first-child {
  grid-template-columns: 1.1fr 0.9fr; /* imagem ~55% */
}

.mb-hero-side > .mb-card-side:first-child .mb-card-side__title {
  font-size: clamp(1.1rem, 2.2vw, 2rem); /* ~31px desktop — DESTAQUE SECUNDÁRIO */
  -webkit-line-clamp: 3;
}

.mb-hero-side > .mb-card-side:last-child {
  grid-template-columns: 0.95fr 1.05fr; /* imagem ~47.5%, texto ~52.5% */
}

.mb-hero-side > .mb-card-side:last-child .mb-card-side__title {
  font-size: clamp(0.95rem, 1.8vw, 1.7rem); /* ~26px desktop — DESTAQUE TERCIÁRIO */
  -webkit-line-clamp: 4;
}


/* ═══════════════════════════════════════════════════════════
   07. MB STANDARD
   Card padrão da grade editorial
═══════════════════════════════════════════════════════════ */

.mb-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

.mb-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--mb-radius-img);
  margin-bottom: var(--mb-space-3);
}

.mb-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mb-transition-slow);
}

.mb-card:hover .mb-card__image img { transform: scale(1.04); }

.mb-card__label { margin-bottom: var(--mb-space-2); }

.mb-card__title {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-card-md);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-snug);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mb-transition-fast);
}

.mb-card:hover .mb-card__title { color: var(--mb-accent); }

.mb-card__meta {
  margin-top: var(--mb-space-3);
  padding-top: var(--mb-space-2);
  border-top: 1px solid var(--mb-border);
}

/* ═══════════════════════════════════════════════════════════
   08. MB HORIZONTAL
   Thumbnail + texto lado a lado — listas e relacionadas
═══════════════════════════════════════════════════════════ */

.mb-card-h {
  display: flex;
  gap: var(--mb-space-4);
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
  padding: var(--mb-space-3) 0;
  border-bottom: 1px solid var(--mb-border);
}

.mb-card-h:last-child { border-bottom: none; }

.mb-card-h__thumb {
  flex-shrink: 0;
  width: 112px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--mb-radius-img);
}

.mb-card-h__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mb-transition-slow);
}

.mb-card-h:hover .mb-card-h__thumb img { transform: scale(1.05); }

.mb-card-h__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
}

.mb-card-h__label { margin-bottom: var(--mb-space-1); }

.mb-card-h__title {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-card-sm);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-snug);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mb-transition-fast);
}

.mb-card-h:hover .mb-card-h__title { color: var(--mb-accent); }

/* Variante sem thumb */
.mb-card-h--no-thumb .mb-card-h__thumb { display: none; }

/* ═══════════════════════════════════════════════════════════
   09. MB COMPACT
   Sem imagem — lista pura, ranking lateral, sidebar
═══════════════════════════════════════════════════════════ */

.mb-card-compact {
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-1);
  padding: var(--mb-space-3) 0;
  border-bottom: 1px solid var(--mb-border);
  text-decoration: none;
  color: inherit;
}

.mb-card-compact:last-child { border-bottom: none; }

.mb-card-compact__title {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-card-sm);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-snug);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mb-transition-fast);
}

.mb-card-compact:hover .mb-card-compact__title { color: var(--mb-accent); }

/* ═══════════════════════════════════════════════════════════
   10. MB RANKING
   Número grande em destaque — mais lidas / trending
═══════════════════════════════════════════════════════════ */

.mb-card-rank {
  display: flex;
  gap: var(--mb-space-4);
  align-items: flex-start;
  padding: var(--mb-space-4) 0;
  border-bottom: 1px solid var(--mb-border);
  text-decoration: none;
  color: inherit;
}

.mb-card-rank:last-child { border-bottom: none; }

.mb-card-rank__number {
  font-family: var(--mb-font-headline);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--mb-weight-black);
  line-height: 1;
  color: var(--mb-gold-700);
  letter-spacing: var(--mb-tracking-tight);
  flex-shrink: 0;
  width: 40px;
  text-align: center;
  user-select: none;
}

.mb-card-rank:nth-child(1) .mb-card-rank__number { color: var(--mb-gold-500); }
.mb-card-rank:nth-child(2) .mb-card-rank__number { color: var(--mb-gray-400); }
.mb-card-rank:nth-child(3) .mb-card-rank__number { color: var(--mb-earth-600); }

.mb-card-rank__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mb-space-2);
}

.mb-card-rank__title {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-card-sm);
  font-weight: var(--mb-weight-bold);
  line-height: var(--mb-leading-snug);
  letter-spacing: var(--mb-tracking-tight);
  color: var(--mb-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--mb-transition-fast);
}

.mb-card-rank:hover .mb-card-rank__title { color: var(--mb-accent); }

/* ═══════════════════════════════════════════════════════════
   11. BOTÕES
═══════════════════════════════════════════════════════════ */

.mb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mb-space-2);
  padding: var(--mb-space-3) var(--mb-space-5);
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-interface);
  font-weight: var(--mb-weight-semibold);
  letter-spacing: var(--mb-tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  border-radius: var(--mb-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--mb-transition-fast),
    color var(--mb-transition-fast),
    border-color var(--mb-transition-fast);
  min-height: 44px;
  white-space: nowrap;
}

/* Primary */
.mb-btn--primary {
  background-color: var(--mb-charcoal-950);
  color: var(--mb-white);
  border-color: var(--mb-charcoal-950);
}
.mb-btn--primary:hover {
  background-color: var(--mb-charcoal-800);
  border-color: var(--mb-charcoal-800);
  color: var(--mb-white);
}
.mb-btn--primary:focus-visible { box-shadow: var(--mb-shadow-focus); }
.mb-btn--primary:active { background-color: var(--mb-charcoal-900); border-color: var(--mb-charcoal-900); }

/* Secondary */
.mb-btn--secondary {
  background-color: var(--mb-gray-100);
  color: var(--mb-text-primary);
  border-color: var(--mb-border);
}
.mb-btn--secondary:hover {
  background-color: var(--mb-gray-200);
  color: var(--mb-text-primary);
}

/* Ghost */
.mb-btn--ghost {
  background-color: transparent;
  color: var(--mb-accent);
  border-color: var(--mb-accent);
}
.mb-btn--ghost:hover {
  background-color: var(--mb-brand-green-pale);
  color: var(--mb-accent-dark);
  border-color: var(--mb-accent-dark);
}

/* Ghost Inverse — sobre fundo escuro */
.mb-btn--ghost-inverse {
  background-color: transparent;
  color: var(--mb-white);
  border-color: rgba(255,255,255,0.6);
}
.mb-btn--ghost-inverse:hover {
  background-color: rgba(255,255,255,0.1);
  color: var(--mb-white);
  border-color: var(--mb-white);
}

/* Icon */
.mb-btn--icon {
  padding: var(--mb-space-3);
  min-width: 44px;
  border-radius: var(--mb-radius-sm);
}

/* Disabled */
.mb-btn:disabled,
.mb-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Tamanhos */
.mb-btn--sm {
  padding: var(--mb-space-2) var(--mb-space-4);
  font-size: var(--mb-text-label);
  min-height: 36px;
}

.mb-btn--lg {
  padding: var(--mb-space-4) var(--mb-space-7);
  font-size: var(--mb-text-caption);
}

/* ═══════════════════════════════════════════════════════════
   12. TRENDING BAR — "TÁ BOMBANDO"
   Discreto, sem ticker automático
═══════════════════════════════════════════════════════════ */

.mb-trending {
  background: var(--mb-white);
  padding: var(--mb-space-3) 0;
}

.mb-trending__inner {
  display: flex;
  align-items: center;
  gap: var(--mb-space-5); /* 4.7: mais respiro entre label e notícias */
  overflow: hidden;
}

.mb-trending__label {
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-label);
  font-weight: var(--mb-weight-black);
  letter-spacing: var(--mb-tracking-widest);
  text-transform: uppercase;
  color: var(--mb-white);
  background: var(--mb-charcoal-900);
  border-left: 3px solid var(--mb-gold-500);
  border-radius: 0 var(--mb-radius-xs) var(--mb-radius-xs) 0;
  padding: 4px var(--mb-space-3);
  flex-shrink: 0;
  white-space: nowrap;
}

.mb-trending__list {
  display: flex;
  align-items: center;
  gap: var(--mb-space-1);
  list-style: none;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}

.mb-trending__list::-webkit-scrollbar { display: none; }

.mb-trending__item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--mb-space-1);
}

.mb-trending__item::after {
  content: '·';
  color: var(--mb-gold-500);
  margin-left: var(--mb-space-1);
}

.mb-trending__item:last-child::after { display: none; }

.mb-trending__link {
  font-size: var(--mb-text-interface);
  font-weight: var(--mb-weight-medium);
  color: var(--mb-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--mb-transition-fast);
}

.mb-trending__link:hover { color: var(--mb-accent); }

/* Mobile: scroll horizontal natural */
@media (max-width: 767px) {
  .mb-trending__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mb-space-2);
    overflow: visible;
  }
  .mb-trending__list {
    width: 100%;
    gap: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   13. BREAKING NEWS — URGENTE / AGORA
   Variável separada — distinto do vermelho Garantido
═══════════════════════════════════════════════════════════ */

.mb-breaking {
  background: var(--mb-breaking-bg);
  border-left: 4px solid var(--mb-breaking);
  padding: var(--mb-space-3) var(--mb-space-4);
  display: flex;
  align-items: center;
  gap: var(--mb-space-3);
  border-radius: 0 var(--mb-radius-sm) var(--mb-radius-sm) 0;
}

.mb-breaking__badge {
  font-family: var(--mb-font-body);
  font-size: var(--mb-text-label);
  font-weight: var(--mb-weight-black);
  letter-spacing: var(--mb-tracking-wider);
  text-transform: uppercase;
  color: var(--mb-white);
  background: var(--mb-breaking);
  padding: 3px var(--mb-space-3);
  border-radius: var(--mb-radius-xs);
  flex-shrink: 0;
  white-space: nowrap;
  animation: mb-pulse-badge 2s ease-in-out infinite;
}

@keyframes mb-pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

.mb-breaking__text {
  font-family: var(--mb-font-headline);
  font-size: var(--mb-text-card-sm);
  font-weight: var(--mb-weight-bold);
  color: var(--mb-text-primary);
  line-height: var(--mb-leading-snug);
}

.mb-breaking__text a {
  color: inherit;
  text-decoration: none;
  transition: color var(--mb-transition-fast);
}

.mb-breaking__text a:hover { color: var(--mb-breaking); }

/* ═══════════════════════════════════════════════════════════
   14. VARIAÇÕES CAPRICHOSO / GARANTIDO
   Peso visual equivalente — nunca pintar grandes áreas
═══════════════════════════════════════════════════════════ */

/* Faixa de destaque editorial — borda superior */
.mb-editorial-stripe {
  border-top: var(--mb-border-width-heavy) solid var(--mb-border);
  padding-top: var(--mb-space-5);
}

.mb-editorial-stripe--caprichoso {
  border-top-color: var(--mb-caprichoso);
}

.mb-editorial-stripe--garantido {
  border-top-color: var(--mb-garantido);
}

/* Card com destaque de borda lateral */
.mb-card--caprichoso {
  border-left: var(--mb-border-width-accent) solid var(--mb-caprichoso);
  padding-left: var(--mb-space-4);
}

.mb-card--garantido {
  border-left: var(--mb-border-width-accent) solid var(--mb-garantido);
  padding-left: var(--mb-space-4);
}

/* Indicador visual — pequeno ponto de cor */
.mb-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mb-indicator--caprichoso { background: var(--mb-caprichoso); }
.mb-indicator--garantido  { background: var(--mb-garantido); }
.mb-indicator--verde      { background: var(--mb-brand-green); }
.mb-indicator--gold       { background: var(--mb-gold-500); }

/* ── Responsive Cards ─────────────────────────────────────── */
@media (max-width: 767px) {

  /* Hero: título sem line-clamp — quebra natural */

  /* Horizontal: thumb menor */
  .mb-card-h__thumb {
    width: 88px;
  }

  /* Ranking: número menor */
  .mb-card-rank__number {
    font-size: 1.75rem;
    width: 32px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Hero: escala intermediária — quebra natural */
}