Image Stats

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-image-stats {
	padding: 4rem 0;
	min-height: unset;
	height: auto;

	@include bp($lg){
		min-height: 76vh;
		height: auto;
	}

	@media only screen and (min-height: 1250px){
		min-height: 900px;
	}

	&[data-image-pos="right"]{
		.block-image-stats__container{
			justify-content: flex-start;
		}

		.block-image-stats__image-container{
			left: unset;
			right: unset;

			@include bp($lg){
				right: 32px;
			}
		}

		.block-image-stats__image-card{
			left: unset;
			right: 24px;
		}
	}

	&[data-border-bottom="true"]{
		border-bottom: solid 1px rgba(56,53,81,0.2);
	}

	&__image-container{
		position: absolute;
		left: 32px;
		top: 50%;
		transform: translateY(-50%);
		width: 50%;
		border-radius: 50px;
		overflow: hidden;
		height: 100%;

		@include bp($md, true) {
            border-radius: 30px;
        }

		@include bp($lg, 'true'){
			position: relative;
			width: 100%;
			left: unset;
			top: unset;
			transform: unset;
			border-radius: 0;
			height: 90vh;
		}

		img, picture{
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	&__content-container{
		h1, h2, h3, h4, h5, h6{
			color: var(--text-color);
		}

		p{
			@include fluid-type(18, 22);
		}
	}

	&__image-card{
		position: absolute;
		background: var(--tertiary);
		position: absolute;
		bottom: 24px;
		left: 24px;
		width: calc(100% - 48px);
		border-radius: 32px;
		padding: 24px;
		color: var(--white);
		display: block;
		text-decoration: none;

		@include bp($lg){
			width: 20vw;
		}

		&:hover{
			.block-image-stats__image-card-link{
				transition: .3s ease-out;
				background-color: var(--white);
				background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
			}
		}

		&-date{
			background: var(--white);
			padding: 2px 6px;
			border-radius: 4px;
			font-size: 14px;
			width: fit-content;
			display: inline-block;
			color: var(--primary);
		}

		&-description{
			color: var(--white);
		}

		h3{
			margin-top: 4px;
			@include fluid-type(18, 24);
			font-weight: 600;
			margin-bottom: 4px;
		}

		&-author-container{
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 8px;
		}

		&-author-avatar{
			min-width: 52px;
			min-height: 52px;
			width: 52px;
			height: 52px;
			border-radius: 100px;
			display: flex;
			overflow: hidden;

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

		&-link {
			width: 40px;
			height: 40px;
			border: solid 1px var(--white);
			border-radius: 100px;
			display: flex;
			align-items: center;
			justify-content: center;
			float: right;
			margin-top: 2rem;
			background-color: transparent;
			background-position: center;
			background-size: 20px;
			background-repeat: no-repeat;
			transition: .3s ease-out;
			background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A") ;

			&:hover{
				transition: .3s ease-out;
				background-color: var(--white);
				background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
			}
		}
	}

	&__container{
		display: flex;
		justify-content: flex-end;
		height: 100%;
		padding-top: 2rem;

		@include bp($lg){
			padding-top: 0;
		}
	}

	&__content{
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	&__stats-container{
		display: flex;
		flex-direction: column;
		padding-left: 20px;
		gap: 16px;
		border-left: solid 6px var(--secondary);
		color: var(--text-color);

		.value{
			@include fluid-type(32, 74);
			font-weight: 600;
			line-height: 1;
		}
	}


}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/image-stats",
    "title": "Image & Stats",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-image-stats.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": true
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "example": {
        "attributes": {
            "mode": "preview",
            "data": {
                "heading_type": "h2",
                "heading_text": "Example - Example",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": "file:../../assets/css/image-stats/block-image-stats.css"
}