/* Structure only.
 *
 * Colour, type, border, shadow and decorative treatment were stripped when
 * this became the blank starter. The design comes from the build's own
 * Figma / Claude Design work, not from here.
 *
 * Spacing and sizing are exposed as --fw-<selector>-<property> tokens that
 * default to 0, so the starter asserts nothing and the design layer sets
 * them. Everything left is layout mechanics the block needs to function.
 */

/* Block: framework/icon-cards */

.fw-icons {
	padding: var(--fw-section-py, 48px) 20px;
}

.fw-icons__grid {
	max-width: var(--fw-icons-grid-max-width, 0);
	margin: var(--fw-icons-grid-margin, 0);
	display: grid;
	position: relative;
}

/* Intro group spans the full grid width and centres above the cards. */
.fw-icons__intro,
.fw-icons__grid > .wp-block-group.fw-icons__intro {
	grid-column: 1 / -1;
	text-align: center;
	max-width: var(--fw-icons-intro-max-width, 0);
	margin: var(--fw-icons-intro-margin, 0);
}

.fw-icons__intro :is(h1, h2, h3, h4, h5, h6) {
	margin: var(--fw-icons-intro-margin, 0);
}

.fw-icons__intro p {
	margin: 0;
}

/* Responsive columns — step down through 3, 2, then 1 (blocks can have a
   variable number of items, so a 3-col step avoids a jarring 4->2 jump). The
   column count is set inline (author attribute), so override with !important. */
@media (max-width: 1080px) {
	.fw-icons__grid {
	grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 768px) {
	.fw-icons__grid {
	grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 600px) {
	.fw-icons__grid {
	grid-template-columns: 1fr !important;
}
}