/** 
 * @file            Responsive CSS
 * @description     Contains media queries and layout adaptations for different screen sizes, orientations, and resolutions to ensure a responsive experience across devices.
 * @author          Mário Miguel de Almeida
 * @last-modified   2025-07-30
 * @dependencies    reset.css, style.css
*/

/* 1. Viewports up to 980px (general for smaller devices) */
@media (max-width: 980px) {

    /* Base styles for smaller screens */
    .page-wrapper {
        & .slider-arrows {
            width: min(5vw, 4.9rem);
            height: min(6vw, 7.8rem);
        }

        & .slider {
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;

            & .slider__content {
                width: min(64vw, 62rem);
                height: auto;

                margin-left: 0;
                padding: min(6.7vw, 6.5rem) min(6.2vw, 6rem);

                text-align: center;

                border-radius: min(1.1vw, 1rem);

                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;

                & .slider__content-title {
                    margin-bottom: min(11.5vw, 8rem);

                    font-size: min(7.2vw, 5rem);
                }

                & .slider__content-paragraph {
                    font-size: min(3.6vw, 2.5rem);
                    line-height: min(5vw, 3.5rem);
                }

                & .slider__link {
                    font-size: min(4.3vw, 3rem);
                }
            }

            & .credits {
                margin-bottom: min(1.1vw, 1rem);

                & .credits__paragraph {
                    padding: min(0.6vw, 0.4rem);

                    font-size: min(2.7vw, 2rem);

                    border-radius: min(1.1vw, 0.8rem);
                }
            }
        }

    }
}

/* 2. Viewports up to 980px wide AND up to 850px tall (more specific than the previous) */
@media (max-width: 980px) and (max-height: 850px) {

    /* Adjustments for smaller viewports with reduced height */
    .page-wrapper .slider {
        & .slider__content {
            margin-top: max(18vh, 10rem);
        }

        & .credits {
            margin-top: max(10vh, 6rem);
        }
    }
}




/* 3. Viewports in landscape orientation with up to 920px height */
@media (max-height: 920px) and (orientation: landscape) {

    /* Styles adapted for short and wide screens (landscape) */
    .page-wrapper {
        & .slider-arrows {
            width: min(5.4vh, 4.9rem);
            height: min(8.5vh, 7.8rem);
        }

        & .slider {
            & .slider__content {
                width: min(68vh, 62rem);
                height: min(77vh, 70rem);

                padding: min(7.1vh, 6.5rem) min(6.6vh, 6rem);

                border-radius: min(1.1vh, 1rem);

                & .slider__content-title {
                    margin-bottom: min(8.7vh, 8rem);

                    font-size: min(5.5vh, 5rem);
                }

                & .slider__content-paragraph {
                    margin-bottom: min(5.5vh, 5rem);

                    font-size: min(2.8vh, 2.5rem);
                    line-height: min(3.9vh, 3.5rem);
                }

                & .slider__link {
                    font-size: min(3.3vh, 3rem);
                }
            }

            & .credits {
                margin-bottom: min(1.1vh, 1rem);

                & .credits__paragraph {
                    padding: min(0.5vh, 0.4rem);

                    font-size: min(2.2vh, 2rem);

                    border-radius: min(0.9vh, 0.8rem);
                }
            }
        }
    }
}

/* 4. Viewports from 980px wide, 1200px tall, and portrait orientation */
@media (min-width: 980px) and (min-height: 1200px) and (orientation: portrait) {

    /* Layout for desktop devices in portrait mode */
    .page-wrapper .slider {
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;

        & .slider__content {
            height: auto;

            margin-left: 0;

            text-align: center;

            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }
    }
}

/* 5. Extra-wide viewports (2K or 4K monitors) */
@media (min-width: 1921px) {

    /* Typographic adjustments for very large screens */
    html {
        font-size: max(62.5%, 0.50vw);
    }
}