/* ═══════════════════════════════════════════════════════════════
   Mobile Responsive — Prumo PT
   Regra: NUNCA alterar layout desktop. Só @media queries.
   Breakpoints: ≤768px (tablet/mobile), ≤640px (phones), ≤480px (small)
   ═══════════════════════════════════════════════════════════════ */

/* ── Section header typography ───────────────────────────────────── */
@media (max-width: 768px) {
  .section-eyebrow {
    font-size: 11px;
    letter-spacing: 0.8px;
  }

  .section-title {
    font-size: var(--fs-md); /* 22px → was 26px */
  }

  .section-subtitle {
    font-size: var(--fs-sm); /* 17px → was 19px */
  }
}

/* ── KPI cards: reduzir padding horizontal ───────────────────────── */
@media (max-width: 768px) {
  .kpi-card {
    padding: var(--sp-md) var(--sp-md); /* 16px 16px → era 24px 40px */
  }

  .kpi-yoy {
    font-size: var(--fs-sm); /* 17px → era 22px */
  }

  .kpi-arrow {
    font-size: var(--fs-base); /* 19px → era 26px */
  }

  #painel .kpi-card {
    min-height: 140px; /* era 160px */
  }
}

/* ── Europa + Mundo: chart tall — altura razoável em mobile ──────── */
@media (max-width: 768px) {
  #europa .chart-container.tall,
  #mundo .chart-container.tall {
    height: 400px;
    min-height: 300px;
  }
}

/* ── Europa + Mundo: top bars — stack vertical em mobile ─────────── */
@media (max-width: 640px) {
  .europa-top-bar,
  .mundo-top-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-sm);
  }

  .europa-top-bar .swd-select,
  .mundo-top-bar .swd-select {
    max-width: 100% !important;
    width: 100%;
  }

  .europa-top-bar .eu-view-tabs,
  .mundo-top-bar .eu-view-tabs {
    align-self: flex-start;
  }

  .europa-top-bar .share-btn,
  .mundo-top-bar .share-btn {
    align-self: flex-start;
  }
}

/* ── Comparativos: preset chips — scrollable row on mobile ────────── */
@media (max-width: 640px) {
  .europa-presets,
  .mundo-presets,
  .cmp-presets {
    gap: 4px;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .cmp-presets::-webkit-scrollbar { display: none; }

  .preset-chip {
    font-size: 11px;
    padding: 5px 10px;
    flex-shrink: 0;
  }

  /* Country chips: more compact on mobile */
  .country-chip {
    font-size: 10px;
    padding: 2px 5px;
    min-height: 20px;
  }
  .chip-flag { font-size: 11px; }
}

/* ── Explorador: altura do gráfico em mobile ─────────────────────── */
@media (max-width: 768px) {
  .explorador-chart-container {
    min-height: 280px;
    height: max(38vh, 280px);
  }
}

/* ── Explorador: chip text — truncar em ecrãs estreitos ─────────── */
@media (max-width: 480px) {
  .chip-text {
    max-width: 180px;
  }
}

/* ── Explorador search bar: full-width em mobile ─────────────────── */
@media (max-width: 640px) {
  .explorador-search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .explorador-search-bar .swd-input {
    min-width: 0;
    width: 100%;
  }
}

/* ── Ficha: source cards padding reduzido em mobile ──────────────── */
@media (max-width: 768px) {
  #ficha .source-card {
    padding: var(--sp-md); /* 16px → era 24px */
  }
}

/* ── Painel IA panel: padding compacto em mobile ─────────────────── */
@media (max-width: 640px) {
  #painel-ia-panel {
    padding: var(--sp-sm) var(--sp-md);
  }
}

/* ── AI panel: padding compacto em mobile ────────────────────────── */
@media (max-width: 640px) {
  #ai-panel {
    padding: 0.5rem 0.9rem;
  }
}

/* ── chart-card: padding reduzido em mobile ──────────────────────── */
@media (max-width: 768px) {
  .chart-card {
    padding: var(--sp-md);
  }
}

