/*==================================================
  Suomio Lite
  responsive.css
  V1.0
  Production Responsive Layout
===================================================*/


/*==================================================
  Tablet
===================================================*/

@media screen and (max-width: 1024px){


/*-----------------------------------------
 Global
------------------------------------------*/


body{

    font-size:16px;

}



.main-container,
.lesson-page,
.header-container{

    width:100%;

    padding-left:24px;

    padding-right:24px;

}



/*-----------------------------------------
 Header
------------------------------------------*/


.top-header{

    padding:16px 0;

}



.header-title h1{

    font-size:22px;

}



/*-----------------------------------------
 Lesson Hero
------------------------------------------*/


.lesson-hero{

    padding:32px 24px;

}



.lesson-hero h2{

    font-size:30px;

}



.lesson-meta{

    grid-template-columns:repeat(3,1fr);

}



/*-----------------------------------------
 Sections
------------------------------------------*/


.lesson-section{

    padding:24px;

}



.vocabulary-list{

    grid-template-columns:repeat(2,1fr);

}



.expression-list{

    grid-template-columns:repeat(2,1fr);

}



/*-----------------------------------------
 Navigation
------------------------------------------*/


.lesson-navigation{

    gap:16px;

}



.nav-button{

    min-height:48px;

}





}





/*==================================================
  Mobile Large
===================================================*/

@media screen and (max-width: 768px){


/*-----------------------------------------
 Global
------------------------------------------*/


body{

    font-size:15px;

}



.header-container,
.lesson-page,
.main-container{

    padding-left:16px;

    padding-right:16px;

}



/*-----------------------------------------
 Header
------------------------------------------*/


.top-header{

    position:sticky;

    top:0;

    z-index:100;

}



.header-container{

    gap:12px;

}



.header-title h1{

    font-size:18px;

}



.header-title p{

    font-size:13px;

}





/*-----------------------------------------
 Progress
------------------------------------------*/


.lesson-progress{

    padding:12px 16px;

}



.progress-top{

    font-size:13px;

}



/*-----------------------------------------
 Hero
------------------------------------------*/


.lesson-hero{

    padding:24px 18px;

    border-radius:20px;

}



.lesson-badge{

    width:44px;

    height:44px;

}



.lesson-hero h2{

    font-size:24px;

    line-height:1.3;

}



.lesson-description{

    font-size:14px;

}



/*-----------------------------------------
 Meta Cards
------------------------------------------*/


.lesson-meta{

    grid-template-columns:1fr;

    gap:12px;

}



.meta-card{

    padding:14px;

}





/*-----------------------------------------
 Section
------------------------------------------*/


.lesson-section{

    padding:20px 16px;

    margin-top:16px;

}



.section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

}



.section-header h3{

    font-size:20px;

}





/*-----------------------------------------
 Vocabulary
------------------------------------------*/


.vocabulary-list{

    grid-template-columns:1fr;

}



.vocabulary-card{

    padding:16px;

}



.vocabulary-word{

    font-size:18px;

}



/*-----------------------------------------
 Grammar
------------------------------------------*/


.grammar-content{

    font-size:15px;

    line-height:1.7;

}





/*-----------------------------------------
 Dialogue
------------------------------------------*/


.dialogue-container{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.dialogue-item{

    padding:14px;

}



.dialogue-finnish{

    font-size:16px;

}





/*-----------------------------------------
 Buttons
------------------------------------------*/


.primary-button,
.secondary-button,
.nav-button{

    width:100%;

}



.lesson-navigation{

    flex-direction:column;

}



.section-action{

    padding:8px 12px;

}





/*-----------------------------------------
 Modal
------------------------------------------*/


.modal-container,
.feedback-container,
.complete-card,
.unlock-card{

    width:calc(100% - 32px);

    margin:16px;

    border-radius:24px;

}



.quiz-question{

    font-size:18px;

}



.quiz-answers{

    display:flex;

    flex-direction:column;

}





/*-----------------------------------------
 Daily Goal
------------------------------------------*/


.daily-goal-card,
.tips-card{

    flex-direction:column;

    text-align:center;

    gap:12px;

}





/*-----------------------------------------
 Footer
------------------------------------------*/


.app-footer{

    padding:24px 16px;

    text-align:center;

}




}





