/* ═══════════════════════════════════════════════════════
   mobile.css — Layout exclusivo para celular
   Carregado APENAS em telas ≤ 768px (media query no HTML)
   NÃO altera nenhum estilo do desktop.
   ═══════════════════════════════════════════════════════ */

/* ── Reset de layout do app-shell ────────────────────── */
.app-shell {
  display: block !important;
}

/* ── Sidebar: oculta por padrão, desliza ao abrir ────── */
.sidebar {
  transform: translateX(-100%) !important;
  width: 260px !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
  z-index: 300 !important;
}

.sidebar.is-open {
  transform: translateX(0) !important;
  box-shadow: 4px 0 32px rgba(0,0,0,.8) !important;
}

/* ── Conteúdo ocupa 100% da largura ─────────────────── */
.main-content {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* ── Topbar: ajusta padding para o botão ☰ ──────────── */
.topbar {
  padding-left: 60px !important;
  height: 48px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}

.topbar__title {
  font-size: .6rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.topbar__launch span:last-child {
  display: none !important;
}

/* ── Toggle visível ──────────────────────────────────── */
.sidebar-toggle {
  display: flex !important;
  position: fixed !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 400 !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 1rem !important;
}

/* ── Footer sem margin-left ──────────────────────────── */
#siteFooter {
  margin-left: 0 !important;
}

/* ══════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════ */
.hero-banner {
  min-height: 420px !important;
}

.hero-banner__bg {
  background-position: 70% center !important; /* foca no rosto */
}

.hero-banner__body {
  max-width: 100% !important;
  padding: 48px 20px 32px !important;
  background: linear-gradient(
    180deg,
    rgba(6,10,18,.3) 0%,
    rgba(6,10,18,.85) 60%,
    rgba(6,10,18,.97) 100%
  ) !important;
}

.hero-banner__title {
  font-size: 1.8rem !important;
  line-height: 1.1 !important;
}

.hero-banner__title em {
  font-size: 1.15em !important;
}

.hero-banner__sub {
  font-size: .9rem !important;
}

.hero-banner__actions {
  flex-direction: column !important;
  gap: 8px !important;
}

.btn-primary,
.btn-secondary {
  width: 100% !important;
  justify-content: center !important;
  padding: 12px 16px !important;
}

.hero-banner__launch {
  top: 12px !important;
  right: 12px !important;
}

.hero-banner__launch-date {
  font-size: 1.1rem !important;
}

.hero-banner__quote-inline {
  max-width: 100% !important;
  margin-top: 14px !important;
}

/* ══════════════════════════════════════════════════════
   MÉTRICAS — faixa horizontal vira grade 2x3
══════════════════════════════════════════════════════ */
.metrics-strip {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
}

.metric-strip-item {
  padding: 14px 12px !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
}

.metric-strip-item:nth-child(odd) {
  border-right: 1px solid rgba(255,255,255,.05) !important;
}

.metric-strip-icon {
  font-size: 1.3rem !important;
}

.metric-strip-value {
  font-size: 1.3rem !important;
}

.metric-strip-sub {
  display: none !important;
}

/* ══════════════════════════════════════════════════════
   SISTEMAS — 1 coluna no mobile
══════════════════════════════════════════════════════ */
.systems-section {
  padding: 0 0 20px !important;
}

.systems-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.sys-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
}

.sys-card__thumb {
  width: 120px !important;
  flex-shrink: 0 !important;
  aspect-ratio: unset !important;
}

.sys-card__body {
  padding: 12px 14px !important;
  flex: 1 !important;
}

.sys-card__list {
  display: none !important; /* simplifica no mobile */
}

.sys-card__title {
  font-size: .78rem !important;
  margin-bottom: 6px !important;
}

/* ══════════════════════════════════════════════════════
   BASE DE CONHECIMENTO — 1 coluna
══════════════════════════════════════════════════════ */
.knowledge-grid {
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

.k-card__header {
  padding: 14px 16px 10px !important;
}

.k-item {
  padding: 10px 16px !important;
}

/* ══════════════════════════════════════════════════════
   VOTAÇÕES
══════════════════════════════════════════════════════ */
.main-layout {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.panel--channel {
  display: none !important; /* remove CTA no mobile */
}

.panel--ranking {
  order: 2 !important;
}

.classes-section {
  order: 1 !important;
}

/* Carrossel de classes */
.classes-track {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 10px !important;
  padding-bottom: 8px !important;
  scrollbar-width: none !important;
}

.classes-track::-webkit-scrollbar { display: none !important; }

.card {
  flex: 0 0 130px !important;
  scroll-snap-align: start !important;
}

.card:first-child { margin-left: 4px !important; }
.card:last-child  { margin-right: 4px !important; }

/* Batalha mobile */
.battle__arena {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
}

.battle__side {
  min-height: 180px !important;
}

.battle__side-name {
  font-size: 1rem !important;
}

.battle__side-pct {
  font-size: 1.6rem !important;
}

.battle__side-desc {
  display: none !important;
}

/* Poll nav */
.poll-nav__tabs {
  gap: 4px !important;
  padding: 2px !important;
}

.poll-tab {
  padding: 7px 10px !important;
  font-size: .52rem !important;
}

/* Ranking */
.rank-row {
  grid-template-columns: 16px 70px 1fr 36px !important;
  gap: 6px !important;
}

/* ══════════════════════════════════════════════════════
   SPOILERS — 1 coluna
══════════════════════════════════════════════════════ */
.spoilers__grid {
  grid-template-columns: 1fr !important;
}

/* ══════════════════════════════════════════════════════
   DDM STRIP — simplifica
══════════════════════════════════════════════════════ */
.ddm-strip {
  flex-direction: column !important;
  gap: 16px !important;
  padding: 20px 16px !important;
}

.ddm-strip__stats {
  justify-content: flex-start !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* ══════════════════════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════════════════════ */
.section-header {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
}

.section-header__link {
  font-size: .58rem !important;
}

/* ══════════════════════════════════════════════════════
   CONTENT AREA
══════════════════════════════════════════════════════ */
.content-area {
  padding: 12px 14px 48px !important;
}

/* Hero da view votações */
.hero {
  padding: 12px 0 24px !important;
}

.hero__title {
  font-size: 1.4rem !important;
}