/** 
 * @file            Responsive CSS
 * @description     Viewport adaptations are centralized within this stylesheet. For mobile devices, fluid responsiveness is implemented using the `clamp()` function. On desktop, conventional breakpoint strategies are applied to ensure accessibility and optimal user experience. This file consolidates both fundamental and advanced techniques for responsive design.
 * @author          Mário Miguel de Almeida
 * @last-modified   2025-12-27
 * @dependencies    reset.css, style.css
 */

@media (min-width: 320px) and (orientation: portrait) {
    html {
        font-size: clamp(1rem, 2.2727vw + 0.54545rem, 2rem);
    }
}

@media (min-width: 640px) and (orientation: landscape) {
    html {
        font-size: 0.875rem;
    }

    body {
        & .advice-card {
            width: 24rem;
        }
    }
}

@media (min-width: 850px) and (orientation: landscape) {html {font-size: 1rem;}}
@media (min-width: 1024px) and (orientation: landscape) {html {font-size: 1.125rem;}}
@media (min-width: 1200px) {html {font-size: 1.25rem;}}
@media (min-width: 1366px) {html {font-size: 1.375rem;}}
@media (min-width: 1536px) {html {font-size: 1.5rem;}}
@media (min-width: 1680px) {html {font-size: 1.5625rem;}}
@media (min-width: 1920px) {html {font-size: 1.6875rem;}}
@media (min-width: 2304px) {html {font-size: 1.8125rem;}}
@media (min-width: 2560px) {html {font-size: 1.875rem;}}