/*==================================================
  Small Mobile
===================================================*/

@media screen and (max-width: 390px){



body{

    font-size:14px;

}



.header-title h1{

    font-size:16px;

}



.lesson-hero h2{

    font-size:22px;

}



.lesson-section{

    padding:16px;

}



.section-header h3{

    font-size:18px;

}



.reward-card{

    flex-direction:column;

    text-align:center;

}



}





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

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



.top-header{

    position:relative;

}



.lesson-hero{

    padding:20px;

}



.lesson-meta{

    grid-template-columns:repeat(3,1fr);

}



}



/*==================================================
  Accessibility
===================================================*/


@media (prefers-reduced-motion:reduce){


*{

    animation:none!important;

    transition:none!important;

    scroll-behavior:auto!important;

}


}


/*=========================================
  Account Page - Responsive Layout
=========================================*/


/*==================================================
  Desktop
==================================================*/

@media screen and (min-width: 769px){


    /*-----------------------------------------
      Account Page
    ------------------------------------------*/

    .account-page .auth-page{

        width: 100%;

        display: flex;

        justify-content: center;

        align-items: flex-start;

    }


    .account-page .auth-container{

        width: 100%;

        max-width: 600px;

        margin: 0 auto;

        display: flex;

        justify-content: center;

    }


.account-page .auth-card{

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    box-sizing: border-box;

    padding: 48px 52px;

    border:
        1px
        solid
        transparent;

    border-radius:
        24px;

background:
    radial-gradient(
        circle at 88% 8%,
        rgba(127, 177, 208, .20),
        transparent 34%
    ),
    linear-gradient(
        145deg,
        #FFFFFF 0%,
        #F8FBFC 48%,
        #EDF4F7 100%
    );
        border-box;

    box-shadow:
        0
        18px
        45px
        rgba(
            30,
            45,
            55,
            .09
        );

}


    /*-----------------------------------------
      Header
    ------------------------------------------*/

    .account-page .auth-card h1,
    .account-page .auth-card .auth-description{

        text-align: center;

    }


    /*-----------------------------------------
      Account Information
    ------------------------------------------*/

    .account-page .auth-card .account-info{

        width: 100%;

        text-align: center;

    }


.account-page .auth-card .account-info-row{

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 16px;

    width: 100%;

}


.account-page .auth-card .account-info-row span{

    display: block;

    width: auto;

    text-align: left;

}


    .account-page .auth-card .account-info-row strong{

        display: block;

        width: auto;

        text-align: left;

    }


    /*-----------------------------------------
      Premium
    ------------------------------------------*/

    .account-page .auth-card .account-premium{

        width: 100%;

        text-align: center;

    }


    .account-page .auth-card .account-premium h2,
    .account-page .auth-card .account-premium p{

        text-align: center;

    }


    .account-page .auth-card .account-premium .primary-button{

        display: block;

        margin-left: auto;

        margin-right: auto;

    }


    /*-----------------------------------------
      Logout
    ------------------------------------------*/

    .account-page .auth-card #logoutButton{

        display: block;

        margin-left: auto;

        margin-right: auto;

    }


    /*-----------------------------------------
      Back
    ------------------------------------------*/

    .account-page .auth-card .auth-back{

        display: block;

        text-align: center;

    }

}


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

