/* ==========================================================================
   SVM LAND PROMOTERS - BLOG DETAILS RESPONSIVE FRAMEWORK (OPTIMIZED)
   Dedicated viewport adjustments with eliminated selector and rule redundancy.
   ========================================================================== */

/* ==========================================================================
   1. ULTRAWIDE MONITORS (max-width: 1920px)
   ========================================================================== */
@media (max-width: 1920px) {
    /* Desktop layout remains visually perfect and identical */
}

/* ==========================================================================
   2. LARGE DESKTOPS (max-width: 1600px)
   ========================================================================== */
@media (max-width: 1600px) {
    /* Desktop layout remains visually perfect and identical */
}

/* ==========================================================================
   3. DESKTOPS (max-width: 1440px)
   ========================================================================== */
@media (max-width: 1440px) {
    /* Desktop layout remains visually perfect and identical */
}

/* ==========================================================================
   4. SMALL DESKTOPS / LARGE LAPTOPS (max-width: 1280px)
   ========================================================================== */
@media (max-width: 1280px) {
    .details-container,
    .blog-details-card,
    .blog-details-wrapper,
    .article-card,
    .details-wrapper {
        width: 92%;
        max-width: var(--container-width);
        margin-inline: auto;
        border-radius: 1.75rem !important;
        overflow: hidden !important;
    }
    
    .details-image-wrapper {
        overflow: hidden !important;
        border-top-left-radius: inherit !important;
        border-top-right-radius: inherit !important;
    }

    .details-image-wrapper img {
        display: block !important;
        width: 100% !important;
        border-top-left-radius: inherit !important;
        border-top-right-radius: inherit !important;
    }
}

/* ==========================================================================
   5. LAPTOPS (max-width: 1100px)
   ========================================================================== */
@media (max-width: 1100px) {
    .details-container,
    .blog-details-card,
    .blog-details-wrapper,
    .article-card,
    .details-wrapper {
        width: 94%;
    }
    .premium-header {
        padding: 1.25rem 2.5rem;
    }
}

/* ==========================================================================
   6. TABLET LANDSCAPE (max-width: 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    .details-container,
    .blog-details-card,
    .blog-details-wrapper,
    .article-card,
    .details-wrapper {
        width: 95%;
    }
    .premium-header {
        padding: 1rem 2rem;
    }
    .details-image-wrapper img {
        height: 420px;
    }
    
    /* Footer landscape layouts compatibility */
    .lux-footer .container {
        flex-direction: column !important;
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
    .footer-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem !important;
        align-items: start !important;
        width: 100% !important;
    }
    .footer-col {
        text-align: left !important;
        align-items: flex-start !important;
    }
    .footer-links {
        align-items: flex-start !important;
    }
    .footer-contact,
    .footer-contact-item {
        justify-content: flex-start !important;
    }
    .lux-socials {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    .footer-center {
        max-width: 100% !important;
        margin-inline: auto !important;
        transform: none !important;
    }
}

/* ==========================================================================
   7. SMALL TABLET LANDSCAPE (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
    .details-container,
    .blog-details-card,
    .blog-details-wrapper,
    .article-card,
    .details-wrapper {
        width: 96%;
    }
    .details-content h1 {
        font-size: 54px;
    }
    .details-image-wrapper img {
        height: 380px;
    }
    
    /* Responsive Table Horizontal Scrolling Safety */
    .details-body table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-collapse: collapse;
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   8. IPAD AIR / IPAD MINI / SMALL TABLETS (max-width: 820px)
   ========================================================================== */
@media (max-width: 820px) {
    .details-container,
    .blog-details-card,
    .blog-details-wrapper,
    .article-card,
    .details-wrapper {
        width: 96%;
    }
    .details-content h1 {
        font-size: 48px;
    }
    .details-image-wrapper img {
        height: 340px;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.5rem !important;
    }
}

