/* ============================================================
   Refinamentos visuais — Paróquia Santa Teresinha
   Camada de acabamento, carregada depois das demais folhas.
   Ajusta ritmo, profundidade e movimento. Não muda a identidade
   (mesmas cores, mesmas fontes, mesma estrutura de páginas).
   ============================================================ */

:root {
    /* Tokens que o CSS antigo já usava, mas nunca foram declarados.
       Sem eles, regras como .calendar-tab.active simplesmente não pintavam. */
    --primary: var(--primary-color);
    --primary-dark: #6f4a2f;
    --text: var(--text-color);
    --dark-gray: #6f665e;
    --light-gray: rgba(139, 94, 60, 0.18);
    --light-border: rgba(139, 94, 60, 0.14);

    /* Escala de acabamento */
    --radius: 14px;
    --radius-sm: 10px;

    /* Sombras em camadas: contorno curto + difusão longa e suave */
    --shadow: 0 1px 2px rgba(72, 47, 28, 0.05), 0 10px 28px -16px rgba(72, 47, 28, 0.30);
    --shadow-hover: 0 2px 4px rgba(72, 47, 28, 0.06), 0 20px 42px -22px rgba(72, 47, 28, 0.40);

    --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
    --t-fast: 180ms var(--ease);
    --t-base: 260ms var(--ease);
}

/* ── Base ─────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px; /* âncoras não ficam atrás do header fixo */
}

