/**
 * QuoteManager Responsive Base
 * Clean, minimal mobile fixes with consistent breakpoints
 */

/* ========================================================================== */
/* CONSISTENT BREAKPOINTS */
/* Mobile: max-width: 768px */  
/* Tablet: 769px - 1024px */
/* Desktop: 1025px+ */
/* ========================================================================== */

/* Blog Timeline & Stories List - Compact Layout Fixes */
.wp-block-quotemanager-blog-timeline .blog-posts-grid,
.wp-block-quotemanager-stories-list .stories-grid {
    gap: 0.75rem;
}

/* Force square images across all QuoteManager blocks with proper sizing */
.wp-block-quotemanager-blog-timeline .layout-list .post-thumbnail {
    aspect-ratio: 1 / 1 !important;
    width: 120px !important;
    height: 120px !important;
    flex-shrink: 0 !important;
    margin-right: 1.5rem !important;
    overflow: hidden !important;
}

.wp-block-quotemanager-blog-timeline .layout-cards .post-thumbnail {
    aspect-ratio: 1 / 1;
    max-width: 200px;
    max-height: 200px;
    overflow: hidden;
}

.wp-block-quotemanager-stories-list .story-image {
    aspect-ratio: 1 / 1;
    max-width: 150px;
    max-height: 150px;
    overflow: hidden;
}

.wp-block-quotemanager-blog-timeline .post-thumbnail img,
.wp-block-quotemanager-stories-list .story-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Basic mobile overflow prevention */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    /* QuoteManager blocks basic mobile fixes */
    .wp-block-quotemanager-quote-slider-v2,
    .wp-block-quotemanager-wie-is-wie,
    .wp-block-quotemanager-stories-list,
    .wie-is-wie-container,
    .quote-slider-v2-container {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }
}

/* Quote Slider V2 Mobile Fixes */
@media (max-width: 768px) {
    .quote-slider-v2 {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
    
    .quote-slider-v2-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 1rem !important;
        margin: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .quote-slider-v2-item {
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Carousel specific fixes */
    .quote-slider-v2-carousel,
    .quote-slider-v2 .splide {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* Wie-is-wie Mobile Fixes */
@media (max-width: 768px) {
    .wie-is-wie-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }
    
    .wie-is-wie-single-wide {
        flex-direction: column !important;
        max-width: 100% !important;
        padding: 1.5rem !important;
    }
    
    /* Reset floating alignments on mobile */
    .wp-block-quotemanager-wie-is-wie.alignleft,
    .wp-block-quotemanager-wie-is-wie.alignright {
        float: none !important;
        margin: 1rem 0 !important;
        max-width: 100% !important;
    }
}

/* Quote Carousel (Splide.js) Mobile Fixes */
@media (max-width: 768px) {
    .quote-carousel-container {
        padding: 0 1rem;
        max-width: 100%;
    }
    
    .quote-carousel .splide__slide {
        margin: 0 0.5rem;
        min-width: 280px; /* Prevent slides from becoming too narrow */
    }
    
    .quote-carousel .splide__track {
        overflow: visible; /* Allow navigation arrows to show */
    }
}

/* Tablet responsive adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
    .quote-slider-v2-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .wie-is-wie-grid[data-columns="3"],
    .wie-is-wie-grid[data-columns="4"] {
        grid-template-columns: repeat(2, 1fr);
    }
}