/* --- Desktop & General Fixes --- */
@media (max-width: 1200px) {
    .navbar-brand img { height: 50px !important; }
    .nav-item a, .has-sub-menu { font-size: 13px !important;}
    .navbar .container { padding: 0 10px 0 25px; }
    .btn-contact { padding: 8px 18px; font-size: 13px; }

    .footer-email {
        white-space: normal;
        word-break: break-all;
        display: inline-block;
    }
}


@media (min-width: 992px) and (max-width: 1080px) {
    .navbar-nav { margin-right: 10px !important; }
    .transition-arrow svg {
        width: 30px;
        transform: rotate(0deg);
    }
}

/* --- Tablets & Large Mobile (Landscape) --- */
@media (max-width: 991px) {
    .navbar-brand img { height: 45px !important; }
    .image-wrapper { height: auto; aspect-ratio: 16 / 9; }
    .purpose-title { font-size: 2.8rem; }

    .has-sub-menu .sub-menu {
        display: none;
        opacity: 0;
        transition: all 0.3s ease;
    }

    /* When the JS adds the .active class, show the menu */
    .has-sub-menu.active > .sub-menu {
        display: block;
        opacity: 1;
    }
    
    /* Optional: Rotate an arrow icon if you have one */
    .has-sub-menu.active > a i {
        transform: rotate(180deg);
    }

    /* Carousel Fixes */
    #eventsCarousel .carousel-inner { max-height: none !important; overflow: visible !important; }
    #eventsCarousel .carousel-item { height: auto !important; padding-bottom: 20px; }
    #eventsCarousel .carousel-control-prev,
    #eventsCarousel .carousel-control-next { width: 30px; height: 30px; top: 45%; }
    #eventsCarousel .carousel-control-prev-icon,
    #eventsCarousel .carousel-control-next-icon { transform: scale(0.6); }
    .carousel-item .btn { margin-bottom: 8px;}

    .mission-section p, .vision-section p { font-size: x-large; }

    /* Cards Section */
    .cards-section { padding: 30px 15px; }
    .hover-slideshow { aspect-ratio: 16 / 9; }
    .cards-section .table-head h4 {
        font-size: 0.8rem;
        top: 10px;
        left: 10px;
        padding: 4px 10px;
    }

    .transition-arrow {
        transform: rotate(90deg);
        margin: -10px 0 10px 0; /* Tightens space between stacked cards */
    }
    .transition-arrow svg {
        width: 25px;
    }

    .partner-name, .member-name { font-size: 1rem; }
    .member-role { font-size: 0.9rem; }
    .partner-initials { font-size: 1.4rem; }
}

/* --- Mobile Phones (Portrait & Small Tablet) --- */
@media (max-width: 768px) {
    .header-background { height: auto; min-height: 80vh; padding-top: 60px; }
    .header-with-breadcrumbs { height: 40vh; padding-top: 50px; }
    
    .start-page-main h1 { font-size: 2rem; margin-bottom: 2rem; }
    .page-title, .articles-page-header h1, .section-title { font-size: 2rem !important; text-align: center; }
    
    .mission-section p, .vision-section p { font-size: large; }


    .mvp-block, .mvp-mission, .content-split { flex-direction: column; }
    .mvp-title-box, .mvp-content-box { flex: 1 1 100%; padding: 20px; text-align: left; }
    
    .team-grid, .partner-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }

    .row.cards-snap-slider {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 15px;
        padding-bottom: 20px;
        -webkit-overflow-scrolling: touch;
    }
    .row.cards-snap-slider .col-12 {
        flex: 0 0 85%; 
        scroll-snap-align: center;
    }
    .row.cards-snap-slider::-webkit-scrollbar { display: none; }

    .cards-section .table-head:hover { transform: none; }
    .cards-section .table-head p {
        position: relative;
        transform: none !important;
        opacity: 1 !important;
        background: #fff;
        padding: 15px;
        font-size: 0.85rem;
        border-top: 1px solid #eee;
    }

    .partner-name, .member-name { font-size: 0.9rem; }
    .member-role { font-size: 0.8rem; }
    .partner-initials { font-size: 1.2rem; }
}

/* --- Small Mobile Fixes --- */
@media (max-width: 576px) {
    .startpage-inner img { height: 250px; }
    .start-page-main .caption { bottom: 6rem; }
    .header-background { height: auto; min-height: 65vh; padding-top: 60px; }
    .purpose-title { font-size: 1.8rem; }
    .header-with-breadcrumbs { height: 40vh; padding-top: 50px; }
    .header-with-breadcrumbs{ height: auto; min-height: 40vh; padding-top: 60px; 
    background-position: center;}
    .tagline { font-size: 1.1rem; margin-top: 10px; padding: 0 12px;}
    
    #eventsCarousel .carousel-item .row > div:not(:first-child) { display: none; }
    #eventsCarousel .carousel-item .row > div:first-child { display: block; width: 100%; }

    .image-wrapper {
        padding: 1rem;
        min-height: auto; 
    }
    
    .image-wrapper:hover img {
        transform: none;
    }

    .hover-slideshow { aspect-ratio: 1 / 1; }

    .cards-section span {
    font-size: 1.7rem;
    color: #ff8c00;
    }

    .footer-email {
        white-space: normal;    /* Allows the text to move to a second line */
        word-break: break-all;  /* Forces the break if the email is very long */
        display: inline-block;  /* Required for some browsers to calculate width correctly */
        max-width: 100%;
    }
}

/* --- Smaller Mobile Devices --- */
@media (max-width: 380px) {
    * {
        box-sizing: border-box;
        font-size: small ;
    }
    span, .icon, i, .article-pre-header{ font-size: inherit; }
    .header-with-breadcrumbs { height: 30vh; padding-top: 50px; }
    .header-with-breadcrumbs{ height: auto; min-height: 30vh; padding-top: 60px; 
    background-position: center;}

    .partner-name, .member-name { font-size: 0.7rem; }
    .member-role { font-size: 0.6rem; }
    .partner-initials { font-size: .8rem; }
}


/* --- Touch Support (Hover Simulation) --- */
@media (hover: none) {
    .table-head:active .hover-slideshow img:not(:first-child) {
        animation: creative-slideshow 6s infinite ease-in-out !important;
    }
    .table-head:active .hover-slideshow img:first-child {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .table-head:active .content-photo::after {
        animation: progress-bar 6s linear infinite !important;
    }
}