/**
 * Mobile Full Width Boxes
 * Makes widgets and feed boxes expand to full width on mobile when scrolled past
 * Box edges touch screen edges when scrolled, but start with normal padding and rounded corners
 */

@media (max-width: 767px) {
    /* Default state - boxes have normal padding and rounded corners */
    .feed-box,
    .masonry-card,
    .cafe-text-post,
    .cafe-photo-post,
    .cafe-question-post,
    .cafe-article-card,
    .cafe-wp-post,
    .widget,
    .sidebar-widget {
        transition: margin 0.3s ease, width 0.3s ease, border-radius 0.3s ease !important;
    }
    
    /* Expanded state - when scrolled past, expand to full width and remove border-radius */
    .feed-box.scrolled-full-width,
    .masonry-card.scrolled-full-width,
    .cafe-text-post.scrolled-full-width,
    .cafe-photo-post.scrolled-full-width,
    .cafe-question-post.scrolled-full-width,
    .cafe-article-card.scrolled-full-width,
    .cafe-wp-post.scrolled-full-width,
    .widget.scrolled-full-width,
    .sidebar-widget.scrolled-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        border-radius: 0 !important;
    }
    
    /* Override inline styles for border-radius when expanded */
    .feed-box.scrolled-full-width[style*="border-radius"],
    .masonry-card.scrolled-full-width[style*="border-radius"],
    .cafe-text-post.scrolled-full-width[style*="border-radius"],
    .cafe-photo-post.scrolled-full-width[style*="border-radius"],
    .cafe-question-post.scrolled-full-width[style*="border-radius"],
    .cafe-article-card.scrolled-full-width[style*="border-radius"],
    .cafe-wp-post.scrolled-full-width[style*="border-radius"] {
        border-radius: 0 !important;
    }
    
    /* Feed boxes in infinite feed */
    .infinite-feed-padding .feed-box.scrolled-full-width,
    .infinite-feed-masonry .feed-box.scrolled-full-width,
    #infinite-feed-container .feed-box.scrolled-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        border-radius: 0 !important;
    }
    
    /* Widget boxes in masonry grid */
    .masonry-container .masonry-card.scrolled-full-width,
    .masonry-widgets-grid .masonry-card.scrolled-full-width,
    #masonry-widgets-grid .masonry-card.scrolled-full-width,
    .discovery-feed-section .masonry-card.scrolled-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        border-radius: 0 !important;
    }
    
    /* Cafe feed boxes */
    .cafe-feed-column .masonry-card.scrolled-full-width,
    .cafe-feed-column .cafe-text-post.scrolled-full-width,
    .cafe-feed-column .cafe-photo-post.scrolled-full-width,
    .cafe-feed-column .cafe-question-post.scrolled-full-width,
    .cafe-feed-column .cafe-article-card.scrolled-full-width,
    .cafe-feed-column .cafe-wp-post.scrolled-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        border-radius: 0 !important;
    }
    
    /* Widget boxes */
    .widget.scrolled-full-width,
    .sidebar-widget.scrolled-full-width,
    .widget-enhanced.scrolled-full-width,
    .masonry-card[class*="widget"].scrolled-full-width,
    .feed-box[data-widget].scrolled-full-width,
    .masonry-card.bg-white.scrolled-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        border-radius: 0 !important;
    }
    
    /* For You page feed boxes */
    .for-you-feed .feed-box.scrolled-full-width,
    .for-you-feed .masonry-card.scrolled-full-width,
    #for-you-feed .feed-box.scrolled-full-width,
    #for-you-feed .masonry-card.scrolled-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        border-radius: 0 !important;
    }
    
    /* Profile page feed boxes */
    .user-profile-feed .feed-box.scrolled-full-width,
    .author-profile-feed .feed-box.scrolled-full-width,
    .user-profile-feed .masonry-card.scrolled-full-width,
    .author-profile-feed .masonry-card.scrolled-full-width,
    .profile-posts-container .feed-box.scrolled-full-width,
    .profile-posts-container .masonry-card.scrolled-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        border-radius: 0 !important;
    }
    
    /* Index page feed boxes */
    .infinite-feed-masonry .masonry-card.scrolled-full-width,
    .infinite-feed-masonry .feed-box.scrolled-full-width {
        margin-left: -12px !important;
        margin-right: -12px !important;
        width: calc(100% + 24px) !important;
        max-width: calc(100% + 24px) !important;
        border-radius: 0 !important;
    }
}