/* ==========================================================================
   Homepage (design key "homepage"), ported from Homepage.dc.html.
   Section styles are inline in parts/sections/homepage/*.php; this file holds
   the prototype's style-hover rules (generated by tools/dc-to-php.py) and the
   states the prototype drove from React state.
   ========================================================================== */

/* style-hover */
.hp-h1:hover { background:#E0B400 !important;color:var(--gds-navy) !important;text-decoration:none !important }
.hp-h2:hover { background:#fff !important;color:var(--gds-navy) !important;text-decoration:none !important }
.hp-h3:hover { animation-play-state:paused !important }
.hp-h4:hover { background:var(--gds-navy) !important;color:#fff !important;text-decoration:none !important }
.hp-h5:hover { box-shadow:0 0 0 1px rgba(26,73,175,0.15), 0 16px 40px rgba(26,73,175,0.22) !important;text-decoration:none !important }
.hp-h6:hover { border-color:var(--gds-yellow) !important;color:#fff !important;text-decoration:none !important }
.hp-h7:hover { box-shadow:var(--shadow-md) !important;text-decoration:none !important }
.hp-h8:hover { background:var(--gds-navy-deep) !important;color:#fff !important;text-decoration:none !important }
.hp-h9:hover { transform:translateY(-4px) !important;box-shadow:0 4px 8px rgba(17,31,61,0.08), 0 24px 56px rgba(17,31,61,0.22) !important }
.hp-h10:hover { box-shadow:var(--shadow-md) !important }

/* Service cards: the rotating conic light fades in while the card is hovered (prototype svcHover state). */
.hp-svc:hover > .hp-svc__glow { opacity: 1 !important; }


/* Small phones: the prototype's 340px grid minimum and the offset demo frame overflow a 375px viewport. */
@media (max-width: 420px) {
	[data-hp="genesis-ai"] { overflow-x: clip; }
	[data-hp="genesis-ai"] > div { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important; }
}