/**
 * #Interview
 */

.p-interview {
	--interview-slide: max(160px, calc(300 / 1440 * 100vw));
	--interview-gap: max(16px, calc(20 / 1440 * 100vw));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	padding: 120px 0 0;
	background-color: transparent;
	overflow: visible;

	@media (max-width: 768px) {
		--interview-slide: calc(160 / 375 * 100vw);
		--interview-gap: calc(20 / 375 * 100vw);
		padding: 60px 0 0;
	}

	.p-interview__slider {
		width: 100%;
		overflow: hidden;
		padding-left: var(--interview-gap);

		@media (max-width: 768px) {
			padding-left: 0;
		}

		&.is-single {
			display: flex;
			justify-content: center;
			overflow: visible;
			padding-left: 0;
		}
	}

	.p-interview__slider:not([data-keen-slider-disabled]) .p-interview__slide {
		flex: 0 0 auto;
		width: var(--interview-slide);
	}

	.p-interview__slide {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		width: var(--interview-slide);
		color: var(--white);
		text-decoration: none;

		&:hover {
			opacity: 1;
		}
	}

	.p-interview__thumb {
		position: relative;
		width: 100%;
		aspect-ratio: 300 / 466;
		margin-bottom: 12px;
		overflow: hidden;
		border-radius: var(--front-rd-interview, 20px);
		background-color: #e1e1e1;

		> img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		&.is-placeholder > img {
			width: 42%;
			height: auto;
			object-fit: contain;
			opacity: 0.3;
			mix-blend-mode: luminosity;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.p-interview__play {
		position: absolute;
		left: 50%;
		top: 50%;
		width: max(60px, calc(80 / 1440 * 100vw));
		height: max(60px, calc(80 / 1440 * 100vw));
		transform: translate(-50%, -50%);
		pointer-events: none;
		z-index: 1;

		@media (max-width: 768px) {
			width: calc(60 / 375 * 100vw);
			height: calc(60 / 375 * 100vw);
		}

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.p-interview__cat {
		padding: 4px 14px;
		border: 1px solid var(--white);
		border-radius: 6px;
		font-size: 15px;
		font-weight: 500;
	}

	.p-interview__name {
		margin: 0;
		font-size: 20px;
		font-weight: 700;

		small {
			margin-left: 6px;
			font-size: 14px;
			font-weight: 700;
		}
	}

	.p-interview__empty {
		margin: 0;
		color: var(--white);
	}
}

.p-interview-archive,
.p-news-single {
	--front-rd-interview: 20px;

	@media (max-width: 768px) {
		--front-rd-interview: 10px;
	}
}

.p-interview-archive {
	.p-interview__slide {
		width: 100%;
		color: #111;

		&:hover {
			color: #111;
		}
	}

	.p-interview__cat {
		border-color: #111;
	}
}

.p-news-single__thumb--video {
	aspect-ratio: 16 / 9;
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--front-rd-interview, 20px);
	max-width: 900px;
	margin: 0 auto 30px!important;
	img {
		object-fit: cover;
		display: block;
		width: 100%!important;
		height: 100%!important;
	}

	.p-interview__play {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 80px;
		height: 80px;
		transform: translate(-50%, -50%);
		pointer-events: none;

		img {
			width: 100%;
			height: 100%;
		}
	}
}

.p-interview-archive__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px 20px;

	@media (max-width: 1024px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	@media (max-width: 768px) {
		grid-template-columns: 1fr;
	}
}