/* Performa Icon Box */
.pf-icon-box {
	--_pad: 0px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: calc(100% - 1.5em);
	margin-bottom: 1.5em;
	padding: var(--_pad);
	border-radius: var(--pf-radius);
	transition: transform .5s var(--pf-ease), box-shadow .5s var(--pf-ease), border-color .3s, background-color .4s, color .4s;
}
.pf-icon-box--card { --_pad: clamp(24px, 3vw, 36px); background: var(--pf-surface); }
.pf-icon-box--bordered { --_pad: clamp(24px, 3vw, 36px); border: 1px solid var(--pf-border); }
.pf-icon-box--shadow { --_pad: clamp(24px, 3vw, 36px); background: var(--pf-bg); box-shadow: var(--pf-shadow-sm); }
.pf-icon-box--center { align-items: center; text-align: center; }
.pf-icon-box--left { flex-direction: row; align-items: flex-start; }

/* Icon */
.pf-icon-box__icon {
	--_s: 56px;
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--_s);
	height: var(--_s);
	color: var(--pf-ib-color, var(--pf-accent));
	transition: background-color .4s, color .4s, transform .5s var(--pf-ease);
}
.pf-icon-box--size-sm .pf-icon-box__icon { --_s: 44px; }
.pf-icon-box--size-lg .pf-icon-box__icon { --_s: 72px; }
.pf-icon-box__icon .pf-icon { width: calc(var(--_s) * .46); height: calc(var(--_s) * .46); }
.pf-icon-box--shape-none .pf-icon-box__icon { width: auto; height: auto; justify-content: flex-start; }
.pf-icon-box--shape-none .pf-icon-box__icon .pf-icon { width: calc(var(--_s) * .62); height: calc(var(--_s) * .62); }
.pf-icon-box--shape-square .pf-icon-box__icon { border-radius: calc(var(--pf-radius) * 1.2); background: color-mix(in srgb, var(--pf-ib-color, var(--pf-accent)) 12%, transparent); }
.pf-icon-box--shape-circle .pf-icon-box__icon { border-radius: 50%; background: color-mix(in srgb, var(--pf-ib-color, var(--pf-accent)) 12%, transparent); }
.pf-icon-box--shape-outline .pf-icon-box__icon { border-radius: 50%; border: 1.5px solid currentColor; }
.pf-icon-box--type-image .pf-icon-box__icon { background: none; border: 0; width: auto; height: var(--_s); }
.pf-icon-box--type-image .pf-icon-box__icon img { max-height: 100%; width: auto; }
.pf-icon-box__num { font-family: var(--pf-heading-font, inherit); font-weight: 700; font-size: calc(var(--_s) * .36); letter-spacing: -.02em; }

/* Text */
.pf-icon-box__body { min-width: 0; }
.pf-icon-box__title { margin: 0 0 .45em; }
.pf-icon-box__title a { color: inherit; }
.pf-icon-box__text { color: var(--pf-muted); }
.pf-icon-box__text > :last-child { margin-bottom: 0; }
.pf-icon-box__link { margin-top: 16px; }
.pf-icon-box__cover::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* Hover */
.pf-icon-box--hover-lift:hover { transform: translateY(-6px); box-shadow: var(--pf-shadow-lg); }
.pf-icon-box--hover-lift:hover .pf-icon-box__icon { transform: translateY(-2px) rotate(-4deg); }
.pf-icon-box--hover-border:hover { border-color: var(--pf-ib-color, var(--pf-accent)); }
.pf-icon-box--hover-border { border: 1px solid transparent; }
.pf-icon-box--bordered.pf-icon-box--hover-border { border-color: var(--pf-border); }
.pf-icon-box--hover-border:hover { border-color: var(--pf-ib-color, var(--pf-accent)); }
.pf-icon-box--hover-fill:hover { background: var(--pf-ib-color, var(--pf-accent)); color: var(--pf-on-accent); --pf-heading: var(--pf-on-accent); --pf-muted: color-mix(in srgb, var(--pf-on-accent) 80%, transparent); --pf-accent-text: var(--pf-on-accent); }
.pf-icon-box--hover-fill:hover .pf-icon-box__icon { background: rgba(255, 255, 255, .22); color: var(--pf-on-accent); border-color: currentColor; }
.pf-icon-box--hover-fill:hover .pf-link-arrow { color: var(--pf-on-accent); }
.pf-icon-box--hover-fill.pf-icon-box--plain { --_pad: clamp(24px, 3vw, 36px); }

/* Performa section-library variants (match performa-core pc-card). */
.pf-icon-box--panel {
	--_pad: clamp(24px, 3vw, 32px);
	--pf-heading: var(--pf-dark-heading);
	--pf-muted: var(--pf-dark-text);
	--pf-accent-text: var(--pf-accent);
	background: var(--pf-extra-2);
	border: 1px solid color-mix(in srgb, var(--pf-dark-text) 14%, transparent);
	color: var(--pf-dark-text);
}
.pf-icon-box--line { padding-top: 20px; border-top: 2px solid var(--pf-ib-color, var(--pf-accent)); border-radius: 0; }
.pf-icon-box--linked.pf-icon-box--hover-none:hover { transform: translateY(-4px); border-color: var(--pf-accent); }