/* =========================================================================
   Loading placeholders for the sections that fetch from WordPress.

   Every listing/detail page in the Next app renders its content client-side
   from a REST call, so the section is empty until the response lands. These
   classes fill that gap. They are deliberately layout-agnostic: each skeleton
   is composed INSIDE the section's real layout containers (.cr-acc__item,
   .bl-card, .nr-cov__grid ...) so the spacing, gaps and column widths are the
   Figma ones already defined on those classes — nothing is re-specified here.
   ========================================================================= */

.hv-sk {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: rgba(17, 17, 17, 0.07);
}
/* Sweep highlight. A pseudo-element keeps the animation off the layout box so
   it never affects the size the placeholder reserves. */
.hv-sk::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-100%);
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.6) 50%,
		transparent 100%
	);
	animation: hv-sk-sweep 1.4s ease-in-out infinite;
}
@keyframes hv-sk-sweep {
	to { transform: translateX(100%); }
}

/* On the dark heroes (blog/product-update/press/job detail) the light wash
   would flash; invert both the base and the sweep. */
.hv-sk--dk {
	background: rgba(255, 255, 255, 0.1);
}
.hv-sk--dk::after {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.16) 50%,
		transparent 100%
	);
}

/* Shapes. Sizes always come from the caller so a placeholder can match the
   real element it stands in for. */
.hv-sk--text { border-radius: 4px; }
.hv-sk--img { border-radius: 12px; }
.hv-sk--pill { border-radius: 999px; }
.hv-sk--circle { border-radius: 50%; }

/* A run of text lines; the last one is short so it reads as a paragraph. */
.hv-sk-lines {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.hv-sk::after { animation: none; }
}