.section-tabs .section-header {
	text-align: center;
}

.tabs-nav {
	display: flex;
	border-bottom: 2px solid var(--border-gray);
	gap: 0;
	/* overflow-x: auto;
    -webkit-overflow-scrolling: touch; */

	[role="tab"] {
		flex-shrink: 0;
		padding: calc(var(--item-gap) * 0.65) var(--item-gap);
		background: transparent;
		border: none;
		border-bottom: 3px solid transparent;
		margin-bottom: -2px;
		cursor: pointer;
		font-size: var(--text-sm);
		font-weight: 700;
		color: inherit;
		transition:
			color var(--trans-fast),
			border-color var(--trans-fast);
		white-space: nowrap;

		&:hover {
			color: var(--medium);
		}

		&:focus-visible {
			outline: var(--focus-ring);
			outline-offset: -2px;
		}

		&[aria-selected="true"] {
			color: inherit;
			border-bottom-color: var(--medium);
		}
	}
}

.bg-medium .tabs-nav {
	[role="tab"] {
		&:hover {
			color: var(--medium-dim);
		}

		&[aria-selected="true"] {
			border-bottom-color: var(--medium-dim);
		}
	}
}

.bg-light .tabs-nav,
.bg-light-dim .tabs-nav,
.bg-light-tint .tabs-nav {
	[role="tab"] {
		&:hover {
			color: var(--medium);
		}

		&[aria-selected="true"] {
			border-bottom-color: var(--dark);
		}
	}
}

.tabs-panel {
	display: none;
	padding-top: calc(var(--item-gap) * 1.5);

	&.active {
		display: block;
	}
}

.tabs-panel-inner {
	display: block;

	&.has-image {
		display: grid;
		grid-template-columns: 1fr;
		gap: calc(var(--item-gap) * 1.5);
		align-items: center;

		@media (min-width: 768px) {
			grid-template-columns: 2fr 3fr;
		}
	}

	&.has-image.img-right {
		@media (min-width: 768px) {
			grid-template-columns: 3fr 2fr;

			.tabs-panel-image {
				order: 2;
			}

			.tabs-panel-content {
				order: 1;
			}
		}
	}
}

.tabs-panel-image {
	border-radius: var(--radius-sm);
	overflow: hidden;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		aspect-ratio: 16 / 10;
	}
}

.tabs-panel-content {
	h3 {
		font-size: var(--text-h4);
		margin: 0 0 calc(var(--item-gap) * 0.5);
	}

	p {
		font-size: var(--text-sm);
		line-height: 1.7;
		margin: 0;
	}
}

.tabs-accordion {
	display: none;
}

@media (max-width: 1023px) {
	.tabs-nav {
		display: none;
	}

	.tabs-accordion {
		display: block;
	}

	.tabs-ac-item {
		border-bottom: 2px solid var(--border-gray);
	}

	.tabs-ac-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--item-gap);
		width: 100%;
		padding: calc(var(--item-gap) * 0.75) 0;
		background: transparent;
		border: none;
		cursor: pointer;
		font-size: var(--text-sm);
		font-weight: 700;
		color: inherit;
		text-align: left;
		transition: color var(--trans-fast);

		&:hover {
			color: var(--medium);
		}

		&:focus-visible {
			outline: var(--focus-ring);
			outline-offset: -2px;
		}

		&[aria-expanded="true"] {
			color: inherit;
			border-bottom: 3px solid var(--medium);
			margin-bottom: -2px;

			.tabs-ac-icon {
				transform: rotate(180deg);
			}
		}
	}

	.tabs-ac-icon {
		flex-shrink: 0;
		font-size: var(--text-xs);
		color: inherit;
		transition: transform var(--trans-normal);
		margin-right: 6px;
	}

	.tabs-ac-panel {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows var(--trans-normal);

		&[aria-hidden="false"] {
			grid-template-rows: 1fr;

			.tabs-ac-panel-content {
				padding: calc(var(--item-gap) * 0.75) 0 calc(var(--item-gap) * 1.25);
			}
		}
	}

	.tabs-ac-panel-content {
		overflow: hidden;
		padding: 0;

		.tabs-panel-content {
			h3 {
				font-size: var(--text-h4);
				margin: 0 0 calc(var(--item-gap) * 0.5);
			}

			p {
				font-size: var(--text-sm);
				line-height: 1.7;
				margin: 0;
			}
		}

		.tabs-panel-image {
			border-radius: var(--radius-sm);
			overflow: hidden;
			margin-bottom: calc(var(--item-gap) * 0.75);

			img {
				width: 100%;
				display: block;
				object-fit: cover;
				aspect-ratio: 16 / 10;
			}
		}

		.tabs-panel-inner.has-image {
			display: flex;
			flex-direction: column;
			gap: calc(var(--item-gap) * 0.75);
		}
	}
}