body {
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

img {
    max-width: 100%;
}

/* ── Ritmo vertical ───────────────────────────────────────── */

/* main é flex-column: margens não colapsam e viravam vãos duplos.
   Um gap único dá espaçamento uniforme entre todas as seções. */
main {
    gap: 2.25rem;
}

main > section:not(.banner-carousel) {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── Superfícies (cartões de seção) ───────────────────────── */

.welcome-section,
.schedule-section,
.calendar-section,
.events-section,
.contact-section,
.parish-calendar-section {
    border: 1px solid var(--light-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.welcome-section {
    padding: 2.5rem 2rem;
}

.welcome-section h1 {
    margin-bottom: 0.75rem;
}

.welcome-section p {
    margin: 0;
    color: var(--dark-gray);
    font-size: 1.05rem;
}

.section-title::after {
    height: 2px;
    width: 44px;
    border-radius: 2px;
}

/* ── Header ───────────────────────────────────────────────── */

header {
    border-bottom: 1px solid var(--light-border);
    box-shadow: none;
    transition: box-shadow var(--t-base), padding var(--t-base);
}

/* A classe .scrolled já era aplicada por JS, mas não tinha estilo algum. */
header.scrolled {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    box-shadow: 0 1px 2px rgba(72, 47, 28, 0.05), 0 12px 28px -20px rgba(72, 47, 28, 0.45);
}

header.scrolled .logo-container img {
    width: 62px;
    transition: width var(--t-base);
}

.logo-container img {
    transition: width var(--t-base);
}

/* Navegação um pouco mais compacta para caber em uma linha só */
nav li {
    margin: 0 0.85rem;
}

nav li:last-child {
    margin-right: 0;
}

nav li a {
    font-size: 0.95rem;
    transition: color var(--t-fast);
}

/* nowrap só no desktop — no menu lateral do celular o texto precisa quebrar */
@media (min-width: 769px) {
    nav li a {
        white-space: nowrap;
    }
}

nav li a::after {
    height: 2px;
    border-radius: 2px;
    transition: width var(--t-base);
}

@media (max-width: 1100px) and (min-width: 769px) {
    nav li {
        margin: 0 0.55rem;
    }

    nav li a {
        font-size: 0.88rem;
    }
}

/* ── Links e botões ───────────────────────────────────────── */

a {
    transition: color var(--t-fast), background-color var(--t-fast), opacity var(--t-fast);
}

.btn,
.btn-banner {
    border-radius: var(--radius-sm);
    transition: background-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-base);
}

.btn:hover,
.btn-banner:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn:active,
.btn-banner:active {
    transform: translateY(0);
}

/* ── Cartões ──────────────────────────────────────────────── */

.schedule-card,
.event-card,
.event-card-highlight,
.event-card-small,
.pastoral-card {
    border-radius: var(--radius-sm);
    transition: transform var(--t-base), box-shadow var(--t-base), background-color var(--t-base);
    will-change: transform;
}

/* Elevação mais discreta e com sombra acompanhando o movimento */
.schedule-card:hover,
.event-card:hover,
.event-card-small:hover,
.pastoral-card:hover,
.event-card-link:hover .event-card-highlight {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.schedule-card,
.pastoral-card {
    border: 1px solid var(--light-border);
}

/* Conteúdo centrado: cartões curtos não ficam com um vão embaixo */
.schedule-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.schedule-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}

.schedule-card p {
    margin: 0.25rem 0;
}

.event-date {
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    box-shadow: var(--shadow);
}

/* ── Cartões de destaque da home ──────────────────────────── */

/* Antes: max-height 180px + overflow hidden. O texto era cortado no meio
   da frase e o botão do card ficava fora da área visível. */
.event-highlights {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.event-card-link {
    height: 100%;
}

.event-card-highlight {
    max-height: none;
    height: 100%;
    min-height: 152px;
    margin-bottom: 0;
    border: 1px solid var(--light-border);
    overflow: hidden;
}

/* A imagem não pode ditar a altura do card: fotos em pé esticavam tudo.
   Ela é posicionada de forma absoluta e preenche o espaço que sobrar. */
.event-card-highlight .event-image {
    flex: 0 0 148px;
    position: relative;
    height: auto;
    overflow: hidden;
    border-radius: 0;
}

/* protect-images.js embrulha as fotos num .image-protection-wrapper,
   por isso os dois casos precisam ser cobertos. */
.event-card-highlight .event-image > img,
.event-card-highlight .event-image > .image-protection-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.event-card-highlight .event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card-highlight .event-details {
    padding: 1.05rem 1.15rem;
    gap: 0.45rem;
    justify-content: flex-start;
}

.event-card-highlight .event-details h3 {
    font-size: 1.08rem;
    margin-bottom: 0;
}

/* Descrição limitada a 3 linhas: corte limpo, sem frase truncada no meio.
   flex-grow precisa ser 0, senão o texto estica e escapa do recorte. */
.event-card-highlight .event-details p {
    margin: 0;
    flex-grow: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--dark-gray);
}

/* O botão do card era texto branco sobre fundo branco (fundo forçado a
   transparent por uma regra !important antiga) — ficava invisível. */
.event-card-highlight .event-link {
    align-self: flex-start;
    margin-top: auto;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    font-size: 0.85rem;
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    transition: background-color var(--t-fast), transform var(--t-fast);
}

.event-card-link:hover .event-link {
    background-color: var(--accent-color) !important;
}

/* ── Abas da programação ──────────────────────────────────── */

.calendar-tabs {
    gap: 0.25rem;
    border-bottom: 1px solid var(--light-border);
}

.calendar-tab {
    color: var(--dark-gray);
    border-bottom: 3px solid transparent;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}

.calendar-tab:hover {
    color: var(--primary-color);
    background-color: rgba(139, 94, 60, 0.05);
}

.calendar-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--accent-color);
}

.calendar-content.active {
    animation: painel-entra 320ms var(--ease) both;
}

@keyframes painel-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Carrossel ────────────────────────────────────────────── */

.banner-carousel {
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* O wrapper do protect-images é inline-block: a linha de texto reservava
   ~7px de descida abaixo da imagem, virando uma faixa clara no banner. */
.carousel-slide {
    font-size: 0;
    line-height: 0;
}

.carousel-slide > img,
.carousel-slide > .image-protection-wrapper {
    display: block;
    width: 100%;
}

.carousel-btn {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--t-base), background-color var(--t-fast);
}

.carousel-btn.prev { left: 14px; }
.carousel-btn.next { right: 14px; }

.banner-carousel:hover .carousel-btn,
.carousel-btn:focus-visible {
    opacity: 1;
}

.indicator {
    width: 9px;
    height: 9px;
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.indicator.active {
    transform: scale(1.25);
}

/* Banner único: setas e indicador não fazem sentido */
.carousel-container:not(:has(.carousel-slide + .carousel-slide)) .carousel-controls {
    display: none;
}

/* ── Calendário ───────────────────────────────────────────── */

.calendar-nav-btn {
    border-radius: 50%;
    transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.calendar-nav-btn:hover {
    transform: scale(1.08);
}

/* ── Páginas de evento ────────────────────────────────────── */

.evento-header {
    border-bottom-color: var(--light-border);
}

.evento-header h1 {
    margin-bottom: 1rem;
}

.breadcrumbs {
    color: var(--dark-gray);
}

.breadcrumbs a {
    transition: color var(--t-fast);
}

.galeria-item,
.galeria-foto {
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.galeria-item:hover,
.galeria-foto:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--shadow-hover);
}

/* Fotos aparecem suavemente conforme carregam (só com JS ativo) */
.js .galeria-foto img,
.js .galeria-item img {
    opacity: 0;
    transition: opacity 420ms var(--ease);
}

.js .galeria-foto img.is-loaded,
.js .galeria-item img.is-loaded {
    opacity: 1;
}

/* ── Rodapé ───────────────────────────────────────────────── */

/* Só os links de lista: os ícones sociais são flex e não podem virar bloco */
.footer-column ul a {
    display: inline-block;
    transition: opacity var(--t-fast), transform var(--t-fast);
}

.footer-column ul a:hover {
    transform: translateX(2px);
}

/* Ícones sociais: glifo centrado e ocupando melhor o círculo */
.social-links {
    gap: 0.75rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.25rem;
    line-height: 1;
    transition: background-color var(--t-fast), transform var(--t-fast);
}

.social-links a i {
    display: block;
    line-height: 1;
}

.social-links a:hover {
    transform: translateY(-2px);
}

/* ── Foco visível (acessibilidade / teclado) ──────────────── */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Entrada suave das seções ao rolar ────────────────────── */

.reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
}

.reveal-on [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* Impressão nunca pode esconder conteúdo */
@media print {
    .reveal-on [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── Respeita quem prefere menos movimento ────────────────── */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal-on [data-reveal] {
        opacity: 1;
        transform: none;
    }
}