/**
 * SMI - Split CTA Block Styles
 *
 * @package ShowMeInstitute
 */

.smi-split-cta {
    position: relative;
    overflow: hidden;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Image container needs relative positioning and proper dimensions */
.smi-split-cta .grid > div.relative,
.smi-split-cta .grid > div[class*="relative"] {
    position: relative !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    overflow: hidden;
}

/* Ensure overflow hidden is set on image column */
.smi-split-cta .overflow-hidden {
    overflow: hidden !important;
}

/* Ensure image fills container properly and covers full height */
.smi-split-cta img,
.smi-split-cta .grid > div img,
.smi-split-cta .grid > div.relative img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
}

/* Fallback gradient backgrounds (if Tailwind classes don't exist) */
.smi-split-cta .bg-gradient-brand-blue {
    background: linear-gradient(180deg, #4e76a6 28%, #1e4877 100%);
}

.smi-split-cta .bg-gradient-brand-red {
    background: linear-gradient(180deg, #C61A28 0%, #97002E 100%);
}

.smi-split-cta .bg-light-grey {
    background: #f9fafb;
}

/* Text color utilities for light grey background */
.smi-split-cta .text-gray-700 {
    color: #374151;
}

.smi-split-cta .text-gray-900 {
    color: #111827;
}

.smi-split-cta .text-brand-blue-dark {
    color: #1e4877;
}

.smi-split-cta .text-brand-red-600 {
    color: #c61a28;
}

.smi-split-cta .text-brand-blue-400 {
    color: #4e76a6;
}

/* Ensure content is readable and accessible */
.smi-split-cta h2,
.smi-split-cta p,
.smi-split-cta a {
    color: inherit;
}

/* Focus states for accessibility */
.smi-split-cta a:focus {
    outline: 3px solid rgba(255, 255, 255, 0.8);
    outline-offset: 3px;
}

/* CTA Button Text Colors - Ensure white text for red and blue */
.smi-split-cta .btn-cta-red,
.smi-split-cta .btn-cta-blue {
    color: #ffffff !important;
}

.smi-split-cta .btn-cta-red:hover,
.smi-split-cta .btn-cta-blue:hover {
    color: #ffffff !important;
}

.smi-split-cta .btn-cta-red i,
.smi-split-cta .btn-cta-blue i {
    color: #ffffff !important;
}

/* White outline button variant */
.btn-cta-white {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 2rem;
    color: #ffffff;
    background-color: transparent;
    border: 2px solid #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-cta-white:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #ffffff;
    color: #ffffff;
}

.btn-cta-white i {
    color: #ffffff !important;
}

/* Button adjustments for light grey background */
.bg-light-grey .btn-cta-white {
    color: #1e4877;
    border-color: #1e4877;
}

.bg-light-grey .btn-cta-white:hover {
    background-color: #1e4877;
    border-color: #1e4877;
    color: #ffffff;
}

.bg-light-grey .btn-cta-white:hover i {
    color: #ffffff !important;
}

.bg-light-grey .btn-cta-white i {
    color: #1e4877 !important;
}

/* Improve contrast for focus states on light backgrounds */
.bg-light-grey a:focus {
    outline-color: #1e4877;
}

/* Prevent layout shift on loading */
.smi-split-cta img {
    max-width: 100%;
    height: auto;
}

/* Ensure grid has proper structure */
.smi-split-cta .grid {
    min-height: inherit;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* Ensure grid columns respect min-height and fill available space */
.smi-split-cta .grid > div {
    min-height: inherit;
    height: 100%;
}

/* Make sure both columns have equal height on desktop */
@media (min-width: 1024px) {
    .smi-split-cta .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .smi-split-cta .grid > div {
        height: 100%;
    }
}

/* Fallback min-heights if Tailwind classes don't work */
.smi-split-cta .grid > div[class*="min-h-[300px]"] {
    min-height: 300px !important;
}

.smi-split-cta .grid > div[class*="min-h-[420px]"] {
    min-height: 420px !important;
}

.smi-split-cta .grid > div[class*="min-h-[500px]"] {
    min-height: 500px !important;
}

.smi-split-cta .grid > div[class*="min-h-[600px]"] {
    min-height: 600px !important;
}

/* Mobile styles */
@media (max-width: 1023px) {
    /* Mobile padding for content - 32px */
    .smi-split-cta .grid > div:not(.relative) {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    /* Remove max-width constraint on mobile for content wrapper */
    .smi-split-cta .max-w-lg {
        max-width: none !important;
    }
    
    /* Ensure image column has no padding */
    .smi-split-cta .grid > div.relative {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Hide image on mobile by default (unless show_image_mobile is enabled) */
    .smi-split-cta .grid > div.hidden {
        display: none !important;
    }
}

/* Show image on desktop */
@media (min-width: 1024px) {
    .smi-split-cta .grid > div.lg\:block {
        display: block !important;
    }
}

/* Responsive text sizing refinements */
@media (max-width: 640px) {
    .smi-split-cta h2 {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .smi-split-cta a:focus {
        outline-width: 4px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .smi-split-cta * {
        transition: none !important;
        animation: none !important;
    }
}