/* Events Responsive Styles */

@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 2.8rem;
    }

    .events-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .event-modal-content {
        max-width: 850px;
        padding: 30px;
    }
}

@media (max-width: 768px) {
    /* Hero Slider */
    .hero-slider {
        width: 100%;
        height: 100svh;
        min-height: 520px;
    }

    .slides img {
        width: 100vw;
        height: 100svh;
        min-height: 520px;
        object-fit: cover;
    }

    /* Hero Content */
    .hero-content {
        padding: 20px;
        width: 100%;
    }

    .hero-content h1 {
        font-size: 2.3rem;
        line-height: 1.25;
        margin-bottom: 15px;
    }

    .hero-content p {
        width: 100%;
        max-width: 580px;
        font-size: 1rem;
        line-height: 1.55;
        margin-bottom: 25px;
    }

    /* Event Sections */
    #technical,
    #non-technical,
    #workshops,
    #counsiling,
    #social {
        scroll-margin-top: 70px;
    }

    .event-categories > div {
        padding: 50px 18px;
        background: transparent;
    }

    .event-categories h2 {
        font-size: 1.95rem;
        margin-bottom: 30px;
    }

    /* Modal Responsive */
    .event-modal {
        padding: 16px;
    }

    .event-modal-content {
        padding: 26px 20px;
        max-height: 92vh;
        border-radius: 16px;
    }

    .modal-event-header {
        padding-right: 42px;
    }

    .modal-event-header h2 {
        font-size: 1.6rem;
    }

    .event-modal-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .modal-gallery-image {
        height: 150px;
    }
}

@media (max-width: 600px) {
    .events-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        width: 100%;
        padding: 0;
    }

    .event-image {
        height: 200px;
    }

    .event-content {
        padding: 20px;
    }

    .hero-content h1 {
        font-size: 1.9rem;
    }

    .hero-content p {
        font-size: 0.92rem;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        text-align: center;
        padding: 10px 18px;
    }

    .event-modal-gallery {
        grid-template-columns: 1fr;
    }

    .modal-gallery-image {
        height: 180px;
    }

    .modal-event-details {
        flex-direction: column;
        gap: 8px;
    }

    .modal-event-section p {
        font-size: 0.9rem;
        line-height: 1.7;
    }
}

@media (max-width: 380px) {
    .hero-content h1 {
        font-size: 1.65rem;
    }

    .event-categories h2 {
        font-size: 1.65rem;
    }

    .event-categories > div {
        padding: 40px 12px;
    }
}