/* ==========================================================================
   Split Content Block - Comprehensive Responsive Design
   Optimized for all devices with proper video handling and layout transitions
   ========================================================================== */

/* ==========================================================================
   FORCE SINGLE COLUMN STACKING ON TABLETS AND MOBILE (Below 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* Override base CSS that keeps 2 columns at this breakpoint */
    body .split-content-block .split-content-container,
    .split-content-block .split-content-container {
        grid-template-columns: 1fr !important;
        display: grid !important;
        gap: 0 !important; /* No gap between media and text */
        flex-direction: column !important; /* In case flex is used */
    }
    
    .split-content-media {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important; /* Reset flex properties */
        min-height: 300px !important;
        max-height: 400px !important;
        height: auto !important;
        margin-bottom: 0 !important; /* Remove margin since we have no gap */
    }
    
    /* Fix video/image sizing to prevent cropping */
    .split-video,
    .split-image {
        width: 100% !important;
        height: 100% !important;
        max-height: 400px !important;
        object-fit: contain !important; /* Changed from cover to contain */
        object-position: center !important;
        background: transparent !important; /* Transparent background */
    }
    
    .split-content-text {
        grid-column: 1 !important;
        grid-row: 2 !important;
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important; /* Reset flex properties */
        text-align: left !important; /* Force left alignment */
        padding: 0 !important; /* No padding */
    }
    
    /* Force text content to align left */
    .split-text-content {
        text-align: left !important;
        margin: 0 !important;
        max-width: 100% !important;
    }
    
    .split-heading {
        text-align: left !important;
    }
    
    .split-description {
        text-align: left !important;
    }
    
    .split-button-wrapper {
        text-align: left !important;
    }
    
    .split-button {
        display: inline-block !important;
        width: auto !important;
    }
    
    /* Force override for image-right layout with higher specificity */
    body .split-content-block.layout-image-right .split-content-container,
    .split-content-block.layout-image-right .split-content-container {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    body .split-content-block.layout-image-right .split-content-media,
    .split-content-block.layout-image-right .split-content-media {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: 1 !important;
    }
    
    body .split-content-block.layout-image-right .split-content-text,
    .split-content-block.layout-image-right .split-content-text {
        grid-column: 1 !important;
        grid-row: 2 !important;
        order: 2 !important;
    }
    
    /* Force override for image-left layout with higher specificity */
    body .split-content-block.layout-image-left .split-content-container,
    .split-content-block.layout-image-left .split-content-container {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    
    body .split-content-block.layout-image-left .split-content-media,
    .split-content-block.layout-image-left .split-content-media {
        grid-column: 1 !important;
        grid-row: 1 !important;
        order: 1 !important;
    }
    
    body .split-content-block.layout-image-left .split-content-text,
    .split-content-block.layout-image-left .split-content-text {
        grid-column: 1 !important;
        grid-row: 2 !important;
        order: 2 !important;
    }
}

/* ==========================================================================
   LARGE DESKTOP (1400px+) - Optimal viewing experience
   ========================================================================== */
@media screen and (min-width: 1400px) {
    .split-content-container {
        max-width: 1400px;
        padding: 0 4rem;
    }
    
    .split-content-text {
        padding: 5rem 4rem;
    }
    
    .split-text-content {
        max-width: 650px;
    }
}

/* ==========================================================================
   STANDARD DESKTOP (1200px - 1399px)
   ========================================================================== */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    .split-content-container {
        max-width: 1200px;
        padding: 0 3rem;
    }
    
    .split-content-text {
        padding: 4rem 3rem;
    }
    
    .split-heading {
        font-size: 2rem;
    }
    
    .split-description {
        font-size: 1.25rem;
    }
}

/* ==========================================================================
   SMALL DESKTOP / LARGE TABLET (1024px - 1199px)
   ========================================================================== */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
    .split-content-block {
        min-height: 50vh;
        padding: 3rem 0;
    }
    
    .split-content-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 0 2.5rem;
        max-width: 1100px;
    }
    
    .split-content-media {
        min-height: 45vh;
    }
    
    .split-video {
        height: 75%;
    }
    
    .split-content-text {
        padding: 3rem 2.5rem;
        min-height: 45vh;
    }
    
    .split-text-content {
        max-width: 500px;
    }
    
    .split-heading {
        font-size: 1.875rem;
        margin-bottom: 2.5rem;
    }
    
    .split-description {
        font-size: 1.2rem;
        line-height: 1.65;
    }
}

