/* Responsive CSS for Mindful Strategy Template */

/* Extra Large Devices (Desktops) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
    
    .hero-title {
        font-size: 5rem;
    }
    
    .hero-subtitle {
        font-size: 1.8rem;
    }
}

/* Large Devices (Desktops) */
@media (max-width: 1199.98px) {
    html {
        font-size: 0.95rem;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    .section-padding {
        padding: var(--spacing-lg) 0;
    }
}

/* Medium Devices (Tablets) */
@media (max-width: 991.98px) {
    html {
        font-size: 0.9rem;
    }
    
    .hero-title {
        font-size: 3rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .about-image {
        margin-bottom: var(--spacing-md);
    }
    
    .hero-section {
        padding: 120px 0 80px;
        min-height: auto;
    }
    
    .hero-image {
        margin-top: var(--spacing-md);
    }
    
    .priceplan-item {
        min-width: 280px;
        margin-bottom: var(--spacing-md);
    }
    
    .footer-top {
        gap: var(--spacing-md);
    }
    
    .footer-brand, .footer-menu, .footer-contact {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: var(--spacing-md);
    }
    
    .gallery-item.wide, .gallery-item.tall, .gallery-item.large {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* Small Devices (Landscape Phones) */
@media (max-width: 767.98px) {
    html {
        font-size: 0.85rem;
    }
    
    .section-title-wrapper {
        margin-bottom: var(--spacing-md);
    }
    
    .section-title {
        font-size: var(--font-size-h3);
    }
    
    .section-subtitle {
        font-size: var(--font-size-h6);
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.2rem;
    }
    
    .header .navbar-brand {
        font-size: 1.5rem;
    }
    
    .contact-form-wrapper, .contact-info {
        padding: var(--spacing-md);
    }
    
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
    
    .review-item {
        margin: var(--spacing-xs);
    }
    
    .gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        grid-auto-rows: 200px;
    }
    
    .blog-image {
        height: 180px;
    }
    
    .header .nav-link {
        padding: 8px 15px;
    }
    
    .team-member-image {
        height: 250px;
    }
    
    .page-header {
        height: 40vh;
    }
    
    .page-title {
        font-size: 2.5rem;
    }
}

/* Extra Small Devices (Portrait Phones) */
@media (max-width: 575.98px) {
    html {
        font-size: 0.8rem;
    }
    
    .section-padding {
        padding: var(--spacing-md) 0;
    }
    
    .hero-section {
        padding: 100px 0 60px;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .header .navbar {
        padding: 15px 0;
    }
    
    .header .navbar-brand {
        font-size: 1.4rem;
    }
    
    .service-item, .feature-item, .priceplan-item, .team-member, .blog-item {
        margin-bottom: var(--spacing-md);
    }
    
    .service-image {
        height: 180px;
    }
    
    .service-content, .feature-item, .priceplan-body, .team-member-content, .blog-content, .review-item {
        padding: var(--spacing-sm);
    }
    
    .priceplan-header {
        padding: var(--spacing-sm);
    }
    
    .review-author-avatar {
        width: 50px;
        height: 50px;
    }
    
    .review-text::before {
        font-size: 3rem;
    }
    
    .contact-form-wrapper, .contact-info {
        padding: var(--spacing-sm);
    }
    
    .footer {
        padding: var(--spacing-lg) 0 var(--spacing-sm);
    }
    
    .footer-logo {
        font-size: 1.6rem;
    }
    
    .footer-menu-title {
        font-size: 1.1rem;
        margin-bottom: var(--spacing-sm);
    }
    
    .team-member-image {
        height: 220px;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: 250px;
    }
    
    .page-header {
        height: 30vh;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .form-group {
        margin-bottom: var(--spacing-sm);
    }
    
    .accordion-button {
        padding: var(--spacing-sm);
        font-size: 1rem;
    }
    
    .accordion-button::after {
        right: var(--spacing-sm);
    }
}

/* For Animations - Respect user preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-color: #9e8df2;
        --primary-light: #bbadf6;
        --primary-dark: #6c4ce3;
        --secondary-color: #90caf9;
        --secondary-light: #c3fdff;
        --secondary-dark: #5d99c6;
        --accent-color: #ff8a65;
        --accent-light: #ffbb93;
        --accent-dark: #c75b39;
        --neutral-color: #263238;
        --neutral-light: #37474f;
        --neutral-dark: #102027;
        --dark-color: #eceff1;
        --dark-light: #ffffff;
        --dark-dark: #babdbe;
    }
    
    body {
        background-color: var(--neutral-dark);
    }
    
    .header {
        background-color: rgba(16, 32, 39, 0.95);
    }
    
    .header.scrolled {
        background-color: var(--neutral-dark);
    }
    
    .header .navbar-brand, .header .nav-link:hover, .header .nav-link.active {
        color: var(--primary-light);
    }
    
    .header .nav-link {
        color: var(--dark-light);
    }
    
    .about-section, .services-section, .team-section {
        background-color: var(--neutral-dark);
    }
    
    .about-feature, .service-item, .feature-item, .priceplan-item, .team-member, .coreinfo-item, .blog-item, .accordion-item {
        background-color: var(--neutral-color);
    }
    
    .features-section, .reviews-section, .contact-section, .faq-section {
        background-color: var(--neutral-dark);
    }
    
    .priceplan-section, .coreinfo-section, .blog-section, .gallery-section {
        background-color: var(--neutral-color);
    }
    
    .footer {
        background-color: var(--neutral-dark);
    }
    
    .section-title, .about-feature-name, .service-name, .feature-name, .team-member-name, .coreinfo-title, .blog-title, .accordion-button, .review-author-name {
        color: var(--dark-light);
    }
    
    .section-description, .about-feature-desc, .service-desc, .feature-desc, .priceplan-desc, .coreinfo-desc, .blog-excerpt, .accordion-body, .form-check-label {
        color: var(--dark-color);
    }
    
    .form-control, .service-select select {
        background-color: var(--neutral-color);
        border-color: var(--neutral-light);
        color: var(--dark-light);
    }
    
    .form-control:focus, .service-select select:focus {
        border-color: var(--primary-color);
    }
    
    .accordion-button {
        background-color: var(--neutral-color);
    }
    
    .accordion-button:not(.collapsed) {
        background-color: var(--primary-dark);
    }
    
    .contact-form-container {
        background-color: var(--neutral-color);
    }
}

/* Print Styles */
@media print {
    .header, .footer, .contact-form, .breadcrumb {
        display: none !important;
    }
    
    .section-padding {
        padding: 20px 0 !important;
    }
    
    .hero-section, .about-section, .services-section, .features-section, 
    .priceplan-section, .team-section, .reviews-section, .coreinfo-section, 
    .blog-section, .faq-section, .gallery-section {
        page-break-inside: avoid;
    }
    
    .service-item, .feature-item, .priceplan-item, .team-member, .coreinfo-item, .blog-item {
        page-break-inside: avoid;
        break-inside: avoid;
    }
    
    .hero-shape, .animate-fade-in, .animate-slide-up, .animate-slide-left, .animate-slide-right {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}