/* ============================================================
   RESPONSIVE — responsive.css
   Fluid grid breakpoints and mobile-specific overrides.
   ============================================================ */

/* ── Base: max-width 1280px (xl) ─────────────────────────────── */
@media (max-width: 1280px) {
    .bcm-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

/* ── Large tablet: ≤ 1024px ──────────────────────────────────── */
@media (max-width: 1024px) {
    .bcm-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }

    .bcm-hero {
        aspect-ratio: 16 / 7;
    }
}

/* ── Tablet: ≤ 768px ─────────────────────────────────────────── */
@media (max-width: 768px) {

    /* Header */
    .bcm-header {
        width: calc(100% - 24px);
        top: 8px;
    }

    /* Cards */
    .bcm-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .bcm-main-content {
        padding-top: calc(var(--bcm-header-height, 72px) + 16px);
    }

    /* Hero */
    .bcm-hero {
        border-radius: 24px;
        aspect-ratio: 4 / 3;
    }

    .bcm-hero__content { padding: 16px; }

    /* Sections */
    .bcm-section { padding: 40px 0; }

    /* Posts header */
    .bcm-posts-header { margin-bottom: 20px; }
    .bcm-posts-title  { font-size: 1.4rem; }
}

/* ── Mobile: ≤ 540px ─────────────────────────────────────────── */
@media (max-width: 540px) {

    /* Cards: single column */
    .bcm-card-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bcm-hero {
        aspect-ratio: 1 / 1;
        max-height: 300px;
        border-radius: 16px;
    }

    .bcm-hero__title { font-size: 1rem; }

    .bcm-card__body { padding: 12px 14px 16px; }

    .bcm-card__title { font-size: 0.95rem; }

    /* Footer */
    .bcm-footer { margin-top: 40px; padding: 40px 0 24px; }

    /* Pagination */
    .bcm-pagination .page-numbers {
        min-width: 36px;
        height: 36px;
        font-size: 0.82rem;
    }

    /* Action bar */
    .bcm-action-bar { right: 10px; bottom: 16px; }
}

/* ── Print ───────────────────────────────────────────────────── */
@media print {
    .bcm-header,
    .bcm-action-bar,
    .bcm-search-overlay,
    .bcm-hero,
    .bcm-pagination,
    .bcm-footer { display: none; }

    .bcm-main-content { padding-top: 0; }

    .bcm-card {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }

    .bcm-hero__track { transition: none; }
    .bcm-card:hover  { transform: none; }
}