/*
このファイルの元ファイルは
https://github.com/vektor-inc/vektor-wp-libraries
にあります。修正の際は上記リポジトリのデータを修正してください。
*/

/* Bootstrap Adjuster */
$border_primary: 1px solid #e5e5e5;
$color_font_default: #464646;
$margin_post_item_element: 0.8rem;
$margin_post_item_element_narrow: 0.4rem;

:root {
	--vk-font-size-xs:11px;
	--vk-color-link-text: #c00;
	--vk-color-link-text-hover: #c00;
}

$xs-max: 575.98px;
$sm-max: 767.98px;
$md-max: 991.98px;
$lg-max: 1199.98px;
$xl-max: 1399.98px;

$sm-min: 576px;
$md-min: 768px;
$lg-min: 992px;
$xl-min: 1200px;
$xxl-min: 1400px;

/*-------------------------------------------*/
/* vk_post Layout
/*-------------------------------------------*/
/* vk_post common style
/*-------------------------------------------*/
/* Button display
/*-------------------------------------------*/
/* Main section 1 column adjustment
/*-------------------------------------------*/

/*-------------------------------------------*/
/* vk_post Layout
/*-------------------------------------------*/
/* If exclude the .vk_posts that, when you select the .media don't work */
.vk_posts .vk_post-col {
	&-xs-2 {
		width: calc(16.66% - 30px);
	}
	&-xs-3 {
		width: calc(25% - 30px);
	}
	&-xs-4 {
		width: calc(33.3% - 30px);
	}
	&-xs-6 {
		width: calc(50% - 30px);
	}
	&-xs-12 {
		width: calc(100% - 30px);
	}
	@media (min-width: $sm-min) {
		&-sm-2 {
			width: calc(16.66% - 30px);
		}
		&-sm-3 {
			width: calc(25% - 30px);
		}
		&-sm-4 {
			width: calc(33.3% - 30px);
		}
		&-sm-6 {
			width: calc(50% - 30px);
		}
		&-sm-12 {
			width: calc(100% - 30px);
		}
	}
	@media (min-width: $md-min) {
		&-md-2 {
			width: calc(16.66% - 30px);
		}
		&-md-3 {
			width: calc(25% - 30px);
		}
		&-md-4 {
			width: calc(33.3% - 30px);
		}
		&-md-6 {
			width: calc(50% - 30px);
		}
		&-md-12 {
			width: calc(100% - 30px);
		}
	}
	@media (min-width: $lg-min) {
		&-lg-2 {
			width: calc(16.66% - 30px);
		}
		&-lg-3 {
			width: calc(25% - 30px);
		}
		&-lg-4 {
			width: calc(33.3% - 30px);
		}
		&-lg-6 {
			width: calc(50% - 30px);
		}
		&-lg-12 {
			width: calc(100% - 30px);
		}
	}
	@media (min-width: $xl-min) {
		&-xl-2 {
			width: calc(16.66% - 30px);
		}
		&-xl-3 {
			width: calc(25% - 30px);
		}
		&-xl-4 {
			width: calc(33.3% - 30px);
		}
		&-xl-6 {
			width: calc(50% - 30px);
		}
		&-xl-12 {
			width: calc(100% - 30px);
		}
    }
    @media (min-width: $xxl-min) {
		&-xxl-2 {
			width: calc(16.66% - 30px);
		}
		&-xxl-3 {
			width: calc(25% - 30px);
		}
		&-xxl-4 {
			width: calc(33.3% - 30px);
		}
		&-xxl-6 {
			width: calc(50% - 30px);
		}
		&-xxl-12 {
			width: calc(100% - 30px);
		}
	}
}

/*-------------------------------------------*/
/* vk_post common style
/*-------------------------------------------*/
.vk_posts {
	margin-left: -15px;
	margin-right: -15px;
	display: flex;
	flex-wrap: wrap;
	clear: both; /* To be cope with inline image float and so on. */
}
.vk_post {
	margin-left: 15px;
	margin-right: 15px;
	a:hover {
		text-decoration: none;
	}
	&_imgOuter {
		position: relative;
		&_singleTermLabel {
			font-size: 10px;
			padding: 0.3em 0.8em;
			position: absolute;
			right: 0;
			top: 0;
			z-index: 100;
		}
	}
	& &_title {
		font-size: 14px;
		line-height: 1.4;
		font-weight: bold;
		margin-bottom: 0;
		a {
			color: #333;
		}
	}
	&_title_new {
		margin-left: 0.4em;
		font-size: 0.8em;
		white-space: nowrap;
		color: red;
	}
	& &_excerpt {
		margin: $margin_post_item_element 0;
		font-size: 12px;
		line-height: 1.6;
		opacity: 0.8;
	}
	& &_date {
		font-size: var(--vk-font-size-xs);
		margin-top: $margin_post_item_element_narrow;
		color: #666;
	}
	&_taxonomies {
		margin-top:$margin_post_item_element;
	}
	&_taxonomy {
		display: flex;
		flex-direction: row;
		margin: 0;
		font-size: var(--vk-font-size-xs);
		&:first-child {
			margin-top:0;
		}
		&_title,
		&_terms {
			border:none;
			margin:0 0 $margin_post_item_element_narrow;
		}
		&_title{
			padding-left:0;
			&_inner {
				display: block;
				border:$border_primary;
				min-width:8em;
				text-align: center;
				background-color: rgba(0,0,0,0.05);
			}
		}
		&_terms {
			margin-top:1px;
			padding-left:10px;
			a{
				color: var(--vk-color-link);
				&:hover{
					opacity: 0.7;
				}
			}
		}
	}
	& &_btn {
		font-size: 12px;
		text-decoration: none;
		
	}
}

