/**
 * mobile-responsiveness.css — SCJ BRM
 * Responsividade global e refinada baseada na filosofia Apple Design.
 * Tipografia fluida, Dynamic Type floor, Safe Areas (iPhone/Android),
 * touch targets generosos (44px HIG) e ritmo espacial por bandas.
 */

/* ═══════════════════════════════════════════════════════════════
   0. SAFE AREAS & VIEWPORT (Apple Standards)
   ═══════════════════════════════════════════════════════════════ */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* ── iOS Auto-Zoom: inputs com fonte >= 16px não disparam zoom no foco ──
   Escopado a touch (<= 1023px) e com especificidade elevada para vencer
   utilities como .text-xs (que também usam !important) no mesmo input. */
@media (max-width: 1023px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   1. FONT FLOORS (Dynamic Type Floor)
   Textos utilitários do Tailwind abaixo do legível em todos os
   breakpoints (90% do público é mobile, faixa etária ampla).
   !important necessário para vencer as utilities do Tailwind CDN.
   ═══════════════════════════════════════════════════════════════ */
[class~="text-[8px]"],
[class~="text-[9px]"],
[class~="text-[10px]"] {
  font-size: 12px !important;
}

[class~="text-[11px]"] {
  font-size: 13px !important;
}

.text-xs {
  font-size: 13px !important;
}

/* Módulos Santo do Dia / Liturgia — metadados e leituras com floor de
   leitura confortável (público predominante idoso): sobe os estilos
   utilitários de 12–13px para 14px dentro desses módulos. */
@media (max-width: 639px) {
  #section-santo-hero [class~="text-[8px]"],
  #section-santo-hero [class~="text-[9px]"],
  #section-santo-hero [class~="text-[10px]"],
  #section-santo-hero [class~="text-[11px]"],
  #card-oracao-santo [class~="text-[8px]"],
  #card-oracao-santo [class~="text-[9px]"],
  #card-oracao-santo [class~="text-[10px]"],
  #card-oracao-santo [class~="text-[11px]"],
  #liturgia-reader-container [class~="text-[8px]"],
  #liturgia-reader-container [class~="text-[9px]"],
  #liturgia-reader-container [class~="text-[10px]"],
  #liturgia-reader-container [class~="text-[11px]"] {
    font-size: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   2. GLOBAL MOBILE BASE (< 640px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {

  /* ── Typography Fluida ── */
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  h1, .font-heading.text-4xl, .font-heading.text-5xl, .font-heading.text-6xl {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em;
  }

  h2, .font-heading.text-2xl, .font-heading.text-3xl {
    font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }

  h3, .font-heading.text-xl {
    font-size: clamp(1.15rem, 4.5vw, 1.45rem) !important;
    line-height: 1.3 !important;
  }

  /* ── Containers: respiro generoso nas bordas ── */
  .max-w-6xl, .max-w-5xl, .max-w-7xl, .max-w-4xl, .max-w-3xl {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  /* ── Grids vocacionais (3 colunas) ──
     A seção já provê o respiro lateral; o padding de 1.25rem herdado de
     .max-w-4xl/.max-w-5xl duplicaria o recuo e estrangulava as colunas que
     abrigam os labels (DEHONIANOS, LEIGOS DEHONIANOS, ...). Compensa-se com
     margem negativa p/ o grid crescer até as bordas da banda e zera-se o
     padding herdado (espaço é devolvido às colunas, não às bordas). */
  [class~="grid-cols-3"][class~="max-w-4xl"],
  [class~="grid-cols-3"][class~="max-w-5xl"] {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 0;
    padding-right: 0;
  }

  /* ── Imagens e Cards Sem Distorção ── */
  img {
    max-width: 100%;
    height: auto;
  }

  .local-card img,
  .obra-card img,
  .noticia-card img,
  .card-img {
    width: 100%;
    object-fit: cover !important;
    object-position: center center;
  }

  /* Retratos de religiosos e santos: foco superior */
  .religioso-card img,
  .santo-card img,
  [data-portrait] img {
    object-position: center top !important;
  }

  /* ── SVGs e Mapas ── */
  svg {
    max-width: 100%;
    height: auto;
  }

  /* ── Scroll Horizontal Otimizado ── */
  [class*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  [class*="overflow-x"]::-webkit-scrollbar {
    display: none;
  }

  /* ── CTAs Pill no Mobile: compactos para não empilhar ──
     Em telas < 640px os botões compartilhados (rf-btn / apple) trazem
     padding 12px 26px; com isso ficam largos demais e a flex-wrap
     empilha as linhas, alongando o hero ("botões caindo"). Reduz-se o
     respiro mantendo o alvo tátil mínimo de 44px (Apple HIG). */
  .rf-btn-primary,
  .rf-btn-secondary,
  .apple-pill-btn,
  .apple-ghost-btn {
    padding: 11px 18px !important;
    font-size: 13px !important;
    min-height: 44px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   3. TOUCH TARGETS ACESSÍVEIS (Apple HIG 44px)
   Mobile + Tablet touchscreen (<= 1023px). Extende o padrão 44px
   para nav, breadcrumb, ações de card, redes sociais e CTAs.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Botões e controles interativos genéricos */
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  .dehon-btn-primary,
  .dehon-btn-secondary,
  .filtro-btn,
  .tab-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Header & Navigation */
  #main-header button, #main-header a {
    min-height: 44px;
  }

  #mobile-menu-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Mobile menu links touch targets */
  #mobile-menu a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    padding-block: 8px !important;
  }

  /* Breadcrumbs — links de navegação (Início, categoria, ...) */
  nav.text-xs a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 10px;
    padding-inline: 2px;
  }

  /* Ações de card: "Ler Matéria / Ler Homilia / Ler Artigo" + CTAs ?id=.
     Exclui o card de destaque da home: ele usa min-h-[340px] (álbum absoluto,
     sem conteúdo em fluxo) e o min-height:44px o colapsaria para 44px. */
  a[href*="?id="]:not(#noticia-destaque-card) {
    min-height: 44px;
  }

  /* Notícia em destaque: garante a altura mínima independente do JIT do
     Tailwind CDN (o href ?id= é setado em runtime pelo main.js). */
  #noticia-destaque-card {
    min-height: 340px;
  }

  /* Barra de leitura/compartilhamento (A-, A+, WhatsApp, FB, IG, ...) */
  a[title^="Compartilhar"],
  button[title^="Compartilhar"],
  button[title^="Mais opções"],
  button[title^="Aumentar fonte"],
  button[title^="Diminuir fonte"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* CTA "Ir para a Ouvidoria" e afins */
  main a[href*="ouvidoria"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Rodapé — redes sociais (Instagram, Facebook, YouTube) */
  #footer-social-links a {
    min-height: 44px;
    padding-block: 12px;
  }

  /* Barra de leitura/compartilhamento (A-, A+, share): permite quebra de linha */
  div.bg-slate-50.flex.flex-shrink-0 {
    flex-wrap: wrap;
    max-width: 100%;
  }

  /* Cabeçalho de leitura (liturgia, santo-do-dia): estola + data + título +
     toolbar não cabem na mesma linha → wrap apenas quando necessário. */
  .flex.items-start.justify-between.gap-4 {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  /* Linha do tempo da Província (história): main.js re-popula o track com
     cada ano do cronologia (limite ~23 anos); em telas touch o conteúdo
     excede a viewport → rolagem horizontal suave dentro do track. */
  .prov-timeline-track {
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .prov-timeline-track::-webkit-scrollbar {
    display: none;
  }

  /* Defensiva: setas do calendário da Agenda (w-11 já aplicado no HTML).
     Garante o alvo tátil mínimo 44x44 mesmo se o JIT reduzir a classe. */
  #agenda-calendar nav button {
    min-width: 44px;
  }

  /* Scroll-snap gentil para barras horizontais tocáveis (abas de filtros
     e linhas do tempo): encaixe suave sem travamento (proximity). */
  #category-tabs,
  .prov-timeline-track {
    scroll-snap-type: x proximity;
    scroll-padding-inline: 1rem;
  }
  #category-tabs > *,
  .prov-timeline-track > * {
    scroll-snap-align: start;
  }
}

/* ═══════════════════════════════════════════════════════════════
   4. MAPA DE PROVÍNCIAS — MOBILE (< 640px)
   No mobile os estados SVG medem ~30–60px (muito abaixo do alvo tátil
   de 44px) e a interação depende de hover. Esconde o mapa SVG e mantém
   os cards de contato (com WhatsApp ≥44px) como interface primária.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  .mp-map-shell {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   4. TABLET & IPAD (640px – 1023px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 1023px) {
  .max-w-6xl, .max-w-5xl, .max-w-7xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   5. TOUCH FEEDBACK & HOVER (Apple HIG)
   ═══════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  /* No touch: feedback suave ao tocar */
  .obra-card:active,
  .local-card:active,
  .dehon-btn-primary:active,
  .dehon-btn-secondary:active {
    transform: scale(0.98);
    transition: transform 0.15s ease;
  }
}

@media (hover: hover) and (pointer: fine) {
  .obra-card:hover {
    transform: translateY(-4px);
  }
  .local-card:hover {
    transform: translateY(-4px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   6. REDUCED MOTION (Acessibilidade Apple)
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero-char {
    transform: none !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   7. MOBILE MENU DRAWER (Smooth Glass Transition)
   ═══════════════════════════════════════════════════════════════ */
#mobile-menu:not(.open) {
  display: none !important;
}

#mobile-menu {
  transition: max-height 0.4s cubic-bezier(0.19,1,0.22,1),
              opacity 0.35s ease;
}

/* Drawer móvel como overlay rolável: o menu (1650px+) NÃO pode crescer o
   header sticky além da viewport — conteúdo inferior ficaria inalcançável.
   Posiciona sob a barra (80px), limita à altura da viewport e rola interno. */
@media (max-width: 1023px) {
  #mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
  }
  #mobile-menu::-webkit-scrollbar {
    display: none;
  }
}

#mobile-menu-btn i {
  transition: transform 0.3s cubic-bezier(0.19,1,0.22,1);
}

@media (min-width: 1024px) {
  #mobile-menu { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   8. HIGH DPI / RETINA DISPLAYS
   ═══════════════════════════════════════════════════════════════ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img {
    image-rendering: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   9. LAYOUT EDITORIAL DE NOTÍCIAS (2 COLUNAS: 70% MATÉRIA | 30% SIDEBAR)
   ═══════════════════════════════════════════════════════════════ */
.news-layout-2col,
.news-editorial-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  width: 100% !important;
  align-items: stretch !important;
}

.news-col-left {
  display: none !important;
}

.news-main-article,
.news-col-center {
  width: 100% !important;
  min-width: 0 !important;
}

.news-main-article.hidden,
.news-col-center.hidden {
  display: none !important;
}

.news-sidebar,
.news-col-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  width: 100% !important;
}

@media (min-width: 1024px) {
  .news-layout-2col,
  .news-editorial-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 2.5rem !important;
    align-items: start !important;
  }

  .news-main-article,
  .news-col-center {
    grid-column: 1 / 2 !important;
    grid-row: 1 !important;
  }

  .news-sidebar,
  .news-col-right {
    grid-column: 2 / 3 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 6.5rem !important;
  }
}

@media (min-width: 1280px) {
  .news-layout-2col,
  .news-editorial-grid {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 3rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   11. EDITORIAL ARTICLE TYPOGRAPHY & STANDARDIZATION (.article-content)
   Padrão editorial nobre: Cinzel para títulos, General Sans para corpo,
   ritmo vertical equilibrado, alinhamento natural, destaques e citações.
   ═══════════════════════════════════════════════════════════════ */
.article-content {
  line-height: 1.85;
  font-size: 1.0625rem;
  color: #1e293b;
  font-family: 'General Sans', 'Plus Jakarta Sans', sans-serif;
  text-wrap: pretty;
  word-break: break-word;
}

.article-content p {
  margin-top: 0;
  margin-bottom: 1.35rem;
  color: #1e293b;
  line-height: 1.85;
}

.article-content p:last-child {
  margin-bottom: 0;
}

.article-content h1,
.article-content h2 {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: #0c3a4a;
  margin-top: 2.25rem;
  margin-bottom: 0.95rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.article-content h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.18rem;
  font-weight: 600;
  color: #125566;
  margin-top: 1.85rem;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.article-content h4,
.article-content h5,
.article-content h6 {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0c3a4a;
  margin-top: 1.5rem;
  margin-bottom: 0.6rem;
}

.article-content strong,
.article-content b {
  font-weight: 700;
  color: #0c3a4a;
}

.article-content em,
.article-content i {
  font-style: italic;
}

.article-content blockquote {
  border-left: 4px solid #125566;
  background: rgba(240, 253, 250, 0.65);
  padding: 1.25rem 1.5rem;
  margin: 1.85rem 0;
  color: #334155;
  font-style: italic;
  border-radius: 0 1.25rem 1.25rem 0;
  font-size: 1.125rem;
  line-height: 1.75;
}

.article-content blockquote p {
  margin-bottom: 0.75rem;
  font-style: italic;
}

.article-content blockquote p:last-child {
  margin-bottom: 0;
}

.article-content ul {
  list-style-type: disc;
  margin-left: 1.5rem;
  margin-bottom: 1.35rem;
  padding-left: 0.5rem;
}

.article-content ol {
  list-style-type: decimal;
  margin-left: 1.5rem;
  margin-bottom: 1.35rem;
  padding-left: 0.5rem;
}

.article-content li {
  margin-bottom: 0.45rem;
  line-height: 1.75;
}

.article-content a {
  color: #125566;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.15s ease-in-out;
}

.article-content a:hover {
  color: #0c3a4a;
}

.article-content img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
  margin: 2rem auto;
  display: block;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.article-content hr {
  border: 0;
  border-top: 1px solid rgba(203, 213, 225, 0.8);
  margin: 2.25rem 0;
}