/* =========================================================================
   UNIVERSAL DESIGN SYSTEM - RESPONSIVE & PRINT
   =========================================================================
   STRICT RULE: Standard breakpoints only. No random media queries.
   Print styles strictly included.
   ========================================================================= */

/* Mobile First Approach - Base styles cover < 768px */

/* -----------------------------------------
   TABLET (768px and up)
----------------------------------------- */
@media (min-width: 768px) {
    /* Layout Upgrades */
    .d-md-flex { display: flex; }
    .d-md-none { display: none !important; }
    
    .u-section {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }
}

/* -----------------------------------------
   LAPTOP / DESKTOP (1024px and up)
----------------------------------------- */
@media (min-width: 1024px) {
    /* Layout Upgrades */
    .d-lg-flex { display: flex; }
    .d-lg-none { display: none !important; }
    
    .u-section {
        padding-top: var(--space-20);
        padding-bottom: var(--space-20);
    }
}

/* -----------------------------------------
   PRINT STYLES
----------------------------------------- */
@media print {
    /* Hide non-printable elements */
    .tool-header,
    .tool-footer,
    .tool-cta-section,
    .tool-related-section,
    .tool-faq-section,
    .tool-export-section,
    .tool-hero-layout,
    .tool-input-layout,
    .tool-btn-primary,
    .tool-btn-secondary,
    .tool-btn-outline,
    button {
        display: none !important;
    }
    
    /* Reset background and colors for printers to save ink */
    body {
        background-color: white !important;
        color: black !important;
    }
    
    .tool-card {
        background-color: transparent !important;
        border: 1px solid #ccc !important;
        box-shadow: none !important;
        break-inside: avoid;
    }
    
    .text-white, .text-primary, .text-secondary {
        color: black !important;
    }
    
    /* Ensure charts print correctly */
    .tool-chart-container {
        page-break-inside: avoid;
    }
}