/* ============================================
 * Team Members Widget — Layout & Image Position Styles
 * ============================================
 * Prefix classes are applied to the widget wrapper
 * via Elementor's prefix_class control.
 *
 * NOTE: Only structural/layout styles live here.
 * Decorative styles (colors, shadows, border-radius)
 * are handled by Elementor panel controls so users
 * can customise them freely.
 */

/* -------------------------------------------
 * Grid container — essential for column layout
 * ------------------------------------------- */
.dw-team-members-grid {
    display: grid;
}

/* -------------------------------------------
 * Base: Fluid grid images, content wrapper
 * ------------------------------------------- */
.dw-team-member-image-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
}

.dw-team-member-content {
    display: flex;
    flex-direction: column;
}

/* -------------------------------------------
 * Image Position: Left
 * ------------------------------------------- */
.dw-team-members--thumbnail-left .dw-team-member {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.dw-team-members--thumbnail-left .dw-team-member-image-wrapper {
    flex-shrink: 0;
    margin-bottom: 0;
}

.dw-team-members--thumbnail-left .dw-team-member-content {
    flex: 1;
    min-width: 0;
}

/* -------------------------------------------
 * Image Position: Right
 * ------------------------------------------- */
.dw-team-members--thumbnail-right .dw-team-member {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
}

.dw-team-members--thumbnail-right .dw-team-member-image-wrapper {
    flex-shrink: 0;
    margin-bottom: 0;
}

.dw-team-members--thumbnail-right .dw-team-member-content {
    flex: 1;
    min-width: 0;
}

/* -------------------------------------------
 * Layout: Card
 * -------------------------------------------
 * Card uses overflow:hidden so the full-bleed
 * image can span edge-to-edge. The card height
 * is set to 100% so all cards in a row match.
 */
.dw-team-members--layout-card .dw-team-member {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

/* Card + thumbnail top — image edge-to-edge, content padded */
.dw-team-members--layout-card.dw-team-members--thumbnail-top .dw-team-member-image-wrapper {
    margin-bottom: 0;
    overflow: hidden;
}

.dw-team-members--layout-card.dw-team-members--thumbnail-top .dw-team-member-image-wrapper img {
    width: 100%;
    object-fit: cover;
    border-radius: 0;
}

.dw-team-members--layout-card.dw-team-members--thumbnail-top .dw-team-member-content {
    padding: 20px;
    flex: 1;
}

/* Card + image left — row layout, image padded on left, content padded on right */
.dw-team-members--layout-card.dw-team-members--thumbnail-left .dw-team-member {
    flex-direction: row;
    align-items: stretch;
}

.dw-team-members--layout-card.dw-team-members--thumbnail-left .dw-team-member-image-wrapper {
    padding: 16px 0 16px 16px;
}

.dw-team-members--layout-card.dw-team-members--thumbnail-left .dw-team-member-content {
    padding: 16px 16px 16px 0;
}

/* Card + image right — row-reverse layout, image padded on right, content padded on left */
.dw-team-members--layout-card.dw-team-members--thumbnail-right .dw-team-member {
    flex-direction: row-reverse;
    align-items: stretch;
}

.dw-team-members--layout-card.dw-team-members--thumbnail-right .dw-team-member-image-wrapper {
    padding: 16px 16px 16px 0;
}

.dw-team-members--layout-card.dw-team-members--thumbnail-right .dw-team-member-content {
    padding: 16px 0 16px 16px;
}

/* Card: push social links to the bottom of the card */
.dw-team-members--layout-card .dw-team-member-socials {
    margin-top: auto;
    padding-top: 12px;
}

/* -------------------------------------------
 * Layout: Classic
 * -------------------------------------------
 * Items separated by a bottom border. The last
 * item has no border so the list doesn't look
 * cut off.
 */
.dw-team-members--layout-classic .dw-team-member {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.dw-team-members--layout-classic .dw-team-member:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Classic: subtle image rounding */
.dw-team-members--layout-classic .dw-team-member-image-wrapper img {
    border-radius: 4px;
}

/* -------------------------------------------
 * Responsive: collapse side-by-side layouts
 * to stacked on mobile
 * ------------------------------------------- */
@media (max-width: 767px) {
    .dw-team-members--thumbnail-left .dw-team-member,
    .dw-team-members--thumbnail-right .dw-team-member {
        flex-direction: column;
    }

    .dw-team-members--thumbnail-left .dw-team-member-image-wrapper,
    .dw-team-members--thumbnail-right .dw-team-member-image-wrapper {
        width: 100%;
    }

    .dw-team-members--layout-card.dw-team-members--thumbnail-left .dw-team-member-image-wrapper,
    .dw-team-members--layout-card.dw-team-members--thumbnail-right .dw-team-member-image-wrapper {
        padding: 0;
    }

    .dw-team-members--layout-card.dw-team-members--thumbnail-left .dw-team-member-content,
    .dw-team-members--layout-card.dw-team-members--thumbnail-right .dw-team-member-content {
        padding: 0 16px 16px;
    }
}