/*
 * 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; }

.jrx-tab-panel {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 720px;
}
.jrx-tab-panel__media {
	display: flex;
	justify-content: flex-start;
}
.jrx-content-section__tabs .jrx-tab-panel__image {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: var(--jrx-radius-md);
	object-fit: contain;
}
.jrx-tab-panel__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--jrx-radius-sm);
	background: color-mix(in srgb, var(--jrx-s-accent) 15%, transparent);
	color: var(--jrx-s-accent);
	font-size: 1.5rem;
}
.jrx-tab-panel__text {
	color: var(--jrx-s-muted);
	line-height: 1.6;
}
.jrx-tab-panel__text p:first-child { margin-top: 0; }
.jrx-tab-panel__text p:last-child { margin-bottom: 0; }

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