/* Board Members Responsive Layout CSS - Using board-query class */

/* Make the board member cards equal height */
.wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member {
    display: flex;
    height: 100%;
}

.wp-block-query.board-query .wp-block-post-template:has(.wp-block-post.board-member) {
    display: grid;
    align-items: stretch;
    gap: var(--wp--preset--spacing--40) !important;
}

/* Ensure all board member cards have the same height and no gaps within cards */
.wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns.are-vertically-aligned-center {
    height: 100% !important;
    min-height: 250px !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* Make sure the image column takes full height and removes vertical centering */
.wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:first-child.is-vertically-aligned-center {
    display: flex !important;
    align-items: stretch !important;
    align-self: stretch !important;
}

/* Featured image should fill full height - override all inline styles */
.wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-post-featured-image[style] {
    height: 100% !important;
    aspect-ratio: unset !important;
    width: 100% !important;
    display: flex !important;
    margin: 0 !important;
}

/* Images should fill the container completely - override inline styles */
.wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-post-featured-image img[style] {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Ensure content column also stretches */
.wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:last-child.is-vertically-aligned-center {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* Remove hover effects */

/* Tablet breakpoint - delay stacking until smaller screens */
@media (max-width: 900px) {
    /* Force single column layout earlier for board members */
    .wp-block-query.board-query .wp-block-post-template.columns-2:has(.wp-block-post.board-member) {
        grid-template-columns: 1fr !important;
    }
    
    /* Adjust column proportions on tablet - keep side by side - make images wider */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:first-child {
        flex-basis: 40% !important;
    }
    
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:last-child {
        flex-basis: 60% !important;
    }
    
    /* Maintain side-by-side layout with no gap between image and text */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns {
        min-height: 200px !important;
        flex-direction: row !important;
        align-items: stretch !important;
        flex-wrap: nowrap !important;
        overflow: hidden !important;
        gap: 0 !important;
    }
    
    /* Image column adjustments for tablet - make images wider */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:first-child.is-vertically-aligned-center {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        min-width: 40% !important;
        height: 100% !important;
    }
    
    /* Content column adjustments for tablet */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:last-child.is-vertically-aligned-center {
        flex: 1 1 60% !important;
        max-width: 60% !important;
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
}

/* Mobile breakpoint - stack columns and adjust border radius */
@media (max-width: 768px) {
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns {
        flex-direction: column !important;
        min-height: auto !important;
    }
    
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    
    /* Reset image column for stacked layout */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:first-child.is-vertically-aligned-center {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto !important;
    }
    
    /* Featured image height for stacked layout - use natural height */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-post-featured-image[style] {
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Stacked layout: image on top gets top corners rounded and natural positioning */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-post-featured-image img[style] {
        border-top-left-radius: 10px !important;
        border-top-right-radius: 10px !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        height: auto !important;
        min-height: auto !important;
        object-position: center center !important;
        object-fit: cover !important;
        width: 100% !important;
    }
    
    /* Content adjustments for stacked layout - minimal spacing and proper padding */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:last-child.is-vertically-aligned-center {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        padding-top: var(--wp--preset--spacing--10) !important;
        padding-left: var(--wp--preset--spacing--40) !important;
        padding-right: var(--wp--preset--spacing--40) !important;
        padding-bottom: 0 !important;
    }
    
    /* Remove bottom padding from content sections on mobile */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-post-content {
        padding-bottom: 0 !important;
    }
    
    /* Better text handling on mobile */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:last-child .wp-block-post-title {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        line-height: 1.3 !important;
    }
}

/* Extra small screens - further adjustments */
@media (max-width: 480px) {
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns {
        margin-bottom: var(--wp--preset--spacing--40) !important;
    }
    
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-column:last-child {
        padding-left: var(--wp--preset--spacing--30) !important;
        padding-right: var(--wp--preset--spacing--30) !important;
    }
    
    /* Adjust title size on mobile */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-post-title {
        font-size: var(--wp--preset--font-size--large) !important;
    }
    
    /* Natural image height on very small screens */
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-post-featured-image[style] {
        height: auto !important;
        min-height: auto !important;
    }
    
    .wp-block-query.board-query .wp-block-post-template .wp-block-post.board-member .wp-block-columns .wp-block-post-featured-image img[style] {
        height: auto !important;
        min-height: auto !important;
        object-position: center center !important;
        width: 100% !important;
    }
}