/* ==========================================================================
   1.0.385 — Games showcase (inc/games-promo.php). Homepage, /homeschool/, /pricing/.
   Self-contained: Arcade Teal band (#007C89 = Games format colour), real game covers fanned, pink Play button.
   ========================================================================== */
.hft-gm {
	--gm-teal: #007C89;
	--gm-teal-d: #00626C;
	--gm-pink: var(--hft-cta, #D6337B);
	--gm-pink-h: var(--hft-cta-hover, #B62A67);
	--gm-yellow: var(--hft-sail-yellow, #FBB915);
	--gm-navy: var(--hft-navy, #1B437D);
	--gm-display: var(--hft-font-display, 'Fredoka', system-ui, sans-serif);
	--gm-font: var(--hft-font-body, 'Nunito Sans', system-ui, sans-serif);
	position: relative;
	overflow: hidden;
	background: var(--gm-teal);
	background-image: radial-gradient(rgba(255, 255, 255, .13) 2px, transparent 2.5px);
	background-size: 26px 26px;
	color: #fff;
	font-family: var(--gm-font);
	padding: clamp(64px, 8vw, 112px) 0;
}
.hft-gm *, .hft-gm *::before, .hft-gm *::after { box-sizing: border-box; }
.hft-gm .hftn-wrap { max-width: 1240px; }
.hft-gm-deco i { position: absolute; border-radius: 50%; pointer-events: none; }
.hft-gm-deco i:nth-child(1) { width: 460px; height: 460px; right: -120px; top: -140px; background: rgba(255, 255, 255, .08); }
.hft-gm-deco i:nth-child(2) { width: 220px; height: 220px; left: -70px; bottom: -80px; background: rgba(251, 185, 21, .22); }
.hft-gm-deco i:nth-child(3) { width: 90px; height: 90px; left: 44%; top: 26px; background: rgba(214, 51, 123, .28); }

.hft-gm-in { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hft-gm-copy { min-width: 0; }
.hft-gm-pill {
	display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 16px 6px 6px;
	border-radius: 999px; background: rgba(255, 255, 255, .16); font: 700 15px/1.2 var(--gm-font); letter-spacing: .02em;
}
.hft-gm-pill span { background: var(--gm-yellow); color: var(--gm-navy); border-radius: 999px; padding: 4px 10px; font: 700 13px/1.1 var(--gm-display); letter-spacing: .08em; text-transform: uppercase; }
.hft-gm-h2 { margin: 0 0 18px; font: 700 clamp(34px, 4.4vw, 56px)/1.05 var(--gm-display); color: #fff; text-wrap: balance; }
.hft-gm-h2 em { font-style: normal; color: var(--gm-yellow); position: relative; white-space: nowrap; }
.hft-gm-h2 em::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: -.08em; height: .14em; border-radius: 999px; background: var(--gm-pink); transform: rotate(-1.5deg); }
.hft-gm-lede { margin: 0 0 22px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, .94); max-width: 34em; }
.hft-gm-facts { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hft-gm-facts li { padding: 7px 14px; border-radius: 999px; background: #fff; color: var(--gm-teal-d); font: 600 15px/1.2 var(--gm-display); }
.hft-gm-facts li:nth-child(odd) { transform: rotate(-1.5deg); }
.hft-gm-facts li:nth-child(even) { transform: rotate(1.5deg); }
.hft-gm-btns { margin: 0; }
.hft-gm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 62px; padding: 14px 34px;
	border-radius: 999px; background: var(--gm-pink); color: #fff !important; text-decoration: none !important;
	font: 700 21px/1 var(--gm-display); box-shadow: 0 6px 0 var(--gm-pink-h), 0 16px 30px -12px rgba(0, 0, 0, .45);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.hft-gm-btn:hover, .hft-gm-btn:focus-visible { background: var(--gm-pink-h); transform: translateY(-2px); }
.hft-gm-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--gm-pink-h); }
.hft-gm-btn:focus-visible, .hft-gm-card:focus-visible { outline: 3px solid var(--gm-yellow); outline-offset: 4px; }

/* fanned covers (game covers are 1600×2070, the same shape as a worksheet) */
.hft-gm-art { position: relative; height: clamp(360px, 33vw, 460px); }
.hft-gm-card {
	position: absolute; display: block; width: 46%; padding: 9px; background: #fff; border-radius: 20px;
	box-shadow: 0 22px 40px -18px rgba(0, 0, 0, .55); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.hft-gm-card img { display: block; width: 100%; height: auto; border-radius: 12px; }
.hft-gm-card--1 { left: 27%; top: 2%; z-index: 3; transform: rotate(-2deg); }
.hft-gm-card--2 { left: 0; top: 14%; z-index: 2; transform: rotate(-10deg); }
.hft-gm-card--3 { left: 54%; top: 16%; z-index: 1; transform: rotate(9deg); }
.hft-gm-card:hover, .hft-gm-card:focus-visible { z-index: 6; transform: rotate(0) translateY(-10px) scale(1.04); }
.hft-gm-sticker {
	position: absolute; z-index: 7; left: -2%; top: -4%; width: 112px; height: 112px; border-radius: 50%;
	background: var(--gm-yellow); color: var(--gm-navy); border: 5px solid #fff; display: flex; flex-direction: column;
	align-items: center; justify-content: center; font-family: var(--gm-display); font-weight: 700; transform: rotate(-12deg);
	box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .4); animation: hft-gm-bob 5s ease-in-out infinite;
}
.hft-gm-sticker b { font-size: 32px; line-height: .95; }
.hft-gm-sticker i { font-style: normal; font-size: 14px; letter-spacing: .14em; }
@keyframes hft-gm-bob { 0%, 100% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(-8deg) translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .hft-gm-sticker { animation: none; } .hft-gm-card, .hft-gm-btn { transition: none; } }

@media (max-width: 960px) {
	.hft-gm-in { grid-template-columns: 1fr; }
	.hft-gm-copy { text-align: center; }
	.hft-gm-lede { margin-left: auto; margin-right: auto; }
	.hft-gm-facts { justify-content: center; }
	.hft-gm-art { max-width: 560px; width: 100%; margin: 0 auto; height: clamp(320px, 72vw, 500px); }
}
@media (max-width: 640px) {
	.hft-gm-btn { width: 100%; font-size: 20px; }
	.hft-gm-sticker { width: 84px; height: 84px; border-width: 4px; }
	.hft-gm-sticker b { font-size: 24px; }
	.hft-gm-sticker i { font-size: 11px; }
		.hft-gm-facts li { font-size: 14px; }
}