/* ==========================================================================
   AFP Services element  (salient-child)
   Single icon box: background photo + centered icon/title chip + link.
   Matches the "Events / Networking / Education & Training / Membership /
   Work With Trusted Suppliers / Committees and Lobbying" grid on the AFP
   site. Add several instances inside a WPBakery Row (any number of
   columns, including "Stretch Row - Full Width") to build that grid —
   sizing here is percentage/aspect-ratio based, no fixed pixel widths.
   ========================================================================== */

.afp-services-box {
	--afp-box-color: #57b197;
	--afp-box-hover-color: #221f20;

	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	text-decoration: none;
	border: 0;
	background-color: #e9e9e9;
	/* Lets the title font-size below scale off the BOX's own rendered
	   width (via cqw) rather than the viewport — correct however many
	   columns a row is split into. */
	container-type: inline-size;
	container-name: afp-services-box;
}

/* Fallback for browsers without aspect-ratio support (keeps the square
   without JS): padding-top hack, overridden the instant aspect-ratio applies. */
@supports not (aspect-ratio: 1 / 1) {
	.afp-services-box {
		height: 0;
		padding-top: 100%;
	}
}

.afp-services-box,
.afp-services-box * {
	box-sizing: border-box;
}

/* --------------------------------------------------------------- background */
.afp-services-box__bg {
	position: absolute;
	inset: 0;
	display: block;
	background-color: #ccc;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: transform 0.9s ease;
	will-change: transform;
}

.afp-services-box:hover .afp-services-box__bg {
	transform: scale(1.1);
}

/* -------------------------------------------------------------------- chip */
.afp-services-box__chip {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Fixed size on purpose — every chip in a row must look the same size,
	   whatever its own title length or icon image's proportions are.
	   Content that doesn't fit shrinks (icon) or wraps/clamps (title)
	   instead of growing the chip — see .afp-services-box__title and
	   .afp-services-box__icon below. */
	width: 65%;
   height: 65%;
	max-width: 100%;
	max-height: 92%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 6% 10%;
	background-color: var(--afp-box-color);
	transition: background-color 0.5s ease;
	overflow: hidden;
}

.afp-services-box:hover .afp-services-box__chip {
	background-color: var(--afp-box-hover-color);
}

.afp-services-box__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* A fixed square slot — an icon image that's tall, wide, or just a
	   large file scales DOWN to fit inside it (object-fit: contain on the
	   <img> below) instead of stretching the icon or pushing the chip
	   taller. */
	width: 38%;
	aspect-ratio: 1 / 1;
	margin-bottom: 6%;
}

.afp-services-box__icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.afp-services-box__icon-font {
	font-size: clamp(20px, 4vw, 40px);
	line-height: 1;
	color: #fff;
}

.afp-services-box__title {
	/* Clamps to a fixed number of lines and ellipses anything past that,
	   so an unusually long title truncates gracefully instead of
	   overflowing the fixed-size chip above. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	flex: 0 1 auto;
	min-height: 0;
	width: 100%;
	font-family: "Poppins", sans-serif;
	font-size: clamp(11px, 1.2vw, 18px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: 0.3px;
	color: #fff;
	word-break: break-word;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 999px) {
	.afp-services-box__title {
		font-size: 13px;
	}
}

@media (max-width: 599px) {
	.afp-services-box__chip {
		width: 66%;
		height: 82%;
	}
	.afp-services-box__title {
		font-size: 12px;
		-webkit-line-clamp: 5;
	}
}

/* ------------------------------------------------------------------ focus */
.afp-services-box:focus-visible {
	outline: 3px solid var(--afp-box-color);
	outline-offset: 2px;
}

/* =========================================================================
   ANIMATION
   Same "enable + delay" contract as Salient's own elements: has-animation
   class + data-animation on the root, class afp-services-box--in-view added
   by afp-services.js once the box scrolls into view (or immediately, if
   JS is unavailable / reduced-motion is requested).
   ========================================================================= */
.afp-services-box--has-animation {
	opacity: 0;
	transform: none;
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.afp-services-box--has-animation[data-animation="fade-in"] {
	transform: translateY(0);
}

.afp-services-box--has-animation[data-animation="fade-in-from-left"] {
	transform: translateX(-40px);
}

.afp-services-box--has-animation[data-animation="fade-in-from-right"] {
	transform: translateX(40px);
}

.afp-services-box--has-animation[data-animation="fade-in-from-bottom"] {
	transform: translateY(40px);
}

.afp-services-box--has-animation[data-animation="grow-in"] {
	transform: scale(0.85);
}

.afp-services-box--has-animation[data-animation="zoom-in"] {
	transform: scale(1.15);
}

.afp-services-box--has-animation.afp-services-box--in-view {
	opacity: 1;
	transform: none;
}

/* Respect reduced-motion and skip animation in the WPBakery/back-end editor */
@media (prefers-reduced-motion: reduce) {
	.afp-services-box--has-animation {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

body.vc_editable .afp-services-box--has-animation,
body.wpb-js-composer .vc_editor .afp-services-box--has-animation {
	opacity: 1 !important;
	transform: none !important;
}