/**
 * Key Takeaways - Figma nodes 10:139 (box), 10:158 (title), 27:226 (icon), 10:167 (bullet)
 *
 * Literal Figma canvas values, per direction to stay faithful to the design — with one
 * exception: the bullet text is 13px, not the canvas's 10px (decision D6).
 *
 * Canvas geometry this is built from (box origin 490,1237, size 499x382):
 *   icon      509,1252  58x38   -> inset 19,15
 *   title     576,1261  18px    -> 9px right of the icon, centred against it
 *   bullets   3 columns x 123, 44px apart, 14px row gap, first row 27.5px below the title
 *   insets    21px left/right, ~24px bottom
 *
 * WIDTH: the box is 499px on canvas because the design narrows the article column to
 * ~500px to make room for the sidebar rail. That rail does not exist yet (MODULES.md
 * decision D2), so this fills its container - today that is the 800px .container-800.
 *
 * SPECIFICITY: every rule below is scoped with two classes on purpose. This module lands
 * inside post content, where the theme styles the bare elements it uses - and those
 * selectors out-rank a single class:
 *   .site-iron-main-generic p        (0,1,1)  color #000, margin-bottom 1.5rem, tracking 0
 *   .site-iron-main-generic ul       (0,1,1)  padding-left 1em, margin 0 0 1.5rem
 *   .site-iron-main-generic ul li    (0,1,2)  position relative, tracking -0.03em
 *   .site-iron-main-generic ul li::before (0,1,3)  a 10x10 PNG bullet at left:-1em
 * A one-class rule loses to all of these silently - the title rendered black-on-black
 * until this was fixed. Two classes beat them on class count, so no !important is needed.
 */

.iron-kt {
	padding: 15px 21px 24px;
	background: #000;
	border-radius: 13px;
	box-shadow: -2px 8px 24px -8px rgba(0, 0, 0, 0.3);
}

.iron-kt .iron-kt__header {
	display: flex;
	align-items: center;
	gap: 9px;
}

.iron-kt .iron-kt__icon {
	display: block;
	flex: none;
	width: 58px;
	height: 38px;
}

.iron-kt .iron-kt__title {
	margin: 0;
	font-size: 18px;
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: #fff;
}

.iron-kt .iron-kt__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 32px column gap, not the canvas's 44: asked for directly. Row gap stays at the
	   design's 14. */
	gap: 14px 32px;
	margin: 27px 0 0;
	padding: 0;
	list-style: none;
}

.iron-kt .iron-kt__item {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	/* 13px, not the canvas's 10px: 10px sits below the ~12px accessibility floor in a box
	   whose whole job is being skimmed. Decision D6 in MODULES.md. */
	font-size: 13px;
	/* 1.18 is Graphik's "Auto" line height in Figma, which is what the design uses. */
	line-height: 1.18;
	letter-spacing: -0.03em;
	color: #fff;
}

/* The design's last takeaway spans the full width. It does that whenever it is the only
   one on its row - i.e. the count leaves a remainder of 1 - so express exactly that
   rather than hard-coding "the 7th item". */
.iron-kt .iron-kt__item:last-child:nth-child(3n + 1) {
	grid-column: 1 / -1;
}

/* The bullet: a 6px #E60000 dot (Figma node 10:160). Written in CSS rather than pulled in
   as an image seven times over - it is a plain circle, and the exported asset only told us
   its colour. `background: #e60000 none` also clears the theme's PNG bullet. */
.iron-kt__list .iron-kt__item::before {
	content: '';
	position: static;
	display: block;
	flex: none;
	width: 6px;
	height: 6px;
	/* Sits 3px below the text's top in the design (dot y=1313.5 vs text y=1310.5). */
	margin-top: 3px;
	border-radius: 50%;
	background: #e60000 none;
}

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

/* Below ~520px there isn't room for three columns of readable text.
   (The design's own box is ~540px wide with 3 columns, so this stays clear of it.) */
@container iron-kt (max-width: 520px) {
	.iron-kt .iron-kt__list {
		grid-template-columns: repeat(2, 1fr);
	}

	.iron-kt .iron-kt__item:last-child:nth-child(3n + 1) {
		grid-column: auto;
	}

	.iron-kt .iron-kt__item:last-child:nth-child(2n + 1) {
		grid-column: 1 / -1;
	}
}

@container iron-kt (max-width: 340px) {
	.iron-kt .iron-kt__list {
		grid-template-columns: 1fr;
	}

	.iron-kt .iron-kt__item:last-child:nth-child(2n + 1) {
		grid-column: auto;
	}
}