/* =====================================================================
   HOVER EFFECTS (mouse-over animations)
   ---------------------------------------------------------------------
   Everything that moves when a visitor points at something lives here.
   To switch ALL of it off: delete the line that loads hover.css in
   includes/header.php. Nothing else depends on this file.

   Effects only run on devices with a mouse (not phones/tablets), and
   are turned off for visitors who ask their computer to reduce motion.
   ===================================================================== */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

	/* Shared timing, so everything moves the same way */
	:root { --ease: cubic-bezier(.22, .61, .36, 1); }

	/* ---------- 1. Buttons: rise a little, soft shadow ---------- */
	.btn { transition: background .2s, color .2s, border-color .2s, transform .25s var(--ease), box-shadow .25s var(--ease); }
	.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(26,26,26,0.14); }
	.btn:active { transform: translateY(0); box-shadow: none; }

	/* ---------- 2. Main menu: thin gold bar slides in under the item ---------- */
	.nav-link { position: relative; }
	.nav-link::after {
		content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
		background: var(--lion); border-radius: 2px;
		transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
	}
	.nav-link:hover::after { transform: scaleX(1); }
	.sub a { transition: background .2s, padding-left .25s var(--ease); }
	.sub a:hover { padding-left: 18px; }

	/* ---------- 3. Course cards: lift, gold edge, image zooms gently ---------- */
	.course-card { transition: box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s; }
	.course-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(26,26,26,0.12); border-color: var(--sunset); }
	.course-card-img { overflow: hidden; }
	.course-card-img img { transition: transform .7s var(--ease); }
	.course-card:hover .course-card-img img { transform: scale(1.06); }

	/* ---------- 4. Other cards (info, careers, testimonials, experts, team, logos) ---------- */
	:is(.grid-2, .grid-3, .grid-4, .info-grid) > .card, .team-card, .logo-tile { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; }
	:is(.grid-2, .grid-3, .grid-4, .info-grid) > .card:hover, .team-card:hover, .logo-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(26,26,26,0.08); border-color: var(--sunset); }
	.team-card img { transition: transform .7s var(--ease); }
	.team-card:hover img { transform: scale(1.04); }
	.quote .quote-mark { display: inline-block; transition: transform .35s var(--ease); }
	.quote:hover .quote-mark { transform: scale(1.25) rotate(-6deg); }

	/* ---------- 5. Flagship course box on the homepage ---------- */
	.spotlight { transition: box-shadow .4s var(--ease); }
	.spotlight:hover { box-shadow: 0 24px 50px rgba(26,26,26,0.10); }
	.spotlight-img { overflow: hidden; }
	.spotlight-img img { transition: transform .9s var(--ease); }
	.spotlight:hover .spotlight-img img { transform: scale(1.05); }

	/* ---------- 6. Cut-out portraits: the gold circle behind grows slightly ---------- */
	.photo-ring::before { transition: transform .6s var(--ease); }
	.photo-ring:hover::before { transform: translateX(-50%) scale(1.05); }

	/* ---------- 7. "Why ASCL" numbered list: number turns gold, row shifts ---------- */
	.numbered > div > * { transition: transform .3s var(--ease), color .3s; }
	.numbered > div:hover > * { transform: translateX(6px); }
	.numbered > div:hover .num { color: var(--lion); }

	/* ---------- 8. Course modules: row warms up, number turns gold ---------- */
	.module-list li { transition: background .25s, padding-left .3s var(--ease); }
	.module-list li::before { transition: color .25s; }
	.module-list li:hover { background: var(--sunset-soft); padding-left: 30px; }
	.module-list li:hover::before { color: var(--lion); }

	/* ---------- 9. "Info at a glance" boxes and FAQ questions ---------- */
	.glance > div { transition: background .25s; }
	.glance > div:hover { background: var(--sunset-soft); }
	.accordion summary { transition: color .2s, padding-left .3s var(--ease); }
	.accordion summary:hover { color: var(--link); padding-left: 6px; }

	/* ---------- 10. Small things: clickable chips, numbers strip, WhatsApp button ---------- */
	a.chip { transition: background .2s, border-color .2s; }
	a.chip:hover { background: var(--sunset-soft); border-color: var(--lion); }
	.stats-grid > div { transition: transform .3s var(--ease); }
	.stats-grid > div:hover { transform: translateY(-3px); }
	.stat-num { transition: color .3s; }
	.stats-grid > div:hover .stat-num { color: var(--link); }
	.wa-float { transition: transform .3s var(--ease); }
	.wa-float:hover { transform: scale(1.1) rotate(-8deg); }
}