/* ================================================================
   RICH CONTENT. Seção unificada (vídeos + blog + materiais)
   Header compartilhado + 3 sub-blocos padronizados
   ================================================================ */
.v-rich {
  background: var(--vaas-white);
  padding: 96px 0 112px;
  position: relative;
}

.v-rich__head {
  max-width: 1280px;
  margin: 0 auto 56px;
  padding: 0 48px;
  text-align: center;
}
.v-rich__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
}
.v-rich__title {
  font-family: var(--font-display, var(--font-sans));
  font-size: clamp(36px, 4.4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--vaas-blue-deep);
  margin: 0 0 16px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
.v-rich__title em {
  font-style: normal;
  color: var(--vaas-blue);
}
.v-rich__sub {
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-muted, #6b6f80);
  max-width: 620px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ── Sub-bloco wrapper ────────────────────────────────────────── */
.v-rich__block {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
.v-rich__block + .v-rich__block {
  margin-top: 72px;
  padding-top: 72px;
  border-top: 1px solid rgba(7,9,20,.06);
}

.v-rich__subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.v-rich__subhead-l {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  flex: 1;
}
.v-rich__subhead-text {
  min-width: 0;
}
.v-rich__subtitle {
  font-family: var(--font-display, var(--font-sans));
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--vaas-blue-deep);
  margin: 0 0 4px;
  line-height: 1.2;
}
.v-rich__subsub {
  font-size: 14px;
  color: var(--fg-muted, #6b6f80);
  margin: 0;
  line-height: 1.45;
}

/* ── Chip indicando o tipo (Assistir / Ler / Baixar) ─────────── */
.v-rich__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
}
.v-rich__chip--video {
  color: #FF0033;
  background: rgba(255,0,51,.06);
  border-color: rgba(255,0,51,.18);
}
.v-rich__chip--read {
  color: var(--vaas-blue);
  background: rgba(4,52,244,.06);
  border-color: rgba(4,52,244,.18);
}
.v-rich__chip--download {
  color: #5BA34A;
  background: rgba(91,163,74,.08);
  border-color: rgba(91,163,74,.22);
}

/* ── Link "ver canal / ver blog" ──────────────────────────────── */
.v-rich__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vaas-blue-deep);
  text-decoration: none;
  padding: 10px 16px;
  border: 1px solid var(--border, rgba(7,9,20,.1));
  border-radius: 999px;
  background: #fff;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, gap 160ms ease;
  white-space: nowrap;
}
.v-rich__link:hover {
  background: var(--vaas-blue-deep);
  border-color: var(--vaas-blue-deep);
  color: #fff;
  gap: 12px;
}
.v-rich__link--primary {
  background: var(--vaas-blue-deep);
  border-color: var(--vaas-blue-deep);
  color: #fff;
}
.v-rich__link--primary:hover {
  background: var(--vaas-blue);
  border-color: var(--vaas-blue);
}

/* ── Última seção (CTA materiais). sem grid abaixo, só header ─ */
.v-rich__subhead--cta {
  margin-bottom: 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, #f8faff 0%, #f3f6fb 100%);
  border-radius: 14px;
  border: 1px solid rgba(7,9,20,.06);
}

/* ================================================================
   OVERRIDES: deixa MateriaisVideos + BlogTrending headless
   = remove seu próprio padding/header e encaixa no v-rich
   ================================================================ */

/* MateriaisVideos em modo headless */
.mt-videos--headless {
  padding: 0 !important;
  background: transparent !important;
}
.mt-videos--headless .mt-videos__inner {
  padding: 0 !important;
  max-width: none !important;
}
.mt-videos--headless .mt-videos__footer {
  display: none !important;
}

/* BlogTrending em modo headless */
.v-trend--headless {
  padding: 0 !important;
  background: transparent !important;
}
.v-trend--headless .v-trend__head {
  display: none !important;
}
.v-trend--headless .v-trend__track-wrap {
  padding: 0 !important;
}
.v-trend--headless .v-trend__footer {
  margin-top: 28px !important;
}

/* ================================================================
   MOBILE
   ================================================================ */
@media (max-width: 1080px) {
  .v-rich { padding: 72px 0 88px; }
  .v-rich__head { padding: 0 32px; margin-bottom: 48px; }
  .v-rich__block { padding: 0 32px; }
  .v-rich__block + .v-rich__block {
    margin-top: 56px;
    padding-top: 56px;
  }
}

@media (max-width: 720px) {
  .v-rich { padding: 56px 0 72px; }
  .v-rich__head { padding: 0 20px; margin-bottom: 40px; }
  .v-rich__title { font-size: clamp(28px, 7vw, 36px); }
  .v-rich__sub { font-size: 15px; }
  .v-rich__block { padding: 0 20px; }
  .v-rich__block + .v-rich__block {
    margin-top: 44px;
    padding-top: 44px;
  }
  .v-rich__subhead {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .v-rich__subhead-l {
    align-items: flex-start;
    gap: 14px;
  }
  .v-rich__chip {
    align-self: flex-start;
  }
  .v-rich__link {
    align-self: stretch;
    justify-content: center;
  }
  .v-rich__subhead--cta {
    padding: 22px 20px;
  }
  .v-rich__subtitle {
    font-size: 19px;
  }
}


/* Mobile (≤720px) — YouTube-mobile-style video cards (thumb left, text right) */
@media (max-width: 720px) {
  /* Both featured and grid cards become horizontal in the rich content block */
  .v-rich .mt-video--featured,
  .v-rich .mt-video--card {
    display: grid !important;
    grid-template-columns: 140px 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .v-rich .mt-video__thumb {
    width: 140px !important;
    aspect-ratio: 16 / 9 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    overflow: hidden;
    flex: 0 0 140px !important;
  }
  .v-rich .mt-video__meta {
    padding: 0 !important;
    gap: 4px !important;
    min-width: 0;
  }
  .v-rich .mt-video__meta-head { display: none !important; }
  .v-rich .mt-video__tag { display: none !important; }
  .v-rich .mt-video__title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: var(--vaas-blue-deep);
    font-weight: 600;
    /* Limit to 3 lines */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .v-rich .mt-video__desc {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(0,11,88,.6);
    margin: 2px 0 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .v-rich .mt-video__cta {
    font-size: 12px !important;
    margin-top: 4px !important;
    color: var(--vaas-blue) !important;
  }
  /* Stack cards vertically with a small gap */
  .v-rich .mt-videos__grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Featured separated from grid */
  .v-rich .mt-videos--headless .mt-video--featured {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(0,11,88,.08) !important;
  }
  /* Play overlay smaller on tiny thumb */
  .v-rich .mt-video__play {
    width: 32px !important;
    height: 32px !important;
  }
  .v-rich .mt-video__duration {
    font-size: 10px !important;
    padding: 2px 5px !important;
  }

  /* Vídeo principal (embed): largura total do conteúdo (dentro das margens)
     no mobile, em 16:9, para melhor visualização. */
  .v-rich .mt-video--featured.mt-video--embed {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    transform: none !important;
    padding: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border-bottom: none !important;
  }
  .v-rich .mt-video--embed .mt-video__thumb {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    flex: none !important;
    border-radius: 12px !important;
  }
  .v-rich .mt-video--embed .mt-video__expand {
    width: 56px !important;
    height: 56px !important;
  }
}