/* ==========================================================================
   TABLET PORTRAIT (768px - 1023px)
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .split-content-block {
        min-height: auto;
        padding: 3rem 0;
    }
    
    .split-content-container {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 0 2rem;
        max-width: 900px;
        display: grid !important;
    }
    
    /* Media section for tablets */
    .split-content-media {
        min-height: 50vh;
        max-height: 60vh;
        order: 1;
        border-radius: 8px;
        margin-bottom: 2rem;
    }
    
    .split-video {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    
    .split-image {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
    }
    
    /* Text section for tablets */
    .split-content-text {
        padding: 3rem;
        min-height: auto;
        order: 2;
        background: transparent;
        display: block;
    }
    
    .split-text-content {
        max-width: 700px;
        margin: 0 auto;
        text-align: left;
    }
    
    .split-heading {
        font-size: 2rem;
        margin-bottom: 2rem;
        text-align: left;
    }
    
    .split-description {
        font-size: 1.2rem;
        line-height: 1.7;
        text-align: left;
    }
    
    /* Force media on top, text below on tablets - regardless of layout */
    .split-content-media {
        order: 1 !important;
    }
    
    .split-content-text {
        order: 2 !important;
    }
    
    .split-content-block.layout-image-right .split-content-media {
        order: 1 !important;
    }
    
    .split-content-block.layout-image-right .split-content-text {
        order: 2 !important;
    }
    
    .split-content-block.layout-image-left .split-content-media {
        order: 1 !important;
    }
    
    .split-content-block.layout-image-left .split-content-text {
        order: 2 !important;
    }
    
    /* Hover overlay adjustments for tablets */
    .split-hover-items {
        flex-direction: row;
        gap: 3rem;
    }
    
    .split-hover-icon {
        width: 70px;
        height: 70px;
    }
    
    .split-hover-text {
        font-size: 1.2rem;
    }
    
    /* Button adjustments */
    .split-button {
        padding: 1rem 2.5rem;
        font-size: 1rem;
    }
}

/* ==========================================================================
   LARGE MOBILE / SMALL TABLET (600px - 767px)
   ========================================================================== */
@media screen and (min-width: 600px) and (max-width: 767px) {
    .split-content-block {
        padding: 2.5rem 0;
        min-height: auto;
    }
    
    .split-content-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 1.5rem;
        max-width: 700px;
    }
    
    .split-content-media {
        min-height: 45vh;
        max-height: 55vh;
        order: 1 !important;
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }
    
    .split-video,
    .split-image {
        height: 100%;
        width: 100%;
        object-fit: contain !important; /* Prevent cropping */
        background: transparent !important;
        border-radius: 8px;
    }
    
    .split-content-text {
        padding: 2.5rem 1.5rem;
        min-height: auto;
        order: 2 !important;
    }
    
    .split-text-content {
        max-width: none;
        text-align: left;
    }
    
    .split-heading {
        font-size: 1.75rem;
        margin-bottom: 1.75rem;
        text-align: left;
    }
    
    .split-description {
        font-size: 1.125rem;
        line-height: 1.65;
        text-align: left;
        margin-bottom: 2rem;
    }
}

/* ==========================================================================
   STANDARD MOBILE (480px - 599px)
   ========================================================================== */
@media screen and (min-width: 480px) and (max-width: 599px) {
    .split-content-block {
        padding: 2rem 0;
        min-height: auto;
    }
    
    .split-content-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 1.25rem;
    }
    
    .split-content-media {
        min-height: 40vh;
        max-height: 50vh;
        order: 1 !important;
        border-radius: 6px;
        margin-bottom: 1.5rem;
    }
    
    .split-video,
    .split-image {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: 6px;
    }
    
    .split-content-text {
        padding: 2rem 1.25rem;
        min-height: auto;
        order: 2 !important;
    }
    
    .split-heading {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        text-align: left !important;
    }
    
    .split-description {
        font-size: 1.05rem;
        line-height: 1.6;
        text-align: left !important;
        margin-bottom: 1.75rem;
    }
    
    .split-button {
        width: 100%;
        text-align: center;
        padding: 0.9rem 2rem;
    }
}

/* ==========================================================================
   SMALL MOBILE (320px - 479px)
   ========================================================================== */
