/* ==========================================================================
   Story Mosaic Block - Comprehensive Responsive Design
   Optimized for tablet and mobile with proper layout adaptations
   ========================================================================== */

/* ========================================================================== 
   OVERRIDE GSAP INLINE STYLES ON MOBILE/TABLET
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* Kill all GSAP transforms and animations */
    [data-gsap-instance] {
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
    }
    
    /* Specifically target the story mosaic with inline styles */
    section[style*="transform"],
    section[style*="translate"],
    .blz-story-mosaic[style*="transform"],
    .story-mosaic-block[style*="transform"] {
        transform: translate(0, 0) !important;
        translate: none !important;
    }
    
    /* Override any width/height set by JavaScript */
    section[style*="width"][style*="height"] {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
    }
}

/* ========================================================================== 
   TABLET STYLES (769px - 1024px)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    /* Main wrapper adjustments */
    .blz-story-mosaic {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Remove pinning on tablets */
    .pin-spacer-story-mosaic,
    .blz-story-mosaic.pin-spacer {
        position: relative !important;
        transform: none !important;
        height: auto !important;
        padding-bottom: 0 !important;
    }
    
    /* Grid wrapper adjustments */
    .mosaic-grid-wrapper {
        padding: 3rem 2rem;
        min-height: auto;
        display: block; /* Remove flex centering */
    }
    
    /* Simplify grid for tablets */
    .mosaic-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1.5rem;
        max-width: 100%;
    }
    
    /* Panel height adjustments */
    .mosaic-panel {
        min-height: 200px !important;
        transform: none !important; /* Remove animations on tablet */
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 3 PANELS - Tablet Layout */
    .mosaic-count-3 {
        grid-template-rows: repeat(2, minmax(200px, auto));
    }
    
    .mosaic-count-3 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 4;
        grid-row: 1 / 3;
    }
    
    .mosaic-count-3 .mosaic-panel:nth-child(2) {
        grid-column: 4 / 7;
        grid-row: 1;
    }
    
    .mosaic-count-3 .mosaic-panel:nth-child(3) {
        grid-column: 4 / 7;
        grid-row: 2;
    }
    
    /* 4 PANELS - Tablet Layout (2x2 grid) */
    .mosaic-count-4 {
        grid-template-rows: repeat(2, minmax(220px, auto));
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 4;
        grid-row: 1;
        min-height: 250px;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(2) {
        grid-column: 4 / 7;
        grid-row: 1;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(3) {
        grid-column: 1 / 4;
        grid-row: 2;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(4) {
        grid-column: 4 / 7;
        grid-row: 2;
    }
    
    /* 5 PANELS - Tablet Layout */
    .mosaic-count-5 {
        grid-template-rows: repeat(3, minmax(180px, auto));
    }
    
    .mosaic-count-5 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 7;
        grid-row: 1;
        min-height: 250px;
    }
    
    .mosaic-count-5 .mosaic-panel:nth-child(2) {
        grid-column: 1 / 4;
        grid-row: 2;
    }
    
    .mosaic-count-5 .mosaic-panel:nth-child(3) {
        grid-column: 4 / 7;
        grid-row: 2;
    }
    
    .mosaic-count-5 .mosaic-panel:nth-child(4) {
        grid-column: 1 / 4;
        grid-row: 3;
    }
    
    .mosaic-count-5 .mosaic-panel:nth-child(5) {
        grid-column: 4 / 7;
        grid-row: 3;
    }
    
    /* 6 PANELS - Tablet Layout (3x2 grid) */
    .mosaic-count-6 {
        grid-template-rows: repeat(3, minmax(180px, auto));
    }
    
    .mosaic-count-6 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 4;
        grid-row: 1;
    }
    
    .mosaic-count-6 .mosaic-panel:nth-child(2) {
        grid-column: 4 / 7;
        grid-row: 1;
    }
    
    .mosaic-count-6 .mosaic-panel:nth-child(3) {
        grid-column: 1 / 4;
        grid-row: 2;
    }
    
    .mosaic-count-6 .mosaic-panel:nth-child(4) {
        grid-column: 4 / 7;
        grid-row: 2;
    }
    
    .mosaic-count-6 .mosaic-panel:nth-child(5) {
        grid-column: 1 / 4;
        grid-row: 3;
    }
    
    .mosaic-count-6 .mosaic-panel:nth-child(6) {
        grid-column: 4 / 7;
        grid-row: 3;
    }
    
    /* Typography adjustments */
    .mosaic-title {
        font-size: 1.75rem;
    }
    
    .panel-hero .mosaic-title {
        font-size: 2rem;
    }
    
    .panel-small .mosaic-title {
        font-size: 1.5rem;
    }
    
    .mosaic-text {
        font-size: 1rem;
        line-height: 1.5;
    }
    
    /* Content padding adjustments */
    .mosaic-content {
        padding: 1.75rem;
    }
    
    .panel-hero .mosaic-content {
        padding: 2rem;
    }
    
    .panel-small .mosaic-content {
        padding: 1.5rem;
    }
    
    /* Image adjustments */
    .mosaic-image {
        height: 140px;
    }
    
    .panel-hero .mosaic-image {
        height: 180px;
    }
    
    /* Hide decorative elements */
    .mosaic-number {
        font-size: 1.75rem;
        top: 1rem;
        right: 1rem;
    }
    
    .mosaic-connector {
        display: none;
    }
}

