/**
 * Resource cards - the story card from posts.css with a teal header and a
 * type tab instead of a photo, plus an optional type filter.
 */

/* ---------- header + tab ---------- */

.hpe-posts .hpe-resource-card__head {
	position: relative;
	height: 52px;
	background: #156082 url(/wp-content/uploads/2026/08/moh-doodle-overlay.svg) center / 220px repeat;
}

.hpe-posts .hpe-resource-card__head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #156082;
	opacity: .88;
}

/* type label sits in the teal header - no tab */
.hpe-posts .hpe-resource-card__kind {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 100%;
	padding: 0 20px;
	font-family: Inter, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
}

.hpe-posts .hpe-resource-card__kind svg { width: 16px; height: 16px; color: #FFC000; }

/* ---------- meta line with glyph ---------- */
.hpe-posts .hpe-resource-card__preview{display:flex;align-items:center;justify-content:center;aspect-ratio:16/10;overflow:hidden;background:#E5F0F9;text-decoration:none;border-bottom:1px solid #dce4e2}
.hpe-posts .hpe-resource-card__preview img{display:block;width:100%;height:100%;object-fit:contain}
.hpe-posts .hpe-resource-card__preview--document{position:relative;isolation:isolate}
.hpe-posts .hpe-resource-card__backdrop{position:absolute;inset:-18px;z-index:0;pointer-events:none;filter:blur(14px);opacity:.55}
.hpe-posts .hpe-resource-card__backdrop img{object-fit:fill}
.hpe-posts .hpe-resource-card__cover{position:absolute;inset:12% 18%;z-index:1;display:flex;align-items:center;justify-content:center}
.hpe-posts .hpe-resource-card__cover img{object-fit:contain}
.hpe-posts .hpe-resource-card__fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:104px;height:140px;background:#F9FCFE;border:1px solid #bdccc1;border-radius:3px;color:#156082;font:500 13px/1.3 Inter,sans-serif}
.hpe-posts .hpe-resource-card__fallback svg{width:48px;height:48px;color:#156082}
.hpe-posts .hpe-resource-card__preview:focus-visible{outline:3px solid #156082;outline-offset:-3px}
.hpe-posts .hpe-resource-card__preview--video{position:relative}
.hpe-posts .hpe-resource-card__preview--video img{object-fit:cover}
.hpe-posts .hpe-resource-card__play{position:absolute;inset:0;margin:auto;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#156082;color:#FFC000}
.hpe-posts .hpe-resource-card__play svg{width:25px;height:25px}
.hpe-posts .hpe-resource-card__preview--video:hover .hpe-resource-card__play{background:#004C6D}

.hpe-posts .hpe-resource-card__meta {
	display: flex;
	align-items: center;
	gap: 7px;
}

.hpe-posts .hpe-resource-card__meta svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
	color: #156082;
}

/* Compact version of the shared button, only inside resource cards. */
.hpe-posts .hpe-resource-card .hpe-posts__cta{--vamtam-icon-size:11px;--vamtam-icon-padding-ttl:30px}
.hpe-posts .hpe-resource-card .hpe-posts__cta .elementor-button{font-size:13px;padding:14px 20px;line-height:1}
.hpe-posts .hpe-resource-card .hpe-posts__cta.vamtam-has-icon-styles .elementor-button-icon :is(svg,i){font-size:11px;padding:15px}

/* ---------- filter chips ---------- */

.hpe-posts .hpe-resources__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.hpe-posts .hpe-resources__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border: 1px solid #C9D6D6;
	border-radius: 100px;
	background: #fff;
	font-family: Inter, sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	color: #004C6D;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.hpe-posts .hpe-resources__chip svg { width: 15px; height: 15px; }

.hpe-posts .hpe-resources__chip:hover,
.hpe-posts .hpe-resources__chip:focus-visible {
	border-color: #156082;
	outline: none;
}

.hpe-posts .hpe-resources__chip.is-active {
	background: #156082;
	border-color: #156082;
	color: #fff;
}

.hpe-posts .hpe-resources__empty {
	font-family: Inter, sans-serif;
	font-size: 15px;
	color: #55696B;
	margin: 0;
}

.hpe-posts .hpe-resource-card[hidden] { display: none; }

/* Resource type artwork from the shared HPE icon pack. */
.hpe-posts .hpe-resource-type-icon{display:block;width:24px;height:24px;object-fit:contain;flex:0 0 24px;}
.hpe-posts .hpe-resource-card__fallback .hpe-resource-type-icon{width:72px;height:72px;flex:0 0 72px;}
.hpe-posts .hpe-resource-card__play{background:#F7F8F6;}
.hpe-posts .hpe-resource-card__play .hpe-brand-play{width:36px;height:36px;object-fit:contain;}
.hpe-posts .hpe-resource-card__preview--video:hover .hpe-resource-card__play{background:#CAE9FF;}