@use "variables";
/*-------------------------------------------*/
/* .card
/*-------------------------------------------*/
/* .card-noborder
/*-------------------------------------------*/

.vk_post {
	/*
	Basicly wright to without .vk_post.
	This additional is can't over wright only.
	 */
	&.card {
		padding: 0;
		margin-bottom: 30px;
		box-sizing: border-box;
		max-width: 100%;
		.vk_post_btnOuter {
			width: calc(100% - 2.5rem);
		}
	}
}

/*-------------------------------------------*/
/* .card
/*-------------------------------------------*/
.card {
	overflow: hidden;
	box-shadow: none;
	&-meta {
		font-size: 12px;
	}
	&-img-use-bg {
		position: relative;
		left: -9999px;
	}
	a {
		color: inherit;
		&.btn-primary {
			color:#fff;
		}
	}
	// WordPress 6.7.1 が contain-intrinsic-size: 3000px 1500px を出力するようになたのでリセット
	img:is([sizes="auto" i], [sizes^="auto," i]) {
		contain-intrinsic-size: revert ;
	}
}

/*-------------------------------------------*/
/* .card-noborder
/*-------------------------------------------*/
.card-noborder {
	&.card {
		/*.card.card-noborder にしないと負ける */
		border: none;
		background: none;
	}
	.vk_post_imgOuter {
		border : 1px solid var(--vk-color-border-image);
	}
	.card-body {
		padding-left: 0;
		padding-right: 0;
		padding-bottom:0;
	}
	&.vk_post-btn-display {
		.card-body {
			padding-bottom: 2.8rem;
		}
		.vk_post_btnOuter {
			width: 100%;
			bottom: 0;
		}
	}
}
/*-------------------------------------------*/
/* .card-intext
/*-------------------------------------------*/
.card-intext {
	.card-intext-inner {
		display:block; 
		overflow:hidden;
		width:100%;
		height:100%;
		.vk_post_body {
			position: absolute;
			display:block; overflow:hidden;
			width:100%;
			bottom:0;
			height:calc(15px + var(--vk-line-height-low) + 15px);
			transition: all 0.3s ease-out;
			background-color: rgba( 0,0,0,0.8 );
			z-index: 100;
			.vk_post_title {
				color:#fff;
				display:block; overflow:hidden;
				line-height:var(--vk-line-height-low);
				width: 100%;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom:15px;
			}
			p,div {
				color:#fff;
			}
		}
		&:hover {
			.vk_post_body {
				transition: all 0.3s ease-out;
				height:100%;
				.vk_post_title {
					height:auto;
					margin-bottom:0;
					white-space:unset;
					text-overflow:unset;
				}
			}
		}
	}
	.vk_post_body,
	&.vk_post-btn-display .vk_post_body{
		padding: 15px 20px;
	}
}

/*-------------------------------------------*/
/* .card-imageRound
/*-------------------------------------------*/
.card-imageRound {
	.vk_post_imgOuter {
		margin-left: auto;
		margin-right: auto;
		width: 150px;
		height: 150px;
		border-radius: 50%; /* 角丸半径を50%にする(=円形にする) */
		background-position: center center; /* 横長画像の左上を基準に表示 */
		&::before {
			padding-top: 150px;
		}
	}
	.card-img-overlay::after {
		border-radius: 50%; // 画像のマウスオーバー用
	}
}

/*-------------------------------------------*/
/* １カラム カード水平 の時の下部の余白を小さく変更
/*-------------------------------------------*/
.card.vk_post-col {
	@media (width <= variables.$xs-max) {
		&-xs-12 {
			margin-bottom: 20px;
		}
	}
	@media (variables.$xs-max < width <= variables.$sm-max) {
		&-sm-12 {
			margin-bottom: 20px;
		}
	}
	@media (variables.$sm-max < width <= variables.$md-max) {
		&-md-12 {
			margin-bottom: 20px;
		}
	}
	@media (variables.$md-max < width <= variables.$lg-max) {
		&-lg-12 {
			margin-bottom: 20px;
		}
	}
	@media (variables.$lg-max < width) {
		&-xl-12 {
			margin-bottom: 20px;
		}
    }
    @media (variables.$xl-max < width) {
		&-xxl-12 {
			margin-bottom: 20px;
		}
	}
}
.card-horizontal.vk_post-col {
	@media (width <= variables.$xs-max) {
		&-xs-12 {
			margin-bottom: 15px;
		}
	}
	@media (variables.$xs-max < width <= variables.$sm-max) {
		&-sm-12 {
			margin-bottom: 15px;
		}
	}
	@media (variables.$sm-max < width <= variables.$md-max) {
		&-md-12 {
			margin-bottom: 15px;
		}
	}
	@media (variables.$md-max < width <= variables.$lg-max) {
		&-lg-12 {
			margin-bottom: 15px;
		}
	}
	@media (variables.$lg-max < width) {
		&-xl-12 {
			margin-bottom: 15px;
		}
    }
    @media (variables.$xl-max < width) {
		&-xxl-12 {
			margin-bottom: 15px;
		}
	}
}

.card-noborder.vk_post-col,
.card-imageRound.vk_post-col {
	@media (width <= variables.$xs-max) {
		&-xs-12 {
			margin-bottom: 40px;
		}
	}
	@media (variables.$xs-max < width <= variables.$sm-max) {
		&-sm-12 {
			margin-bottom: 40px;
		}
	}
	@media (variables.$sm-max < width <= variables.$md-max) {
		&-md-12 {
			margin-bottom: 40px;
		}
	}
	@media (variables.$md-max < width <= variables.$lg-max) {
		&-lg-12 {
			margin-bottom: 40px;
		}
	}
	@media (variables.$lg-max < width) {
		&-xl-12 {
			margin-bottom: 40px;
		}
    }
    @media (variables.$xl-max < width) {
		&-xxl-12 {
			margin-bottom: 40px;
		}
	}
}

/*-------------------------------------------*/
/* .card-horizontal
/*-------------------------------------------*/
.card-horizontal {
	&-inner {
		height: 100%;
		&::after {
			content: "";
			display: block;
			clear: both;
		}
		&-row {
			height: 100%;
		}
	}
	&-img-right {
		&-row {
			flex-direction: row-reverse;
		}
	}
	&-reverse {
		.row {
			flex-direction: row-reverse;
			// text-align: right;
		}
	}
	.card-body {
		height: 100%;
		padding-bottom: 1.5em;
		box-sizing:border-box;
	}
}

.card-sm {
	.card-body {
		padding: 1rem 1.2rem;
	}
	.card-title {
		font-size: 0.8rem;
	}
	.card-text {
		font-size: 0.8rem;
		line-height: 1.4;
	}
	.card-meta {
		font-size: 0.7rem;
		line-height: 1.1;
	}
}
