/* ==========================================
   RESPONSIVE DESIGN
   Mobile & Tablet Optimization
   ========================================== */

/* Tablet - 768px and below */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.2rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    .search-box {
        flex-direction: column;
        border-radius: 20px !important;
        padding: 15px !important;
    }

    .search-box input {
        width: 100%;
        margin-bottom: 10px;
        padding: 12px !important;
        font-size: 1rem !important;
    }

    .search-box .btn {
        width: 100%;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
    }

    .slider-slide {
        height: 250px;
    }

    .stat-box {
        margin: 10px 0;
        min-width: 100%;
    }

    .book-card {
        margin-bottom: 20px;
    }

    .opac-navbar .navbar-brand {
        font-size: 1.2rem !important;
    }

    .opac-hero {
        padding: 60px 0 100px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }
}

/* Mobile - 576px and below */
@media (max-width: 576px) {
    .hero-title {
        font-size: 1.8rem !important;
        letter-spacing: -1px;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .slider-nav {
        width: 32px;
        height: 32px;
    }

    .slider-nav.prev {
        left: 10px;
    }

    .slider-nav.next {
        right: 10px;
    }

    .slider-overlay {
        padding: 15px;
    }

    .book-cover {
        height: 180px;
        width: 130px;
    }

    footer .col-md-4,
    footer .col-md-3,
    footer .col-md-2 {
        margin-bottom: 30px;
    }
}

/* Large Screens - 1200px and above */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .hero-title {
        font-size: 4rem;
    }
}

/* Print Styles */
@media print {

    .opac-navbar,
    footer,
    .search-box,
    .slider-nav,
    .slider-dots {
        display: none;
    }

    .opac-hero {
        page-break-after: avoid;
    }
}