/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px){

    .tpc-hero-grid{

        grid-template-columns:1fr;
        gap:50px;
        text-align:center;

    }

    .tpc-hero-image{

        text-align:center;

    }

    .tpc-hero-image img{

        margin:auto;

    }

    .tpc-hero p{

        margin:0 auto 35px;

    }

    .tpc-calculator-grid{

        grid-template-columns:1fr;

    }

    .tpc-preview-card{

        position:relative;
        top:0;

    }
    .tpc-preview-card h3{

    font-size:28px;
    line-height:1.3;

}

    

}



/* =====================================================
   MOBILE
===================================================== */

@media (max-width:768px){

    .tpc-hero{

        padding:45px 0 60px;

    }

    .tpc-hero h1{

        font-size:48px;
        line-height:1.08;
        margin-bottom:20px;

    }

    .tpc-hero p{

        font-size:17px;
        line-height:1.7;

    }

    .tpc-hero-image img{

        max-width:320px;

    }

    .tpc-btn{

        width:100%;

    }

    .tpc-calculator{

        padding:60px 0;

    }

    .tpc-calculator-card,
    .tpc-preview-card{

        padding:28px;

    }

    .tpc-card-header h2{

        font-size:30px;

    }

    .tpc-form-row{

        grid-template-columns:1fr;

    }

    .tpc-goals{

        flex-direction:column;

    }


    .tpc-toggle button{

        height:55px;

    }

    .tpc-input-group input,
    .tpc-input-group select{

        height:55px;

    }

    .tpc-preview-number{

        font-size:58px;

    }

}

@media (max-width:768px){

    .tpc-goals{

        gap:14px;

    }

    .goal-btn{

        min-height:58px;

        padding:18px 24px;

        font-size:16px;

        font-weight:700;

        border-radius:16px;

    }

    .tpc-toggle{

        gap:14px;

    }

    .tpc-toggle button{

        min-height:58px;

        font-size:16px;

        border-radius:16px;

    }

}

@media(max-width:768px){

.tpc-hero-title{

    font-size:2.5rem;

    line-height:0.98;

}

.tpc-section-title{

    font-size:2rem;

    line-height:1.05;

}

}


/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width:480px){

    .tpc-container{

        width:92%;

    }

    .tpc-badge{

        font-size:12px;

        padding:7px 14px;

    }

    .tpc-hero h1{

        font-size:34px;

        line-height:1.12;

    }

    .tpc-hero p{

        font-size:15px;

    }

    .tpc-btn{

        height:54px;

        font-size:15px;

    }

    .tpc-hero-image img{

        max-width:240px;

    }

    .tpc-card-header h2{

        font-size:26px;

    }

    .tpc-card-header p{

        font-size:15px;

    }

    .tpc-calculator-card,
    .tpc-preview-card{

        padding:20px;

        border-radius:20px;

    }

    .tpc-preview-number{

        font-size:48px;

    }

    .tpc-result-row{

        font-size:14px;

    }

    .tpc-note{

        font-size:14px;

        padding:15px;

    }

}

@media(max-width:480px){

    .tpc-badge{

        display:inline-flex;
        justify-content:center;
        align-items:center;

        font-size:11px;

        padding:8px 14px;

        max-width:100%;

        text-align:center;

        line-height:1.4;

    }

}

/* ==========================================
   BENEFITS
========================================== */

@media (max-width:768px){

    .tpc-benefits{

        padding:60px 0;

    }

    .tpc-benefits-grid{

        display:grid;
        grid-template-columns:1fr;
        gap:20px;

    }

    .tpc-benefit{

        padding:30px 25px;
        text-align:center;

    }

    .tpc-benefit h3{

        font-size:24px;

    }

    .tpc-benefit p{

        font-size:16px;
        line-height:1.7;

    }

}


/* ==========================================
   FOODS
========================================== */

@media (max-width:768px){

    .tpc-food-grid{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:18px;

    }

    .tpc-food-card{

        width:100%;

    }

    .tpc-food-card img{

        height:150px;

        object-fit:cover;

    }

    .tpc-food-card h3{

        font-size:22px;

    }

}

@media (max-width:480px){

    .tpc-food-grid{

        grid-template-columns:1fr;

    }

    .tpc-food-card img{

        height:220px;

    }

}