/**

 * Optimalisaties voor grote schermen (>= 992px)
 * @version 2.0
 */

/* =============================================================================
   DESKTOP ENHANCEMENTS (>= 992px)
   ============================================================================= */
@media (min-width: 992px) {
    /* Container max-width */
    .container {
        max-width: 1320px;
    }
    
    /* Header */
    header .navbar .navbar-brand img {
        height: 6rem;
    }
    
    header .navbar ul.navbar-nav li.nav-item a.nav-link {
        padding: 1.25rem 1rem;
    }
    
    /* Hero sections - ORIGINEEL: 90vh voor departments aan de onderkant */
    .row-type-intro__extended {
        min-height: 75vh;
    }
    
    /* Departments grid */
    .row-type-intro__extended .departments .department {
        padding: 2.5rem;
    }
    
    /* Typography */
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    h3 { font-size: 1.75rem; }
    
    .fs-80 { font-size: 80px; }
    .fs-32 { font-size: 32px; }
    
    /* Spacing */
    .py-7 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }
    
    .pt-lg-10 {
        padding-top: 4.5rem !important;
    }
    
    .pb-125 { padding-bottom: 125px; }
    .mb-125 { margin-bottom: 125px; }
    
    .height50 { height: 50px; }
    .height25 { height: 25px; }
    
    /* Cards hover effects */
    .product-item:hover {
        transform: translateY(-8px) scale(1.02);
    }
    
    .sector-item:hover {
        transform: translateY(-8px) scale(1.03);
    }
    
    .card:hover {
        transform: translateY(-8px);
    }
    
    /* Square block */
    .square-block {
        height: 40vh;
        min-height: 400px;
    }
    
    /* Footer */
    footer {
        background-position: left center;
        background-size: 10% auto;
    }
    
    /* Utility */
    .hide-lg { display: none !important; }
    .show-lg { display: block !important; }
}

/* =============================================================================
   EXTRA LARGE SCREENS (>= 1400px)
   ============================================================================= */
@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
    
    h1 { font-size: 3.5rem; }
}

/* =============================================================================
   ULTRA WIDE SCREENS (>= 1920px)
   ============================================================================= */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px;
    }
    
    header .navbar ul.navbar-nav li.nav-item a.nav-link {
        padding: 1.25rem 1.25rem;
    }
}

/* =============================================================================
   HOVER CAPABLE DEVICES
   ============================================================================= */
@media (hover: hover) and (pointer: fine) {
    /* Enhanced hover effects for mouse users */
    .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    }
    
    .product-item:hover,
    .sector-item:hover {
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }
    
    /* Dropdown menu hover delay */
    header .navbar ul.navbar-nav li.nav-item.menu-item-has-children ul.dropdown-menu {
        transition-delay: 0.05s;
    }
    
    header .navbar ul.navbar-nav li.nav-item.menu-item-has-children:hover ul.dropdown-menu {
        transition-delay: 0s;
    }
    
    /* Image zoom on hover */
    .fotos img:hover {
        transform: scale(1.03);
    }
    
    /* Social icons */
    .social-media a:hover {
        transform: translateY(-3px) scale(1.1);
    }
}

/* =============================================================================
   HIGH RESOLUTION DISPLAYS
   ============================================================================= */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders */
    .btn,
    .form-control,
    .card {
        border-width: 0.5px;
    }
}

/* =============================================================================
   WIDE ASPECT RATIO (21:9 ultrawide)
   ============================================================================= */
@media (min-aspect-ratio: 21/9) {
    .row-type-intro {
        min-height: 80vh;
    }
}

/* Body padding voor fixed header */
body {
    padding-top: 133px;
}