/*
 * tabs.css
 * Abas e painéis (content_section items_display=tabs).
 */

.jrx-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	border-bottom: 1px solid var(--jrx-s-card-border);
	margin-bottom: 1.5rem;
}
.jrx-tabs__tab {
	padding: 0.75rem 1.25rem;
	background: transparent;
	border: none;
	color: var(--jrx-s-muted);
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color var(--jrx-transition), border-color var(--jrx-transition);
}
.jrx-tabs__tab:hover {
	color: var(--theme-palette-color-1, var(--jrx-s-accent));
}
.jrx-tabs__tab.is-active {
	color: var(--theme-palette-color-1, var(--jrx-s-accent));
	border-bottom-color: var(--theme-palette-color-1, var(--jrx-s-accent));
}
.jrx-tabs__panel { display: none; }
.jrx-tabs__panel.is-active { display: block; }

/* Layout do painel vem do card (media_top, media_side, media_cover, etc.). */
.jrx-content-section__tabs .jrx-tab-panel .jrx-card {
	width: 100%;
}

.jrx-tabs__panel .jrx-layout-shortcodes {
	margin-top: 0.75rem;
}