/* ==========================================================================
   SoftSky Modern Responsive CSS
   Mobile-first breakpoints for Bootstrap 5.3.3
   ========================================================================== */

/* ==========================================================================
   Extra Small (< 576px) — Mobile Portrait
   ========================================================================== */

@media (max-width: 575.98px) {

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }

    /* Navbar */
    #mainNav { padding: 8px 0; }
    #mainNav .navbar-brand img { height: 32px; }

    /* Hero */
    #hero { padding: 64px 0 48px; }
    #hero h1 { font-size: 2.25rem; letter-spacing: -0.025em; }
    #hero p { font-size: 1rem; margin-bottom: 32px; }

    /* Sections */
    .section-padding { padding: 60px 0; }
    .section-padding-sm { padding: 50px 0; }
    .section-header { margin-bottom: 32px; }

    /* Feature Items */
    #feature { padding: 40px 0 24px; }
    .feature-item { padding: 24px 0; border-top: 1px solid var(--ss-border); }
    .feature-item:first-child { border-top: none; }
    .feature-num { font-size: 2rem; margin-bottom: 12px; }

    /* Page Title */
    .page-title { padding: 50px 0; }
    .page-title h1 { font-size: 2rem; }

    /* Portfolio */
    .portfolio-filter { gap: 6px; }
    .portfolio-filter button { padding: 6px 16px; font-size: 0.8125rem; }

    /* Client Grid */
    .client-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

    /* Tabs */
    #content { padding: 60px 0; }
    #content .nav-pills { flex-direction: column; }
    #content .nav-pills .nav-link { text-align: left; }

    /* Services */
    .service-card { flex-direction: column; text-align: center; }
    .service-card .service-icon { align-self: center; }

    /* Partners */
    .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* Footer */
    #bottom { padding: 40px 0; text-align: center; }
    #bottom .footer-logo { margin-bottom: 24px; }
    #bottom h3 { margin-top: 24px; }
    #footer { text-align: center; }
    #footer .list-inline { justify-content: center; margin-top: 12px; }

    /* 404 */
    #error h1 { font-size: 6rem; }
    #error h2 { font-size: 1.5rem; }

    /* Downloads */
    #downloads .download-item { padding: 10px 16px; }
    #downloads .download-item .download-name { font-size: 0.8125rem; }

    /* Contact */
    .contact-form .form-control { padding: 10px 14px; }

    /* About */
    .about-content { margin-top: 32px; }
    .about-content h2 { font-size: 1.75rem; }

    /* Cookie */
    .cookie-notice .container { flex-direction: column; text-align: center; }

    /* Back to top */
    #backToTop { bottom: 20px; right: 20px; width: 40px; height: 40px; }

    /* Large Title */
    .large-title h2 { font-size: 1.75rem; }
}


/* ==========================================================================
   Small (576px - 767.98px) — Mobile Landscape / Small Tablet
   ========================================================================== */

@media (min-width: 576px) and (max-width: 767.98px) {

    h1 { font-size: 2.25rem; }

    /* Hero */
    #hero h1 { font-size: 2.75rem; }

    /* Sections */
    .section-padding { padding: 70px 0; }

    /* Page Title */
    .page-title h1 { font-size: 2.5rem; }

    /* Partners */
    .partners-grid { grid-template-columns: repeat(3, 1fr); }

    /* Footer */
    #bottom { text-align: center; }
    #footer { text-align: center; }
    #footer .list-inline { justify-content: center; margin-top: 8px; }

    /* 404 */
    #error h1 { font-size: 8rem; }
}


/* ==========================================================================
   Medium (768px - 991.98px) — Tablet
   ========================================================================== */

@media (min-width: 768px) and (max-width: 991.98px) {

    /* Hero */
    #hero h1 { font-size: 2.75rem; }

    /* Navbar */
    #mainNav .nav-link { font-size: 0.875rem; padding: 8px 12px !important; }

    /* Sections */
    .section-padding { padding: 80px 0; }

    /* Partners */
    .partners-grid { grid-template-columns: repeat(4, 1fr); }

    /* About */
    .about-img { margin-bottom: 32px; }

    /* Tabs */
    #content .nav-pills { flex-wrap: wrap; }
}


/* ==========================================================================
   Large (992px - 1199.98px) — Desktop
   ========================================================================== */

@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Navbar */
    #mainNav .nav-link { font-size: 0.875rem; padding: 8px 14px !important; }

    /* Partners */
    .partners-grid { grid-template-columns: repeat(5, 1fr); }

    /* Dropdown hover on desktop */
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}


/* ==========================================================================
   Extra Large (1200px+) — Large Desktop
   ========================================================================== */

@media (min-width: 1200px) {

    /* Hero */
    #hero h1 { font-size: 3.5rem; }

    /* Partners */
    .partners-grid { grid-template-columns: repeat(5, 1fr); }

    /* Dropdown hover on desktop */
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}


/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    #mainNav, #backToTop, .cookie-notice, #bottom, #footer { display: none !important; }
    body { font-size: 12pt; color: #000; }
    a { color: #000; text-decoration: underline; }
    .section-padding { padding: 30px 0; }
}