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

/* Bootstrap Adjuster */
$border_primary: 1px solid var(--vk-color-border-hr,#e5e5e5 );
$border_image: 1px solid var(--vk-color-border-image);
$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;
	--vk-color-text-body: #333;
	--vk-color-text-light: #666;
	--vk-color-border-hr: #e5e5e5;
	--vk-color-border-image: #e5e5e5;
	--vk-line-height-low: 1.5em;
}

$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;
		}
		&.media-img {
			/* 
			overflow:hidden; がないと
			* G3
			* メディアレイアウト
			* フッターウィジェット無し
			* 投稿リストの最後の投稿の抜粋文字数が少ない
			の条件下で、画像が見えないエリアでhtmlエリアをはみ出して、
			htmlエリアがスクロール反応してしまい、下端にスクロールした時の挙動が不安定になる
			*/
			overflow:hidden;
		}
	}
	& &_title {
		font-size: 14px;
		line-height: 1.4;
		font-weight: bold;
		margin-bottom: 0;
		a {
			color: var(--vk-color-text-body);
		}
	}
	&_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: var(--vk-color-text-light);
	}
	&_author {
		margin: $margin_post_item_element 0;
		&_image,
		&_name {
			display: inline-block;
			vertical-align: middle;
		}
		&_image {
			margin-right:0.5rem;
			img{
				width:24px;
				height:24px;
				object-fit:cover;
				border-radius:50%;
				object-position:0px 0px;
				display: block;
			}
		}
		&_name{
			font-size:var(--vk-font-size-xs);
		}
	}
	&_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;
		// カードの幅が狭い時にボタンが改行されてボタンの上のテキストと重なるため、通常のボタンより左右の余白を狭く変更
		padding-left:1rem;
		padding-right:1rem;
		white-space: nowrap;
	}
}

/*-------------------------------------------*/
/* image effect
/*-------------------------------------------*/
.vk_post {
	&_imgOuter {
		position: relative;
		background-size: cover;
		background-position: center 50%;
		border-bottom: $border_image;
		& > 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_image;
			&:before {
				padding-top: 0;
			}
		}
		&.card-horizontal-reverse {
			.vk_post_imgOuter {
				border-right:none;
				border-left:$border_image;
			}
		}
	}
}

/*-------------------------------------------*/
/* Button display
/*-------------------------------------------*/
.vk_post-btn-display {
	.vk_post_body {
		position: relative;
		height: 100%;
	}
	.vk_post_btnOuter {
		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,
	.media-text{
		&:nth-last-child(2) {
			margin-bottom: 0;
		}
	}
}