/* ONLY for phones */
/* Extra small screens (mobile) */
@media (max-width: 480px) {
    main  {
        padding: 0rem !important;
    }
}

@media (max-width: 480px) {
    section h2,
    section h3,
    section h4,
    section h5,
    section h6 {
        font-size: clamp(1.7rem, 5vw, 1.8rem) !important;
    }
}

@media (max-width: 480px) {
.section.pattern-grid {
    padding: 2.5rem 2rem 1.2rem 2rem !important;
} 


    #countdown {
        flex-wrap: nowrap !important;
        gap: 0.6rem !important;
        justify-content: center;
    }

    .countdown-value {
        font-size: 1.8rem !important;
    }

    .countdown-label {
        font-size: 0.6rem !important;
    }

    .countdown-box {
        min-width: 55px;
    }
    
    p[style*="animation-delay: 0.2s;"] {
        font-size: 0 !important; /* hides original text */
        position: relative;
    }

    p[style*="animation-delay: 0.2s;"]::after {
        content: "January 31, 2026 - 18H\A Rap/Hip-Hop";
        white-space: pre-line;
        font-size: 1.1rem;
    }

}



@media (max-width: 480px) {

    /* container becomes vertical */
    #event-details > div {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important;
    }

    /* poster on top */
    .event-poster-link {
        width: 100% !important;
        max-width: 350px;
        min-width: 350px;
        min-height: 350px;
        margin: 0 auto;
    }

    /* items container */
    #event-details > div > div {
        width: 100% !important;
    }

    /* make font slightly bigger */
    #event-details .card-3d p:nth-child(1) {
        font-size: 0.9rem !important;
    }

    #event-details .card-3d p:nth-child(2) {
        font-size: 1.15rem !important;
    }
}

@media (max-width: 480px) {
    #our-story .card-3d {
        flex-direction: column !important; /* answers تحت العنوان */
        gap: 0.8rem !important;
        align-items: flex-start !important;
    }

    #our-story .card-3d div:first-child h3 {
        text-align: left !important; /* titles دائما على اليسار */
        font-size: 1.4rem !important; /* answers أصغر شوية */
    }

    #our-story .card-3d div:last-child p {
        text-align: left !important; /* answers دائما تحت */
        font-size: 1rem !important; /* شوية أكبر للقراءة */
    }
}

@media (max-width: 480px) {

    #gallery > div {
        display: grid !important;
        grid-template-columns: 180px 180px !important;

        grid-template-rows:
            250px   /* img 1 */
            180px   /* img 3 */
            180px   /* img 4 */
            150px   /* img 5 */
            150px !important; /* img 6 */

        gap: 0.5rem !important;
        width: 360px !important;
        margin: 0 auto;
    }

    /* 1 – big full */
    #gallery > div .gallery-item:nth-child(1) {
        grid-column: 1 / 3 !important;
        grid-row: 1 !important;
        width: 360px !important;
        height: 250px !important;
    }

    /* 2 – tall left */
    #gallery > div .gallery-item:nth-child(2) {
        grid-column: 1 / 2 !important;
        grid-row: 2 / 4 !important; /* spans rows 2 and 3 */
        width: 180px !important;
        height: 368px !important; /* 180 + 180 */
    }

    /* 3 – top right square */
    #gallery > div .gallery-item:nth-child(3) {
        grid-column: 2 / 3 !important;
        grid-row: 2 !important;
        width: 180px !important;
        height: 180px !important;
    }

    /* 4 – bottom right square */
    #gallery > div .gallery-item:nth-child(4) {
        grid-column: 2 / 3 !important;
        grid-row: 3 !important;
        width: 180px !important;
        height: 180px !important;
    }

    /* 5 – full width */
    #gallery > div .gallery-item:nth-child(5) {
        grid-column: 1 / 3 !important;
        grid-row: 4 !important;
        width: 360px !important;
        height: 150px !important;
    }

    /* 6 – full width */
    #gallery > div .gallery-item:nth-child(6) {
        grid-column: 1 / 3 !important;
        grid-row: 5 !important;
        width: 360px !important;
        height: 150px !important;
    }

    #gallery > div .gallery-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}


/* Mobile adjustments */
@media (max-width: 480px) {
    #lightboxClose {
        top: 0.5rem;
        right: 0.5rem;
        padding: 0.2rem;
    }

    #lightboxImg {
        max-width: 95%;
        max-height: 95%;
    }
}

/* Mobile adjustments for newsletter section */
@media (max-width: 768px) {

    #stay-updated p {
        font-size: 1rem !important; /* smaller paragraph text */
    }

    #stay-updated input {
        font-size: 0.9rem !important; /* smaller input text */
        padding: 0.8rem 1rem !important;
    }

    #stay-updated button {
        font-size: 0.9rem !important; /* smaller button text */
        padding: 0.8rem 1.5rem !important;
    }
}


@media (max-width: 480px) {
    /* 2 containers per line, but exclude #stay-updated */
    .section.pattern-dots:not(#stay-updated):not(#events-timeline) > div {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }

    .section.pattern-waves {
        padding: 0rem !important;
    }

    /* Shrink icons */
    .section.pattern-dots .icon-svg {
        width: 36px !important;
        height: 36px !important;
    }

    /* Shrink titles */
    .section.pattern-dots h3 {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Shrink paragraph text */
    .section.pattern-dots p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Adjust padding inside cards if needed */
    .section.pattern-dots .why-choose-card {
        padding: 1rem !important;
    }
}

@media (max-width: 480px) {

    /* Title */
    #faq h1 {
        font-size: 1.8rem !important;
        margin-bottom: 0.3rem !important;
    }

    /* Subtitle */
    #faq p {
        font-size: 0.9rem !important;
        margin-bottom: 2rem !important;
    }

    /* Questions */
    #faq .faq-question h3 {
        font-size: 1rem !important;
    }

    /* Answers */
    #faq .faq-answer p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        padding-top: 1rem !important;
    }

    /* Icon */
    #faq .faq-icon {
        width: 18px !important;
        height: 18px !important;
        margin-left: 0.5rem !important;
    }

    /* Card padding */
    #faq .faq-item {
        padding: 0.8rem 1rem !important;
    }
}


