/**
 * On This Page - Figma 10:247
 *
 * Canvas (card origin 1013,1137, size 217x170 -> rail is 234 wide, height is content-driven):
 *   box      white, radius 13, shadow -2px 8px 24px -8px rgba(0,0,0,.3)
 *   title    1030,1154  -> inset 17;  Reckless Neue 16px / 21.047, -0.48px (-0.03em)
 *   rule     1030,1180  -> 28x2 #E60000, 26px below the title's top
 *   track    1030,1193  -> 8px wide, a grey line with a dot per item; first dot filled red
 *   items    1049       -> 19px right of the track
 *
 * TYPE deviates, consistent with D6/D7: the canvas has the items at 10px, the same
 * scaled-group artifact seen elsewhere in this file. 10px is unreadable for links, so this
 * uses 13px - the size settled on for the Key Takeaways bullets.
 *
 * The track is CSS, not the exported 8x95 image: that image is a fixed height for exactly
 * four items, and the list is however long the article is.
 *
 * Specificity: two classes throughout - see iron-extensions/README.md.
 */

.iron-otp {
	padding: 17px;
	background: #fff;
	border-radius: 13px;
	box-shadow: -2px 8px 24px -8px rgba(0, 0, 0, 0.3);
}

.iron-otp .iron-otp__title {
	margin: 0;
	font-family: 'Reckless Neue', Georgia, serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.315;
	letter-spacing: -0.03em;
	color: #000;
}

/* The 28x2 red rule under the title - the same mark the section headings carry, so the
   rail reads as part of the same system. 26px below the title's top, per canvas. */
.iron-otp .iron-otp__title::after {
	content: '';
	display: block;
	width: 28px;
	height: 2px;
	margin-top: 5px;
	background: var(--iron-red, #e60000);
}

.iron-otp .iron-otp__list {
	/* Not the theme's list: no bullets, no counters, no inherited indent. */
	list-style: none;
	margin: 13px 0 0;
	padding: 0;
}

/*--------------------------------------------------------------
# The track
#
# Drawn from the items themselves: each <li> carries the line as a ::before and the dot as
# an ::after, so the track is exactly as long as the list. Using the exported image would
# have locked it to the mockup's four headings.
#
# The line stops at the LAST item (:last-child::before is suppressed) so it does not
# overshoot past the final dot.
--------------------------------------------------------------*/
.iron-otp .iron-otp__item {
	position: relative;
	/* margin:0 is load-bearing - this is an <ol>, so the theme's
	   `.site-iron-main-generic ol li { margin-bottom: 1.5rem }` applies and adds 24px
	   between every item, stretching the track line across the gaps. Item spacing is the
	   padding-bottom below, nothing else. */
	margin: 0;
	/* 19px from track to text, less the 8px track = 27px of clearance. */
	padding: 0 0 13px 27px;
	list-style: none;
}

.iron-otp .iron-otp__item:last-child {
	padding-bottom: 0;
}

/* The connecting line: starts at the dot's centre, runs to the next dot. */
.iron-otp .iron-otp__item::before {
	content: '';
	position: absolute;
	top: 8px;
	left: 3px;
	width: 2px;
	height: 100%;
	background: #d9d9d9;
}

.iron-otp .iron-otp__item:last-child::before {
	content: none;
}

/* The dot: a hollow grey ring, filled red when active. */
.iron-otp .iron-otp__item::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 0;
	width: 8px;
	height: 8px;
	box-sizing: border-box;
	border: 2px solid #d9d9d9;
	border-radius: 50%;
	background: #fff;
}

.iron-otp .iron-otp__item.o-active::after {
	border-color: var(--iron-red, #e60000);
	background: var(--iron-red, #e60000);
}

.iron-otp .iron-otp__link {
	display: block;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: #000;
	text-decoration: none;
}

.iron-otp .iron-otp__link:hover,
.iron-otp .iron-otp__link:focus-visible {
	text-decoration: underline;
}

.iron-otp .iron-otp__item.o-active .iron-otp__link {
	font-weight: 500;
}