/* ── Comparativos chart tall: altura razoável ────────────────────── */
/* (já existe em sections.css @600px → 320px; reforçar entre 601-768px) */
@media (max-width: 768px) {
  #comparativos .chart-container.tall {
    height: 340px;
  }
}

/* ── Footer: compactar em ecrãs muito pequenos ───────────────────── */
@media (max-width: 480px) {
  .footer-inner {
    font-size: 12px;
  }
}

/* ── Subsection title: reduzir em mobile ─────────────────────────── */
@media (max-width: 768px) {
  .subsection-title {
    font-size: var(--fs-base); /* 19px → era 22px */
  }
}

/* ── Comparativos dropdowns: prevent overflow on mobile ── */
@media (max-width: 640px) {
  .cmp-top-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .cmp-source-row,
  .cmp-ind-row {
    width: 100%;
    box-sizing: border-box;
  }
  .cmp-source-row .swd-select,
  .cmp-ind-row .swd-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .cmp-top-bar-right {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
  }
  #cmp-share {
    flex: 0 0 auto;
    padding: 6px 12px;
  }
}

/* ── Explorador: prevent source dropdown overflow on mobile ── */
@media (max-width: 640px) {
  #exp-source-filter {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .explorador-controls {
    flex-wrap: wrap;
  }
}

/* ── Nav controls: posição gerida por swd-theme.css (fixed bottom-right) ── */

/* ═══════════════════════════════════════════════════════════════
   C2 — FASE 3 MOBILE FIXES (2026-03-15)
   Fixes: nav-brand compacto, font sizes min 12px, hero constraints
   ═══════════════════════════════════════════════════════════════ */

/* ── C2-1: Nav-brand compacto em mobile — reduzir para não cobrir viewport ── */
@media (max-width: 767px) {
  /* Mostrar ícone desktop — tamanho igual ao desktop */
  .nav-brand-icon-desktop {
    display: block !important;
  }
  .nav-brand-icon-mobile { display: none !important; }

  /* Esconder texto "Prumo" + tagline em mobile */
  .nav-brand-text { display: none !important; }

  /* Ícone igual ao desktop — sem compressão */

  /* Compactar o link de marca */
  .nav-brand-link {
    padding: 0 8px 0 8px !important;
    min-width: 52px;
  }

  /* Tabs: flexíveis com min-width razoável */
  .nav-tab {
    flex: 1;
    min-width: 48px;
    padding: 0 4px !important;
  }
}

/* ── C2-2: Font sizes mínimas em mobile — KPI labels e metadados ── */
@media (max-width: 480px) {
  /* KPI label: mínimo 12px (era ~9px hardcoded em kpi-source-tag) */
  .kpi-label {
    font-size: 12px !important;
  }

  /* Source tag: mínimo 11px (era 9px) */
  #painel .kpi-source-tag {
    font-size: 11px !important;
  }

  /* KPI context/description: mínimo 12px */
  .kpi-context,
  #painel .kpi-description,
  #painel .kpi-context {
    font-size: 12px !important;
  }

  /* KPI unit inline */
  .kpi-unit {
    font-size: 15px !important;
  }

  /* Painel-ia labels */
  .painel-ia-label,
  .painel-ia-tagline,
  .painel-ia-meta {
    font-size: 11px !important;
  }
}

/* ── C2-3: Hero onboarding — conter e limitar em mobile ── */
@media (max-width: 480px) {
  .hero-onboarding {
    padding: 28px 20px !important;
    max-height: 280px;
    overflow: hidden;
  }

  .hero-title {
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }

  .hero-desc {
    font-size: 14px !important;
    margin-bottom: 10px !important;
    /* Limitar a 2 linhas em mobile muito pequeno */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-sources {
    /* Esconder em mobile muito pequeno para poupar espaço */
    display: none;
  }
}

/* ── C2-4: Chart containers — max-height e overflow em mobile ── */
@media (max-width: 480px) {
  .chart-container {
    max-height: 220px;
    overflow: hidden;
  }

  /* Sparklines: altura razoável */
  #painel .spark-container {
    height: 36px !important;
  }
}