/* ==================================================
   TREATMENT ARCHIVE
================================================== */


.treatment-grid {

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;

}



/* =========================
   TREATMENT CARD
========================= */


.treatment-card {

    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e8eef5;
    transition: all .3s ease;

}



.treatment-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.10);

}





/* IMAGE */


.treatment-card-image {

    overflow: hidden;

}



.treatment-card-image img {

    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    transition: .4s ease;

}



.treatment-card:hover .treatment-card-image img {

    transform: scale(1.05);

}






/* CONTENT */


.treatment-card-content {

    padding: 25px;

}



.treatment-card-content h2 {

    font-size: 24px;
    margin-bottom: 15px;

}



.treatment-card-content h2 a {

    text-decoration: none;
    color: #1b2b48;

}





.treatment-excerpt {

    color: #666;
    line-height: 1.7;
    margin-bottom: 20px;

}







/* META INFO */


.treatment-meta {

    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 25px;

}



.treatment-meta-item {

    font-size: 15px;
    color: #444;

}



.meta-icon {

    margin-right: 8px;

}







/* BUTTON */


.treatment-button {

    display: inline-block;
    padding: 12px 25px;
    background: #0d9488;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: .3s ease;

}



.treatment-button:hover {

    background: #087f75;

}





/* ==================================================================
   RESPONSIVE
   Breakpoints: 992px (tablet), 768px (small tablet / large phone),
                480px (phone)
================================================================== */


/* ---------- TABLET (≤992px) ---------- */

@media (max-width: 992px) {


    .treatment-grid {

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

        gap: 24px;

    }


    .treatment-card-image img {

        height: 220px;

    }

}





/* ---------- SMALL TABLET / LARGE PHONE (≤768px) ---------- */

@media (max-width: 768px) {


    .treatment-grid {

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

        gap: 18px;

    }


    .treatment-card-content {

        padding: 18px;

    }


    .treatment-card-content h2 {

        font-size: 20px;
        margin-bottom: 10px;

    }


    .treatment-excerpt {

        font-size: 15px;
        margin-bottom: 15px;

    }


    .treatment-meta {

        margin-bottom: 18px;

    }


    .treatment-button {

        padding: 10px 20px;
        font-size: 14px;

    }

}





/* ---------- PHONE (≤480px) ---------- */

@media (max-width: 480px) {


    .treatment-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .treatment-card-image img {

        height: 200px;

    }


    .treatment-card-content {

        padding: 16px;

    }


    .treatment-card-content h2 {

        font-size: 19px;

    }


    .treatment-meta-item {

        font-size: 14px;

    }


    /* Hover-only effects (lift, zoom) don't apply on touch devices,
       so disable them to avoid a "stuck" hover look after tapping */

    .treatment-card:hover {

        transform: none;

        box-shadow: none;

    }


    .treatment-card:hover .treatment-card-image img {

        transform: none;

    }


    .treatment-button {

        display: block;
        text-align: center;
        width: 100%;

    }

}