@media screen and (max-width: 479px) {
    .split-content-block {
        padding: 1.5rem 0;
        min-height: auto;
    }
    
    .split-content-container {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 1rem;
    }
    
    /* Mobile media section */
    .split-content-media {
        min-height: 250px !important;
        max-height: 350px !important;
        order: 1;
        border-radius: 6px;
        margin-bottom: 1.25rem;
        transform: none;
    }
    
    .split-video,
    .split-image {
        height: 100% !important;
        width: 100% !important;
        object-fit: contain !important; /* Prevent cropping */
        object-position: center !important;
        border-radius: 6px;
        background: transparent !important; /* Transparent background */
    }
    
    /* Mobile text section */
    .split-content-text {
        padding: 1.5rem 1rem;
        min-height: auto;
        order: 2;
        background: transparent;
        transform: none;
    }
    
    .split-text-content {
        max-width: none;
        text-align: left !important;
    }
    
    .split-heading {
        font-size: 1.375rem;
        margin-bottom: 1.25rem;
        text-align: left !important;
        line-height: 1.2;
    }
    
    .split-description {
        font-size: 1rem;
        line-height: 1.55;
        text-align: left !important;
        margin-bottom: 1.5rem;
    }
    
    /* Mobile button */
    .split-button-wrapper {
        margin-top: 1.5rem;
    }
    
    .split-button {
        width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 0.875rem;
        text-align: center;
        border-radius: 25px;
    }
    
    /* Mobile hover overlay */
    .split-hover-overlay {
        background: rgba(0, 0, 0, 0.8);
    }
    
    .split-hover-items {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .split-hover-icon {
        width: 60px;
        height: 60px;
    }
    
    .split-hover-icon img {
        width: 30px;
        height: 30px;
    }
    
    .split-hover-text {
        font-size: 1rem;
        line-height: 1.3;
    }
    
    /* Force media on top, text below on mobile - regardless of layout */
    .split-content-media {
        order: 1 !important;
    }
    
    .split-content-text {
        order: 2 !important;
    }
    
    .split-content-block.layout-image-right .split-content-media {
        order: 1 !important;
    }
    
    .split-content-block.layout-image-right .split-content-text {
        order: 2 !important;
    }
    
    .split-content-block.layout-image-left .split-content-media {
        order: 1 !important;
    }
    
    .split-content-block.layout-image-left .split-content-text {
        order: 2 !important;
    }
    
    /* Simplified animations on mobile */
    .split-content-block.animate-in .split-content-media,
    .split-content-block.animate-in .split-content-text {
        animation: fadeIn 0.6s ease-out forwards;
    }
    
    .split-content-block.animate-in .split-heading,
    .split-content-block.animate-in .split-description,
    .split-content-block.animate-in .split-button-wrapper {
        animation: fadeIn 0.6s ease-out forwards;
        animation-delay: 0.2s;
    }
    
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ==========================================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .split-content-block {
        padding: 1.5rem 0;
    }
    
    .split-content-container {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        padding: 0 2rem;
    }
    
    .split-content-media {
        min-height: 70vh;
        max-height: 80vh;
        margin-bottom: 0;
    }
    
    .split-content-text {
        padding: 2rem;
        min-height: auto;
    }
    
    .split-heading {
        font-size: 1.5rem;
        text-align: left;
    }
    
    .split-description {
        font-size: 1rem;
        text-align: left;
    }
}

/* ==========================================================================
   ACCESSIBILITY & PERFORMANCE OPTIMIZATIONS
   ========================================================================== */

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .split-hover-overlay {
        display: none;
    }
    
    .split-button {
        min-height: 44px; /* Minimum touch target size */
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .split-content-block.animate-in .split-content-media,
    .split-content-block.animate-in .split-content-text,
    .split-content-block.animate-in .split-heading,
    .split-content-block.animate-in .split-description,
    .split-content-block.animate-in .split-button-wrapper {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .split-content-block {
        border-top: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
    }
    
    .split-button {
        border-width: 3px;
    }
}

/* Print styles */
@media print {
    .split-content-block {
        page-break-inside: avoid;
        background: white !important;
    }
    
    .split-content-container {
        grid-template-columns: 1fr;
    }
    
    .split-video {
        display: none; /* Hide video in print */
    }
    
    .split-hover-overlay {
        display: none;
    }
    
    .split-button {
        border: 2px solid #000;
        color: #000;
    }
}

/* ==========================================================================
   VIDEO-SPECIFIC RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Ensure video maintains aspect ratio on all devices */
@media screen and (max-width: 1023px) {
    .media-type-video .split-content-media {
        position: relative;
        padding-bottom: 0; /* Remove aspect ratio padding */
    }
    
    .media-type-video .split-video {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 300px;
        max-height: 500px;
    }
}

@media screen and (max-width: 767px) {
    .media-type-video .split-video {
        min-height: 250px;
        max-height: 400px;
    }
}

@media screen and (max-width: 479px) {
    .media-type-video .split-video {
        min-height: 200px;
        max-height: 300px;
    }
}