/* ==========================================================================
   Framed Image & Text Block
   ========================================================================== */

/* Block inner — centres the heading */
.framed-image-text-block .block-inner {
	text-align: center;
}

/* Heading */

/* Intro textarea below heading */
.framed-image-text-block > .block-inner > .textarea {
	max-width: 780px;
	margin: 0 auto var(--margin-bottom-l);
}

/* Columns container — single column stack with spacing */
.framed-image-text-block .columns-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--gutter-xl);
	text-align: left;
	margin-top: var(--gutter-xl);
}

/* Column */
.framed-image-text-block .column {
	display: flex;
	flex-direction: column;
}

/* Column content — gutter padding for heading + text */
.framed-image-text-block .column .content {
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Image wrapper — holds image + pseudo-element frame */
.framed-image-text-block .column .image {
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius);
	margin-bottom: var(--margin-bottom-l);
}

/* Image — full-width rectangle */
.framed-image-text-block .column .image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3.5 / 2;
	object-fit: cover;
	min-height: 250px;
}

/* Pseudo-element frame overlay */
.framed-image-text-block .column .image::after {
	content: "";
	position: absolute;
	inset: var(--gutter);
	border: 2px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--border-radius);
	pointer-events: none;
	z-index: 1;
}

/* Column heading */
.framed-image-text-block .column-heading {
	margin-bottom: var(--margin-bottom-s);
}

/* Text area */
.framed-image-text-block .column .textarea {
	max-width: 980px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media all and (max-width: 768px) {
	.framed-image-text-block .columns-container {
		gap: var(--gutter-xl);
	}
	.framed-image-text-block .column .image::after {
		inset: var(--gutter-s);
	}
}