/*
Theme Name: FSE Video Theme
Theme URI: https://mmlovetv.com
Author: MMLoveTV
Author URI: https://mmlovetv.com
Description: A modern, minimalist Full Site Editing block theme for video-heavy websites. Integrates with the cloudflare-r2-stream plugin.
Version: 1.0.13
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fse-video-theme
Tags: full-site-editing, block-theme, video, dark, minimalist, wide-blocks
*/

/* Compact Blog Grid */
.compact-blog-grid {
    display: grid !important;
    gap: 16px !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
@media (max-width: 1200px) {
    .compact-blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
    .compact-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    .compact-blog-grid { grid-template-columns: 1fr !important; }
}

/* Compact Blog Post Card */
.blog-post-card {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}
.blog-post-card .wp-block-post-title {
    font-size: 14px !important;
    line-height: 1.3 !important;
    margin-top: 8px !important;
    margin-bottom: 0 !important;
}
.compact-blog-grid .blog-post-card .wp-block-post-featured-image {
    margin-bottom: 0 !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    overflow: hidden !important;
    background: #111 !important;
}

.compact-blog-grid .blog-post-card .wp-block-post-featured-image img,
.compact-blog-grid .blog-post-card .wp-block-post-featured-image a img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16/9 !important;
    object-fit: cover !important;
    display: block !important;
}

/* Placeholder when no featured image exists */
.blog-post-card .wp-block-post-featured-image:not(:has(img)) {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background-image: url('https://img.mmlovetv.com/2026/03/placeholder.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-color: #111 !important;
}

/* Fallback for browsers that don't support :has() */
.blog-post-card .wp-block-post-featured-image:empty {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background-image: url('https://img.mmlovetv.com/2026/03/placeholder.webp') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-color: #111 !important;
}

/* ===== Blog Pagination ===== */
.wp-block-query-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-top: 40px !important;
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous a,
.wp-block-query-pagination-next a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: background 0.2s, color 0.2s !important;
    background: #222 !important;
    color: #ccc !important;
    border: 1px solid #333 !important;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous a:hover,
.wp-block-query-pagination-next a:hover {
    background: var(--wp--preset--color--accent, #e74c3c) !important;
    color: #fff !important;
    border-color: transparent !important;
}

.wp-block-query-pagination-numbers .page-numbers.current {
    background: var(--wp--preset--color--accent, #e74c3c) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 700 !important;
    pointer-events: none !important;
}