/* Image Link List Block Styles */

.block-image-link-list {
	.block-image-link-item {
		aspect-ratio: 1/1.3;
		max-width: 100%;
		.block-image-link-item-inner {
			position: relative;
			height: 100%;
			border: 2px solid var(--dark);
			transition: border-color 0.3s ease;
			margin-bottom: 1rem;
			text-transform: capitalize;
			
			&:hover,
			&:focus {
				border-color: var(--secondary);
				
				.block-image-link-button .button {
					background-color: var(--secondary);
					border-color: var(--secondary);
				}

				.block-image-link-title h4 {
					color: var(--cream);
				}

				.block-image-link-bg img {
					transform: scale(1.05);
				}
			}
		}
		
		.block-image-link-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			overflow: hidden;
			
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transform: scale(1.01);
				transition: transform 0.2s ease-in-out;
			}
		}
		
		.block-image-link-title {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			z-index: 1;
			padding: 20px;
			min-height: 100px;
            align-content: center;
			
			/* Gradient overlay behind title */
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 160px;
				background: linear-gradient(to bottom, rgba(20, 20, 20, 0.9) 20%, rgba(20, 20, 20, 0.7) 50%, transparent 100%);
				z-index: -1;
			}
		}
		
		.block-image-link-button {
			position: absolute;
			bottom: -1.75em;
			left: 50%;
			transform: translateX(-50%);
			z-index: 3;
			min-width: 75%;
			
			.button {
				display: inline-block;
				width: 100%;
				text-align: center;
				padding: 12px 24px;
				background-color: var(--dark);
				color: white;
				text-decoration: none;
				border: 2px solid var(--dark);
				
				&:hover {
					background-color: var(--secondary);
					border-color: var(--secondary);
					color: white;
				}
			}
		}
	}
}

@media (min-width: 440px) {
	.block-image-link-list {
		.block-image-link-item {
			max-width: 300px;
		}
	}
}