@media screen and (max-width: 768px){


    /*-----------------------------------------
      Account Page
    ------------------------------------------*/

    .account-page .auth-page{

        width: 100%;

        display: flex;

        justify-content: center;

    }


    .account-page .auth-container{

        width: 100%;

        display: flex;

        justify-content: center;

    }


.account-page .auth-card{

    width: 100%;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(127, 177, 208, .20),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #FFFFFF 0%,
            #F8FBFC 48%,
            #EDF4F7 100%
        );

}


    /*-----------------------------------------
      Header
    ------------------------------------------*/

    .account-page .auth-card h1,
    .account-page .auth-card .auth-description{

        text-align: center;

    }


    /*-----------------------------------------
      Account Information
    ------------------------------------------*/

    .account-page .auth-card .account-info{

        width: 100%;

        text-align: center;

    }


    .account-page .auth-card .account-info-row{

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: center;

        text-align: center;

        gap: 12px;

        width: 100%;

    }


    .account-page .auth-card .account-info-row span{

        display: block;

        width: auto;

        text-align: left;

    }


.account-page .auth-card .account-info-row strong{

    display: block;

    width: auto;

    text-align: left;

}


    /*-----------------------------------------
      Premium
    ------------------------------------------*/

    .account-page .auth-card .account-premium{

        width: 100%;

        text-align: center;

    }


    .account-page .auth-card .account-premium h2,
    .account-page .auth-card .account-premium p{

        text-align: center;

    }


    .account-page .auth-card .account-premium .primary-button{

        display: block;

        margin-left: auto;

        margin-right: auto;

    }


    /*-----------------------------------------
      Logout
    ------------------------------------------*/

    .account-page .auth-card #logoutButton{

        display: block;

        margin-left: auto;

        margin-right: auto;

    }


    /*-----------------------------------------
      Back
    ------------------------------------------*/

    .account-page .auth-card .auth-back{

        display: block;

        text-align: center;

    }

}

/*==================================================
  Auth Pages - Desktop
==================================================*/

@media screen and (min-width: 769px){

    body:not(.account-page) .auth-page{

        width: 100%;

        min-height:
            calc(
                100vh - 72px
            );

        display: flex;

        justify-content: center;

        align-items: center;

        padding:
            48px
            24px
            64px;

    }


    body:not(.account-page) .auth-container{

        width: 100%;

        max-width: 460px;

        margin: 0 auto;

    }


    body:not(.account-page) .auth-card{

        width: 100%;

        max-width: 460px;

        margin: 0 auto;

        padding:
            42px
            40px
            36px;

        border:
            1px
            solid
            rgba(
                35,
                52,
                61,
                .09
            );

        border-radius:
            24px;

        background:
            #FFFFFF;

        box-shadow:
            0
            18px
            45px
            rgba(
                30,
                45,
                55,
                .10
            );

        box-sizing:
            border-box;

    }


    body:not(.account-page) .auth-card h1{

        margin:
            0
            0
            10px;

        color:
            #173B5C;

        font-size:
            2rem;

        font-weight:
            850;

        line-height:
            1.15;

        text-align:
            center;

    }


    body:not(.account-page) .auth-description{

        max-width:
            330px;

        margin:
            0
            auto
            30px;

        color:
            #73828A;

        text-align:
            center;

    }


    body:not(.account-page) .form-group{

        width:
            100%;

        margin-bottom:
            20px;

        text-align:
            left;

    }


    body:not(.account-page) .form-group label{

        display:
            block;

        margin-bottom:
            8px;

    }


    body:not(.account-page) .form-group input{

        display:
            block;

        width:
            100%;

        height:
            50px;

        padding:
            0
            15px;

        box-sizing:
            border-box;

    }


    body:not(.account-page) .auth-options{

        display:
            flex;

        justify-content:
            flex-end;

        margin-bottom:
            22px;

    }


    body:not(.account-page) #loginSubmitButton{

        width:
            100%;

        min-height:
            50px;

    }


    body:not(.account-page) .auth-switch{

        margin-top:
            26px;

        padding-top:
            23px;

        text-align:
            center;

    }


    body:not(.account-page) .auth-back{

        display:
            block;

        width:
            max-content;

        margin:
            22px
            auto
            0;

        text-align:
            center;

    }

}