/* Media tabs */
* > section:has(> header > label > input[name="mediaTabs"]) {
	min-width: 275px;
	height: -webkit-fill-available;
	margin: 0 auto;
	aspect-ratio: 1;
	overflow: hidden;
	background-color: #fff;
}

header:has(> label > input[name="mediaTabs"]),
figure section > div:has(> label > input[name="certificateMediaTab"]) {    
	position: relative;
	display: flex;
    justify-content: center;
    justify-items: center;
    gap: var(--smallSpacing);
	max-height: 2em;
	border-radius: inherit;
    background-color: oklch(from var(--secondaryColor) l c h / 0.75);
	z-index: 2;
}

header:has(> label > input[name="mediaTabs"]) > label,
figure section > div:has(> label > input[name="certificateMediaTab"]) > label {
	grid-template-columns: unset;
	position: relative;
	z-index: 1;
    width: auto;
	padding: var(--mediumSpacing);
	border-bottom: 2px solid transparent;
    background-color: transparent;
	transition: all 400ms ease-in;
}

header:has(> label > input[name="mediaTabs"]) > label:has(> input:checked),
figure section > div:has(> label > input[name="certificateMediaTab"]) > label:has(> input:checked) {
    box-shadow: none;
}

header:has(> label > input[name="mediaTabs"]) > label:before,
figure section > div:has(> label > input[name="certificateMediaTab"]) > label:before {
	font-size: calc(var(--largeSpacing) * 1.1);
}

header:has(> label > input[name="mediaTabs"]) > label:hover,
figure section > div:has(> label > input[name="certificateMediaTab"]) > label:hover {
	border-color: oklch(from var(--primaryColor) l c h / 0.75);
}

header:has(> label > input[name="mediaTabs"]) > label:has(> input:checked),
figure section > div:has(> label > input[name="certificateMediaTab"]) > label:has(> input:checked) {
	pointer-events: none;
}

header:has(> label > input[name="mediaTabs"]):before,
figure section > div:has(> label > input[name="certificateMediaTab"]):before {
	content: "";
	position: absolute;
	top: var(--mediaTabY, 0);
	left: var(--mediaTabX, 0);
	z-index: 0;
	box-sizing: border-box;
	width: var(--mediaTabWidth, 0);
	height: var(--mediaTabHeight, 0);
	border-bottom: 2px solid var(--primaryColor);
	background-color: var(--highlightColor);
	pointer-events: none;
	transition: var(--mediaTabTransition, left 500ms ease-in-out, top 500ms ease-in-out, width 500ms ease-in-out, height 500ms ease-in-out);
	will-change: left, top, width, height;
}

/* Subtabs [certificates] */
figure section > div:has(> label > input[name="certificateMediaTab"]) {    
	position: absolute;
    right: 0;
    bottom: var(--smallSpacing);
    left: 0;
    margin: 0 auto;
	padding: var(--smallSpacing);
    width: fit-content;
    width: -moz-fit-content;
    border-radius: var(--borderRadius);
    background-color: oklch(from var(--secondaryColor) l c h / 0.50);
    overflow: hidden;
}

figure section > div:has(> label > input[name="certificateMediaTab"]) > label {
	position: relative;
	z-index: 1;
	padding: var(--smallSpacing);
	font-weight: bold;
}

figure section > div:has(> label > input[name="certificateMediaTab"]) > label > span {
    padding: 0;
    background-color: transparent;
}

figure section > div:has(> label > input[name="certificateMediaTab"]) ~ div {
	display: none;
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

header:has(> label:nth-of-type(1) > input[name="mediaTabs"]:checked) ~ figure > section:nth-of-type(1),
header:has(> label:nth-of-type(2) > input[name="mediaTabs"]:checked) ~ figure > section:nth-of-type(2),
header:has(> label:nth-of-type(3) > input[name="mediaTabs"]:checked) ~ figure > section:nth-of-type(3),
figure section > div:has(> label:nth-of-type(1) > input[name="certificateMediaTab"]:checked) ~ :nth-of-type(2),
figure section > div:has(> label:nth-of-type(2) > input[name="certificateMediaTab"]:checked) ~ :nth-of-type(3),
figure section > div:has(> label:nth-of-type(3) > input[name="certificateMediaTab"]:checked) ~ :nth-of-type(4),
figure section > div:has(> label:nth-of-type(4) > input[name="certificateMediaTab"]:checked) ~ :nth-of-type(5),
figure section > div:has(> label:nth-of-type(5) > input[name="certificateMediaTab"]:checked) ~ :nth-of-type(6),
figure section > div:has(> label:nth-of-type(6) > input[name="certificateMediaTab"]:checked) ~ :nth-of-type(7) {
	display: flex;
}
@media only screen and (max-width: 1000px) {

	article:has(> section > header input[name="mediaTabs"]):has(> table) {
		block-size: var(--panelMaxBlockSize);
	}

	article:has(> section > header input[name="mediaTabs"]) > section {
		flex: none;
		align-self: center;
		inline-size: min(75%, 18rem, calc(var(--panelMaxBlockSize) / 2));
		min-inline-size: 0;
		max-block-size: min(18rem, calc(var(--panelMaxBlockSize) / 2));
		block-size: auto;
	}

	article:has(> section > header input[name="mediaTabs"]) > section > figure {
		flex: 1;
		min-block-size: 0;
		inline-size: 100%;
	}

	article:has(> section > header input[name="mediaTabs"]) > table {
		flex: 1 1 0;
		min-block-size: 0;
		max-block-size: none;
		inline-size: 100%;
		margin-block: 0;
	}

	article:has(> section > header input[name="mediaTabs"]) > table > tbody {
		min-block-size: 0;
		overscroll-behavior: contain;
	}

}