Cta Blocks

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

.block-cta-blocks {
	position: relative;
	align-items: center;

	&__wrapper {
		position: relative;
		z-index: 5;

		&_block {
			margin: 1rem;
			padding: 1rem;
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			overflow: hidden;
			min-height: 16rem;
			max-width: calc(100% - 2rem);

			&:before {
				content: '';
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.5);
				position: absolute;
				top: 0;
				left: 0;
				z-index: 2;
			}

			&:hover {
				img {
					transform: scale(1.1);
				}
			}

			img {
				position: absolute;
				left: 0;
				top: 0;
				height: 100%;
				width: 100%;
				object-fit: cover;
				z-index: 1;
				transition: transform .8s ease-in-out;
			}

			&.no-bg {
				background: $secondary;

				.block-cta-blocks__wrapper_block_inner {
					color: #000;

					a:not(.btn) {
						color: #000;
						&:after {
							border-color: #000;
						}

						&.btn--hollow {
							border-color: #000;

							&:hover {
								color: #fff;
								text-decoration: none;
								&:after {
									border-color: #fff;
								}
							}
						}

					}
				}

				&:before {
					display: none;
				}
			}

			&_inner {
				position: relative;
				z-index: 2;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				text-align: center;
				color: #fff;
				padding: 0 2rem;

				.subheading {
					font-size: 12px;
					font-weight: normal;
					font-stretch: normal;
					font-style: normal;
					line-height: 1.33;
					letter-spacing: 2px;
					text-align: center;
					text-transform: uppercase;
					margin-bottom: 1em;
				}

				.heading {
					font-size: 24px;
					font-weight: 600;
					font-stretch: normal;
					font-style: normal;
					line-height: 1.33;
					letter-spacing: normal;
					text-align: center;
					margin-bottom: .5em;
				}

				.content {
					font-size: 16px;
					font-weight: 300;
					font-stretch: normal;
					font-style: normal;
					line-height: 1.5;
					letter-spacing: normal;
					text-align: center;
				}

				.btn {
					margin-right: 0;
					padding-right: rem-calc(40);

					&.btn--hollow {
						border-color: #fff;
						color: #fff;
						text-decoration: none;

						&:hover {
							color: #fff;
							border-color: #000;
						}
					}

					&:not(.btn--hollow) {
						line-height: 1rem;
						min-height: 1rem;
					}

					&:after {
						width: 0.5rem;
						height: 0.5rem;
						content: "";
						border-bottom: 0.125rem solid #fff;
						border-right: 0.125rem solid #fff;
						display: inline-block;
						position: absolute;
						top: 50%;
						right: rem-calc(20);
						transform-origin: top;
						transform: rotateZ(-45deg) translateY(-50%);
						transition: -webkit-transform .1s;
						transition: transform .1s;
					}
				}
			}
		}

		&_blocks_per_row {
			&_two {
				.block {
					@include bp($md) {
						width: calc(100% * (1/2) - 2em);
					}
				}
			}
			&_three {
				.block {
					@include bp($md) {
						width: calc(100% * (1/3) - 2em);
					}
				}
			}
			&_four {
				.block {
					@include bp($md) {
						width: calc(100% * (1/4) - 2em);
					}
				}
			}
			&_five {
				.block {
					@include bp($md) {
						width: calc(100% * (1/5) - 2em);
					}

					.block-cta-blocks__wrapper_block_inner {
						padding:0 1rem;

						a {
							margin-right: 0;
							padding: 0 2rem;
						}
					}
				}
			}
		}
	}

	&__image img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		object-fit: cover;
		z-index: 1;
	}
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/cta-blocks",
    "title": "Cta Blocks",
    "description": "Example block to be used as a template",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-cta-blocks.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 - Cta Blocks",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": "file:../../assets/css/cta-blocks/block-cta-blocks.css"
}