/**
 * Responsive Scaling System - 90% Target
 * Target: Make desktop appear like 90% zoom while keeping mobile at 100%
 * Method: Font-size reduction + container max-width adjustments
 * 
 * Breakpoints:
 * - Mobile (<768px): 100% (16px base font)
 * - Tablet (768-991px): ~95% (15.2px)
 * - Laptop (992-1199px): ~92% (14.7px)
 * - Desktop (≥1200px): ~90% (14.4px)
 * - XL Desktop (≥1400px): ~88% (14.1px)
 */

/* Mobile First - 100% normal size */
html {
    font-size: 16px;
}

/* Tablet - Slight reduction to 95% */
@media (min-width: 768px) {
    html {
        font-size: 15.2px; /* ~95% */
    }
    
    .container {
        max-width: 720px;
    }
}

/* Laptop - Medium reduction to 92% */
@media (min-width: 992px) {
    html {
        font-size: 14.7px; /* ~92% */
    }
    
    .container {
        max-width: 940px;
    }
    
    /* Reduce spacing slightly */
    .post-content-wrapper,
    .related-posts,
    .sidebar {
        padding: 2rem !important;
    }
    
    /* Card images - subtle reduction */
    .card img,
    .post-card img,
    .related-post-image img {
        max-height: 200px;
        object-fit: cover;
    }
}

/* Desktop - Target 90% scaling */
@media (min-width: 1200px) {
    html {
        font-size: 14.4px; /* ~90% */
    }
    
    .container {
        max-width: 1100px; /* Slightly more compact */
    }
    
    /* Compact spacing */
    .post-content-wrapper,
    .related-posts,
    .sidebar {
        padding: 1.8rem !important;
    }
    
    .post-header {
        padding: 2.5rem 0 !important;
    }
    
    /* Card images - compact */
    .card img,
    .post-card img,
    .related-post-image img {
        max-height: 180px;
        object-fit: cover;
    }
    
    /* Grid adjustments */
    .row {
        --bs-gutter-x: 1.2rem;
    }
    
    /* Card body padding */
    .card-body {
        padding: 1rem !important;
    }
}

/* XL Desktop - Maximum 88% scaling */
@media (min-width: 1400px) {
    html {
        font-size: 14.1px; /* ~88% */
    }
    
    .container {
        max-width: 1200px;
    }
    
    /* Very compact spacing */
    .post-content-wrapper,
    .related-posts,
    .sidebar {
        padding: 1.6rem !important;
    }
    
    .post-header {
        padding: 2.2rem 0 !important;
    }
    
    /* Card images - very compact */
    .card img,
    .post-card img,
    .related-post-image img {
        max-height: 160px;
        object-fit: cover;
    }
    
    /* Tighter grid */
    .row {
        --bs-gutter-x: 1rem;
    }
    
    /* Minimal card padding */
    .card-body {
        padding: 0.9rem !important;
    }
}

/* Featured images scaling */
@media (min-width: 992px) {
    .featured-image,
    .post img,
    .post-content img {
        max-width: 92%;
        height: auto;
    }
}

@media (min-width: 1200px) {
    .featured-image,
    .post img,
    .post-content img {
        max-width: 90%;
        height: auto;
    }
}

/* Ensure images don't overflow */
img {
    max-width: 100%;
    height: auto;
}

/* Category page specific adjustments */
@media (min-width: 1200px) {
    .category-grid,
    .posts-grid {
        gap: 1rem !important;
    }
    
    .col-md-3,
    .col-lg-3 {
        padding: 0.5rem !important;
    }
}

@media (min-width: 1400px) {
    .category-grid,
    .posts-grid {
        gap: 0.8rem !important;
    }
    
    .col-md-3,
    .col-lg-3 {
        padding: 0.4rem !important;
    }
}

/* Admin dashboard adjustments */
@media (min-width: 1200px) {
    .admin-content {
        padding: 1.5rem !important;
    }
    
    .stats-card {
        padding: 1.2rem !important;
    }
}
