@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

/* style.css - Versão Final Unificada */

html {
    scroll-behavior: smooth;
}

/* --- NAV & UI GLOBAL --- */
.nav-link {
    color: #475569; /* text-slate-600 */
    font-weight: 600;
    transition: color 0.2s;
    position: relative;
    cursor: pointer;
}

.nav-link:hover, .nav-link.active {
    color: #1e40af; /* text-brand-blue */
}

/* Indicador de página ativa (sublinhado sutil) */
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1e40af;
}

/* Hero Home Overlay */
.hero-overlay {
    background: linear-gradient(to bottom, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.4));
}

/* --- PADRÃO DE PÁGINAS INTERNAS (Banners) --- */
.page-header {
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    background-color: #0f172a; 
    
    height: 40vh; 
    min-height: 280px;
    max-height: 400px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
    margin-top: 80px; 
    text-align: center;
    padding: 0 1rem;
}

.page-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    color: white;
    text-shadow: 0 4px 6px rgba(0,0,0,0.3);
    line-height: 1.1;
    font-size: clamp(2rem, 5vw, 4rem); 
    margin-bottom: 1rem;
}

.page-nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
}

.page-nav-links a {
    color: #cbd5e1;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s;
}
.page-nav-links a:hover {
    color: white;
    text-decoration: underline;
}

/* --- ITENS DE MINISTÉRIO --- */
.ministry-item {
    text-align: center;
    padding: 4rem 1.5rem;
    max-width: 800px;
    margin: 0 auto;
    border-bottom: 1px solid #e2e8f0;
}
.ministry-item:last-child { border-bottom: none; }

.ministry-logo {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    color: #0f172a;
    transition: transform 0.3s;
}

.ministry-item:hover .ministry-logo {
    transform: scale(1.1);
    color: #1e40af;
}

.split {
    perspective: 400px;
}
.split div {
    display: inline-block; 
}

@media (max-width: 640px) {
    .page-header {
        margin-top: 70px; 
        min-height: 220px;
    }
}

/* --- UTILITÁRIOS PARA O CARROSSEL E SCROLL --- */
.hide-scrollbar {
    -ms-overflow-style: none; 
    scrollbar-width: none;  
}

.hide-scrollbar::-webkit-scrollbar {
    display: none; 
}


/* ==========================================================
   EFEITOS DE PONTILHADOS/IMAGENS CARROSSEL 
   Adaptado para funcionar sem conflitos com o body
   ========================================================== */

.img-box {
    position: relative;
    cursor: crosshair;
    /* Separar as propriedades garante que o Tailwind não anule a imagem */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}

.img-box::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: blur(1px) brightness(1.2) contrast(0.8);
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 2; /* Mantém os pontos em cima da imagem */
}

.img-box:hover::before {
    opacity: 0;
}

/* Imagem 1 - Culto Manhã */
.dots1 {
    /* Usei %20 para representar o espaço, mas o ideal é você renomear 
       o arquivo na Hostinger para "culto_manha.jpg" e alterar aqui depois */
    background-image: url('https://igrejabase.com/img/culto_manha.jpg'); 
}
.dots1::before {
    background-image: radial-gradient(circle, rgba(255,255,255,0.4) 10%, transparent 0);
    background-size: 15px 15px;
    background-position: center;
    background-repeat: repeat;
}

/* Imagem 2 - Culto Noite */
.dots2 {
    background-image: url('https://igrejabase.com/img/culto_noite.jpg');
}
.dots2::before {
    background-image: 
      radial-gradient(circle, rgba(255,255,255,0.4) 7%, transparent 0), 
      radial-gradient(circle, rgba(255,255,255,0.4) 7%, transparent 0);
    background-size: 20px 20px;
    background-position: 10px 10px, 0 0;
    background-repeat: repeat;
}

/* Imagem 3 - Células */
.dots3 {
    /* Corrigido para o caminho relativo correto público */
    background-image: url('https://igrejabase.com/img/celulas.jpg');
}
.dots3::before {
    --size: 16px;
    background-image: 
      radial-gradient(circle, rgba(255,255,255,0.3) 15%, transparent 0),
      conic-gradient(from 270deg at bottom 1px right 1px, transparent 25%, rgba(255,255,255,0.1) 0);
    background-size: var(--size) var(--size);
    background-position: calc(50% - var(--size) / 2 - 0.5px) calc(50% - var(--size) / 2 - 0.5px), center;
    background-repeat: repeat;
}