/* =====================================================
   CLUBE LEGACI — Mobile
   Público 50+: alvos grandes, texto legível, sem gesto complexo.
   Carregar SEMPRE depois de global.css e components.css.
   ===================================================== */

/* ===== BARRA INFERIOR (só aparece no mobile) ===== */
.bottomnav { display: none; }

@media (max-width: 820px) {

  /* ---------- BASE ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body {
    /* espaço pra barra inferior não cobrir conteúdo */
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
  .container { padding: 0 18px; }

  /* ---------- TIPOGRAFIA ---------- */
  .headline-hero { font-size: 34px !important; line-height: 1.12 !important; }
  h1 { font-size: 30px; }
  h2 { font-size: 25px; }
  h3 { font-size: 21px; }
  .eyebrow { letter-spacing: 2px; }

  /* Textos que ficaram grandes demais via style inline */
  [style*="font-size: 48px"], [style*="font-size:48px"],
  [style*="font-size: 56px"], [style*="font-size:56px"],
  [style*="font-size: 62px"], [style*="font-size:62px"] {
    font-size: 34px !important;
  }
  [style*="font-size: 38px"], [style*="font-size:38px"],
  [style*="font-size: 36px"], [style*="font-size:36px"] {
    font-size: 27px !important;
  }
  [style*="font-size: 32px"], [style*="font-size:32px"],
  [style*="font-size: 30px"], [style*="font-size:30px"] {
    font-size: 24px !important;
  }

  /* ---------- TOPO ---------- */
  .topnav {
    padding: 14px 0;
    gap: 10px;
  }
  /* Os links viram a barra de baixo */
  .topnav .nav-links { display: none; }
  /* O "+ adicionar" vira o botão central da barra de baixo */
  .nav-actions > a.btn { display: none; }
  .brand-tag { display: none; }
  .brand-name { font-size: 19px; }

  /* ---------- LAYOUT ---------- */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Grades de 2 colunas declaradas no HTML (login, convite, senha) */
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  [style*="grid-template-columns: 380px 1fr"],
  [style*="grid-template-columns: minmax(0, 1fr) 360px"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .hero, .page { padding-top: 20px; }
  .divider-editorial { margin: 28px 0; }

  /* ---------- CARTÕES DE PAPEL ---------- */
  .card-paper { padding: 30px 22px !important; border-radius: 14px; }

  /* ---------- FORMULÁRIOS ---------- */
  /* Dois campos lado a lado não cabem em tela de celular */
  .field-row { flex-direction: column; gap: 20px; }
  .field-radio-group { flex-direction: column; gap: 10px; }
  .field-input, .field-textarea, .field-select {
    font-size: 17px;   /* >=16px evita o zoom automático do iOS */
    padding: 13px 0;
  }
  .field-select { padding: 13px 4px; }
  .section-form { padding: 18px 16px !important; }

  /* ---------- BOTÕES ---------- */
  .btn { min-height: 50px; padding: 14px 22px; }
  .btn-lg { min-height: 54px; padding: 16px 24px; font-size: 16px; }
  .btn-sm { min-height: 44px; }
  /* Botão solto num container vira largura total — mais fácil de acertar */
  .row > .btn, .btn-block { width: 100%; }
  .row { flex-wrap: wrap; }

  /* ---------- MODAIS: sobem de baixo, como app nativo ---------- */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 26px 20px calc(26px + env(safe-area-inset-bottom, 0px));
    max-height: 92vh;
    overflow-y: auto;
  }
  .modal-close {
    top: 12px; right: 12px;
    width: 42px; height: 42px;
  }

  /* ---------- POLAROIDES ---------- */
  .polaroid { padding: 10px 10px 34px; }
  .polaroid-caption { font-size: 15px; }

  /* ---------- ACERVO ---------- */
  .acervo-header { flex-direction: column; align-items: stretch; gap: 18px; }
  .acervo-header .btn { width: 100%; }
  .acervo-filtros { gap: 12px; }
  .filtro-busca { min-width: 100%; }
  .filtro-chips { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filtro-chip { flex-shrink: 0; }
  .filtro-select { width: 100%; }
  .acervo-grid { column-count: 2 !important; column-gap: 12px; }

  /* Lightbox vira coluna: mídia em cima, informações embaixo */
  .lightbox-overlay { padding: 14px; align-items: flex-start; }
  .lightbox-content { grid-template-columns: 1fr !important; gap: 16px; }
  .lightbox-photo-wrap { padding: 10px 10px 30px; transform: none !important; }
  .lightbox-photo-wrap img,
  .lightbox-photo-wrap video { max-height: 52vh !important; }
  .lightbox-nav { width: 46px; height: 46px; font-size: 26px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
  .lightbox-close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .lightbox-counter { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 12px; }
  .lightbox-info-legenda { font-size: 19px !important; }

  /* ---------- PERFIL DO MEMBRO ---------- */
  .hero-membro { grid-template-columns: 1fr !important; gap: 22px; }
  .hero-membro .polaroid { max-width: 260px; margin: 0 auto; }
  .tabs { gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .tab { flex-shrink: 0; padding: 11px 16px; font-size: 13px; }
  .completude {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 18px 20px !important;
  }
  .photo-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

  /* ---------- DASHBOARD ---------- */
  .stats-row { gap: 18px 26px; padding: 18px 20px; }
  .stat-num { font-size: 24px; }
  .acoes-rapidas { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .acao-card { padding: 16px 14px; }
  .acao-card-titulo { font-size: 15px; }
  .acao-card-desc { font-size: 11px; }
  .recente-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .secao { margin-top: 42px; }
  .secao-header { flex-direction: row; align-items: baseline; gap: 12px; }
  .secao-header h2 { font-size: 22px; }

  /* ---------- PLANOS DE STORAGE ---------- */
  .planos-grid { grid-template-columns: 1fr !important; }

  /* ---------- LIXEIRA ---------- */
  .lixeira-grid { grid-template-columns: 1fr !important; }
  .lixeira-filtros { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .lixeira-chip { flex-shrink: 0; }

  /* ---------- BARRA INFERIOR ---------- */
  .bottomnav {
    display: flex !important;
    /* !important porque o global.css força "position: relative" em
       todo filho direto do body — e a barra precisa ficar fixa. */
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    z-index: 500 !important;
    background: var(--forest);
    border-top: 1px solid rgba(212, 175, 55, 0.22);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.35);
  }
  .bottomnav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px;
    min-height: 58px;
    text-decoration: none;
    color: var(--paper-soft);
    border: 0;
    background: none;
    cursor: pointer;
  }
  .bottomnav-item .ico { font-size: 21px; line-height: 1; }
  .bottomnav-item .rotulo {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 11px;
    letter-spacing: .3px;
  }
  .bottomnav-item.ativo { color: var(--gold); }
  .bottomnav-item.ativo .rotulo { font-weight: 700; }

  /* Botão central de adicionar */
  .bottomnav-add {
    flex: 0 0 auto;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .bottomnav-add button {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--forest);
    border: 3px solid var(--forest);
    font-size: 27px;
    line-height: 1;
    margin-top: -20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .bottomnav-add button:active { transform: scale(.94); }

  /* ---------- FOLHA DE AÇÕES (menu do +) ---------- */
  .acoes-sheet {
    position: fixed !important; inset: 0; z-index: 900 !important;
    background: rgba(10, 28, 24, .72);
    backdrop-filter: blur(4px);
    display: flex; align-items: flex-end;
  }
  .acoes-sheet-caixa {
    width: 100%;
    background: var(--paper);
    border-radius: 20px 20px 0 0;
    padding: 22px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    animation: sobe .2s ease;
  }
  @keyframes sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .acoes-sheet-item {
    display: flex; align-items: center; gap: 14px;
    padding: 15px 12px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid rgba(17, 16, 16, .06);
  }
  .acoes-sheet-item:last-of-type { border-bottom: 0; }
  .acoes-sheet-item:active { background: rgba(193, 127, 74, .1); }
  .acoes-sheet-item .ico { font-size: 24px; width: 32px; text-align: center; }
  .acoes-sheet-item .txt { font-family: var(--font-serif); font-style: italic; font-size: 17px; }
  .acoes-sheet-item .sub {
    display: block; font-size: 12px; color: var(--ink-muted);
    font-style: italic; margin-top: 2px;
  }

  /* ---------- SINO ---------- */
  #sino-dropdown {
    position: fixed !important;
    top: 62px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-height: 68vh !important;
  }
}

/* ===== TELAS BEM PEQUENAS ===== */
@media (max-width: 400px) {
  .headline-hero { font-size: 29px !important; }
  .acervo-grid { column-count: 1 !important; }
  .acoes-rapidas { grid-template-columns: 1fr !important; }
  .photo-grid { grid-template-columns: 1fr !important; }
  .container { padding: 0 14px; }
  .bottomnav-item .rotulo { font-size: 10px; }
}

/* ===== CONVIDADO x ASSINANTE (mobile) ===== */
@media (max-width: 820px) {
  .banner-convidado {
    margin: 0 18px 8px;
    padding: 12px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    text-align: center;
  }
  .banner-convidado .texto { font-size: 13px; }
  .banner-convidado .cta { text-align: center; }

  .bloco-upgrade { padding: 32px 20px 28px; }
  .bloco-upgrade h3 { font-size: 21px; }
  .bloco-upgrade p { font-size: 14px; }
  .bloco-upgrade .emoji { font-size: 36px; }

  .escopo-opcoes { grid-template-columns: 1fr; }
}