/*
======================================================================

CTM PATH™ Guided Journey v1.0

File
css/foundation/responsive.css

Purpose
Responsive Design System

Responsibility
• Desktop optimisation
• Tablet adaptation
• Mobile experience
• Touch-friendly spacing
• Elder-friendly readability
• Screen consistency

======================================================================
*/


/*==================================================
Large Desktop
1200px+
==================================================*/


@media (min-width:1200px){


    .container{


        max-width:

            1200px;


    }



    .screen{


        padding-top:

            40px;


        padding-bottom:

            40px;


    }



}



/*==================================================
Desktop
992px - 1199px
==================================================*/


@media (max-width:1199px){



    .container{


        padding-left:

            32px;



        padding-right:

            32px;



    }



}



/*==================================================
Tablet
768px - 991px
==================================================*/


@media (max-width:991px){



    .screen{


        align-items:

            flex-start;



        padding-top:

            50px;



        padding-bottom:

            50px;



    }




    .container{


        padding-left:

            24px;



        padding-right:

            24px;



    }



}



/*==================================================
Mobile
481px - 767px
==================================================*/


@media (max-width:767px){



    .screen{


        min-height:

            100vh;



    }



    .container{


        padding-left:

            20px;



        padding-right:

            20px;



    }




    .hero{


        width:

            100%;



    }




    .screen-caption{


        font-size:

            .68rem;



        letter-spacing:

            .24em;



    }




}



/*==================================================
Small Mobile
320px - 480px
==================================================*/


@media (max-width:480px){



    .container{


        padding-left:

            16px;



        padding-right:

            16px;



    }



    .screen{


        padding-top:

            30px;



        padding-bottom:

            30px;



    }




}



/*==================================================
Touch Optimisation
==================================================*/


@media (hover:none){



    button,


    .btn,


    .choice{


        min-height:

            52px;



        cursor:

            pointer;



    }



}



/*==================================================
Large Text Accessibility
==================================================*/


@media (max-width:768px){



    body{


        font-size:

            16px;



    }



}



/*==================================================
Landscape Mobile
==================================================*/


@media(max-height:600px)
and (orientation:landscape){



    .screen{


        padding-top:

            20px;



        padding-bottom:

            20px;



    }




}



/*==================================================
Safe Area Support
==================================================*/


@supports(padding:env(safe-area-inset-bottom)){



    .screen{


        padding-bottom:

            calc(

                40px +

                env(safe-area-inset-bottom)

            );



    }



}



/*==================================================
Print Safety
==================================================*/


@media print{



    body{


        background:white;



        color:black;



    }



    .btn{


        display:none;



    }



}