/*
Block Name: Columns
Description: An extremely flexible block allowing simple and complex layouts. This block is used for images and static text purposes.
*/

body.wp-admin section.block-columns { border: 1px solid #ccc; }
body.wp-admin section .container .grid:empty:before { font-size: 2rem; color: #e88b39; font-weight: 600; content: "This is an empty *block* - add content"; padding: 2rem 0; display: block;}
body.wp-admin section .container .grid .col:empty:before { color: #e88b39; font-weight: 600; content: "This is an empty *column* - add content"; padding: 2rem 0; display: block;}

.block-columns .col-icon{max-width:100px;margin:0 auto 2rem;}

.block-columns .col-image{height: 100%; border-radius: 2rem; overflow: hidden;}
.block-columns .col-image img{width: 100%;}

.block-columns .col.speech-accent{position: relative;}
.block-columns .col.speech-accent::before{content: ''; position: absolute; left: calc(100% - 8rem); bottom: -2.5rem; pointer-events: none;}
.block-columns .col.speech-accent::before{z-index: -1; width: 72vw; height: 36%; opacity: 0.8; background-image: url('/wp-content/themes/toast/assets/images/accents/speech-accent.svg'); background-position: left center; background-size: contain; background-repeat: no-repeat;}

.block-columns .col-image{opacity:0;transform:translatey(100px);transition:all .25s}
.block-columns .col-image.scroll-triggered{opacity:1;transform:translatey(0px)}

/* .block-columns .col.sticky .col-image{position:sticky; top:100px; z-index:1} */

@media(max-width: 1200px){
	.block-columns.guide .grid{grid-template-columns: 1fr 2fr !important;}
	.block-columns.guide .grid .col:first-of-type{grid-column: span 2;}
	.block-columns.guide .grid .col:first-of-type h3 span:nth-of-type(2) br{display: none;}
}

@media(max-width: 1024px){
	.block-columns .col-image{height: auto;}
}

@media(max-width: 768px){
	.block-columns.guide .grid{grid-template-columns: 1fr !important;}
	.block-columns.guide .grid .col:first-of-type{grid-column: auto;}
	.block-columns .col.speech-accent::before{width: 102vw; left: -6rem;}
	
	.block-columns .col.sticky .col-image{position:static; top:0;}
}

@media screen and (max-width:576px ) {
	.col-bg-img { min-height: 30vh;}
}