/* ===================================
   RESPONSIVE STYLES
   ================================== */

/* Mobile First Approach - Base styles for mobile */

/* Extra Small Devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .container {
        padding: 0 15px;
    }
    
    h1 {
        font-size: 1.75rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.25rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 14px;
        width: 100%;
        margin-bottom: 10px;
    }
    
    .navbar {
        flex-direction: column;
        padding: 10px;
    }
    
    .nav-menu {
        flex-direction: column;
        width: 100%;
        margin-top: 15px;
    }
    
    .nav-item {
        margin: 5px 0;
        text-align: center;
    }
    
    .hero-section {
        padding: 40px 0;
        text-align: center;
    }
    
    .card {
        margin-bottom: 20px;
    }
    
    .grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .section {
        padding: 30px 0;
    }
}

/* Small Devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .container {
        max-width: 540px;
        padding: 0 20px;
    }
    
    .btn {
        width: auto;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    .grid-sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .hero-section {
        padding: 60px 0;
    }
    
    .section {
        padding: 40px 0;
    }
}

/* Medium Devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    
    .navbar {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .nav-menu {
        flex-direction: row;
        margin-top: 0;
    }
    
    .nav-item {
        margin: 0 15px;
    }
    
    .grid-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .hero-section {
        padding: 80px 0;
    }
    
    .section {
        padding: 60px 0;
    }
    
    .text-md-left {
        text-align: left;
    }
    
    .text-md-center {
        text-align: center;
    }
    
    .text-md-right {
        text-align: right;
    }
}

/* Large Devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
    
    .grid-lg-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .hero-section {
        padding: 100px 0;
    }
    
    .section {
        padding: 80px 0;
    }
}

/* Extra Large Devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
    
    .grid-xl-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-xl-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-xl-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .grid-xl-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .hero-section {
        padding: 120px 0;
    }
    
    .section {
        padding: 100px 0;
    }
}

/* ===================================
   RESPONSIVE UTILITIES
   ================================== */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }

@media (max-width: 575.98px) {
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-flex { display: flex !important; }
}

@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

/* Text alignment utilities */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

@media (min-width: 768px) {
    .text-md-left { text-align: left !important; }
    .text-md-center { text-align: center !important; }
    .text-md-right { text-align: right !important; }
}

@media (min-width: 992px) {
    .text-lg-left { text-align: left !important; }
    .text-lg-center { text-align: center !important; }
    .text-lg-right { text-align: right !important; }
}

/* Spacing utilities for different screen sizes */
@media (max-width: 767.98px) {
    .mb-sm-0 { margin-bottom: 0 !important; }
    .mb-sm-1 { margin-bottom: 0.25rem !important; }
    .mb-sm-2 { margin-bottom: 0.5rem !important; }
    .mb-sm-3 { margin-bottom: 1rem !important; }
    .mb-sm-4 { margin-bottom: 1.5rem !important; }
    .mb-sm-5 { margin-bottom: 3rem !important; }
    
    .mt-sm-0 { margin-top: 0 !important; }
    .mt-sm-1 { margin-top: 0.25rem !important; }
    .mt-sm-2 { margin-top: 0.5rem !important; }
    .mt-sm-3 { margin-top: 1rem !important; }
    .mt-sm-4 { margin-top: 1.5rem !important; }
    .mt-sm-5 { margin-top: 3rem !important; }
}

/* Flexbox utilities */
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }

@media (max-width: 767.98px) {
    .flex-sm-column { flex-direction: column !important; }
    .flex-sm-row { flex-direction: row !important; }
}

@media (min-width: 768px) {
    .flex-md-column { flex-direction: column !important; }
    .flex-md-row { flex-direction: row !important; }
}

/* Width utilities */
.w-100 { width: 100% !important; }
.w-75 { width: 75% !important; }
.w-50 { width: 50% !important; }
.w-25 { width: 25% !important; }

/* Mobile-specific utilities */
@media (max-width: 767.98px) {
    .mobile-center {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    .mobile-full-width {
        width: 100% !important;
    }
    
    .mobile-stack > * {
        display: block !important;
        width: 100% !important;
        margin-bottom: 1rem !important;
    }
    
    .mobile-stack > *:last-child {
        margin-bottom: 0 !important;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-block {
        display: block !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
}