/* ==========================================================================
   Ganapati Bappa - core design system
   Cream base, warm earthy tones, subtle saffron/gold accents.
   Mobile-first: base rules target ~375-430px, then scale up.
   ========================================================================== */

:root {
	--color-bg: #FBF6EC;
	--color-bg-alt: #F3E9D6;
	--color-surface: #FFFFFF;
	--color-ink: #2B2118;
	--color-ink-soft: #6B5D4C;
	--color-ink-faint: #9A8C78;
	--color-saffron: #E08A2C;
	--color-saffron-dark: #C46F1C;
	--color-gold: #C9A227;
	--color-line: rgba(43, 33, 24, 0.1);
	--color-available: #2E7D4F;
	--color-reserved: #B5791E;
	--color-sold: #A6402F;
	--color-whatsapp: #25A860;

	--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	--shadow-soft: 0 16px 40px -18px rgba(43, 33, 24, 0.28);
	--shadow-lift: 0 24px 60px -20px rgba(43, 33, 24, 0.35);

	--container-width: 1180px;
	--space-section: 64px;
}

* , *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--color-ink);
}

p { margin: 0 0 1em; color: var(--color-ink-soft); }

.ganapati-container {
	width: 100%;
	max-width: var(--container-width);
	margin: 0 auto;
	padding: 0 20px;
}

.ganapati-center { text-align: center; margin-top: 28px; }

.ganapati-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-ink);
	color: #fff;
	padding: 10px 16px;
	z-index: 1000;
}
.ganapati-skip-link:focus { left: 12px; top: 12px; }

/* ---------- Buttons ---------- */

.ganapati-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 24px;
	border-radius: var(--radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
	min-height: 48px;
	line-height: 1;
	white-space: nowrap;
}
.ganapati-btn:active { transform: scale(0.97); }

.ganapati-btn-primary {
	background: var(--color-ink);
	color: #fff;
}
.ganapati-btn-primary:hover { background: #40331f; }

.ganapati-btn-outline {
	background: transparent;
	border-color: var(--color-ink);
	color: var(--color-ink);
}
.ganapati-btn-outline:hover { background: var(--color-ink); color: #fff; }

.ganapati-btn-whatsapp {
	background: var(--color-whatsapp);
	color: #fff;
}
.ganapati-btn-whatsapp:hover { background: #1f8f52; }

.ganapati-btn-lg { padding: 16px 32px; font-size: 16px; }
.ganapati-btn-sm { padding: 10px 16px; font-size: 13px; min-height: 40px; }

.ganapati-btn-icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--color-bg-alt);
	color: var(--color-ink);
	flex: 0 0 auto;
}

/* ---------- Header ---------- */

.ganapati-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 246, 236, 0.9);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--color-line);
}

.ganapati-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 68px;
}

.ganapati-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--color-ink);
	flex: 1;
	min-width: 0;
}
.ganapati-logo-mark { font-size: 22px; }
.ganapati-logo-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ganapati-nav { display: none; }
.ganapati-nav-list {
	display: flex;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: 500;
}
.ganapati-nav-list a { color: var(--color-ink-soft); }
.ganapati-nav-list a:hover { color: var(--color-saffron-dark); }

.ganapati-header-cta {
	display: none;
	background: var(--color-ink);
	color: #fff;
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

@media (min-width: 860px) {
	.ganapati-nav { display: block; }
	.ganapati-header-cta { display: inline-flex; }
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Mobile nav toggle + drawer ---------- */

.ganapati-nav-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
}
.ganapati-nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-ink);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.ganapati-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ganapati-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ganapati-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.ganapati-mobile-nav {
	border-top: 1px solid var(--color-line);
	padding: 18px 20px 24px;
	background: var(--color-bg);
}
.ganapati-mobile-nav-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ganapati-mobile-nav-list a {
	display: block;
	padding: 12px 4px;
	font-weight: 500;
	font-size: 16px;
	color: var(--color-ink);
	border-bottom: 1px solid var(--color-line);
}
.ganapati-mobile-nav-cta { width: 100%; }

@media (min-width: 860px) {
	.ganapati-nav-toggle { display: none; }
	.ganapati-mobile-nav { display: none !important; }
}

/* ---------- Footer ---------- */