/* ==========================================================================
   9. TABLET PORTRAIT (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Retained to prevent breaking potential dynamic templates */
    .details-header {
        padding: 24px 20px;
    }
    .details-logo span {
        font-size: 24px;
    }

    .premium-header {
        padding: 0.875rem 1.5rem;
    }

    .premium-logo-box {
        padding: 0.875rem 1.25rem;
    }

    .premium-logo {
        width: 50px;
        height: 50px;
    }

    .premium-whatsapp-btn {
        padding: 0.75rem 1.25rem;
        font-size: 13px;
    }

    .details-container,
    .blog-details-card,
    .blog-details-wrapper,
    .article-card,
    .details-wrapper {
        width: 100%;
        border: none;
        box-shadow: none;
    }

    .breadcrumb {
        min-width: 0;
        padding: 1.5rem 1.25rem;
        font-size: 13px;
        gap: 0.625rem;
    }

    .details-meta {
        row-gap: 0.875rem;
        gap: 1.25rem;
        font-size: 14px;
        margin-bottom: 1.75rem;
    }

    .details-image-wrapper {
        padding: 0 1.25rem;
    }

    .details-image-wrapper img {
        height: 300px;
        border-radius: 1.25rem;
    }

    .details-content {
        padding: 2.1875rem 1.25rem;
        min-width: 0;
    }

    .details-content h1 {
        font-size: 40px;
        overflow-wrap: break-word;
        letter-spacing: -1px;
        margin-bottom: 1.25rem;
    }

    .details-intro {
        font-size: 18px;
        overflow-wrap: break-word;
        line-height: 1.8;
        margin-bottom: 2.25rem;
    }

    .details-body {
        padding-top: 2.25rem;
    }

    .details-body h2 {
        font-size: 30px;
        margin-bottom: 1rem;
    }

    .details-body p {
        overflow-wrap: break-word;
        font-size: 16.5px;
        line-height: 1.8;
        margin-bottom: 1.75rem;
    }

    .quote-box {
        padding: 1.75rem;
        margin-bottom: 1.75rem;
        border-radius: 0.75rem;
    }

    .quote-box p {
        font-size: 18px;
        margin-bottom: 0.5rem;
    }

    .back-blog-btn {
        max-width: 100%;
        padding: 1rem 1.75rem;
        margin-top: 1rem;
        font-size: 15px;
    }

    .scroll-top-btn {
        width: 54px;
        height: 54px;
        right: 20px !important;
        bottom: 20px !important;
        font-size: 18px;
    }

    /* WhatsApp & Scroll Button overlap prevention (WhatsApp Bottom-Left, Scroll Bottom-Right) */
    .whatsapp-float,
    .whatsapp-btn-float,
    .float-wa {
        position: fixed !important;
        left: 20px !important;
        right: auto !important;
        bottom: 20px !important;
        z-index: 9999;
    }

    /* Footer Mobile Collapsing Adaptations */
    .lux-footer {
        padding: 50px 0 30px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    .lux-footer .container {
        flex-direction: column !important;
        padding: 0 24px !important;
    }
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    .footer-col {
        text-align: left !important;
        max-width: 100% !important;
        margin: 0 !important;
        justify-self: flex-start !important;
        align-items: flex-start !important;
    }
    .footer-col h4 {
        text-align: left !important;
        width: 100% !important;
    }
    .footer-col p {
        text-align: left !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        width: 100% !important;
    }
    .footer-links {
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        padding: 0 !important;
    }
    .footer-contact,
    .footer-contact-item {
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
    }
    .lux-socials {
        display: flex !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        width: 100% !important;
    }
    .footer-col::after {
        display: none !important;
    }
    .footer-center h2 {
        font-size: 34px !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 20px 16px !important;
        margin-top: 30px !important;
    }
    .footer-meta {
        display: block !important;
        text-align: center !important;
        font-size: 11.5px !important;
    }
    .footer-meta-item {
        display: block !important;
        margin-bottom: 6px !important;
    }
    .footer-meta .dot-sep {
        display: none !important;
    }
    .footer-copy {
        text-align: center !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* ==========================================================================
   10. MOBILE LANDSCAPE / SMALL TABLET (max-width: 640px)
   ========================================================================== */
@media (max-width: 640px) {
    .details-content h1 {
        font-size: 36px;
    }
    .details-image-wrapper img {
        height: 260px;
    }
    .details-intro {
        font-size: 17px;
    }
    .footer-center h2 {
        font-size: 28px;
    }
}

/* ==========================================================================
   11. LARGE MOBILE (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
    .premium-header {
        padding: 0.75rem 1rem;
    }
    .premium-logo-box {
        padding: 0.75rem 1rem;
    }
    .premium-logo {
        width: 44px;
        height: 44px;
    }
    .premium-whatsapp-btn {
        padding: 0.625rem 1.125rem;
        font-size: 12px;
    }
    .details-image-wrapper {
        padding: 0 1rem;
    }
    .details-image-wrapper img {
        height: 220px;
        border-radius: 0.75rem;
    }
    
    .breadcrumb {
        padding: 1.25rem 1rem;
    }
    .details-content {
        padding: 1.75rem 1rem;
    }
    .details-content h1 {
        font-size: 30px;
    }
    .details-body h2 {
        font-size: 24px;
    }
    .details-body p {
        font-size: 15px;
        line-height: 1.7;
    }
    .quote-box {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }
    .back-blog-btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 14px;
    }
    .scroll-top-btn {
        width: 48px;
        height: 48px;
        right: 15px !important;
        bottom: 15px !important;
        font-size: 16px;
    }
    .whatsapp-float,
    .whatsapp-btn-float,
    .float-wa {
        left: 15px !important;
        bottom: 15px !important;
    }
}

/* ==========================================================================
   12. IPHONE PLUS / PRO MAX (max-width: 430px)
   ========================================================================== */
@media (max-width: 430px) {
    /* Rules inherit beautifully from larger breakpoints */
}

/* ==========================================================================
   13. MOBILE SMALL-MEDIUM (max-width: 414px)
   ========================================================================== */
@media (max-width: 414px) {
    /* Rules inherit beautifully from larger breakpoints */
}

/* ==========================================================================
   14. MOBILE SMALL (max-width: 390px)
   ========================================================================== */
@media (max-width: 390px) {
    /* Rules inherit beautifully from larger breakpoints */
}

/* ==========================================================================
   15. IPHONE SE / SMALL (max-width: 375px)
   ========================================================================== */
@media (max-width: 375px) {
    .details-content h1 {
        font-size: 26px;
    }
    .details-image-wrapper {
        padding: 0;
    }
    .details-image-wrapper img {
        height: 180px;
        border-radius: 0;
    }
    
    .premium-logo-box {
        padding: 0.625rem 0.75rem;
    }
    .premium-logo {
        width: 38px;
        height: 38px;
    }
    .premium-whatsapp-btn {
        padding: 0.5rem 1rem;
        font-size: 11px;
    }
}

/* ==========================================================================
   16. ANDROID SMALL (max-width: 360px)
   ========================================================================== */
@media (max-width: 360px) {
    .details-content h1 {
        font-size: 24px;
    }
    .premium-header {
        padding: 0.625rem 0.75rem;
    }
}

/* ==========================================================================
   17. EXTRA SMALL DEVICES (max-width: 320px)
   ========================================================================= */
@media (max-width: 320px) {
    .details-content h1 {
        font-size: 22px;
    }
    .details-content {
        padding: 1.5rem 0.75rem;
    }
    .premium-logo {
        width: 34px;
        height: 34px;
    }
    .premium-whatsapp-btn {
        padding: 0.5rem 0.75rem;
        font-size: 10px;
    }
}