/* ===================================
   Comprehensive Responsive Styles
   Mobile-First Design System
   =================================== */

/* ===== BASE RESPONSIVE ADJUSTMENTS ===== */

/* Container adjustments */
@media (max-width: 1200px) {
    .container {
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
}

@media (max-width: 576px) {
    .container {
        padding: 0 15px;
    }
}

/* Section padding responsive */
@media (max-width: 992px) {
    section {
        padding: 70px 0;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 34px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .section-description {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    section {
        padding: 50px 0;
    }

    .section-header {
        margin-bottom: 30px;
    }

    .section-title {
        font-size: 28px;
    }

    .section-description {
        font-size: 15px;
    }
}

@media (max-width: 576px) {
    section {
        padding: 40px 0;
    }

    .section-title {
        font-size: 24px;
        line-height: 1.3;
    }

    .section-subtitle {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

/* ===== HERO SECTION RESPONSIVE ===== */
@media (max-width: 992px) {
    .hero {
        padding: 100px 0 50px;
        min-height: auto;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .hero-buttons {
        gap: 15px;
        margin-bottom: 40px;
    }

    .hero-buttons .btn {
        padding: 12px 28px;
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .hero {
        padding: 90px 0 40px;
        background-attachment: scroll;
    }

    .hero-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 25px;
        padding: 0 10px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .hero-scroll {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero {
        padding: 80px 0 30px;
    }

    .hero-title {
        font-size: 26px;
    }

    .hero-subtitle {
        font-size: 15px;
        line-height: 1.6;
    }

    .hero-buttons .btn {
        padding: 14px 24px;
        font-size: 14px;
    }
}

/* ===== ABOUT SECTION RESPONSIVE ===== */
@media (max-width: 992px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image {
        max-width: 400px;
        margin: 0 auto;
    }

    .image-decoration {
        width: 100px;
        height: 100px;
        top: -15px;
        right: -15px;
    }

    .about-text h3 {
        font-size: 28px;
    }

    .about-text .lead {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .about-image {
        max-width: 350px;
    }

    .about-text h3 {
        font-size: 24px;
        text-align: center;
    }

    .about-text .lead {
        font-size: 16px;
        text-align: center;
    }

    .about-text p {
        font-size: 15px;
    }

    .about-highlights {
        gap: 15px;
    }

    .highlight-item {
        padding: 15px;
    }

    .highlight-item:hover {
        transform: none;
    }

    .highlight-item i {
        font-size: 24px;
    }

    .highlight-item h4 {
        font-size: 16px;
    }

    .highlight-item p {
        font-size: 13px;
    }
}

@media (max-width: 576px) {
    .about-image {
        max-width: 280px;
    }

    .image-decoration {
        display: none;
    }

    .about-text h3 {
        font-size: 22px;
    }

    .highlight-item {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
}

/* ===== SERVICES SECTION RESPONSIVE ===== */
@media (max-width: 992px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .service-card {
        padding: 30px 25px;
    }

    .service-icon {
        width: 70px;
        height: 70px;
        font-size: 30px;
    }

    .service-card h3 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card {
        padding: 25px 20px;
    }

    .service-card:hover {
        transform: none;
    }

    .service-icon {
        width: 60px;
        height: 60px;
        font-size: 26px;
        margin-bottom: 20px;
    }

    .service-card h3 {
        font-size: 18px;
    }

    .service-card p {
        font-size: 14px;
    }

    .service-features li {
        font-size: 14px;
        padding: 6px 0;
    }
}

/* ===== CTA BANNER RESPONSIVE ===== */
@media (max-width: 992px) {
    .cta-banner {
        padding: 50px 30px;
    }

    .cta-content h3 {
        font-size: 30px;
    }

    .cta-content p {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .cta-banner {
        padding: 40px 25px;
        border-radius: 15px;
    }

    .cta-content h3 {
        font-size: 24px;
    }

    .cta-content p {
        font-size: 15px;
        margin-bottom: 25px;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .cta-banner {
        padding: 30px 20px;
    }

    .cta-content h3 {
        font-size: 20px;
    }

    .cta-content p {
        font-size: 14px;
    }
}

/* ===== POOJA SECTION RESPONSIVE ===== */
@media (max-width: 992px) {
    .puja-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .puja-card {
        padding: 30px 20px;
    }

    .puja-header h3 {
        font-size: 20px;
    }
}

@media (max-width: 768px) {
    .puja-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .puja-card {
        padding: 25px 18px;
    }

    .puja-card:hover {
        transform: none;
    }

    .puja-header i {
        font-size: 35px;
    }

    .puja-header h3 {
        font-size: 18px;
    }

    .puja-tag {
        font-size: 12px;
        padding: 5px 12px;
    }

    .puja-card p {
        font-size: 14px;
    }

    .puja-benefits span {
        font-size: 12px;
        padding: 5px 10px;
    }

    .puja-price {
        font-size: 20px;
    }
}

/* ===== GOOGLE REVIEWS SECTION RESPONSIVE ===== */
@media (max-width: 992px) {
    .reviews-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .rating-overview-card {
        max-width: 100%;
        order: -1;
    }

    .reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .review-card {
        padding: 20px;
    }

    .rating-overview-card {
        padding: 30px 25px;
    }

    .big-rating {
        font-size: 48px;
    }

    .rating-stars-large {
        font-size: 22px;
    }

    .total-reviews {
        font-size: 14px;
    }

    .reviewer-name {
        font-size: 15px;
    }

    .review-text {
        font-size: 14px;
    }
}

@media (max-width: 576px) {
    .rating-overview-card {
        padding: 25px 20px;
    }

    .big-rating {
        font-size: 42px;
    }

    .review-card {
        padding: 18px;
    }
}

/* ===== BLOG SECTION RESPONSIVE ===== */
@media (max-width: 992px) {
    .blog-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .blog-sidebar {
        order: 2;
        max-width: 100%;
    }

    .blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-blogs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-blog-card.featured-large {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .blogs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .featured-blogs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .featured-blog-card.featured-large {
        grid-column: span 1;
    }

    .blog-card {
        border-radius: 15px;
    }

    .blog-card-content {
        padding: 20px;
    }

    .blog-card-content h3 {
        font-size: 18px;
    }

    .blog-meta span {
        font-size: 12px;
    }

    .sidebar-widget {
        padding: 20px;
    }
}

@media (max-width: 576px) {
    .blog-hero-content h1 {
        font-size: 24px;
    }

    .blog-post-header h1 {
        font-size: 22px;
    }

    .blog-post-meta {
        flex-wrap: wrap;
        gap: 10px;
    }

    .blog-post-meta span {
        font-size: 12px;
    }

    .blog-content-body {
        font-size: 15px;
    }

    .blog-content-body h2 {
        font-size: 20px;
    }

    .blog-content-body h3 {
        font-size: 18px;
    }

    .author-box {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .author-box img {
        width: 80px;
        height: 80px;
    }

    .blog-cta-banner {
        padding: 25px 20px;
    }

    .blog-cta-banner h3 {
        font-size: 20px;
    }
}

/* ===== BLOG POST LAYOUT RESPONSIVE ===== */
@media (max-width: 992px) {
    .blog-post-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .blog-sidebar {
        position: static;
    }

    .sticky-widget {
        position: static;
    }
}

/* ===== CONTACT SECTION RESPONSIVE ===== */
@media (max-width: 992px) {
    .contact-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-form-section {
        order: -1;
    }
}

@media (max-width: 768px) {
    .contact-info-item {
        padding: 20px;
    }

    .contact-form {
        padding: 25px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ===== FOOTER RESPONSIVE ===== */
@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .footer-about {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-about {
        grid-column: span 1;
    }

    .footer-about p {
        max-width: 100%;
    }

    .social-links {
        justify-content: center;
    }

    .footer-links ul {
        align-items: center;
    }

    .footer-contact p {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .footer {
        padding: 40px 0 20px;
    }

    .footer-logo {
        height: 45px;
    }

    .footer h4 {
        font-size: 18px;
    }

    .footer p,
    .footer a {
        font-size: 14px;
    }
}

/* ===== BUTTONS RESPONSIVE ===== */
@media (max-width: 768px) {
    .btn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .btn-lg {
        padding: 14px 30px;
        font-size: 16px;
    }
}

@media (max-width: 576px) {
    .btn {
        padding: 12px 20px;
        font-size: 13px;
    }

    .btn i {
        font-size: 14px;
    }
}

/* ===== UTILITY RESPONSIVE CLASSES ===== */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .flex-column-mobile {
        flex-direction: column !important;
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .service-card:hover,
    .puja-card:hover,
    .blog-card:hover,
    .highlight-item:hover {
        transform: none;
    }

    /* Make tap targets larger */
    .nav-link,
    .dropdown-menu li a,
    .btn {
        min-height: 48px;
    }

    /* Disable background attachment fixed on touch */
    .hero {
        background-attachment: scroll;
    }
}

/* ===== SAFE AREA INSETS (Notch devices) ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    .floating-contacts {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(15px + env(safe-area-inset-right));
    }

    .mobile-nav {
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }

    .footer {
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* ===== MOBILE RESPONSIVENESS FIXES ===== */

/* --- 768px Breakpoint Fixes --- */
@media (max-width: 768px) {
    /* Fix auto-fit grids with high minmax floors that overflow on tablets */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .blogs-grid {
        grid-template-columns: 1fr;
    }

    .puja-grid {
        grid-template-columns: 1fr;
    }

    /* Blog layouts: fixed 350px sidebar must stack */
    .blog-layout,
    .blog-post-layout {
        grid-template-columns: 1fr;
    }

    .blog-sidebar {
        position: static;
    }

    /* Service detail grid: ensure sidebar stacks and is full width */
    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .service-sidebar {
        position: static;
        display: block;
    }

    /* Guna table: ensure horizontal scroll hint */
    .guna-table {
        margin-left: -15px;
        margin-right: -15px;
        padding: 0 15px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .guna-table table {
        min-width: 0;
    }

    /* Blog tables: responsive horizontal scroll */
    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 20px -10px;
        padding: 0 10px;
    }

    .table-scroll-wrapper .blog-table {
        margin: 0;
        min-width: 400px;
    }

    .blog-table th,
    .blog-table td {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Aspect items: reduce hover transform on mobile */
    .aspect-item {
        padding: 20px;
    }

    /* CTA box buttons stack on mobile */
    .cta-box .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-box .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    /* Contact card: disable hover transform on touch */
    .contact-card:hover {
        transform: none;
    }

    /* Fix call-cta button min-width overflow */
    .call-cta .btn {
        min-width: unset;
        width: 100%;
        max-width: 100%;
    }

    /* Ensure images don't overflow */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* --- 480px Breakpoint Fixes --- */
@media (max-width: 480px) {
    /* Container tighter padding */
    .container {
        padding: 0 12px;
    }

    /* Page hero: smaller text and padding */
    .page-hero {
        min-height: 250px;
        padding: 100px 12px 50px;
    }

    .page-hero-content h1 {
        font-size: 22px;
        line-height: 1.3;
    }

    .page-hero-content p {
        font-size: 14px;
    }

    /* Service detail section: tighter spacing */
    .service-detail-section {
        padding: 30px 0;
    }

    .service-intro h2,
    .service-main-content h2 {
        font-size: 20px;
        margin: 25px 0 15px;
    }

    .service-intro p {
        font-size: 15px;
    }

    /* Features grid: already 1fr from 768px, reduce padding */
    .feature-item {
        padding: 15px;
    }

    .feature-item i {
        font-size: 28px;
    }

    .feature-item h4 {
        font-size: 16px;
    }

    /* Aspect items: stack icon and text vertically on very small screens */
    .aspect-item {
        flex-direction: column;
        gap: 12px;
        padding: 15px;
    }

    .aspect-item i {
        font-size: 24px;
    }

    .aspect-item h4 {
        font-size: 16px;
    }

    /* Guna table: smaller text, card-style on mobile */
    .guna-table th,
    .guna-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Blog tables: tighter on small screens */
    .blog-table th,
    .blog-table td {
        padding: 8px 10px;
        font-size: 12px;
    }

    /* Problems grid: already 1fr from 768px, reduce padding */
    .problem-item {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Info and warning boxes */
    .info-box,
    .warning-box {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .info-box > i,
    .warning-box > i {
        font-size: 22px;
    }

    /* CTA box: smaller on mobile */
    .cta-box {
        padding: 25px 15px;
        border-radius: 15px;
    }

    .cta-box h3 {
        font-size: 18px;
    }

    .cta-box p {
        font-size: 14px;
        margin-bottom: 15px;
    }

    /* Sidebar widgets: compact */
    .sidebar-widget {
        padding: 15px;
        margin-bottom: 15px;
    }

    .sidebar-widget h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }

    /* Price widget items */
    .price-item {
        padding: 10px 0;
    }

    .price-label {
        font-size: 14px;
    }

    .price-note {
        font-size: 12px;
    }

    /* Services nav links */
    .services-nav li a {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Requirements list */
    .requirements-list li {
        padding: 10px 0;
        font-size: 13px;
    }

    /* Benefits list */
    .benefits-list li {
        font-size: 14px;
        padding: 10px 0;
    }

    /* Process steps: reduce min-width */
    .step {
        min-width: unset;
        width: 100%;
        padding: 20px 15px;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* Gemstone cards: reduce padding */
    .gemstone-card {
        padding: 15px;
    }

    .gemstone-card h4 {
        font-size: 14px;
    }

    /* FAQ section */
    .faq-section {
        padding: 40px 0;
    }

    .faq-item {
        padding: 20px;
    }

    .faq-item h4 {
        font-size: 15px;
    }

    /* Review cards */
    .review-card {
        padding: 18px 15px;
    }

    /* Blog cards */
    .blog-card-content {
        padding: 15px;
    }

    .blog-card-content h3 {
        font-size: 16px;
    }

    /* Footer: force single column */
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* Section titles */
    .section-title {
        font-size: 22px;
    }

    /* Hero buttons: full width */
    .hero-buttons .btn {
        width: 100%;
        max-width: 100%;
    }

    /* Puja cards */
    .puja-card {
        padding: 18px 15px;
    }

    .puja-header h3 {
        font-size: 16px;
    }

    .puja-header i {
        font-size: 28px;
    }

    /* Breadcrumbs: smaller */
    .hero-breadcrumb a,
    .hero-breadcrumb span {
        font-size: 12px;
    }

    .hero-breadcrumb i {
        font-size: 8px;
    }

    /* Fix auto-fit grids: override minmax to prevent overflow */
    .services-grid,
    .reviews-grid,
    .blogs-grid,
    .puja-grid,
    .footer-content {
        grid-template-columns: 1fr !important;
    }

    /* Ensure no horizontal overflow from any element */
    .service-main-content,
    .service-sidebar,
    .blog-post-content,
    .blog-sidebar {
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* ===== ENHANCED MOBILE RESPONSIVENESS ===== */

/* --- 768px Breakpoint Additions --- */
@media (max-width: 768px) {
    /* Stack post-layout sidebar (future-proof) */
    .post-layout {
        grid-template-columns: 1fr !important;
    }

    /* Generic cta-buttons stacking (outside cta-box context) */
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* --- 480px Breakpoint Additions --- */
@media (max-width: 480px) {
    /* Direct .page-hero heading/paragraph selectors */
    .page-hero h1 {
        font-size: 1.5rem;
    }
    .page-hero p {
        font-size: 0.9rem;
    }

    /* Breadcrumbs (generic class) */
    .breadcrumbs {
        font-size: 0.8rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* FAQ question text */
    .faq-question {
        font-size: 1rem;
    }

    /* Guna table cell font-size override */
    .guna-table td,
    .guna-table th {
        font-size: 0.85rem;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .header,
    .floating-contacts,
    .mobile-nav,
    .mobile-menu-overlay,
    .cta-banner,
    .sidebar-widget.cta-widget {
        display: none !important;
    }

    .hero {
        min-height: auto;
        padding: 40px 0;
    }

    section {
        padding: 30px 0;
    }

    .service-card,
    .puja-card,
    .blog-card {
        break-inside: avoid;
    }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-cosmic-bg,
    .stars-container,
    .zodiac-container,
    .particles-container,
    .mandala-container,
    .shooting-star {
        display: none;
    }
}