/* Chamran – home page */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Vazirmatn', system-ui, sans-serif; background: #FBFAF8; color: #16131C; }
::selection { background: #E6147F; color: #fff; }
a { text-decoration: none; color: inherit; }

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* hover states — replace bundler's style-hover attributes */
.ch-btn-dark       { transition: transform .2s, background .2s; }
.ch-btn-dark:hover { background: #E6147F !important; transform: translateY(-2px); }

.ch-btn-outline       { transition: border-color .2s; }
.ch-btn-outline:hover { border-color: #16131C !important; }

.ch-btn-white       { transition: transform .2s; }
.ch-btn-white:hover { transform: translateY(-2px); }

.ch-btn-ghost:hover { background: rgba(255,255,255,.26) !important; }

.ch-nav-link       { transition: color .15s; }
.ch-nav-link:hover { color: #E6147F; }

.ch-sport-card       { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ch-sport-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -28px rgba(22,19,28,.4); border-color: #16131C !important; }

.ch-fun-card       { transition: transform .25s; }
.ch-fun-card:hover { transform: translateY(-6px); }


/* ═══════════════════════════════════════
   HERO SLIDER
═══════════════════════════════════════ */

.ch-home-hero-slider { position: relative; }

/* Active slide sits in normal flow (sets height); inactive slides are
   absolutely positioned within the slider at opacity 0. */
.ch-home-slide { transition: opacity .6s ease; }
.ch-home-slide:not( .is-active ) {
	position: absolute;
	top: 0; left: 0; right: 0;
	opacity: 0;
	pointer-events: none;
}

/* Hero image box */
.ch-home-slide-img {
	border-radius: 28px; overflow: hidden;
	box-shadow: 0 40px 80px -40px rgba(75,34,224,.45);
	border: 1px solid #EFEAE2;
	aspect-ratio: 4/5;
	position: relative; z-index: 1;
}
.ch-home-slide-img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.ch-home-placeholder {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: repeating-linear-gradient(48deg,#F1ECE4,#F1ECE4 14px,#EAE3D8 14px,#EAE3D8 28px);
}

/* Slider controls (arrows + dots) */
.ch-hero-controls {
	display: flex; align-items: center; gap: 12px;
	margin-top: 28px;
}
.ch-hero-arrow {
	width: 40px; height: 40px; border-radius: 50%;
	border: 1.5px solid #E4DED4; background: #fff;
	cursor: pointer; font-size: 20px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s, border-color .2s, color .2s;
	flex-shrink: 0; padding: 0;
}
.ch-hero-arrow:hover { background: #16131C; border-color: #16131C; color: #fff; }
.ch-hero-dots { display: flex; gap: 7px; }
.ch-hero-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: #E4DED4; cursor: pointer; border: none; padding: 0;
	transition: background .2s, transform .2s;
}
.ch-hero-dot.is-active { background: #E6147F; transform: scale(1.3); }


/* ═══════════════════════════════════════
   HOMEPAGE LAYOUT GRIDS (desktop baseline)
═══════════════════════════════════════ */

.ch-home-hero {
	display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.ch-home-sports-grid     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ch-home-fun-grid        { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ch-home-facilities-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.ch-home-cta-inner {
	display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
	padding: 72px 56px;
}


/* ═══════════════════════════════════════
   RESPONSIVE — 1024px (tablet landscape)
═══════════════════════════════════════ */

@media (max-width: 1024px) {
	.ch-home-sports-grid     { grid-template-columns: repeat(3, 1fr); }
	.ch-home-facilities-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ═══════════════════════════════════════
   RESPONSIVE — 768px (tablet + mobile)
═══════════════════════════════════════ */

@media (max-width: 768px) {
	.ch-home-hero            { grid-template-columns: 1fr; gap: 0; }
	.ch-home-hero-visual     { display: none; }          /* hide decorative image on mobile */
	.ch-home-deco            { display: none; }

	.ch-home-sports-grid     { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.ch-home-fun-grid        { grid-template-columns: 1fr; gap: 16px; }
	.ch-home-facilities-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

	.ch-home-cta-inner       { grid-template-columns: 1fr; gap: 28px; padding: 44px 28px; }
}


/* ═══════════════════════════════════════
   RESPONSIVE — 480px (small phones)
═══════════════════════════════════════ */

@media (max-width: 480px) {
	.ch-home-sports-grid     { gap: 10px; }
	.ch-home-facilities-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.ch-home-cta-inner       { padding: 36px 22px; }
}