Firms By Town

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

.block-firms-by-town {
	padding: rem-calc(40px) 0;

	@include bp($md) {
		padding: rem-calc(70px) 0;
	}

	&__wrapper {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: $grid-gutter-width;

		@include bp($md) {
			padding-left: $container-spacing-desktop;
		}

		@include bp($lg) {
			grid-template-columns: repeat(2, 1fr);
			padding-left: 0;
		}

		@include bp(1601px) {
			grid-template-columns: repeat(3, 1fr);
		}

	}

	&__heading {
		font-size: $heading-7;

		@include bp($md) {
			padding-left: $container-spacing-desktop;
		}

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

	&__firm {
		display: flex;
		flex-direction: row;
		gap: $grid-gutter-width;
		min-height: 170px;
		border: 1px solid #E1E1E1;
		transition: background-color 0.3s ease;
		text-decoration: none;

		&:hover {
			background-color: #fafafa;
		}

		&-image {
			height: 170px;
			width: 150px;
			flex: 1 0 auto;

			img {
				display: block;
				height: 100%;
			}

		}

		&-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			padding: $grid-gutter-width $grid-gutter-width $grid-gutter-width 0;
		}

		&-title {
			font-size: $body-medium;
			margin: 0;

			@include bp($sm) {
				font-size: $heading-8;
			}

			@include bp($lg) {
				font-size: $body-large;
			}

			@include bp($xl) {
				font-size: $heading-8;
			}
		}


	}




}

class FirmsByTown {
	block;

	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		/* Swiper Example
		this.swiperElem = this.block.querySelector('.swiper');
		this.swiper = new Swiper(this.swiperElem, {
			pagination: {
				el: '.swiper-pagination',
				clickable: true,
				type: 'custom',
			},
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev'
			},
		}); 
		*/
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-firms-by-town').forEach((block) => {
		new FirmsByTown(block);
	})
});

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