.ganapati-footer {
	background: var(--color-ink);
	color: #E9E1D3;
	padding: var(--space-section) 0 24px;
	margin-top: 40px;
}
.ganapati-footer h3 {
	color: #fff;
	font-size: 15px;
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 16px;
}
.ganapati-footer .ganapati-logo { color: #fff; }
.ganapati-footer-tagline { color: #C9BEA9; max-width: 32ch; margin-top: 14px; }

.ganapati-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
}
@media (min-width: 720px) {
	.ganapati-footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
}

.ganapati-footer-col ul { list-style: none; margin: 0; padding: 0; }
.ganapati-footer-col li { margin-bottom: 10px; }
.ganapati-footer-col a { color: #C9BEA9; }
.ganapati-footer-col a:hover { color: #fff; }

.ganapati-contact-list li { display: flex; gap: 8px; align-items: flex-start; color: #C9BEA9; }

.ganapati-social-links { display: flex; gap: 16px; margin-top: 14px; }
.ganapati-social-links a { color: #C9BEA9; font-size: 13px; font-weight: 600; }

.ganapati-footer-bottom {
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 13px;
	color: #9C927E;
}

.ganapati-floating-whatsapp {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-whatsapp);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	box-shadow: var(--shadow-lift);
	z-index: 200;
}

/* ---------- Sections ---------- */

.ganapati-section { padding: var(--space-section) 0; }
.ganapati-section-title {
	font-size: clamp(24px, 4vw, 34px);
	text-align: center;
}
.ganapati-section-title-sm {
	font-size: 22px;
	margin-bottom: 20px;
}
.ganapati-section-sub {
	text-align: center;
	max-width: 46ch;
	margin: 0 auto 36px;
}
.ganapati-eyebrow {
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-saffron-dark);
	margin-bottom: 12px;
}

/* ---------- Idol grid + card ---------- */

.ganapati-idol-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
@media (min-width: 640px) {
	.ganapati-idol-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
@media (min-width: 1000px) {
	.ganapati-idol-grid { grid-template-columns: repeat(4, 1fr); }
}

.ganapati-idol-card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ganapati-idol-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }

.ganapati-idol-card-media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background: radial-gradient(circle at 50% 40%, var(--color-bg-alt), var(--color-bg) 70%);
}
.ganapati-idol-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
}
.ganapati-idol-card-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	opacity: 0.4;
}

.ganapati-idol-card-body { padding: 14px 14px 16px; }
.ganapati-idol-card-title {
	font-size: 15px;
	margin-bottom: 6px;
	line-height: 1.3;
}
.ganapati-idol-card-title a:hover { color: var(--color-saffron-dark); }

.ganapati-idol-card-meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 12px;
	color: var(--color-ink-faint);
	margin-bottom: 12px;
}
.ganapati-idol-card-price {
	font-weight: 700;
	font-size: 15px;
	color: var(--color-ink);
}

.ganapati-idol-card-actions { display: flex; gap: 8px; }
.ganapati-idol-card-actions .ganapati-btn-primary { flex: 1; }

.ganapati-tag {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	background: #fff;
	box-shadow: var(--shadow-soft);
}
.ganapati-tag-sold { color: var(--color-sold); }
.ganapati-tag-reserved { color: var(--color-reserved); }

.ganapati-badge {
	display: inline-block;
	padding: 3px 12px;
	border-radius: var(--radius-pill);
	font-size: 12px;
	font-weight: 600;
}
.ganapati-badge-available { background: #E4F2E8; color: var(--color-available); }
.ganapati-badge-reserved { background: #FBEDD8; color: var(--color-reserved); }
.ganapati-badge-sold { background: #F7E3DF; color: var(--color-sold); }

.ganapati-empty-state { text-align: center; padding: 40px 0; color: var(--color-ink-faint); }

.ganapati-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.ganapati-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-surface);
	color: var(--color-ink-soft);
	font-weight: 600;
	box-shadow: var(--shadow-soft);
}
.ganapati-pagination .page-numbers.current { background: var(--color-ink); color: #fff; }

/* ---------- Generic page ---------- */

.ganapati-page-narrow { max-width: 720px; }
.ganapati-page-title { font-size: clamp(26px, 4vw, 36px); }
.ganapati-prose p { color: var(--color-ink-soft); }

.ganapati-contact-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: 32px;
}
@media (min-width: 640px) { .ganapati-contact-cards { grid-template-columns: 1fr 1fr; } }

.ganapati-contact-card {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--color-surface);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	box-shadow: var(--shadow-soft);
}
.ganapati-contact-icon { font-size: 24px; }