/* =========================================================
   Dismas Ministry Page - Hero Section
   ========================================================= */
.dismas-hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-end; /* Posiciona o conteúdo na parte inferior */
    justify-content: center;
    padding-bottom: 80px; /* Mantém a distância correta da margem de baixo */
    background-color: var(--dark-navy, #1a2a3a);
}

/* --- Background com Efeito Cinemático (Aproximação) --- */
.dismas-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 30%; /* Ajuste fino para não cortar a cabeça do frade no mobile */
    z-index: 1;
    /* Zoom suave que traz a sensação de estar se aproximando da cela */
    animation: dismasZoomIn 15s ease-out forwards;
}

@keyframes dismasZoomIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* --- Máscara (Scrim) para os Textos --- */
.dismas-hero-scrim {
    position: absolute;
    inset: 0;
    /* Degrau de cor focado apenas do meio pra baixo para não apagar a foto */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.85) 100%);
    z-index: 2;
}

/* --- Container dos Textos --- */
.dismas-hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* --- Tipografia do Título --- */
.dismas-hero-title {
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.8rem); /* Texto responsivo fluído */
    font-weight: 500;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 0.5rem; /* Pouco espaço para a citação ficar agrupada com o título */
    text-shadow: 0 4px 15px rgba(0,0,0,0.8); /* Sombra para máxima legibilidade */
}

/* --- Tipografia da Citação --- */
.dismas-hero-subtitle {
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* --- Animações Refinadas Específicas para esta Área --- */
.dismas-hero-title.reveal-on-scroll,
.dismas-hero-subtitle.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dismas-hero-title.reveal-on-scroll.revealed,
.dismas-hero-subtitle.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* =========================================================
   Responsividade (Telas Menores)
   ========================================================= */
@media (max-width: 768px) {
    .dismas-hero {
        padding-bottom: 60px; /* Reduz um pouco o espaçamento no celular */
        min-height: 85vh;
    }

    .dismas-hero-scrim {
        /* No celular, o gradiente começa um pouco antes para caso o título quebre em duas linhas */
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.9) 100%);
    }
}

/* =========================================================
   Dismas Ministry Page - Service Section (Sessão 2)
   ========================================================= */
