/* Mobile Override Styles - Responsive with Full Display */
/* This file MUST load last in the cascade */
/* Purpose: Responsive layouts BUT show all content (video, map, etc.) */

@media (max-width: 768px) {
    /* ========== ENSURE ALL CONTENT VISIBLE ========== */
    /* Responsive arrangement is OK, but everything must display */

    /* Ensure all elements are visible */
    body,
    main,
    section,
    .hero-section,
    .container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* ========== NAVIGATION - MOBILE HAMBURGER MENU ========== */
    .nav-menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        display: flex !important;
        visibility: visible !important;
    }

    .nav-menu.active {
        right: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .nav-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .main-nav {
        display: block !important;
        visibility: visible !important;
    }

    /* ========== IMAGES - RESPONSIVE SIZING ========== */
    img,
    img[style],
    .media-image img,
    .project-image img,
    .featured-image img,
    .bio-image img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Profile images specific handling */
    .profile-image,
    .profile-image-container img,
    .hero-profile-image img {
        width: 100% !important;
        max-width: 300px !important;
        height: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
    }

    /* Logo images */
    .org-logo img,
    .affiliation-logo img,
    [class*="logo"] img {
        max-width: 120px !important;
        max-height: 60px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Navbar logo specific */
    .nav-logo img {
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        min-height: 35px !important;
    }

    /* ========== FONT SIZES - RESPONSIVE SCALING ========== */
    h1,
    h1[style],
    .section-title,
    .section-title[style],
    .hero-title,
    .hero-title[style] {
        font-size: clamp(1.75rem, 5vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    h2,
    h2[style],
    .section-subtitle[style] {
        font-size: clamp(1.4rem, 4vw, 1.75rem) !important;
        line-height: 1.3 !important;
    }

    h3,
    h3[style] {
        font-size: clamp(1.2rem, 3vw, 1.4rem) !important;
    }

    p[style*="font-size"],
    div[style*="font-size"] > p {
        font-size: 1rem !important;
    }

    /* ========== HERO SECTION - DESKTOP LAYOUT ========== */
    /* Keep desktop hero layout on mobile */
    .hero-section {
        min-height: 100vh !important;
    }

    /* Show video on all devices - owner preference */
    .hero-video-container,
    .hero-video {
        display: block !important;
    }

    /* Hide gradient background - video shows instead */
    .hero-section::before {
        display: none !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 10 !important;
    }

    .forest-elements,
    .animated-leaf,
    .animated-bird,
    .forest-particles {
        z-index: 2 !important;
    }

    /* ========== VIDEO CONTAINERS - RESPONSIVE BUT VISIBLE ========== */
    .video-container,
    .video-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        padding-bottom: 56.25% !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .video-container iframe,
    .video-wrapper iframe,
    [class*="video"] iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        border: none !important;
    }

    /* Media card images (YouTube thumbnails) - all visible */
    .media-card .media-image {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        display: block !important;
    }

    .media-card .media-image img {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* ========== MAP CONTAINERS - FULLY FUNCTIONAL ========== */
    .map-container,
    #ontarioMapContainer,
    #world-map {
        width: 100% !important;
        height: 300px !important;
        min-height: 300px !important;
        max-height: 400px !important;
        margin: 1rem 0 !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        display: block !important;
        visibility: visible !important;
    }

    .location-info {
        flex-direction: column !important;
        gap: 1.5rem !important;
        display: flex !important;
    }

    /* Leaflet map tiles - keep visible and interactive */
    .leaflet-container {
        width: 100% !important;
        height: 100% !important;
        border-radius: 8px !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Map markers - visible and animated */
    .map-marker {
        position: absolute !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        visibility: visible !important;
    }

    .map-marker i {
        font-size: 1.5rem !important;
        color: var(--forest-green) !important;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
        animation: markerPulse 2s infinite !important;
        display: block !important;
    }

    /* Leaflet marker icons - visible */
    .leaflet-marker-icon {
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
        display: block !important;
        visibility: visible !important;
    }

    /* Leaflet popup - visible and styled */
    .leaflet-popup-content-wrapper {
        border-radius: 8px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)) !important;
        display: block !important;
    }

    .leaflet-popup-content {
        margin: 10px 12px !important;
        font-size: 0.9rem !important;
        display: block !important;
    }

    /* ========== LAYOUT - RESPONSIVE GRIDS ========== */
    /* Allow horizontal scroll if needed */
    body,
    html {
        overflow-x: auto !important;
    }

    /* Card grids - responsive to single column */
    .expertise-grid,
    .projects-grid,
    .media-grid,
    .publications-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        display: grid !important;
    }

    /* Stats container */
    .stats-container {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }

    /* Form elements */
    .form-row {
        flex-direction: column !important;
        display: flex !important;
    }

    .form-group {
        width: 100% !important;
        display: block !important;
    }

    /* ========== BUTTONS - RESPONSIVE SIZING ========== */
    .btn-group,
    .hero-cta {
        flex-direction: column !important;
        gap: 1rem !important;
        display: flex !important;
    }

    .btn,
    .btn-primary,
    .btn-secondary {
        width: 100% !important;
        max-width: 100% !important;
        display: inline-block !important;
        visibility: visible !important;
    }

    /* ========== FOOTER - RESPONSIVE LAYOUT ========== */
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
        display: grid !important;
    }

    .footer-social {
        justify-content: center !important;
        display: flex !important;
    }
}