/*-------------------------------------------*/
/* image effect
/*-------------------------------------------*/
.vk_post {
	&_imgOuter {
		position: relative;
		background-size: cover;
		background-position: center 50%;
		border-bottom: $border_primary;
		& > a::after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background: rgba(0, 0, 0, 0);
			transition-duration: 0.3s;
		}
		a:hover .card-img-overlay::after {
			background: rgba(0, 0, 0, 0.5);
		}
		a {
			height: 100%;
		}
		&_img {
			position: absolute;
			left: -9999px;
		}
	}

	.vk_post_imgOuter {
		&:before {
			content: "";
			display: block;
			padding-top: 62%;
		}
	}

	&.card-horizontal {
		.vk_post_imgOuter {
			height: 100%;
			border-bottom: none;
			border-right:$border_primary;
			&:before {
				padding-top: 0;
			}
		}
		&.card-horizontal-reverse {
			.vk_post_imgOuter {
				border-right:none;
				border-left:$border_primary;
			}
		}
	}
}

/*-------------------------------------------*/
/* Button display
/*-------------------------------------------*/
.vk_post-btn-display {
	.vk_post_body {
		position: relative;
		height: 100%;
	}
	.vk_post_btnOuter {
		margin-top: 1em;
		position: absolute;
		bottom: 0;
	}
	&.media {
		.vk_post_body {
			padding-bottom: 45px;
		}
		.vk_post_btnOuter {
			width: 100%;
		}
	}
	&.card {
		.vk_post_body {
			padding-bottom: 65px;
		}
		.vk_post_btnOuter {
			width: calc(100% - 2.5rem);
			bottom: 1.25rem;
		}
	}
	.card-text:nth-last-child(2) {
		margin-bottom: 0;
	}
}

/*-------------------------------------------*/
/* Main section 1 column adjustment
/*-------------------------------------------*/

/*
mainSection は Lightning 固有のクラス名なのでここに書いてあるのは本来よろしくない
*/

.mainSection .vk_post-col-sm-12 {
	@media (min-width: $sm-min) {
		.vk_post_title {
			font-size: 16px;
		}
		.vk_post_excerpt {
			font-size: 14px;
		}
		&.media {
			padding: 1.5rem 0;
			&:first-child {
				border-top: $border_primary;
			}
			.media-img {
				margin-right: 1.4rem;
			}
		}
	}
}
.mainSection .vk_post-col-md-12 {
	@media (min-width: $md-min) {
		.vk_post_title {
			font-size: 18px;
		}
		.vk_post_excerpt {
			font-size: 14px;
		}
	}
}
.mainSection .vk_post-col-lg-12 {
	@media (min-width: $lg-min) {
		.vk_post_title {
			font-size: 18px;
		}
		.vk_post_excerpt {
			font-size: 14px;
		}
		&.media {
			padding: 1.8rem 0;
			.media-img {
				margin-right: 1.8rem;
			}
		}
	}
}
.mainSection .vk_post-col-xl-12 {
	@media (min-width: $xl-min) {
		.vk_post_title {
			font-size: 21px;
		}
		.vk_post_excerpt {
			font-size: 14px;
		}
	}
}
.mainSection .vk_post-col-xxl-12 {
	@media (min-width: $xxl-min) {
		.vk_post_title {
			font-size: 26px;
		}
		.vk_post_excerpt {
			font-size: 14px;
		}
	}
}
.mainSection .wp-block-column {
	.vk_post-col-sm-12,
	.vk_post-col-md-12,
	.vk_post-col-lg-12,
    .vk_post-col-xl-12,
    .vk_post-col-xxl-12 {
		.vk_post_title {
			font-size: 1rem;
		}
		.vk_post_excerpt {
			font-size: 12px;
		}
	}
}