@import url('/fonts/fonts.css');

/* ==========================================================================
   RAFERO DESIGN SYSTEM — APPLE HIG INSPIRAÇÃO (HÍBRIDO SCJ)
   Filosofia de Espaçamento, Tipografia, Raios e Elementos de Interface.
   
   Diretrizes Principais:
   - Tipografia: Escala rigorosa Rafero (--text-micro a --text-display).
   - Exceções Mantidas: Logo SCJ (tamanho e posição originais),
     Botões Quick Cards do Hero (gradiente clássico e altura original) e
     Cards de Notícias (layout compacto original).
   ========================================================================== */

:root {
  /* Typography — Scale */
  --text-micro: 12px;
  --leading-micro: 16px;
  --tracking-micro: -0.12px;

  --text-caption: 14px;
  --leading-caption: 18px;
  --tracking-caption: -0.224px;

  --text-body-sm: 17px;
  --leading-body-sm: 25px;
  --tracking-body-sm: -0.374px;

  --text-body: 21px;
  --leading-body: 29px;
  --tracking-body: 0.231px;

  --text-body-lg: 28px;
  --leading-body-lg: 32px;
  --tracking-body-lg: 0.196px;

  --text-subheading: 32px;
  --leading-subheading: 36px;
  --tracking-subheading: 0.128px;

  --text-heading-sm: clamp(26px, 3vw, 34px);
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.01em;

  --text-heading: clamp(30px, 3.5vw, 40px);
  --leading-heading: 1.2;
  --tracking-heading: -0.015em;

  --text-heading-lg: clamp(34px, 4vw, 48px);
  --leading-heading-lg: 1.15;
  --tracking-heading-lg: -0.02em;

  --text-display: clamp(38px, 4.5vw, 54px);
  --leading-display: 1.12;
  --tracking-display: -0.025em;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-76: 76px;
  --spacing-80: 80px;
  --spacing-120: 120px;
  --spacing-144: 144px;

  /* Border Radius (Apple-style Squircle Smoothness) */
  --radius-lg: 10px;
  --radius-3xl: 28px;
  --radius-3xl-2: 32px;
  --radius-3xl-3: 36px;
  --radius-full: 980px;
  --radius-full-2: 999px;
  --radius-full-3: 9999px;
}

/* ==========================================================================
   TIPOGRAFIA — FILOSOFIA (Apple DESIGN.md, aplicada SEM trocar fontes)
   - Peso: títulos >= 600 (Cinzel bold) · corpo >= 400 (General Sans regular).
     Nunca abaixo de 400 no corpo nem de 600 em títulos.
   - Leading: apertado em display (1.04–1.07), aberto em corpo (1.38–1.47).
     O contraste de leading cria hierarquia sem saltos de tamanho.
   - Tracking: negativo em títulos grandes (tight), ligeiramente positivo
     em títulos médios (warm), negativo em corpo (crisp). Escala abaixo.
   - Nunca centralizar parágrafos de corpo: títulos podem centralizar,
     mas texto de apoio fica alinhado à esquerda.
   - text-wrap: balance em títulos (aplicado via h1/h2/h3 no index.html).
   ========================================================================== */

/* Numerais tabulares e alinhados (lnum, tnum) para datas, horários, contagens e valores */
body, .font-heading {
  font-feature-settings: "lnum" 1, "tnum" 1;
  font-variant-numeric: lining-nums tabular-nums;
}

*, ::before, ::after {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ==========================================================================
   TIPOGRAFIA RAFERO
   ========================================================================== */

.rf-text-micro {
  font-size: var(--text-micro);
  line-height: var(--leading-micro);
  letter-spacing: var(--tracking-micro);
}

.rf-text-caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
}

.rf-text-body-sm {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
}

