/* ==========================================================
   SANCTUARY 2.0 — MOBILE-FIRST OVERRIDES (≤767px)
   Garante UX app-like no celular: bottom tab bar, gestos, FAB
   ========================================================== */

@media (max-width: 767px) {
  :root {
    --header-h: 60px;
    --tabbar-h: calc(64px + var(--safe-bottom));
  }

  /* ===== ESPAÇAMENTOS MAIS COMPACTOS ===== */
  .hero { padding: var(--s-5) var(--s-4); }

  .collection,
  .life,
  .prayer-requests {
    padding: var(--s-6) var(--s-4);
    /* Dar espaço para o tabbar fixo não sobrepor conteúdo */
    padding-bottom: calc(var(--s-6) + var(--tabbar-h));
  }

  .section-title {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }

  .section-header { margin-bottom: var(--s-5); }

  /* ===== HERO MOBILE EMPILHADO ===== */
  .hero__grid {
    gap: var(--s-5);
  }

  /* Botões do hero: empilhados e com texto visível */
  .hero__cta {
    gap: var(--s-2);
    flex-direction: column;
  }
  .hero__cta .btn {
    width: 100%;
    min-width: 0;
    padding: var(--s-3) var(--s-4);
    font-size: 0.85rem;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }

  /* Seletor de data: empilhado e organizado */
  .hero__date {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-2);
    padding: var(--s-3);
    border-radius: var(--r-lg);
    max-width: 100%;
  }
  .hero__date label {
    font-size: 0.85rem;
    justify-content: center;
  }
  .hero__date select {
    width: 100%;
    padding: var(--s-2) var(--s-3);
    font-size: 0.9rem;
    text-align: center;
  }

  /* ===== WIDGETS MOBILE — Grid vertical, 1 coluna ===== */
  .widgets {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--s-3) !important;
    padding: 0 var(--s-4) var(--s-4) !important;
    overflow: visible !important;
    max-width: 100% !important;
  }

  .widget {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    scroll-snap-align: none !important;
  }

  /* ===== COLEÇÃO: 1 COLUNA FLUIDA ===== */
  .mosaic-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: var(--s-4) !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Remover todos os spans do grid no mobile */
  .mosaic-grid > * {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Cards de oração no mobile */
  .prayer-card {
    min-height: 180px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .prayer-card--featured {
    min-height: 280px;
  }

  /* ===== BUSCA: COLÁPSA EM ICONE ===== */
  .search-bar { margin-bottom: var(--s-5); }

  /* ===== MODAL: TELA INTEIRA ===== */
  .prayer-modal__panel,
  .fav-modal__panel,
  .timeline-modal__panel {
    border-radius: var(--r-md) var(--r-md) 0 0;
    max-height: 92vh;
    padding: var(--s-6) var(--s-4);
    align-self: flex-end;
    animation: slideUpSheet 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  @keyframes slideUpSheet {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  .prayer-modal,
  .fav-modal,
  .timeline-modal {
    align-items: flex-end;
  }

  /* ===== TIMELINE: GRID RESPONSIVO LIMPO ===== */
  .timeline__track {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3) var(--s-2);
    padding: var(--s-2);
  }
  .timeline__item {
    padding: var(--s-3) var(--s-2);
  }
  .timeline__pin { width: 48px; height: 48px; font-size: 1.1rem; }
  .timeline__title { font-size: 0.8rem; }

  /* ===== GARANTIA ANTI-SCROLL HORIZONTAL ===== */
  html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* ===== BACK-TO-TOP: ENCAIXADO NO CANTO DIREITO ===== */
  .back-to-top {
    bottom: calc(var(--s-3) + var(--tabbar-h) + var(--safe-bottom));
    right: var(--s-3);
    left: auto;
    width: 44px;
    height: 44px;
    font-size: 0.9rem;
    z-index: calc(var(--z-fab) + 1);
  }

  /* ===== TOAST: ACIMA DO TABBAR ===== */
  .toast {
    bottom: calc(var(--s-5) + var(--tabbar-h) + var(--safe-bottom));
    font-size: 0.85rem;
  }

  /* ===== FORM PEDIDOS ===== */
  .prayer-form button { width: 100%; }

  /* ===== HEADER MOBILE: OCULTA BRAND SUBTÍTULO ===== */
  .brand__sub { display: none; }
  .brand__name { font-size: 0.95rem; }
  .brand__icon { width: 36px; height: 36px; font-size: 0.95rem; }
}

/* ===== TABLET PAISAGEM (768–1199px) ===== */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  .hero { min-height: 60vh; }
  .mosaic-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ===== TABLET RETRATO ===== */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  .hero__cta .btn { width: 100%; }
  .mosaic-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== SAFE AREA iOS ===== */
@supports (padding: max(0px)) {
  .site-main {
    padding-top: max(var(--header-h), calc(var(--header-h) + var(--safe-top)));
  }
  .tabbar {
    padding-bottom: max(var(--safe-bottom), 0px);
  }
}

/* ===== TELAS MUITO PEQUENAS (≤360px) ===== */
@media (max-width: 360px) {
  .hero__title { font-size: 1.75rem; }
  .filter-pills { gap: 6px; }
  .pill { font-size: 0.8rem; padding: 6px 12px; }
  .timeline__track { grid-template-columns: 1fr; }
}

/* ===== HOVER STATES APENAS EM DISPOSITIVOS COM HOVER ===== */
@media (hover: none) {
  .prayer-card:hover { transform: none; }
  .icon-btn:hover { transform: none; }
}