/* 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;
}
}


/* ---- Scroll reveal ---------------------------------------------------------
   Measured on live 2026-09-11 (/guest-medical-screening-service/): each card's
   TEXT starts at opacity 0, translateY(9px) and transitions to opacity 1 with
   no transform over 0.65s cubic-bezier(0.4, 0, 0.2, 1) after a 0.001s delay,
   once per element. The icon is not animated.

   `vk-reveal` is added by view.js, never by the markup: without it -- no
   JavaScript, no IntersectionObserver, or reduced motion -- the text simply
   renders, rather than staying invisible forever. */
.fw-icon-card__body.vk-reveal {
	opacity: 0;
	transform: translateY(9px);
	transition:
		opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.001s,
		transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) 0.001s;
}
.fw-icon-card__body.vk-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.fw-icon-card__body.vk-reveal,
	.fw-icon-card__body.vk-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}