/**
 * Comprehensive Responsive Design - DIET Raigad
 * Ensures full responsiveness across all devices
 * Mobile-first approach with breakpoints for all screen sizes
 */

/* ============================================
   VIEWPORT META TAG ENFORCEMENT
   ============================================ */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* ============================================
   CONTAINER RESPONSIVE
   ============================================ */
.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ============================================
   TOP BAR - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .top-bar-row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .government-emblem {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    
    .top-bar-search {
        width: 100%;
        max-width: 100%;
    }
    
    .top-bar-controls {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .top-bar {
        padding: 0.5rem 0 !important;
    }
    
    .government-emblem {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .emblem-svg,
    .emblem-logo {
        width: 40px !important;
        height: 40px !important;
    }
    
    .government-emblem-text .gov-title {
        font-size: 13px !important;
        text-align: center;
    }
    
    .government-emblem-text .gov-subtitle {
        font-size: 11px !important;
        text-align: center;
    }
    
    .top-bar-search form {
        flex-direction: row;
    }
    
    .top-bar-controls {
        flex-wrap: wrap;
    }
    
    .top-bar-controls .btn {
        flex: 1;
        min-width: 45px;
    }
}

@media (max-width: 575.98px) {
    .top-bar-search .form-control {
        font-size: 14px !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    .top-bar-controls .btn {
        padding: 0.5rem !important;
        font-size: 12px !important;
    }
}

/* ============================================
   NAVBAR - RESPONSIVE
   ============================================ */
/* Hide desktop menu on mobile, show side drawer toggle */
@media (max-width: 991.98px) {
    .navbar .d-lg-block {
        display: none !important;
    }
    
    .navbar-toggler {
        display: block !important;
    }
    
    /* Ensure side drawer menu has maximum contrast with white background */
    .mobile-nav-link {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
    
    .mobile-nav-link span,
    .mobile-nav-link * {
        color: #000000 !important;
    }
    
    .mobile-submenu-link {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
    
    .mobile-submenu-link span,
    .mobile-submenu-link * {
        color: #000000 !important;
    }
    
    .mobile-submenu {
        background-color: #ffffff !important;
    }
    
    .mobile-nav-link:not(:hover):not(.active) {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
    
    .mobile-submenu-link:not(:hover) {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
    
    .offcanvas {
        background-color: #ffffff !important;
    }
    
    .offcanvas-body {
        background-color: #ffffff !important;
    }
    
    /* Ensure icons have proper contrast */
    .mobile-nav-link:not(:hover):not(.active) i {
        color: #333333 !important;
    }
    
    .mobile-submenu-link:not(:hover) i {
        color: #333333 !important;
    }
}

/* Desktop menu always visible on large screens */
@media (min-width: 992px) {
    .navbar .d-lg-block {
        display: block !important;
    }
    
    .navbar-toggler.d-lg-none {
        display: none !important;
    }
    
    /* Hide offcanvas on desktop */
    .offcanvas {
        display: none !important;
    }
    
    /* Ensure desktop dropdown has maximum contrast */
    .navbar .dropdown-item {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
    
    .navbar .dropdown-item:link,
    .navbar .dropdown-item:visited {
        color: #000000 !important;
        background-color: #ffffff !important;
    }
    
    .navbar .dropdown-menu {
        background-color: #ffffff !important;
    }
}

@media (max-width: 767.98px) {
    .navbar {
        padding: 0.25rem 0 !important;
    }
    
    .navbar-toggler {
        padding: 0.4rem 0.6rem;
        font-size: 1rem;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-radius: 4px;
    }
    
    .navbar-toggler:hover {
        border-color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.1);
    }
    
    /* Extra contrast for mobile menu items with white background */
    .mobile-nav-link {
        color: #000000 !important;
        background-color: #ffffff !important;
        font-weight: 600;
    }
    
    .mobile-nav-link span,
    .mobile-nav-link * {
        color: #000000 !important;
    }
    
    .mobile-submenu-link {
        color: #000000 !important;
        background-color: #ffffff !important;
        font-weight: 600;
    }
    
    .mobile-submenu-link span,
    .mobile-submenu-link * {
        color: #000000 !important;
    }
    
    .mobile-submenu {
        background-color: #ffffff !important;
    }
    
    /* Force all child elements to have black color */
    .mobile-nav-link:not(:hover):not(.active) * {
        color: #000000 !important;
    }
    
    .mobile-submenu-link:not(:hover) * {
        color: #000000 !important;
    }
    
    .offcanvas {
        background-color: #ffffff !important;
    }
    
    .offcanvas-body {
        background-color: #ffffff !important;
    }
}

@media (max-width: 575.98px) {
    /* Maximum contrast for very small screens with white background */
    .mobile-nav-link {
        color: #000000 !important;
        background-color: #ffffff !important;
        font-weight: 600;
    }
    
    .mobile-nav-link span,
    .mobile-nav-link *,
    .mobile-nav-link:not(:hover):not(.active) * {
        color: #000000 !important;
    }
    
    .mobile-submenu-link {
        color: #000000 !important;
        background-color: #ffffff !important;
        font-weight: 600;
    }
    
    .mobile-submenu-link span,
    .mobile-submenu-link *,
    .mobile-submenu-link:not(:hover) * {
        color: #000000 !important;
    }
    
    .mobile-submenu {
        background-color: #ffffff !important;
    }
    
    /* Ensure icons are visible */
    .mobile-nav-link:not(:hover):not(.active) i {
        color: #333333 !important;
    }
    
    .mobile-submenu-link:not(:hover) i {
        color: #333333 !important;
    }
    
    .offcanvas {
        background-color: #ffffff !important;
    }
    
    .offcanvas-body {
        background-color: #ffffff !important;
    }
}

/* ============================================
   HERO SECTION - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .hero-slider,
    .hero-default {
        height: 350px;
    }
    
    .hero-content {
        padding: 2rem 1rem;
    }
    
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.05rem;
    }
}

@media (max-width: 767.98px) {
    .hero-slider,
    .hero-default {
        height: 300px;
    }
    
    .hero-content {
        padding: 1.5rem 1rem;
    }
    
    .hero-badge {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
        margin-bottom: 1rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .hero-title i {
        font-size: 1.25rem;
        margin-top: 0;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .hero-subtitle i {
        font-size: 1rem;
        margin-top: 0;
    }
    
    .btn-hero {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .carousel-control-prev,
    .carousel-control-next {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 575.98px) {
    .hero-slider,
    .hero-default {
        height: 250px;
    }
    
    .hero-content {
        padding: 1rem 0.75rem;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 0.35rem 0.6rem;
    }
    
    .hero-title {
        font-size: 1.25rem;
    }
    
    .hero-subtitle {
        font-size: 0.85rem;
    }
    
    .btn-hero {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        justify-content: center;
    }
}

/* ============================================
   QUICK LINKS - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .quick-links-section {
        padding: 2rem 0;
    }
    
    .quick-link-card.professional {
        min-height: 160px;
        padding: 1.5rem 1rem;
    }
    
    .quick-link-icon-wrapper {
        width: 70px;
        height: 70px;
    }
    
    .quick-link-icon {
        font-size: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .quick-links-section {
        padding: 1.5rem 0;
    }
    
    .quick-link-card.professional {
        min-height: 140px;
        padding: 1.25rem 0.75rem;
    }
    
    .quick-link-icon-wrapper {
        width: 60px;
        height: 60px;
        margin-bottom: 0.75rem;
    }
    
    .quick-link-icon {
        font-size: 2rem;
    }
    
    .quick-link-card.professional h5 {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .quick-links-section {
        padding: 1rem 0;
    }
    
    .quick-link-card.professional {
        min-height: 120px;
        padding: 1rem 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .quick-link-icon-wrapper {
        width: 50px;
        height: 50px;
        margin-bottom: 0.5rem;
    }
    
    .quick-link-icon {
        font-size: 1.75rem;
    }
    
    .quick-link-card.professional h5 {
        font-size: 0.85rem;
        line-height: 1.3;
    }
    
    .quick-link-arrow {
        font-size: 1rem;
        margin-top: 0.5rem;
    }
}

/* ============================================
   ABOUT SECTION - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .about-section {
        padding: 2.5rem 0;
    }
    
    .about-content {
        padding: 1rem 0;
    }
    
    .section-title-left {
        font-size: 1.75rem;
    }
    
    .stats-showcase {
        margin-top: 2rem;
    }
}

@media (max-width: 767.98px) {
    .about-section {
        padding: 2rem 0;
    }
    
    .section-badge {
        font-size: 0.85rem;
        padding: 0.4rem 1rem;
    }
    
    .section-title-left {
        font-size: 1.5rem;
    }
    
    .content-text {
        font-size: 0.95rem;
    }
    
    .feature-item {
        padding: 1rem 1.25rem;
    }
    
    .feature-item i {
        font-size: 1.25rem;
    }
    
    .feature-item span {
        font-size: 0.95rem;
    }
    
    .stat-showcase-item {
        padding: 1.5rem 1.25rem;
    }
    
    .stat-number-large {
        font-size: 2.5rem;
    }
    
    .stat-label-large {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .about-section {
        padding: 1.5rem 0;
    }
    
    .section-title-left {
        font-size: 1.25rem;
    }
    
    .content-text {
        font-size: 0.9rem;
    }
    
    .feature-item {
        padding: 0.875rem 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .btn-primary-professional {
        width: 100%;
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        justify-content: center;
    }
    
    .stat-showcase-item {
        padding: 1.25rem 1rem;
    }
    
    .stat-number-large {
        font-size: 2rem;
    }
}

/* ============================================
   NEWS TICKER - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .news-ticker-compact {
        padding: 1rem 0;
    }
    
    .news-ticker-compact .container {
        flex-direction: column;
        gap: 1rem;
    }
    
    .news-ticker-title {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    
    .news-ticker-compact .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    .news-ticker-compact {
        padding: 0.875rem 0;
    }
    
    .news-ticker-title {
        font-size: 0.9rem;
    }
    
    .news-item-compact {
        font-size: 0.85rem;
        padding: 0.4rem 0.75rem;
        margin: 0.25rem 0.25rem 0.25rem 0;
    }
    
    .news-ticker-compact .btn {
        width: 100%;
        margin-top: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .news-ticker-title {
        font-size: 0.85rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .news-item-compact {
        font-size: 0.8rem;
        padding: 0.35rem 0.6rem;
        display: block;
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* ============================================
   PROGRAMMES SECTION - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .programmes-section {
        padding: 2.5rem 0;
    }
    
    .programme-card-professional {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .programmes-section {
        padding: 2rem 0;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-subtitle {
        font-size: 0.9rem;
    }
    
    .programme-image {
        height: 180px;
    }
    
    .programme-content {
        padding: 1.5rem;
    }
    
    .programme-title {
        font-size: 1.2rem;
    }
    
    .programme-description {
        font-size: 0.9rem;
    }
}

@media (max-width: 575.98px) {
    .programmes-section {
        padding: 1.5rem 0;
    }
    
    .section-title {
        font-size: 1.25rem;
    }
    
    .programme-image {
        height: 160px;
    }
    
    .programme-content {
        padding: 1.25rem;
    }
    
    .programme-badge {
        font-size: 0.75rem;
        padding: 0.4rem 0.875rem;
    }
    
    .programme-title {
        font-size: 1.1rem;
    }
    
    .programme-description {
        font-size: 0.85rem;
    }
    
    .programme-link {
        font-size: 0.9rem;
        padding: 0.5rem 0.875rem;
    }
    
    .btn-outline-primary-professional {
        width: 100%;
        padding: 0.75rem 1.5rem;
        justify-content: center;
    }
}

/* ============================================
   STATISTICS SECTION - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .stats-section-professional {
        padding: 2.5rem 0;
    }
    
    .stat-card-professional {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .stats-section-professional {
        padding: 2rem 0;
    }
    
    .section-title-white {
        font-size: 1.5rem;
    }
    
    .section-subtitle-white {
        font-size: 0.9rem;
    }
    
    .stat-card-professional {
        padding: 1.5rem 1.25rem;
    }
    
    .stat-icon-wrapper i {
        font-size: 2rem;
    }
    
    .stat-number-professional {
        font-size: 2.5rem;
    }
    
    .stat-label-professional {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .stats-section-professional {
        padding: 1.5rem 0;
    }
    
    .section-title-white {
        font-size: 1.25rem;
    }
    
    .stat-card-professional {
        padding: 1.25rem 1rem;
    }
    
    .stat-icon-wrapper {
        margin-bottom: 0.75rem;
    }
    
    .stat-icon-wrapper i {
        font-size: 1.75rem;
    }
    
    .stat-number-professional {
        font-size: 2rem;
    }
    
    .stat-label-professional {
        font-size: 0.9rem;
    }
}

/* ============================================
   NEWS & EVENTS SECTION - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .news-events-section {
        padding: 2.5rem 0;
    }
    
    .news-events-section .col-lg-6 {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .news-events-section {
        padding: 2rem 0;
    }
    
    .news-events-section .card-header {
        padding: 0.875rem 1rem;
    }
    
    .news-events-section .card-header h5 {
        font-size: 1rem;
    }
    
    .news-events-section .card-body {
        padding: 1rem;
    }
    
    .news-compact-item,
    .event-compact-item {
        padding: 0.875rem 0;
    }
    
    .news-compact-item h6,
    .event-compact-item h6 {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .news-events-section {
        padding: 1.5rem 0;
    }
    
    .news-events-section .card-header {
        padding: 0.75rem 0.875rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .news-events-section .card-header h5 {
        font-size: 0.95rem;
    }
    
    .news-events-section .card-header .btn {
        width: 100%;
        font-size: 0.85rem;
    }
    
    .news-compact-item h6,
    .event-compact-item h6 {
        font-size: 0.9rem;
    }
    
    .news-compact-item small,
    .event-compact-item small {
        font-size: 0.75rem;
    }
}

/* ============================================
   INNER PAGES - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    .inner-page-content {
        padding: 1.5rem 0;
    }
    
    .inner-page-sidebar {
        margin-top: 2rem;
    }
}

@media (max-width: 767.98px) {
    .inner-page-content {
        padding: 1.25rem 0;
    }
    
    .content-area {
        padding: 0;
    }
    
    .content-area h2 {
        font-size: 1.25rem;
    }
    
    .content-area h3 {
        font-size: 1.1rem;
    }
    
    .content-area p {
        font-size: 0.95rem;
    }
    
    .sidebar-box {
        margin-bottom: 1.5rem;
    }
    
    .sidebar-title {
        font-size: 1.1rem;
        padding: 1rem 1.25rem;
    }
    
    .sidebar-menu-link {
        padding: 0.875rem 1.25rem;
        font-size: 14px;
    }
    
    .page-featured-image {
        margin-bottom: 1.5rem;
    }
    
    .page-featured-image img {
        max-height: 250px;
    }
}

@media (max-width: 575.98px) {
    .inner-page-content {
        padding: 1rem 0;
    }
    
    .content-area h2 {
        font-size: 1.1rem;
    }
    
    .content-area h3 {
        font-size: 1rem;
    }
    
    .content-area p {
        font-size: 0.9rem;
        text-align: left;
    }
    
    .content-area ul,
    .content-area ol {
        padding-left: 1.5rem;
    }
    
    .sidebar-title {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }
    
    .sidebar-menu-link {
        padding: 0.75rem 1rem;
        font-size: 13px;
    }
    
    .page-featured-image img {
        max-height: 200px;
    }
}

/* ============================================
   TABLES - RESPONSIVE
   ============================================ */
@media (max-width: 767.98px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table {
        font-size: 0.9rem;
    }
    
    .table th,
    .table td {
        padding: 0.75rem 0.5rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .table {
        font-size: 0.85rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem 0.375rem;
        font-size: 0.8rem;
    }
}

/* ============================================
   FORMS - RESPONSIVE
   ============================================ */
@media (max-width: 767.98px) {
    .form-control,
    .form-select,
    textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    .form-label {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .form-control,
    .form-select,
    textarea {
        padding: 0.75rem;
        font-size: 16px;
    }
    
    .form-label {
        font-size: 0.9rem;
    }
    
    .btn {
        width: 100%;
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   CARDS - RESPONSIVE
   ============================================ */
@media (max-width: 767.98px) {
    .card {
        margin-bottom: 1.25rem;
    }
    
    .card-header {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }
    
    .card-body {
        padding: 1.25rem 1rem;
    }
    
    .card-title {
        font-size: 1.1rem;
    }
    
    .card-text {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    .card-header {
        padding: 0.75rem 0.875rem;
        font-size: 0.95rem;
    }
    
    .card-body {
        padding: 1rem 0.875rem;
    }
    
    .card-title {
        font-size: 1rem;
    }
    
    .card-text {
        font-size: 0.9rem;
    }
}

/* ============================================
   FOOTER - RESPONSIVE
   ============================================ */
@media (max-width: 991.98px) {
    footer {
        padding: 2rem 0 1.5rem;
    }
    
    footer .row > div {
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    footer {
        padding: 1.5rem 0 1rem;
    }
    
    footer h5 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    footer p,
    footer li {
        font-size: 0.9rem;
    }
    
    footer .row > div {
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    footer {
        padding: 1.25rem 0 0.875rem;
    }
    
    footer h5 {
        font-size: 1rem;
    }
    
    footer p,
    footer li {
        font-size: 0.85rem;
    }
    
    footer .bg-secondary {
        padding: 1rem 0.75rem;
        font-size: 0.8rem;
    }
}

/* ============================================
   UTILITY CLASSES - RESPONSIVE
   ============================================ */
@media (max-width: 767.98px) {
    .d-md-none {
        display: none !important;
    }
    
    .d-md-block {
        display: block !important;
    }
    
    .text-md-center {
        text-align: center !important;
    }
    
    .mb-md-3 {
        margin-bottom: 1rem !important;
    }
    
    .mt-md-3 {
        margin-top: 1rem !important;
    }
}

@media (max-width: 575.98px) {
    .d-sm-none {
        display: none !important;
    }
    
    .d-sm-block {
        display: block !important;
    }
    
    .text-sm-center {
        text-align: center !important;
    }
    
    .mb-sm-2 {
        margin-bottom: 0.5rem !important;
    }
    
    .mt-sm-2 {
        margin-top: 0.5rem !important;
    }
}

/* ============================================
   IMAGES - RESPONSIVE
   ============================================ */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

/* ============================================
   TYPOGRAPHY - RESPONSIVE
   ============================================ */
@media (max-width: 767.98px) {
    body {
        font-size: 15px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    h4 {
        font-size: 1.1rem;
    }
    
    h5 {
        font-size: 1rem;
    }
    
    h6 {
        font-size: 0.95rem;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.5rem;
    }
    
    h2 {
        font-size: 1.35rem;
    }
    
    h3 {
        font-size: 1.2rem;
    }
    
    h4 {
        font-size: 1.05rem;
    }
    
    h5 {
        font-size: 0.95rem;
    }
    
    h6 {
        font-size: 0.9rem;
    }
}

/* ============================================
   PAGINATION - RESPONSIVE
   ============================================ */
@media (max-width: 575.98px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-link {
        padding: 0.5rem 0.6rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   ALERTS - RESPONSIVE
   ============================================ */
@media (max-width: 575.98px) {
    .alert {
        padding: 0.875rem 1rem;
        font-size: 0.9rem;
    }
}

/* ============================================
   GALLERY - RESPONSIVE
   ============================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.gallery-item img {
    aspect-ratio: 4 / 3;
}

@media (max-width: 767.98px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.65rem;
    }
    
    .gallery-item img {
        aspect-ratio: 4 / 3;
    }
}

/* ============================================
   BREADCRUMB - RESPONSIVE
   ============================================ */
@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: 0.85rem;
        padding: 0.5rem 0;
    }
    
    .breadcrumb-item {
        display: inline;
    }
}

/* ============================================
   GENERAL RESPONSIVE FIXES
   ============================================ */
@media (max-width: 767.98px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }
    
    /* Ensure proper spacing */
    .row {
        margin-left: -7.5px;
        margin-right: -7.5px;
    }
    
    .row > * {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
}

@media (max-width: 575.98px) {
    .row {
        margin-left: -5px;
        margin-right: -5px;
    }
    
    .row > * {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .navbar,
    .top-bar,
    footer,
    .btn,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
    
    .container {
        max-width: 100%;
    }
}