/* Very small devices */
@media (max-width: 375px) {
    h1,
    h1[style] {
        font-size: 1.5rem !important;
    }

    h2,
    h2[style] {
        font-size: 1.3rem !important;
    }

    .nav-logo {
        font-size: 1rem !important;
    }

    .nav-logo img {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
    }

    /* Even smaller map on very small devices */
    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 250px !important;
        min-height: 250px !important;
    }
}

/* ============================================
   TABLET PORTRAIT (768px - 991px)
   ============================================ */
@media (min-width: 768px) and (max-width: 991px) {
    /* Show video on tablets */
    .hero-video-container,
    .hero-video {
        display: block !important;
    }

    /* Remove gradient background on tablets - video shows instead */
    .hero-section::before {
        display: none !important;
    }

    /* Navigation adjustments */
    .main-nav {
        padding: 1rem 2rem !important;
    }

    .nav-logo {
        font-size: 1.2rem !important;
    }

    /* Typography */
    h1, h1[style] {
        font-size: clamp(2rem, 4vw, 2.5rem) !important;
    }

    h2, h2[style] {
        font-size: clamp(1.6rem, 3.5vw, 2rem) !important;
    }

    h3, h3[style] {
        font-size: clamp(1.3rem, 3vw, 1.6rem) !important;
    }

    /* Grid layouts - 2 columns for tablets */
    .expertise-grid,
    .projects-grid,
    .media-grid,
    .publications-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    /* Stats container - 2 columns */
    .stats-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Hero section */
    .hero-section {
        min-height: 80vh !important;
        padding: 120px 2rem 60px !important;
    }

    /* Map container - larger on tablets */
    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 400px !important;
        min-height: 400px !important;
        max-height: 500px !important;
    }

    /* Video containers */
    .media-card .media-image {
        min-height: 250px !important;
    }

    /* Map markers - larger on tablets */
    .map-marker i {
        font-size: 1.8rem !important;
    }

    .leaflet-popup-content {
        font-size: 1rem !important;
    }

    /* Buttons - not full width on tablets */
    .btn,
    .btn-primary,
    .btn-secondary {
        width: auto !important;
        min-width: 200px !important;
    }

    .btn-group,
    .hero-cta {
        flex-direction: row !important;
        justify-content: center !important;
    }

    /* Footer - 2 columns */
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        text-align: left !important;
    }

    /* Container max-width */
    .container {
        max-width: 720px !important;
    }
}

/* ============================================
   TABLET LANDSCAPE / SMALL LAPTOP (992px - 1199px)
   ============================================ */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Show video on tablet landscape and small laptops */
    .hero-video-container,
    .hero-video {
        display: block !important;
    }

    /* Remove gradient background - video shows instead */
    .hero-section::before {
        display: none !important;
    }

    /* Typography */
    h1, h1[style] {
        font-size: clamp(2.5rem, 4vw, 3rem) !important;
    }

    h2, h2[style] {
        font-size: clamp(1.8rem, 3.5vw, 2.2rem) !important;
    }

    h3, h3[style] {
        font-size: clamp(1.4rem, 3vw, 1.8rem) !important;
    }

    /* Grid layouts - 3 columns */
    .expertise-grid,
    .media-grid,
    .publications-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }

    .projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Stats container - 3 or 4 columns */
    .stats-container {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    }

    /* Hero section */
    .hero-section {
        min-height: 85vh !important;
    }

    /* Map container */
    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 450px !important;
        max-height: 550px !important;
    }

    /* Map markers - standard size for tablet landscape */
    .map-marker i {
        font-size: 2rem !important;
    }

    .leaflet-popup-content {
        font-size: 1rem !important;
    }

    /* Footer - 3 columns */
    .footer-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Container max-width */
    .container {
        max-width: 960px !important;
    }

    /* Navigation - desktop mode */
    .nav-toggle {
        display: none !important;
    }

    .nav-menu {
        position: static !important;
        flex-direction: row !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* ============================================
   MEDIUM DESKTOP (1200px - 1439px)
   ============================================ */
@media (min-width: 1200px) and (max-width: 1439px) {
    /* Show video on medium desktops */
    .hero-video-container,
    .hero-video {
        display: block !important;
    }

    /* Remove gradient background - video shows instead */
    .hero-section::before {
        display: none !important;
    }

    /* Container max-width */
    .container {
        max-width: 1140px !important;
    }

    /* Typography */
    h1, h1[style] {
        font-size: clamp(2.8rem, 4vw, 3.5rem) !important;
    }

    /* Grid layouts - full desktop grid */
    .expertise-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .projects-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .media-grid,
    .publications-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Map container - larger */
    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 500px !important;
        max-height: 600px !important;
    }

    /* Map markers - desktop size */
    .map-marker i {
        font-size: 2rem !important;
    }

    .leaflet-marker-icon {
        width: 25px !important;
        height: 41px !important;
    }

    /* Footer - 4 columns */
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr !important;
    }
}

