/* =========================================
   RESPONSIVIDADE
   Projeto mobile-first
========================================= */


/* =========================================
   CELULARES PEQUENOS
   Ex.: 320px até 359px
========================================= */

@media (max-width: 359px) {

    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .heart {
        width: 42px;
        height: 42px;
    }

    h1 {
        font-size: 2rem;
        margin-bottom: 16px;
    }

    .countdown {
        gap: 8px;
    }

    .time-box {
        min-height: 74px;
        border-radius: 16px;
        padding: 9px 5px;
    }

    .time-box span {
        font-size: 1.55rem;
    }

    .time-box small {
        font-size: 0.58rem;
        letter-spacing: 0.8px;
    }

    .message {
        width: 100%;
    }

    .message p {
        font-size: 0.78rem;
    }

    .music-player {
        padding: 10px;
        border-radius: 16px;
    }

    .music-player button,
    #openGift {
        min-height: 42px;
        font-size: 0.74rem;
    }

    .current-song p {
        font-size: 0.66rem;
    }

}


/* =========================================
   CELULARES PADRÃO
   Ex.: 360px até 389px
========================================= */

@media (min-width: 360px) and (max-width: 389px) {

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .heart {
        width: 46px;
        height: 46px;
    }

    h1 {
        font-size: 2.2rem;
    }

    .time-box {
        min-height: 82px;
    }

    .time-box span {
        font-size: 1.75rem;
    }

}


/* =========================================
   CELULARES MÉDIOS
   Ex.: 390px até 429px
========================================= */

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

    .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .heart {
        width: 50px;
        height: 50px;
    }

    h1 {
        font-size: 2.45rem;
    }

    .time-box {
        min-height: 88px;
    }

    .time-box span {
        font-size: 1.9rem;
    }

}


/* =========================================
   CELULARES GRANDES
   Ex.: 430px até 599px
========================================= */

@media (min-width: 430px) and (max-width: 599px) {

    .container {
        max-width: 430px;
    }

    h1 {
        font-size: 2.7rem;
    }

    .time-box {
        min-height: 94px;
    }

    .time-box span {
        font-size: 2rem;
    }

}


/* =========================================
   TELAS BAIXAS
   Ex.: celulares compactos / navegador
   com muita barra ocupando espaço
========================================= */

@media (max-height: 720px) {

    .container {
        justify-content: flex-start;

        padding-top:
            max(12px, env(safe-area-inset-top));

        padding-bottom:
            max(42px, env(safe-area-inset-bottom));
    }

    .heart {
        width: 38px;
        height: 38px;

        margin-bottom: 6px;
    }

    h1 {
        font-size: 2rem;

        margin-bottom: 12px;
    }

    .countdown {
        gap: 8px;

        margin-bottom: 12px;
    }

    .time-box {
        min-height: 68px;

        padding: 7px;
    }

    .time-box span {
        font-size: 1.5rem;
    }

    .time-box small {
        margin-top: 4px;

        font-size: 0.58rem;
    }

    .message {
        margin-bottom: 10px;
    }

    .message p {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .music-player {
        padding: 9px;
    }

    .music-player h2 {
        margin-bottom: 7px;
    }

    .music-player button,
    #openGift {
        min-height: 40px;

        padding: 8px 12px;
    }

    .current-song {
        min-height: 26px;

        margin: 5px 0;
    }

}


/* =========================================
   TELAS MUITO BAIXAS
========================================= */

@media (max-height: 620px) {

    .container {
        padding-top: 8px;
    }

    .heart {
        width: 32px;
        height: 32px;

        margin-bottom: 4px;
    }

    h1 {
        font-size: 1.8rem;

        margin-bottom: 8px;
    }

    .countdown {
        margin-bottom: 8px;
    }

    .time-box {
        min-height: 58px;
    }

    .time-box span {
        font-size: 1.3rem;
    }

    .message {
        margin-bottom: 8px;
    }

    .music-player {
        padding: 7px;
    }

    footer {
        bottom: 4px;
    }

}


/* =========================================
   TABLETS / NOTEBOOKS
   Não é prioridade, mas não deixa quebrar
========================================= */

@media (min-width: 600px) {

    .container {
        max-width: 430px;
    }

    .countdown {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================
   MODO PAISAGEM EM CELULAR
========================================= */

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

    body {
        overflow-y: auto;
    }

    .container {
        min-height: auto;

        padding-top: 14px;
        padding-bottom: 40px;
    }

    .heart {
        width: 30px;
        height: 30px;
    }

    h1 {
        font-size: 1.7rem;

        margin-bottom: 8px;
    }

    .countdown {
        grid-template-columns: repeat(4, 1fr);

        gap: 7px;
    }

    .time-box {
        min-height: 58px;
    }

    .message {
        margin-bottom: 8px;
    }

}