/**
 * Add .wm-pattern-styles-tabs to a group or container block to create a Tab UI from a Query Loop. 
 * Select the Query Loop block and add tag the block with the WM Pattern Libary attribute Tabs pattern.
 * Copy this file to your theme's assets/css/patterns directory to customize/extend the functionality. 
 * This file will automatically enqueue when .wm-pattern-styles-tabs is detected.
 *
 * JS file: assets/js/patterns/wm-pattern-styles-tabs.js
 *
 * @version 1.0.0
 * @since 2025-10-16
 */


/* Tab button styling */
.wm-pattern-styles-tabs .wmx-loop-toggle-btns {
    cursor: pointer;
    transition: all 0.3s ease;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns {
    cursor: pointer;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns.active {
    /* Add your active button styles here */
    opacity: 1;
}

.wm-pattern-styles-tabs .wmx-loop-toggle-btns.active{
	background: #033171 !important;
}
.wm-pattern-styles-tabs .wmx-loop-toggle-btns:not(.active) {
    transition: all 0.3s ease;
}

/* Hide all tab content by default */
.wmx-loop-tab-targets .wp-block-post-template .wp-block-post {
    display: none !important;
}

/* Show only the active tab content */
.wmx-loop-tab-targets .wp-block-post-template .wp-block-post.active {
    display: block !important;
}

.wm-pattern-styles-tabs .horizontal-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px;
}
.horizontal-tabs li {
	width: unset !important;
}

/*  */
.tab {
	padding: 0px !important;
}
.tab .wp-block-uagb-container{
	padding: 0px;
}
.tab .wp-block-uagb-container ul {
	margin-top: 30px;
}
.tab .wp-block-uagb-container ul li h5 a{
	color: #e9eef6;
	border: 1px solid var(--ast-global-color-1);
	background: var(--ast-global-color-1);
	padding: 6px 12px;
	display: inline-block;
	font-size: 16px;
    line-height: 2;
}
.tab .wp-block-uagb-container ul li h5.active a{
	background: #033171;
}
.tab .wp-block-uagb-container ul li .wp-block-post-featured-image{
	width: 43% !important;
}
.tab .wp-block-uagb-container ul li .wp-block-post-featured-image img{
	width: 360px;
	height: 230px;
}
.tab .wp-block-uagb-container:nth-of-type(2) .uagb-container-inner-blocks-wrap ul{
	padding: 15px 10px;
	border: 1px solid var(--ast-global-color-1);
}
/*  */

@media screen and (max-width: 480px) {
	.tab .wp-block-uagb-container ul li .wp-block-post-featured-image{
		width: 100% !important;
	}
}