/* ==========================================================================
   Makovicka Team Widget — Card Grid
   Base structural defaults. All visual styling (colors, typography,
   spacing, borders, shadows, backgrounds) is controlled via the
   Elementor Style tab and generated inline by Elementor.
   ========================================================================== */

.mako-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* overridden by Elementor columns control */
    gap: 20px;
}

.mako-team-item {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #fff;
    border-radius: 8px;
    overflow: visible;
    /* must not be hidden — modal starts inside the article */
    display: flex;
    flex-direction: column;
    position: relative;
}

.mako-team-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Card image */
.mako-team-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Card text area */
.mako-team-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Card name */
.mako-team-name {
    margin: 0 0 4px;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Card degrees */
.mako-team-degrees {
    font-style: italic;
    color: #666;
    margin: 0 0 4px;
}

/* Card job title */
.mako-team-job-title {
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* ==========================================================================
   Makovicka Team Widget — Self-Contained Bio Modal
   Base structural defaults. All visual styling is controlled via the
   Elementor Style tab (Modal — * sections).
   ========================================================================== */

/* Prevent body scroll while a modal is open */
body.mako-modal-open {
    overflow: hidden;
}

/* Full-viewport fixed container */
.mako-bio-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    /* toggled by JS: none ↔ flex */
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Overlay */
.mako-bio-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    /* overridden by Modal — Overlay control */
    cursor: pointer;
}

/* White modal box */
.mako-bio-modal__box {
    position: relative;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-width: 860px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 40px;
    box-sizing: border-box;
    z-index: 1;
}

/* Dismiss (×) button */
.mako-bio-modal__dismiss {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    color: #333;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s ease, background 0.2s ease;
}

.mako-bio-modal__dismiss:hover,
.mako-bio-modal__dismiss:focus {
    color: #000;
    background: #f0f0f0;
    outline: none;
}

/* Two-column inner layout */
.mako-bio-modal__inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Left column — photo + identity */
.mako-bio-modal__left {
    flex: 0 0 auto;
    width: 220px;
    text-align: center;
}

.mako-bio-modal__photo {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin-bottom: 16px;
}

.mako-bio-modal__identity {
    text-align: center;
}

/* Modal name */
.mako-bio-modal__name {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 4px;
    color: #111;
}

/* Modal degrees */
.mako-bio-modal__degrees {
    font-size: 0.95rem;
    color: #555;
    margin: 0 0 4px;
}

/* Modal job title */
.mako-bio-modal__job {
    font-size: 0.9rem;
    color: #444;
    margin: 0;
    line-height: 1.4;
}

/* Right column — bio text */
.mako-bio-modal__right {
    flex: 1 1 auto;
    min-width: 0;
}

.mako-bio-modal__bio {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
    margin: 0;
}

.mako-bio-modal__bio p {
    margin-top: 0;
    margin-bottom: 1em;
}

.mako-bio-modal__bio p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Responsive — stack columns on narrow screens
   ========================================================================== */

/* Bio Modal — Services Offered section */
.mako-services-divider {
    width: 90%;
    height: 1px;
    background: #ccc;
    margin: 30px 0 20px;
}

.services-offered-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #111;
}

.services-offered ul {
    list-style: disc;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 25px;
}

.services-offered ul li {
    margin: 0;
    white-space: nowrap;
    /* Services with more than a single word do not break across lines */
}

/*
### 3. Display Locations Filter (Fixed)
- **Problem**: The initial implementation used `'compare' => 'IN'`, which failed because ACF stores checkbox data as serialized arrays.
- **Fix**: Updated the `render()` logic to use `LIKE` with quoted values (e.g., `%"clinical"%`) and wrapped the location filters in an `OR` relation.
- **Intersection**: Verified that these filters correctly intersect (`AND`) with the custom Elementor Query IDs (like `team_pt`), allowing you to show, for example, only Physical Therapists who are also on the Clinical Team.
*/
/* Ensure first item doesn't have extra left gap if needed, 
   but gap on flex is usually fine. list-style-position: inside 
   can help with bullets if they disappear on flex. */
.services-offered ul {
    list-style-position: inside;
}

@media (max-width: 640px) {
    .mako-bio-modal__box {
        padding: 28px 20px;
    }

    .mako-bio-modal__inner {
        flex-direction: column;
        gap: 24px;
    }

    .mako-bio-modal__left {
        width: 100%;
    }

    .mako-bio-modal__photo {
        max-width: 200px;
        margin-left: auto;
        margin-right: auto;
    }

    .mako-services-divider {
        width: 100%;
    }
}