@media (max-width: 480px) {
    #events-timeline > div {
        grid-template-columns: 1fr !important; /* 1 container per line */
        gap: 1.5rem !important;
    }

    #events-timeline .card-3d h3 {
        font-size: 1.3rem !important; /* smaller card title */
        margin-bottom: 1rem !important;
    }

    #events-timeline .timeline-event p:first-child {
        font-size: 0.7rem !important; /* date */
        margin-bottom: 0.25rem !important;
    }

    #events-timeline .timeline-event p:last-child {
        font-size: 0.9rem !important; /* event name */
    }

    #events-timeline .timeline-event {
        padding: 1rem !important;
    }
}

@media (max-width: 480px) {
    section.pattern-hexagon > div > .card-3d p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.5rem !important;
    }

    section.pattern-hexagon > div > .card-3d a.cta {
        font-size: 0.8rem !important;
    }
}

@media (max-width: 480px) {
    footer > div {
        padding: 0.5rem 0.5rem !important;
    }

    /* الأيقونات تبقى أفقية */
    footer div[style*="display: flex; gap: 1.5rem"] {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
    }

    /* القوائم: 2 per row */
    footer div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    footer h4 {
        font-size: 1rem !important;
    }

    footer a {
        font-size: 0.9rem !important;
    }

    footer p {
        font-size: 0.9rem !important;
    }

    footer a[style*="width: 44px"] {
        width: 42px !important;
        height: 42px !important;
    }

    footer a[style*="width: 44px"] svg {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Desktop: keep original grid */
#collab-carousel {
    max-width: 1200px;
    margin: 0 auto;
}

#collab-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Reduce logo sizes */
#collab-track img {
    width: 108%;
    height: 100%;
    object-fit: contain;
    opacity: 0.8;
}

/* Mobile: turn into horizontal slider */
@media (max-width: 480px) {

    #collab-carousel {
        overflow: hidden;
        width: 100%;
    }

    #collab-track {
        display: flex;
        gap: 2rem;
        max-width: 150px;
        max-height: 50px;
        align-items: center;
        animation: scrollSponsors 5s linear infinite;
    }

    #collab-track a {
        flex: 0 0 auto;
    }

    #collab-track img {
        width: 100%;
        height: 100%;
        max-width: 150px;
        min-height: 100px;
    }

    @keyframes scrollSponsors {
        from { transform: translateX(0); }
        to { transform: translateX(-100%); }
    }
}



/* Responsive adjustments */
@media (max-width: 480px) {
    .media-kit {
        padding: 1.5rem;
    }

    h1 {
        font-size: 2rem;
        line-height: normal;
    }

    h2 {
        font-size: 1.75rem;
        line-height: normal;
    }

    p {
        font-size: 0.95rem;
        line-height: normal;
    }
}

@media (max-width: 480px) {
    .logo-grid,
    .media-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .logo-item,
    .media-item {
        text-align: center;
    }

    .download-btn {
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
    }
}

@media (max-width: 480px) {


    .acc-header {
        font-size: 1rem;
        padding: 0.6rem 1rem;
    }
}

@media (max-width: 480px) {
    .logo-grid,
    .media-grid {
        grid-template-columns: 1fr;
    }

    .download-btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .acc-body {
        padding: 0.5rem 0;
    }
}


/* contact.html */
/* Mobile responsive for screens <= 480px */
@media screen and (max-width: 480px) {


    /* Page header */
    .page-header h1 {
        font-size: 2rem; /* smaller than 35px */
    }

    .page-header p {
        font-size: 0.875rem; /* smaller than 15px */
    }

    /* Contact form */
    .contact-form {
        padding: 1rem; /* if your card had padding */
    }

    .contact-form .form-group label {
        font-size: 0.875rem;
    }

    .contact-form .form-group input,
    .contact-form .form-group select,
    .contact-form .form-group textarea {
        font-size: 0.875rem;
        padding: 0.5rem;
    }

    .contact-form button.cta {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }

    /* Contact info card */
    .contact-info {
        padding: 1rem;
    }

    .contact-info h2 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .contact-info h3 {
        font-size: 1rem;
    }

    .contact-info p,
    .contact-info a {
        font-size: 0.875rem;
    }

    /* Success container */
    #successContainer .card {
        padding: 1.5rem;
    }

    #successContainer h2 {
        font-size: 1.25rem;
    }

    #successContainer p {
        font-size: 0.875rem;
    }

    #successContainer button.cta {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
}


/* Privacy Policy*/
/* Mobile responsive for screens <= 480px */
@media screen and (max-width: 480px) {

    .content-page h1 {
        font-size: 1.8rem !important; /* smaller than 2.5rem */
        margin-bottom: 0.5rem !important;
        text-align: center !important;
    }

    .content-page p {
        font-size: 0.875rem !important; /* smaller than 1rem */
        text-align: center !important;
    }

    .content-page h2 {
        font-size: 1.2rem !important; /* smaller headings */
        margin-top: 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .content-page ul {
        font-size: 0.875rem !important;
        padding-left: 1.2rem !important; /* make bullets smaller but readable */
    }

    .content-page li {
        margin-bottom: 0.3rem !important; /* reduce spacing between list items */
    }
}