.rf-text-body {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.rf-text-body-lg {
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: var(--tracking-body-lg);
}

.rf-text-subheading {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

.rf-text-heading-sm {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

.rf-text-heading {
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

.rf-text-heading-lg {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
}

.rf-text-display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

/* ==========================================================================
   RAIOS DE CURVATURA APPLE (SQUIRCLING)
   ========================================================================== */

.rf-radius-lg { border-radius: var(--radius-lg); }
.rf-radius-3xl { border-radius: var(--radius-3xl); }
.rf-radius-3xl-2 { border-radius: var(--radius-3xl-2); }
.rf-radius-3xl-3 { border-radius: var(--radius-3xl-3); }
.rf-radius-full { border-radius: var(--radius-full-2); }

/* ==========================================================================
   MICRO-INTERAÇÕES & EFEITOS APPLE
   ========================================================================== */

.rf-glass {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.rf-glass-dark {
  background: #0a2e3b;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.rf-card {
  border-radius: var(--radius-3xl);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.rf-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -6px rgba(12, 58, 74, 0.16);
}

.rf-card:hover img {
  transform: none !important;
}

/* Proteção global anti-achatamento de fotos em cards */
.rf-card img,
.local-card img,
.obra-card img,
.noticia-card img,
.glass-card img,
[class*="card"] img {
  max-width: 100%;
  object-fit: cover !important;
}

/* Botões com Filosofia Apple (Pill-shaped) */
.rf-btn-primary,
.apple-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  background-color: #125566;
  color: #ffffff;
  padding: 12px 26px;
  font-family: 'General Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px 0 rgba(18, 85, 102, 0.28);
  border: 1.5px solid transparent;
  text-decoration: none;
}

/* Botão Azul -> Fundo Branco, Letras Azuis (#0c3a4a) */
.rf-btn-primary:hover,
.apple-pill-btn:hover {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0c3a4a !important;
  border-color: #0c3a4a !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(12, 58, 74, 0.3);
}

.rf-btn-primary:hover *,
.apple-pill-btn:hover * {
  color: #0c3a4a !important;
  fill: #0c3a4a !important;
}

.rf-btn-primary:active,
.apple-pill-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 0.06s !important;
}

.rf-btn-secondary,
.apple-ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 9999px;
  background-color: transparent;
  color: #0c3a4a;
  border: 1.5px solid rgba(12, 58, 74, 0.3);
  padding: 12px 26px;
  font-family: 'General Sans', 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

/* Botão Branco/Outline -> Fundo Azul (#0c3a4a), Letras Brancas */
.rf-btn-secondary:hover,
.apple-ghost-btn:hover {
  background-color: #0c3a4a !important;
  border-color: #0c3a4a !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -4px rgba(12, 58, 74, 0.35);
}

.rf-btn-secondary:hover *,
.apple-ghost-btn:hover * {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.rf-btn-secondary:active,
.apple-ghost-btn:active {
  transform: scale(0.97) !important;
  transition-duration: 0.06s !important;
}

/* Links Editoriais com Seta Direcional */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #125566;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.link-arrow i,
.link-arrow span.arrow {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.link-arrow:hover {
  color: #17495f;
}

.link-arrow:hover i,
.link-arrow:hover span.arrow {
  transform: translateX(4px);
}

/* ==========================================================================
   CONTEÚDO RICO DO CMS (ESTILO WORD) — caixas, citações, títulos e divisores
   Aplicado nos containers .ics-conteudo (ex.: página Caminho da Santidade).
   ========================================================================== */
.ics-conteudo h1 { font-size: 1.75rem; line-height: 1.3; }
.ics-conteudo h2 { font-size: 1.4rem; line-height: 1.35; }
.ics-conteudo h3 { font-size: 1.15rem; line-height: 1.4; }
.ics-conteudo h1, .ics-conteudo h2, .ics-conteudo h3 {
  font-family: 'Cinzel', serif;
  color: #0c3a4a;
  font-weight: 700;
  margin: 1.4em 0 0.5em;
}
.ics-conteudo p { font-size: 0.95rem; line-height: 1.75; }
.ics-conteudo img {
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(12, 58, 74, 0.12);
  margin: 1.5rem auto;
  display: block;
  max-width: 100%;
  height: auto;
}
.ics-conteudo blockquote {
  margin: 1.25rem 0;
  padding: 1.1rem 1.4rem;
  border-left: 4px solid #0c3a4a;
  background: #f0fdfa;
  border-radius: 0.75rem;
  font-style: italic;
  color: #1e3a4a;
}
.ics-conteudo hr {
  border: none;
  margin: 1.75rem 0;
  height: 1px;
  background: linear-gradient(to right, rgba(12, 58, 74, 0), #0c3a4a, rgba(12, 58, 74, 0));
}

/* ==========================================================================
   MODELOS EDITORIAIS DE NOTÍCIAS (H1, H2, H3 E CITAÇÕES DOS GRANDES CENTROS)
   Padrão Dehoniano / Apple HIG: The New York Times, The Atlantic, BBC, Vatican
   ========================================================================== */
.editorial-heading-nyt,
.editorial-heading-atlantic,
.editorial-heading-bbc,
.editorial-heading-apple,
.editorial-heading-dehon,
.editorial-heading-bento {
  margin-top: 1.75rem;
  margin-bottom: 1.25rem;
  display: block;
}

.editorial-quote-magazine,
.editorial-quote-bbc,
.editorial-quote-author,
.editorial-quote-dehon,
.editorial-quote-pullquote,
.editorial-quote-pastoral {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: block;
}