/* ============================================
   ANNIE SOPER SCHOOL - EVENTOS PAGE STYLES
   ============================================
   Este archivo maneja todos los estilos visuales:
   colores, fondos, efectos hover, sombras y elementos decorativos.
   La estructura y responsividad están manejadas por Bootstrap.
*/

/* ========== 1. VARIABLES GLOBALES ========== */
/* Paleta de colores principal del colegio */
:root {
    --primary-green: #2c5e2e;      /* Verde principal del colegio */
    --primary-green-dark: #004341;  /* Verde más oscuro para hovers */
    --primary-green-light: #e8f0e8; /* Verde muy claro para fondos sutiles */
    --accent-gold: #ffc107;         /* Amarillo/dorado para acentos y detalles */
    --accent-gold-dark: #b08d57 ;    /* Dorado más oscuro para hovers */
    --neutral-light: #f8f9fa;       /* Gris muy claro para fondos alternos */
    --neutral-gray: #6c757d;        /* Gris para textos secundarios */
    --white: #ffffff;               /* Blanco puro */
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 1rem 2rem rgba(0, 0, 0, 0.12);
}

/* ========== 2. HERO SECTION ========== */
/* Sección principal de bienvenida con imagen de fondo y gradiente */
.hero-section {
    /* Gradiente semitransparente sobre imagen de fondo */
    background: linear-gradient(135deg, 
                rgba(27, 60, 34, 0.85) 0%, 
                rgba(27, 60, 34, 0.75) 100%),
                url('/anniesoper/assets/img/login1.webp') center/cover no-repeat;
    min-height: 60vh;
    display: flex;
    align-items: center;
}

/* ========== 3. FILTROS / BADGES ========== */
/* Botones de filtro estilo "pills" para categorías de eventos */
.filter-badge {
    background-color: var(--neutral-light);
    color: var(--primary-green);
    border-radius: 50px;
    padding: 0.5rem 1.2rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid #dee2e6;
}

/* Estado hover del filtro */
.filter-badge:hover {
    background-color: var(--primary-green);
    color: var(--white);
    border-color: var(--primary-green); 
}

/* Estado activo del filtro (cuando está seleccionado) */
.filter-badge.active {
    background-color: var(--primary-green);
    color: var(--white);
    border-color: var(--primary-green);
}

/* ========== 4. TARJETAS DE EVENTOS ========== */
/* Tarjetas con efecto hover elegante */
.event-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 1rem;
    overflow: hidden;
    border: none;
}

/* Efecto al pasar el mouse sobre la tarjeta */
.event-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg) !important;
}

/* Componente de fecha dentro de las tarjetas */
.event-date {
    background-color: var(--accent-gold);
    color: var(--primary-green);
    border-radius: 0.75rem;
    padding: 0.5rem 1rem;
    text-align: center;
    font-weight: bold;
    min-width: 70px;
}

/* ========== 5. TIMELINE / CALENDARIO ========== */
/* Línea de tiempo vertical moderna */
.timeline-modern {
    position: relative;
    padding-left: 2rem;
}

/* Línea vertical decorativa de la timeline */
.timeline-modern::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--accent-gold);
}

/* Cada item de la timeline */
.timeline-modern-item {
    position: relative;
    padding-bottom: 2rem;
    padding-left: 2rem;
}

/* Punto decorativo de cada item en la timeline */
.timeline-modern-item::before {
    content: '';
    position: absolute;
    left: -0.25rem;
    top: 0;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: var(--accent-gold);
    border: 2px solid var(--white);
    box-shadow: 0 0 0 2px var(--accent-gold);
}

/* ========== 6. TESTIMONIOS ========== */
/* Tarjetas de testimonios */
.testimonial-card {
    background-color: var(--neutral-light);
    border-radius: 1rem;
    transition: all 0.3s ease;
    border: none;
}

/* Efecto hover en testimonios */
.testimonial-card:hover {
    background-color: var(--white);
    box-shadow: var(--shadow-md);
}

/* ========== 7. BOTONES PERSONALIZADOS ========== */
/* Botón outline con borde verde */
.btn-outline-custom {
    border: 2px solid var(--primary-green);
    color: var(--primary-green);
    border-radius: 50px;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    background-color: transparent;
}

/* Hover del botón outline */
.btn-outline-custom:hover {
    background-color: var(--primary-green);
    color: var(--white);
}

/* Botón primario con fondo verde */
.btn-custom-primary {
    background-color: var(--primary-green);
    border-color: var(--primary-green);
    border-radius: 50px;
    padding: 0.6rem 1.5rem;
    color: var(--white);
    transition: all 0.3s ease;
}

/* Hover del botón primario */
.btn-custom-primary:hover {
    background-color: var(--primary-green-dark);
    border-color: var(--primary-green-dark);
    transform: translateY(-2px);
    color: var(--white);
}

/* ========== 8. BACKGROUNDS ESPECIALES ========== */
/* Fondo de la sección de eventos (sección de tarjetas) */
.bg-event-section {
    background-color: var(--neutral-light);
}

/* Fondo para secciones con gradiente verde */
.bg-gradient-green {
    background: linear-gradient(135deg, var(--primary-green-dark), var(--primary-green));
}

/* ========== 9. COLORES DE TEXTO ========== */
/* Texto con color verde primario */
.text-primary-green {
    color: var(--primary-green);
}

/* Texto con color dorado de acento */
.text-accent-gold {
    color: var(--accent-gold);
}

/* ========== 10. BADGES PERSONALIZADOS ========== */
/* Badge de evento espiritual */
.badge-spiritual {
    background-color: var(--primary-green);
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

/* Badge de evento académico */
.badge-academic {
    background-color: #0d6efd;
    color: var(--white);
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

/* Badge de evento familiar */
.badge-family {
    background-color: var(--accent-gold);
    color: var(--primary-green-dark);
    padding: 0.5rem 1rem;
    border-radius: 50px;
}

/* ========== 11. EFECTOS Y UTILIDADES ========== */
/* Sombra suave para tarjetas */
.shadow-soft {
    box-shadow: var(--shadow-md);
}

/* Sombra más pronunciada para elementos destacados */
.shadow-prominent {
    box-shadow: var(--shadow-lg);
}

/* Transición suave para cualquier elemento */
.transition-smooth {
    transition: all 0.3s ease;
}

/* Overlay oscuro para imágenes de fondo */
.overlay-dark {
    position: relative;
}

.overlay-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: inherit;
}

/* ========== 12. RESPONSIVE AJUSTES ========== */
/* Ajustes específicos para pantallas pequeñas */
@media (max-width: 768px) {
    /* Reducir altura del hero en móviles */
    .hero-section {
        min-height: 50vh;
    }
    
    /* Ajustar padding de la timeline en móviles */
    .timeline-modern {
        padding-left: 1rem;
    }
    
    /* Reducir tamaño de fuente en botones para móviles */
    .btn-custom-primary,
    .btn-outline-custom {
        padding: 0.4rem 1rem;
        font-size: 0.875rem;
    }
    
    /* Ajustar espaciado de la fecha en tarjetas */
    .event-date {
        padding: 0.3rem 0.8rem;
        min-width: 60px;
    }
}

/* Ajustes para pantallas muy pequeñas (menos de 576px) */
@media (max-width: 576px) {
    /* Reducir aún más la altura del hero */
    .hero-section {
        min-height: 40vh;
    }
    
    /* Ajustar el display de los filtros para que envuelvan mejor */
    .filter-badge {
        padding: 0.3rem 0.8rem;
        font-size: 0.75rem;
    }
}