.dismas-service {
    background-color: var(--site-bg, #F8F8F7);
    padding-top: 100px;
    padding-bottom: 80px; /* Respiro abaixo das fotos */
    overflow: hidden;
}

.dismas-service-container {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Área de Textos --- */
.dismas-service-text {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.dismas-service-text h2 {
    font-family: var(--font-display), 'Montreal', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.2rem);
    color: var(--primary-brown-dark, #412f22);
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

.dismas-service-text p {
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(1.05rem, 1.2vw, 1.15rem);
    color: #4a4a4a;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 900px; /* Leve recuo para os parágrafos não ficarem tão largos quanto o título */
    margin-left: auto;
    margin-right: auto;
}

/* --- Caixa Azul de Destaque --- */
.dismas-highlight-box {
    display: inline-block;
    background-color: var(--dark-navy, #122235);
    color: #ffffff;
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(1.05rem, 1.2vw, 1.15rem);
    padding: 16px 35px;
    margin-top: 20px;
    margin-bottom: 60px; /* Empurra a galeria para baixo */
    border-radius: 2px;
    box-shadow: 0 15px 30px rgba(18, 34, 53, 0.15); /* Sombra 3D suave */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: default;
}

/* Efeito Hover na Caixa */
.dismas-highlight-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(18, 34, 53, 0.3);
}

/* --- Galeria Flexível (Focus Depth) --- */
.dismas-service-gallery {
    display: flex;
    width: 100%;
    /* Altura que valoriza as fotos na horizontal */
    height: 450px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.dismas-gallery-item {
    flex: 1; /* Divide exatamente ao meio */
    position: relative;
    overflow: hidden;
    /* Transição suave para o filtro escuro */
    transition: filter 0.5s ease;
}

.dismas-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Lógica da Interação: Quando passa o mouse no CONTAINER, escurece todas */
.dismas-service-gallery:hover .dismas-gallery-item {
    filter: brightness(0.6) grayscale(30%);
}

/* Lógica da Interação: A foto que o mouse está EM CIMA volta a ficar clara e dá zoom */
.dismas-service-gallery .dismas-gallery-item:hover {
    filter: brightness(1) grayscale(0%);
}

.dismas-service-gallery .dismas-gallery-item:hover img {
    transform: scale(1.06);
}

/* =========================================================
   Responsividade (Telas Menores)
   ========================================================= */
@media (max-width: 992px) {
    .dismas-service {
        padding-top: 80px;
    }
    
    .dismas-highlight-box {
        margin-bottom: 50px;
    }
}

@media (max-width: 768px) {
    .dismas-service-gallery {
        flex-direction: column; /* Empilha as imagens */
        height: auto;
    }

    .dismas-gallery-item {
        height: 300px; /* Altura fixa por imagem no celular */
        width: 100%;
    }

    /* Removemos o efeito de escurecer as fotos vizinhas no mobile por causa do touch */
    .dismas-service-gallery:hover .dismas-gallery-item {
        filter: none;
    }
}

/* =========================================================
   Dismas Ministry Page - Story Section (Sessão 3)
   ========================================================= */
.dismas-story {
    position: relative;
    width: 100%;
    min-height: 80vh; /* Altura generosa para imersão na imagem */
    display: flex;
    align-items: center; /* Centraliza o texto verticalmente */
    overflow: hidden;
    background-color: var(--dark-navy, #1a2a3a);
}

/* --- Background com Efeito de Câmera Viva --- */
.dismas-story-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    /* Animação vai e volta infinitamente para dar vida ao background */
    animation: dismasPan 20s ease-in-out infinite alternate;
}

@keyframes dismasPan {
    0% { transform: scale(1.05) translate(0, 0); }
    100% { transform: scale(1.1) translate(-1%, 1%); } /* Movimento muito sutil */
}

/* --- Máscara (Scrim) Lateral --- */
.dismas-story-scrim {
    position: absolute;
    inset: 0;
    /* Gradiente escuro da esquerda para a direita, sumindo onde o frade está */
    background: linear-gradient(to right, rgba(18, 34, 53, 0.95) 0%, rgba(18, 34, 53, 0.75) 45%, rgba(18, 34, 53, 0) 100%);
    z-index: 2;
}

/* --- Container e Textos --- */
.dismas-story-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 80px 20px;
}

.dismas-story-text {
    max-width: 580px; /* Trava o texto para não invadir o frade */
    color: #ffffff;
}

.dismas-story-text p {
    font-family: var(--font-body), 'Google Sans', sans-serif;
    font-size: clamp(1.05rem, 1.2vw, 1.15rem);
    line-height: 1.7;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* Garante leitura máxima */
}

.dismas-story-text p:last-child {
    margin-bottom: 0;
}

/* Customização do reveal-on-scroll para esta seção (Slide-in Lateral) */
.dismas-story-text .reveal-on-scroll {
    opacity: 0;
    transform: translateX(-40px); /* O texto entra deslizando da esquerda */
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dismas-story-text .reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* =========================================================
   Responsividade (Telas Menores)
   ========================================================= */
@media (max-width: 992px) {
    .dismas-story-scrim {
        /* Estica o gradiente um pouco mais para telas médias */
        background: linear-gradient(to right, rgba(18, 34, 53, 0.95) 0%, rgba(18, 34, 53, 0.85) 60%, rgba(18, 34, 53, 0.2) 100%);
    }
}

@media (max-width: 768px) {
    .dismas-story {
        align-items: flex-end; /* Joga o texto para baixo no mobile para não tampar rostos */
        min-height: 70vh;
    }

    .dismas-story-scrim {
        /* Inverte o gradiente: agora vem de baixo para cima */
        background: linear-gradient(to bottom, rgba(18, 34, 53, 0) 0%, rgba(18, 34, 53, 0.7) 40%, rgba(18, 34, 53, 0.95) 100%);
    }

    .dismas-story-text {
        max-width: 100%;
        text-align: center; /* Centraliza no celular */
        padding-top: 40px; 
    }

    /* Muda a animação no mobile para subir em vez de vir da lateral */
    .dismas-story-text .reveal-on-scroll {
        transform: translateY(30px);
    }
    .dismas-story-text .reveal-on-scroll.revealed {
        transform: translateY(0);
    }
}