/* ============================================
   LARGE DESKTOP (1440px and up)
   ============================================ */
@media (min-width: 1440px) {
    /* Show video on large desktops */
    .hero-video-container,
    .hero-video {
        display: block !important;
    }

    /* Remove gradient background - video shows instead */
    .hero-section::before {
        display: none !important;
    }

    /* Container max-width */
    .container {
        max-width: 1320px !important;
    }

    /* Typography - largest sizes */
    h1, h1[style] {
        font-size: clamp(3rem, 4vw, 4rem) !important;
    }

    h2, h2[style] {
        font-size: clamp(2.2rem, 3.5vw, 2.8rem) !important;
    }

    /* Hero section */
    .hero-section {
        min-height: 90vh !important;
    }

    /* Map container - largest */
    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 550px !important;
        max-height: 650px !important;
    }

    /* Map markers - largest for big screens */
    .map-marker i {
        font-size: 2.2rem !important;
    }

    .leaflet-popup-content {
        font-size: 1.1rem !important;
    }

    /* Grid spacing */
    .expertise-grid,
    .projects-grid,
    .media-grid,
    .publications-grid {
        gap: 2.5rem !important;
    }
}

/* ============================================
   GALAXY Z FOLD 4 - FOLDED (344px width)
   ============================================ */
@media (max-width: 344px) {
    /* Ultra compact layout */
    h1, h1[style] {
        font-size: 1.4rem !important;
    }

    h2, h2[style] {
        font-size: 1.2rem !important;
    }

    h3, h3[style] {
        font-size: 1rem !important;
    }

    .nav-logo {
        font-size: 0.9rem !important;
    }

    .nav-logo img {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
    }

    /* Very compact map */
    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 200px !important;
        min-height: 200px !important;
    }

    /* Smaller padding */
    .hero-section {
        padding: 80px 0.75rem 40px !important;
    }

    .container {
        padding: 0 0.75rem !important;
    }

    /* Smaller media images */
    .media-card .media-image {
        min-height: 150px !important;
    }

    /* Compact buttons */
    .btn,
    .btn-primary,
    .btn-secondary {
        font-size: 0.9rem !important;
        padding: 0.6rem 1rem !important;
    }
}

/* ============================================
   GALAXY Z FOLD 4 - UNFOLDED (884px width)
   Specific adjustments for this unique size
   ============================================ */
@media (min-width: 845px) and (max-width: 920px) {
    /* Show video on Galaxy Z Fold unfolded */
    .hero-video-container,
    .hero-video {
        display: block !important;
    }

    /* Remove gradient background - video shows instead */
    .hero-section::before {
        display: none !important;
    }

    /* Container optimization */
    .container {
        max-width: 800px !important;
        padding: 0 2rem !important;
    }

    /* 2-column grid for this size */
    .expertise-grid,
    .projects-grid,
    .media-grid,
    .publications-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    /* Map container */
    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 400px !important;
    }

    /* Typography balance */
    h1, h1[style] {
        font-size: 2.2rem !important;
    }

    h2, h2[style] {
        font-size: 1.8rem !important;
    }

    /* Desktop navigation at this size */
    .nav-toggle {
        display: none !important;
    }

    .nav-menu {
        position: static !important;
        flex-direction: row !important;
        width: auto !important;
        height: auto !important;
        padding: 0 !important;
        background: transparent !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce heights in landscape mode */
    .hero-section {
        min-height: 100vh !important;
        padding-top: 80px !important;
    }

    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 300px !important;
        max-height: 300px !important;
    }

    /* Compact navigation */
    .main-nav {
        padding: 0.5rem 1rem !important;
    }

    .nav-logo img {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ============================================
   IPAD MINI (768px x 1024px)
   ============================================ */
@media (min-width: 768px) and (max-width: 820px) and (min-height: 1000px) {
    .container {
        max-width: 700px !important;
    }

    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 400px !important;
    }
}

/* ============================================
   IPAD PRO 11" (834px x 1194px)
   ============================================ */
@media (min-width: 820px) and (max-width: 850px) {
    .container {
        max-width: 750px !important;
    }

    .expertise-grid,
    .media-grid,
    .publications-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   IPAD PRO 12.9" (1024px x 1366px)
   ============================================ */
@media (min-width: 1024px) and (max-width: 1100px) {
    .container {
        max-width: 960px !important;
    }

    .map-container,
    #ontarioMapContainer,
    #world-map {
        height: 480px !important;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
/* Ensure marker pulse animation is available on all devices */
@keyframes markerPulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Ensure smooth transitions for all interactive elements */
.map-marker,
.leaflet-marker-icon,
.btn,
.nav-link {
    transition: all 0.3s ease !important;
}