/* Simple Interior Fold Image Section — Figma 2011-39 / 2011-50 / 2011-56 */

.interior-fold-image {
	position: relative;
	isolation: isolate;
	background-image: var( --ifi-img );
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding-top:    var( --ifi-pt, 3rem );
	padding-bottom: var( --ifi-pb, 3rem );
	margin-top:     var( --ifi-mt, 0rem );
	margin-bottom:  var( --ifi-mb, 0rem );
	min-height: 22rem;
	display: flex;
	align-items: center;
}

/* Dark gradient overlay — Figma: transparent at top → rgba(0,0,0,.67) */
.interior-fold-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0 ) 0%, rgba( 0, 0, 0, 0.67 ) 34%, rgba( 0, 0, 0, 0.67 ) 100% );
	pointer-events: none;
}

.interior-fold-image__inner {
	max-width: 90rem;
	margin: 0 auto;
	padding: 0 5rem;
	width: 100%;
	box-sizing: border-box;
}

/* Breadcrumb colour (structure lives in main.css) */
.interior-fold-image .breadcrumb { color: #ffffff; margin-bottom: 2.5rem; }

.interior-fold-image__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.75rem;            /* 28px */
}

.interior-fold-image__heading {
	font-family: 'Quincy', Georgia, serif;
	font-size: clamp( 2.5rem, 6vw, 4.5rem );   /* 40 → 80px */
	font-weight: 400;
	line-height: clamp( 2.625rem, 6.3vw, 4.725rem );
	color: #ffffff;
	margin: 0;
	max-width: 58rem;
	text-shadow: 0 1px 12px rgba( 0, 0, 0, 0.25 );
}

.interior-fold-image__sub {
	font-family: 'Source Sans 3', system-ui, sans-serif;
	font-size: 1.125rem;
	line-height: 1.35;
	color: #ffffff;
	margin: 0;
	max-width: 50rem;
	text-shadow: 0 1px 10px rgba( 0, 0, 0, 0.25 );
}

/* ── Responsive ── */
@media (max-width: 1200px) {
	.interior-fold-image__inner { padding: 0 3rem; }
}
@media (max-width: 768px) {
	.interior-fold-image__inner { padding: 0 1.5rem; }
	.interior-fold-image .breadcrumb { margin-bottom: 2rem; }
}
@media (max-width: 600px) {
	.interior-fold-image {
		padding-top:    var( --ifi-pt-m, var( --ifi-pt, 2rem ) );
		padding-bottom: var( --ifi-pb-m, var( --ifi-pb, 2rem ) );
		margin-top:     var( --ifi-mt-m, var( --ifi-mt, 0rem ) );
		margin-bottom:  var( --ifi-mb-m, var( --ifi-mb, 0rem ) );
		min-height: 18rem;
	}
	.interior-fold-image__inner { padding: 0 1rem; }
	.interior-fold-image__head { gap: 1.25rem; }
}
@media (max-width: 360px) {
	.interior-fold-image__inner { padding: 0 0.875rem; }
}