/**
 * Responsive Styles
 * 
 * Media queries for responsive design across different screen sizes
 * Breakpoints:
 * - 1200px: Tablet landscape and below
 * - 768px: Mobile devices
 */

/* ===== TABLET AND BELOW (1200px) ===== */

@media (max-width: 1200px) {
    .content-grid {
        grid-template-columns: 1fr;
    }

    .page-header-section {
        flex-direction: column;
        gap: 24px;
    }

    .metadata-panel {
        min-width: 100%;
    }

    .compact-metrics {
        grid-template-columns: 1fr;
    }

    .risk-impact-grid {
        grid-template-columns: 1fr;
    }

    .entry-container {
        flex-direction: column;
    }

    .understanding-panel {
        width: 100%;
        position: relative;
        top: 0;
    }
}

/* ===== MOBILE DEVICES (768px) ===== */

@media (max-width: 768px) {
    .container {
        padding: 16px;
    }

    .metrics-dashboard {
        grid-template-columns: 1fr;
    }

    .side-panel {
        width: 100%;
        right: -100%;
    }

    .nav-links {
        gap: 16px;
    }

    .page-header-section {
        padding: 20px;
    }

    .page-meta-row {
        flex-wrap: wrap;
    }

    .scenario-switcher {
        flex-direction: column;
        align-items: stretch;
    }

    .comparison-toggle {
        width: 100%;
        justify-content: center;
    }

    .entry-container {
        padding: 24px 16px;
    }

    .entry-title {
        font-size: 28px;
    }

    .templates-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .guided-review-banner {
        padding: 12px 16px;
    }

    .guided-review-content {
        flex-direction: column;
        gap: 16px;
    }

    .guided-review-actions {
        width: 100%;
        justify-content: space-between;
    }

    .guided-review-btn.ghost {
        order: -1;
        width: 100%;
    }
}