/**
 * Single Quote Module
 * Blockquote with left accent border, orange typographic mark, italic text, citation.
 */

/* ===========================
   # Section shell
=========================== */

.single-quote-module {
	padding: 80px 150px;
	background: var(--nec-white, #fff);
}

.single-quote-module--grey {
	background: var(--nec-light-grey, #f5f5f6);
}

/* ===========================
   # Blockquote
=========================== */

.sqm__blockquote {
	display:     flex;
	align-items: flex-start;
	gap:         32px;
	border-left: 2px solid rgba(56, 66, 73, 0.15);
	padding:     8px 0 8px 40px;
	margin: 0 auto;
	max-width:   860px;
}

/* ===========================
   # Opening quotation mark
=========================== */

.sqm__mark {
	flex-shrink: 0;
	margin-top:  -6px;
	user-select: none;
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	/* Fluid between 390px (60px) and 1440px (118px) viewports. */
	font-size:   clamp(3.75rem, calc(2.4036rem + 5.5238vw), 7.375rem);
	line-height: clamp(3.75rem, calc(2.4036rem + 5.5238vw), 7.375rem);
	color: var(--nec-orange, #EB6E00);
}

/* ===========================
   # Body (text + citation)
=========================== */

.sqm__body {
	flex: 1;
}

/* ===========================
   # Quote text
=========================== */

.sqm__text {
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:   1.125rem;
	font-style:  italic;
	line-height: 1.7;
	color:       var(--nec-grey, #384249);
	margin-bottom: 24px;
}

.sqm__text p {
	margin: 0 0 8px;
	font-size:20px;line-height:32px
}

.sqm__text p:last-child {
	margin: 0;
}

/* ===========================
   # Citation
=========================== */

.sqm__citation {
	display:        flex;
	flex-direction: column;
	gap:            4px;
}

.sqm__name {
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:   0.9375rem;
	font-weight: 500;
	font-style:  normal;
	color:       var(--nec-grey, #384249);
}

.sqm__job-title {
	font-family: var(--nec-font, 'Neo Sans Std', sans-serif);
	font-size:   0.875rem;
	font-style:  normal;
	color:       var(--nec-grey, #384249);
	opacity:     0.65;
}

/* ===========================
   # Responsive — 767px
=========================== */

@media (max-width: 767px) {
	.single-quote-module {
		padding: 48px 0;
	}

	.sqm__blockquote {
		gap:          20px;
		padding-left: 24px;
	}

	.sqm__mark {
		font-size: 3rem;
	}

	.sqm__text {
		font-size: 1rem;
	}
}