/* CSS Document */

/* ============================
   MOBILE LAYOUT FIXES
============================ */

/* Up to 900px */
@media (max-width: 900px) {

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

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

    .profile-hero-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* Up to 600px */
@media (max-width: 600px) {

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .areas-columns {
        grid-template-columns: 1fr;
    }

    .content-block,
    .promo-block,
    .reviews-block,
    .areas-block {
        padding: 5px 5px;
    }

    .featured-performer img {
        height: 400px; /* taller crop, keeps heads visible */
        object-position: top;
    }

    .review-card img {
        height: 400px;
        object-position: top;
    }
}

/* Up to 768px */
@media (max-width: 768px) {

    .form-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .contact-form-wrapper {
        padding: 20px;
    }

    .contact-page h1 {
        font-size: 1.8rem;
    }

    .contact-page h2 {
        font-size: 1.3rem;
    }
}

/* ============================
   PROFILE PAGE MOBILE TWEAK
   (tighten spacing on small screens)
============================ */
@media (max-width: 768px) {

    .profile-content.two-col {
        /* if you have padding here in your main CSS, you can override it: */
        padding-left: 0;
        padding-right: 0;
    }

    .profile-content.two-col .col-left,
    .profile-content.two-col .col-right {
        gap: 5px;
        padding-left: 0;
        padding-right: 0;
    }

    .profile-content.two-col section {
        padding-left: 15px;
        padding-right: 15px;
        /* comment this out if you like the card look */
        /* border-radius: 0; */
    }
}