/* ========================================================================== 
   MOBILE STYLES (320px - 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    /* FIX HORIZONTAL SCROLL - Force everything to viewport width */
    body {
        overflow-x: hidden !important;
    }
    
    /* Main container reset - PREVENT WIDTH OVERFLOW */
    .blz-story-mosaic,
    .story-mosaic-block,
    section[id*="story-mosaic"] {
        min-height: auto !important;
        height: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important; /* Hide horizontal overflow only */
        overflow-y: visible !important; /* Allow vertical content to show */
        box-sizing: border-box !important;
        padding-top: 0 !important;
        padding-bottom: 2rem !important; /* Add bottom padding */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Remove all pinning and fixed positioning - FORCE VIEWPORT WIDTH */
    .pin-spacer,
    .pin-spacer-story-mosaic,
    div[class*="pin-spacer"],
    .blz-story-mosaic.pin-spacer,
    section.story-mosaic-block,
    section[id^="story-mosaic-block"],
    #story-mosaic-block_431b2ed90550722700a95cf52f8394da,
    div[style*="width: 1905px"] {
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        padding: 0 !important;
        inset: auto !important;
        margin: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* FORCE REMOVE any large width inline styles */
    [style*="width: 1905px"],
    [style*="max-width: 1905px"] {
        width: 100% !important;
        max-width: 100vw !important;
    }
    
    /* Grid wrapper - REMOVE TOP SPACING AND CENTER CONTENT */
    .mosaic-grid-wrapper {
        padding: 1.5rem !important;
        padding-bottom: 3rem !important; /* Extra padding at bottom to ensure last panel is visible */
        min-height: auto !important;
        height: auto !important; /* Let content determine height */
        max-height: none !important; /* Remove any max-height restrictions */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-top: 0 !important;
        margin-bottom: 2rem !important; /* Add margin at bottom */
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important; /* Ensure nothing is clipped */
    }
    
    /* Single column layout on mobile - PROPERLY CENTERED */
    .mosaic-grid,
    .story-mosaic-block .mosaic-grid,
    .blz-story-mosaic .mosaic-grid,
    .mosaic-count-3,
    .mosaic-count-4,
    .mosaic-count-5,
    .mosaic-count-6 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1.5rem !important; /* More space between panels */
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        transform: none !important;
        width: 100% !important;
        max-width: min(400px, calc(100vw - 2rem)) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        height: auto !important; /* Let content determine height */
        max-height: none !important; /* Remove max-height calc(100vh - 8rem) from base CSS */
        min-height: auto !important; /* Remove min-height restrictions */
    }
    
    /* Reset all panels to stack vertically - Override inline styles */
    .mosaic-panel,
    .mosaic-panel[data-panel-index],
    .mosaic-panel[style],
    article.mosaic-panel,
    .story-mosaic-block .mosaic-panel,
    .blz-story-mosaic .mosaic-panel,
    .mosaic-count-3 .mosaic-panel:nth-child(n),
    .mosaic-count-4 .mosaic-panel:nth-child(n),
    .mosaic-count-5 .mosaic-panel:nth-child(n),
    .mosaic-count-6 .mosaic-panel:nth-child(n) {
        grid-column: unset !important;
        grid-row: unset !important;
        width: 100% !important;
        max-width: calc(100vw - 2rem) !important;
        min-height: auto !important;
        height: auto !important;
        margin: 0 !important;
        transform: translate(0,0) !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        top: auto !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        box-sizing: border-box !important;
    }
    
    /* Panel styling - ALL SAME SIZE ON MOBILE AND CENTERED */
    .mosaic-panel {
        border-radius: 0.75rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        min-height: auto !important;
        height: auto !important; /* Allow panels to grow as needed */
        max-height: none !important; /* Remove any height restrictions */
        padding: 0 !important;
        background: #fff;
        width: 100% !important;
        max-width: min(400px, calc(100vw - 2rem)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important; /* Ensure content is not clipped */
    }
    
    /* HIDE ONLY THE IMAGE ELEMENT, NOT THE ENTIRE PANEL */
    .mosaic-panel .mosaic-image,
    .panel-hero .mosaic-image,
    .panel-type-image .mosaic-image {
        display: none !important;
    }
    
    /* Keep panels with images visible but show their content */
    .mosaic-panel.panel-type-image {
        display: block !important;
        width: 100% !important;
    }
    
    .mosaic-panel.panel-type-image .mosaic-content {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Make all panel types exactly the same on mobile */
    .panel-hero,
    .panel-wide,
    .panel-tall,
    .panel-medium,
    .panel-small,
    .mosaic-panel[class*="panel-"] {
        min-height: auto !important;
        height: auto !important; /* Let content determine height */
        max-height: none !important; /* No maximum height */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important; /* Ensure no clipping */
    }
    
    /* Typography - ENSURE ALL TEXT IS VISIBLE AND CONSISTENT */
    .mosaic-title {
        font-size: 1.125rem !important; /* Slightly smaller for better fit */
        line-height: 1.3 !important;
        margin: 0 0 0.75rem 0 !important;
        color: #52ddc4 !important;
        text-transform: uppercase;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        font-weight: 600 !important;
    }
    
    /* Force ALL titles to be same size on mobile - override any panel-specific styles */
    .panel-hero .mosaic-title,
    .panel-wide .mosaic-title,
    .panel-tall .mosaic-title,
    .panel-medium .mosaic-title,
    .panel-small .mosaic-title,
    .panel-type-image .mosaic-title,
    .mosaic-panel:first-child .mosaic-title,
    .mosaic-panel:nth-child(1) .mosaic-title {
        font-size: 1.125rem !important; /* Force same size for ALL panels */
        font-weight: 600 !important;
    }
    
    /* TEXT MUST BE FULLY VISIBLE - NO TRUNCATION */
    .mosaic-text {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        color: #666 !important;
        /* FORCE TEXT TO BE VISIBLE */
        overflow: visible !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        text-overflow: unset !important;
        max-height: none !important;
        height: auto !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .mosaic-text p {
        margin: 0 0 0.5rem 0 !important;
        overflow: visible !important;
        display: block !important;
    }
    
    .mosaic-text p:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Content padding - CONSISTENT FOR ALL */
    .mosaic-content {
        padding: 1.5rem 1.25rem 2rem 1.25rem !important; /* More padding at bottom */
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important; /* Let content determine height */
        max-height: none !important; /* No maximum height */
        flex: 1 !important; /* Allow content to expand */
        min-height: auto !important; /* Remove minimum height restriction */
    }
    
    /* Same padding for all panel types */
    .panel-hero .mosaic-content,
    .panel-wide .mosaic-content,
    .panel-tall .mosaic-content,
    .panel-medium .mosaic-content,
    .panel-small .mosaic-content,
    .panel-type-image .mosaic-content {
        padding: 1.5rem 1.25rem 2rem 1.25rem !important; /* More padding at bottom */
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        min-height: auto !important; /* Let content determine height */
        height: auto !important;
        max-height: none !important;
    }
    
    /* Hide ALL decorative elements on mobile including dots */
    .mosaic-number,
    .mosaic-connector,
    .mosaic-label,
    .mosaic-connector::before,
    .mosaic-connector::after,
    .mosaic-panel::before,
    .mosaic-panel::after,
    [class*="connector"],
    [class*="decoration"],
    .mosaic-panel [style*="radial-gradient"],
    .mosaic-panel [style*="background-image"],
    article.mosaic-panel::before,
    article.mosaic-panel::after,
    .mosaic-panel > ::before,
    .mosaic-panel > ::after {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        background-image: none !important;
        background: none !important;
    }
    
    /* Background - Keep visible but ensure proper containment */
    .mosaic-background {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 0 !important;
    }
    
    .mosaic-bgimage {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* REMOVE the dot pattern that creates black dots */
    .mosaic-pattern {
        display: none !important;
        opacity: 0 !important;
        background-image: none !important;
    }
    
    /* Remove any radial gradient patterns that create dots */
    [style*="radial-gradient"],
    .mosaic-pattern[style*="radial-gradient"] {
        background-image: none !important;
    }
    
    /* Clean background for the section with relative positioning for background */
    .blz-story-mosaic {
        background: #f5f5f5 !important;
        position: relative !important;
    }
    
    /* Ensure content is above background */
    .mosaic-grid-wrapper {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Scroll indicator adjustments */
    .mosaic-scroll-indicator {
        display: none !important; /* Hide on mobile */
    }
    
    /* Touch-friendly link styling */
    .mosaic-link {
        min-height: 44px;
        padding: 0.5rem 0;
        display: inline-flex;
        align-items: center;
    }
    
    /* Ensure proper touch targets */
    .mosaic-panel {
        cursor: default; /* Remove pointer cursor on mobile */
    }
    
    /* Fix animation issues on mobile */
    .mosaic-panel,
    .mosaic-panel * {
        animation: none !important;
        transition: box-shadow 0.3s ease !important;
    }
    
    /* Ensure panels are not cut off and no scrolling */
    .story-mosaic-block {
        overflow: visible !important;
        overflow-x: hidden !important; /* Prevent horizontal scroll */
        overflow-y: visible !important; /* Show all vertical content - no scroll */
        height: auto !important; /* Let content determine height */
        max-height: none !important; /* Remove any max-height */
        min-height: auto !important; /* Remove any min-height */
        padding-bottom: 3rem !important; /* Extra bottom padding */
        margin-bottom: 2rem !important; /* Extra bottom margin */
    }
    
    /* Remove scroll from the wrapper if it exists */
    .story-mosaic-block > * {
        overflow-y: visible !important;
        overflow-x: hidden !important;
        max-height: none !important;
        height: auto !important;
    }
    
    /* Ensure the last panel is always visible */
    .mosaic-panel:last-child {
        margin-bottom: 2rem !important;
    }
}

/* ========================================================================== 
   SMALL MOBILE (320px - 480px)
   ========================================================================== */
@media screen and (max-width: 480px) {
    /* Further reduce padding on small screens */
    .mosaic-grid-wrapper {
        padding: 1.5rem 0.75rem;
    }
    
    /* Smaller gap between panels */
    .mosaic-grid {
        gap: 1rem;
    }
    
    /* Reduce typography sizes but keep consistent */
    .mosaic-title {
        font-size: 1.125rem !important;
    }
    
    /* Force consistency even on small screens */
    .panel-hero .mosaic-title,
    .mosaic-panel:first-child .mosaic-title {
        font-size: 1.125rem !important;
    }
    
    .mosaic-text {
        font-size: 0.875rem;
    }
    
    /* Compact content padding */
    .mosaic-content {
        padding: 1.25rem !important;
    }
    
    /* Smaller images on very small screens */
    .mosaic-image {
        height: 150px !important;
    }
    
    .panel-hero .mosaic-image {
        height: 180px !important;
    }
    
    /* Label adjustments */
    .mosaic-label {
        font-size: 0.75rem;
    }
}

/* ========================================================================== 
   LARGE MOBILE / SMALL TABLET (481px - 768px)
   ========================================================================== */
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Slightly larger spacing for bigger mobile screens */
    .mosaic-grid-wrapper {
        padding: 2.5rem 1.5rem;
    }
    
    /* Larger images on bigger mobile */
    .mosaic-image {
        height: 220px !important;
    }
    
    .panel-hero .mosaic-image {
        height: 250px !important;
    }
    
    /* Keep consistent title sizes on all mobile screens */
    .mosaic-title {
        font-size: 1.125rem !important;
    }
    
    .panel-hero .mosaic-title,
    .mosaic-panel:first-child .mosaic-title {
        font-size: 1.125rem !important;
    }
}

/* ========================================================================== 
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ========================================================================== */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .mosaic-grid-wrapper {
        padding: 1.5rem 1rem;
    }
    
    .mosaic-grid {
        gap: 1rem;
    }
    
    /* Smaller images in landscape */
    .mosaic-image {
        height: 120px !important;
    }
    
    /* Compact content */
    .mosaic-content {
        padding: 1rem !important;
    }
}

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

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .mosaic-panel:hover {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 
                    0 5px 10px rgba(0, 0, 0, 0.08);
    }
    
    .mosaic-panel:hover .mosaic-image img {
        transform: none;
    }
    
    /* Ensure proper touch targets */
    .mosaic-link {
        min-height: 48px;
        padding: 0.75rem 0;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .mosaic-panel,
    .mosaic-panel *,
    .mosaic-image img,
    .mosaic-link svg,
    .mosaic-scroll-indicator {
        animation: none !important;
        transition: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mosaic-panel {
        border: 2px solid currentColor;
    }
    
    .mosaic-title {
        color: currentColor;
    }
}

/* Print styles */
@media print {
    .blz-story-mosaic {
        background: white !important;
    }
    
    .mosaic-panel {
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #000;
        margin-bottom: 1rem;
    }
    
    .mosaic-grid {
        display: block !important;
    }
    
    .mosaic-panel {
        display: block !important;
        margin-bottom: 1rem !important;
    }
    
    .mosaic-scroll-indicator,
    .mosaic-connector,
    .mosaic-number {
        display: none !important;
    }
}

/* ==========================================================================
   RESPONSIVE STYLES FOR MID-SIZE SCREENS (800px - 1450px)
   Ensuring smooth transitions between mobile and desktop
   ========================================================================== */

/* ========================================================================== 
   SMALL DESKTOP (1201px - 1450px) - Higher specificity
   Optimized layout for smaller desktop screens
   ========================================================================== */
@media screen and (min-width: 1201px) and (max-width: 1450px) {
    /* Override GSAP animations for better control */
    .mosaic-panel[style*="transform"],
    .mosaic-panel[style*="translate"] {
        transform: none !important;
        translate: none !important;
    }
    
    /* Grid wrapper optimization */
    .mosaic-grid-wrapper {
        padding: 4rem 3rem !important;
        max-width: 1300px !important;
        margin: 0 auto !important;
        height: auto !important;
        min-height: auto !important;
        display: block !important;
    }
    
    /* Adjusted grid for this size - OVERRIDE BASE STYLES */
    .mosaic-grid {
        grid-template-columns: repeat(12, 1fr) !important;
        grid-template-rows: none !important;
        gap: 1.75rem !important;
        height: auto !important;
        display: grid !important;
    }
    
    /* Panel base adjustments */
    .mosaic-panel {
        min-height: 240px !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 4 PANELS - Optimized desktop layout - FORCE OVERRIDE */
    .mosaic-count-4 {
        grid-template-rows: repeat(2, minmax(260px, auto)) !important;
        height: auto !important;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 7 !important;
        grid-row: 1 / 3 !important;
        min-height: 400px !important;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(2) {
        grid-column: 7 / 13 !important;
        grid-row: 1 !important;
        min-height: auto !important;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(3) {
        grid-column: 7 / 10 !important;
        grid-row: 2 !important;
        min-height: auto !important;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(4) {
        grid-column: 10 / 13 !important;
        grid-row: 2 !important;
        min-height: auto !important;
    }
    
    /* Typography scaling */
    .mosaic-title {
        font-size: 2rem !important;
    }
    
    .panel-hero .mosaic-title {
        font-size: 2.5rem !important;
    }
    
    .mosaic-text {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
    }
    
    /* Content padding */
    .mosaic-content {
        padding: 2.25rem !important;
    }
    
    /* Image sizes */
    .mosaic-image {
        height: 200px !important;
    }
    
    .panel-hero .mosaic-image {
        height: 260px !important;
    }
}

/* ========================================================================== 
   OVERRIDE BASE CSS 1200px RULE - Fix conflicts
   ========================================================================== */
@media screen and (max-width: 1200px) and (min-width: 1025px) {
    /* FORCE PROPER GRID LAYOUT - Override base CSS */
    .mosaic-grid-wrapper {
        display: block !important;
        height: auto !important;
    }
    
    .mosaic-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        grid-template-rows: none !important;
        height: auto !important;
    }
    
    /* Override the base CSS 4-panel layout */
    .mosaic-count-4 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 5 !important;
        grid-row: 1 !important;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(2) {
        grid-column: 5 / 9 !important;
        grid-row: 1 !important;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(3) {
        grid-column: 1 / 5 !important;
        grid-row: 2 !important;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(4) {
        grid-column: 5 / 9 !important;
        grid-row: 2 !important;
    }
}

/* ========================================================================== 
   MEDIUM SCREENS (1025px - 1200px)
   Transitional layout between tablet and desktop
   ========================================================================== */
@media screen and (min-width: 1025px) and (max-width: 1200px) {
    /* Disable animations */
    .mosaic-panel {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Grid wrapper */
    .mosaic-grid-wrapper {
        padding: 3.5rem 2.5rem;
        max-width: 1100px;
        margin: 0 auto;
    }
    
    /* Grid layout */
    .mosaic-grid {
        grid-template-columns: repeat(8, 1fr);
        gap: 1.5rem;
    }
    
    /* Panel sizes */
    .mosaic-panel {
        min-height: 220px !important;
    }
    
    /* 4 PANELS Layout */
    .mosaic-count-4 {
        grid-template-rows: repeat(2, minmax(240px, auto));
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 5;
        grid-row: 1;
        min-height: 280px;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(2) {
        grid-column: 5 / 9;
        grid-row: 1;
        min-height: 280px;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(3) {
        grid-column: 1 / 5;
        grid-row: 2;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(4) {
        grid-column: 5 / 9;
        grid-row: 2;
    }
    
    /* Typography */
    .mosaic-title {
        font-size: 1.875rem;
    }
    
    .panel-hero .mosaic-title {
        font-size: 2.25rem;
    }
    
    .mosaic-text {
        font-size: 1.05rem;
    }
    
    /* Content padding */
    .mosaic-content {
        padding: 2rem;
    }
    
    /* Images */
    .mosaic-image {
        height: 180px;
    }
    
    .panel-hero .mosaic-image {
        height: 220px;
    }
}

/* ========================================================================== 
   OVERRIDE TABLET BASE STYLES (769px - 1024px)
   ========================================================================== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* FORCE override base CSS pinning and transforms */
    .blz-story-mosaic,
    .story-mosaic-block {
        position: relative !important;
        transform: none !important;
        height: auto !important;
    }
    
    .mosaic-grid-wrapper {
        min-height: auto !important;
        height: auto !important;
        display: block !important;
    }
    
    .mosaic-panel {
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ========================================================================== 
   LARGE TABLET (900px - 1024px)
   Better layout for larger tablets
   ========================================================================== */
@media screen and (min-width: 900px) and (max-width: 1024px) {
    /* Grid wrapper */
    .mosaic-grid-wrapper {
        padding: 3rem 2.5rem;
        max-width: 960px;
        margin: 0 auto;
    }
    
    /* Grid setup */
    .mosaic-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1.5rem;
        display: grid !important;
    }
    
    /* Panel styling */
    .mosaic-panel {
        min-height: 220px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 4 PANELS - 2x2 with variation */
    .mosaic-count-4 {
        grid-template-rows: repeat(2, minmax(250px, auto));
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 4;
        grid-row: 1;
        min-height: 280px;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(2) {
        grid-column: 4 / 7;
        grid-row: 1;
        min-height: 280px;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(3) {
        grid-column: 1 / 4;
        grid-row: 2;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(4) {
        grid-column: 4 / 7;
        grid-row: 2;
    }
    
    /* Typography */
    .mosaic-title {
        font-size: 1.75rem;
    }
    
    .panel-hero .mosaic-title {
        font-size: 2rem;
    }
    
    .mosaic-text {
        font-size: 1rem;
        line-height: 1.55;
    }
    
    /* Content */
    .mosaic-content {
        padding: 1.875rem;
    }
    
    /* Images */
    .mosaic-image {
        height: 170px;
    }
    
    .panel-hero .mosaic-image {
        height: 200px;
    }
}

/* ========================================================================== 
   MEDIUM TABLET (800px - 899px)
   Optimized for this specific range
   ========================================================================== */
@media screen and (min-width: 800px) and (max-width: 899px) {
    /* Grid wrapper */
    .mosaic-grid-wrapper {
        padding: 2.5rem 2rem;
        max-width: 840px;
        margin: 0 auto;
    }
    
    /* Grid setup */
    .mosaic-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.25rem;
        display: grid !important;
    }
    
    /* Panels */
    .mosaic-panel {
        min-height: 200px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 4 PANELS - Simple 2x2 grid */
    .mosaic-count-4 {
        grid-template-rows: repeat(2, minmax(220px, auto));
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(2) {
        grid-column: 3 / 5;
        grid-row: 1;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(3) {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    
    .mosaic-count-4 .mosaic-panel:nth-child(4) {
        grid-column: 3 / 5;
        grid-row: 2;
    }
    
    /* Typography */
    .mosaic-title {
        font-size: 1.625rem;
    }
    
    .panel-hero .mosaic-title {
        font-size: 1.875rem;
    }
    
    .mosaic-text {
        font-size: 0.975rem;
        line-height: 1.5;
    }
    
    /* Content */
    .mosaic-content {
        padding: 1.75rem;
    }
    
    /* Images */
    .mosaic-image {
        height: 150px;
    }
    
    .panel-hero .mosaic-image {
        height: 180px;
    }
    
    /* Hide connectors at this size */
    .mosaic-connector {
        display: none;
    }
}