/**
 * image_quote_module.css
 *
 * Quote: always 40px from the viewport left (margin-left: 40px on the quote,
 * section has no left/right padding so it's viewport-relative).
 *
 * Image: same constrained size as before — width: calc(100% - 80px) mirrors
 * the original 40px padding each side, max-width caps it, margin: auto centres it.
 * margin-top: -40px on the figure creates the overlap behind the quote.
 */

/* ---------------------------------------------------------------
   Section — top/bottom padding only so quote left is viewport-relative
--------------------------------------------------------------- */
.image-quote-module {
	padding: 45px 0px 50px;
}

.image-quote-module__inner {
	display: flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------
   Quote block
   margin-left: 40px = always 40px from the viewport/section left edge.
   align-self: flex-start stops it stretching to full width.
--------------------------------------------------------------- */
.image-quote-module__quote {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	background-color: var(--yellow);
	padding: 35px 40px 55px;
	max-width: 55%;
	border: none;
	margin: 0 0 0 40px;
}

.image-quote-module__citation {
	display: block;
	font-size: 10px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: 0em;
	text-transform: uppercase;
	color: var(--black);
	font-style: normal;
	margin-bottom: 10px;
}

.image-quote-module__text {
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 900;
	line-height: 1.2;
	color: var(--black);
	margin: 0;
	letter-spacing: -0.01em;
}

/* ---------------------------------------------------------------
   Figure — image constrained to original size, overlaps the quote
   width: calc(100% - 80px) mirrors the original 40px padding each side.
   max-width caps it at the section max. margin: auto centres it.
--------------------------------------------------------------- */
.image-quote-module__figure {
	position: relative;
	z-index: 1;
	width: calc(100% - 80px);
	max-width: var(--section-max-w);
	margin: -40px auto 0;
}

.image-quote-module__img {
	width: 100%;
	height: auto;
	display: block;
}

.image-quote-module__caption {
	display: block;
  font-size: 14px;
  color: #4d4d4d;
  letter-spacing: 0.02em;
  padding: 9px 0 7px;
  border-bottom: solid 1px var(--black);
}

/* ---------------------------------------------------------------
   Responsive — 1100px: tighten quote
--------------------------------------------------------------- */
@media (max-width: 1100px) {
	.image-quote-module__quote {
		max-width: 70%;
		padding: 36px 40px 44px;
	}
}

/* ---------------------------------------------------------------
   Responsive — 768px: quote wider, reduce overlap, tighten margins
--------------------------------------------------------------- */
@media (max-width: 768px) {
	.image-quote-module {
		padding: 60px 0;
	}

	.image-quote-module__quote {
    max-width: 100%;
    padding: 28px 20px 36px;
    margin-left: 20px;
    margin: 0px 20px;
  }

	.image-quote-module__figure {
		width: calc(100% - 48px);
		margin-top: 0px;
	}
	.image-quote-module__caption {
  	font-size: 12px;
	}
}

/* ---------------------------------------------------------------
   Responsive — 480px: full width quote, tight padding
--------------------------------------------------------------- */
@media (max-width: 480px) {
	.image-quote-module {
		padding: 48px 0;
	}

	.image-quote-module__figure {
		width: calc(100% - 40px);
		margin-top: -28px;
	}
}