/**
 * Pull Quote - Figma 14:3838 (light) / 14:3839 (dark)
 *
 * Canvas geometry (light box origin 490,2119, size 500x174):
 *   mark   526.87,2127  57.273px red      -> inset ~37, 8
 *   rule   529,2158     111px tall, 2px   -> inset 39, 39
 *   quote  561,2158     18px italic       -> 32px right of the rule
 *   name   561.43,2250  |  role 561.43,2261
 *   box    #FBFCFC, radius 13, shadow -2px 8px 24px -8px rgba(0,0,0,.3)
 *          ("Box Shadows MUFG" — a named style in the file)
 *
 * Dark (14:3839): #0B0B0B, white text, decorative PNG bleeding off the left edge, and
 * the content shifted right to clear it (mark at inset 176 = ~35% of the box).
 *
 * TWO DELIBERATE DEVIATIONS from the canvas, both flagged for review:
 *  1. Attribution is 14px/13px here, not the canvas's 8.537px/8.339px. Sub-9px text is
 *     unreadable and roughly half the accessibility floor; those fractional values are a
 *     scaled group, not a decision (8.537 x 1.6 = 14 = the body-medium token).
 *  2. Both variants quote at 18px. The canvas has light 18px / dark 13px, which is the
 *     designer shrinking text to fit the dark box's narrower column, not a variant rule.
 *
 * Specificity: two classes throughout - see iron-extensions/README.md for why.
 */

.iron-quote {
	position: relative;
	overflow: hidden;
	/* <figure> is not margin-free by default, and the theme carries a bare
	   `figure { margin: .5em 0 }`. Spacing is left to whatever places the module. */
	margin: 0;
	/* The mark's ink sits 5.5px below its line box (measured, see below), so this puts it
	   ~20.5px from the top — balanced against the 21px below.
	   Deliberately more than the canvas's 8px: that gap was drawn around Nimbus's “, which
	   has 22px of ink, where Reckless's has 13px — so 8px reads as cramped here. */
	padding: 15px 39px 21px;
	border-radius: 13px;
	box-shadow: -2px 8px 24px -8px rgba(0, 0, 0, 0.3);
}

/* Measured with canvas TextMetrics against the real webfont, rather than guessed:
   Reckless Neue's “ at 57px has 13px of ink, sitting 5.5px below the top of a
   line-height:1 box. An earlier line-height:0.55 put the ink 7.33px ABOVE its own box,
   which -- with the container's overflow:hidden -- clipped it flush to the top edge.
   height:36px (not the 57px line box) is what puts the rule at the canvas's 39px. */
.iron-quote .iron-quote__mark {
	display: block;
	height: 36px;
	font-family: 'Reckless Neue', serif;
	font-size: 57px;
	line-height: 1;
	color: #e60000;
}

.iron-quote .iron-quote__body {
	border-left: 2px solid #e60000;
	padding-left: 32px;
}

.iron-quote .iron-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	font-family: 'Reckless Neue', serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.18;
	color: inherit;
	quotes: none;
}

.iron-quote .iron-quote__attr {
	margin-top: 16px;
}

.iron-quote .iron-quote__name,
.iron-quote .iron-quote__role {
	display: block;
	letter-spacing: -0.03em;
	color: inherit;
}

.iron-quote .iron-quote__name {
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
}

.iron-quote .iron-quote__role {
	font-weight: 400;
	font-size: 13px;
	line-height: 1.3;
}

/*--------------------------------------------------------------
# Light
--------------------------------------------------------------*/
.iron-quote.iron-quote--light {
	background: #fbfcfc;
	color: #000;
}

/*--------------------------------------------------------------
# Dark
--------------------------------------------------------------*/
.iron-quote.iron-quote--dark {
	background: #0b0b0b;
	color: #fff;
	/* Content clears the graphic: the canvas puts the mark at 176 of 500 = 35.2%. */
	padding-left: 35.2%;
}

/* The decorative graphic, bleeding off the left edge exactly as the canvas has it
   (left -6.38%, top -1.36%, 50.25% x 102.73%). Decorative only, so it lives in CSS
   rather than as an <img> that a screen reader would have to skip. */
.iron-quote.iron-quote--dark::before {
	content: '';
	position: absolute;
	left: -6.38%;
	top: -1.36%;
	width: 50.25%;
	height: 102.73%;
	background: url('../images/quote-dark-bg.png') no-repeat center / cover;
	pointer-events: none;
}

.iron-quote.iron-quote--dark .iron-quote__mark,
.iron-quote.iron-quote--dark .iron-quote__body {
	position: relative;
	z-index: 1;
}

/* Centre the mark on the rule below it. Measured, not eyeballed: the “ ink spans 2->22px
   from the text origin, so its centre is 12px in, while the 2px rule's centre is 1px in
   -> shift 11px left. (The canvas isn't a guide here: it offsets the mark 10px from the
   rule on dark but only 2px on light, which is drift rather than a variant rule.) */
.iron-quote.iron-quote--dark .iron-quote__mark {
	margin-left: -11px;
}

/*--------------------------------------------------------------
# Responsive — driven by the MODULE's width, not the viewport
#
# The quote lives in .container-800, which caps at 800px: at a 900px viewport it is still
# 800px wide, so a viewport media query would restyle it while it had lost no width at
# all. Container queries measure the box itself, which also means it reflows on its own
# when the sidebar rail narrows the article column to ~540px (D2).
#
# .iron-quote cannot query its own size, hence the .iron-quote-wrap container element.
--------------------------------------------------------------*/
.iron-quote-wrap {
	container-type: inline-size;
	container-name: iron-quote;
}

@container iron-quote (max-width: 520px) {
	.iron-quote {
		padding: 15px 24px 20px;
	}

	.iron-quote .iron-quote__body {
		padding-left: 20px;
	}

	/* The graphic takes a third of the width before the text even starts - at this size
	   that leaves an unreadable column, so it drops to a top band instead. */
	.iron-quote.iron-quote--dark {
		padding-left: 24px;
		padding-top: 90px;
	}

	.iron-quote.iron-quote--dark::before {
		left: 0;
		top: 0;
		width: 100%;
		height: 110px;
	}
}