/* ========================================
   Responsive Styles - Tema 3
   Mobile First Approach
   ======================================== */

/* ========================================
   Mobile (até 576px)
   ======================================== */
@media (max-width: 575.98px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    .section {
        padding: var(--spacing-lg) 0;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    #back-to-top {
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 20px;
    }
}

/* ========================================
   Tablet (576px - 768px)
   ======================================== */
@media (min-width: 576px) and (max-width: 767.98px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
}

/* ========================================
   Tablet Large (768px - 992px)
   ======================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section {
        padding: calc(var(--spacing-xl) * 1.5) 0;
    }
}

/* ========================================
   Desktop (992px+)
   ======================================== */
@media (min-width: 992px) {
    /* Adicionar estilos específicos de desktop */
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }
    
    .no-print,
    nav,
    footer,
    button,
    .btn {
        display: none !important;
    }
}