/*
 * Jan About Me v1.0
 * Vita tabs
 *
 * Gutenberg setup:
 * - Create a Group block around the three Vita columns.
 * - Add the CSS class: jan-vita
 * - Each column should contain:
 *     1. A heading/paragraph with the year range
 *     2. The Vita text below it
 */

.jan-vita {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	column-gap: 5.5vw;
	row-gap: 24px;
	width: 100%;
}

.jan-vita > * {
	min-width: 0;
}

/* The first text element acts as the clickable tab. */
.jan-vita .jan-vita-tab {
	cursor: pointer;
	user-select: none;
	transition: color .18s ease;
}

/* Added automatically by the JavaScript. */
.jan-vita .jan-vita-tab.is-active {
	color: #e0ad22;
}

.jan-vita .jan-vita-content {
	display: none;
}

.jan-vita .jan-vita-content.is-active {
	display: block;
}

/*
 * The plugin converts the three column contents into:
 * - one row of tabs
 * - one shared content area
 */
.jan-vita {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.jan-vita .jan-vita-panel {
	grid-column: 1 / -1;
}

/* Keep the shared text area below the tabs. */
.jan-vita .jan-vita-panel .jan-vita-content {
	max-width: 100%;
}

/* Mobile: tabs remain horizontal when possible, with compact spacing. */
@media (max-width: 800px) {
	.jan-vita {
		column-gap: 24px;
	}

	.jan-vita .jan-vita-tab {
		font-size: inherit;
	}
}

@media (max-width: 560px) {
	.jan-vita {
		grid-template-columns: 1fr !important;
		row-gap: 12px;
	}

	.jan-vita .jan-vita-tab {
		padding: 8px 0;
	}

	.jan-vita .jan-vita-panel {
		margin-top: 12px;
	}
}


/* Interactive layout created by the plugin. */
.jan-vita .jan-vita-tabs {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	column-gap: 5.5vw;
	grid-column: 1 / -1 !important;
	width: 100%;
}

.jan-vita .jan-vita-panel {
	grid-column: 1 / -1 !important;
	width: 100%;
	min-width: 0;
	margin-top: 24px;
}

.jan-vita .jan-vita-panel {
	grid-column: 1 / -1;
}

.jan-vita .jan-vita-tab {
	margin: 0;
}

@media (max-width: 560px) {
	.jan-vita .jan-vita-tabs {
		grid-template-columns: 1fr;
		row-gap: 4px;
	}
}