/* ==========================================================================
   Counters
   The animated numbers (50+ clients, 100+ projects...). Numbers are edited in Appearance > Customize > Shiva Tatwa Theme > Statistics Counters. HTML: template-parts/shared/counters.php
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.stats-band .stats { grid-template-columns: repeat(4, 1fr); }
.stat { padding: 24px 22px; text-align: left; transition: transform .4s var(--ease), border-color .3s; }
.stat__icon { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; background: rgba(124, 58, 237, .2); border: 1px solid rgba(167, 139, 250, .3); color: #fff; }
.stat:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, .45); }
.stat__num { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; margin-bottom: 8px; }
.stat__num .counter { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat__suffix { color: var(--c-accent); }
.stat__label { color: var(--muted); font-size: .92rem; }
.stats-band .stats { position: relative; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 8px; border-radius: 28px; background: linear-gradient(#0c0724, #0c0724) padding-box, linear-gradient(90deg, #a78bfa, #22d3ee, #f472b6, #f59e0b) border-box; border: 1px solid transparent; box-shadow: 0 30px 70px -40px rgba(124, 58, 237, .8); }
.stats-band .stat { --sc: #a78bfa; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon num" "icon label"; column-gap: 16px; align-items: center; padding: 26px 24px; border: 0; border-radius: 22px; background: none; backdrop-filter: none; box-shadow: none; transition: background .4s; }
.stats-band .stat:nth-child(2) { --sc: #22d3ee; }
.stats-band .stat:nth-child(3) { --sc: #f472b6; }
.stats-band .stat:nth-child(4) { --sc: #f59e0b; }
.stats-band .stat + .stat::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: linear-gradient(transparent, rgba(255, 255, 255, .18), transparent); }
.stats-band .stat:hover { transform: none; background: radial-gradient(90% 90% at 30% 50%, color-mix(in srgb, var(--sc) 16%, transparent), transparent 70%); }
.stats-band .stat__icon { grid-area: icon; width: 56px; height: 56px; margin: 0; border-radius: 50%; background: color-mix(in srgb, var(--sc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 50%, transparent); color: var(--sc); box-shadow: 0 0 24px -6px var(--sc); }
.stats-band .stat__num { grid-area: num; margin-bottom: 4px; font-size: clamp(2rem, 3.2vw, 2.7rem); }
.stats-band .stat__num .counter { background: linear-gradient(120deg, #fff 30%, var(--sc)); -webkit-background-clip: text; background-clip: text; }
.stats-band .stat__suffix { color: var(--sc); }
.stats-band .stat__label { grid-area: label; color: #cfc9ea; font-size: .9rem; }

@media (max-width: 1024px) {
	.stats-band .stats { grid-template-columns: repeat(2, 1fr); }
	.stats-band .stat:nth-child(3)::before { display: none; }
}

@media (max-width: 600px) {
	.stats-band .stat { grid-template-columns: 1fr; grid-template-areas: "icon" "num" "label"; justify-items: center; text-align: center; padding: 20px 10px; row-gap: 8px; }
	.stats-band .stat__icon { width: 46px; height: 46px; }
}

@media (max-width: 1024px) {
	.stats-band .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
	.stats, .stats-band .stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.stat { padding: 22px 18px; }
}