/**
 * Jonaki Homestay - Rooms section: desktop layout only.
 *
 * Mobile/touch devices are completely untouched — the original
 * horizontal swipe-to-scroll row (overflow-x-auto) still works exactly as
 * before there.
 *
 * On devices with a real mouse/trackpad ("hover: hover and pointer: fine"
 * — i.e. desktop, not touch), the same 8 rooms instead lay out as a
 * 4-across grid (4 rooms on top, 4 below) so everything is visible at
 * once, with no scrolling needed.
 */

@media (hover: hover) and (pointer: fine) {
	.jonaki-homestay-scope #rooms .overflow-x-auto {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible !important;
		scroll-snap-type: none !important;
	}

	.jonaki-homestay-scope #rooms .overflow-x-auto > article {
		width: 100% !important;
	}
}

/**
 * Room cards: no underline on the room title link or the "Book Now" link,
 * in any state (default/hover/focus/visited). Purely cosmetic, scoped to
 * the #rooms section only — nothing else on the page is touched.
 */
.jonaki-homestay-scope #rooms a {
	text-decoration: none !important;
}
.jonaki-homestay-scope #rooms a:hover,
.jonaki-homestay-scope #rooms a:focus,
.jonaki-homestay-scope #rooms a:visited,
.jonaki-homestay-scope #rooms a:active {
	text-decoration: none !important;
}

/**
 * Hero section admin customization support.
 *
 * The hero section's image crop position, text sizes, and section height
 * are all admin-editable (per Desktop/Mobile) from the "Jonaki Homestay"
 * dashboard page. Rather than generating new Tailwind utility classes at
 * runtime (impossible — the CSS below was pre-compiled at build time and
 * can't include combinations that don't already exist in it), each
 * customizable value is passed down as an inline CSS custom property, and
 * these few generic rules pick a mobile value by default and swap to the
 * desktop value at the "lg" (1024px) breakpoint — matching how the rest of
 * the design already treats desktop vs. mobile.
 *
 * `!important` here is intentional: these rules exist specifically to let
 * the admin panel override the original static Tailwind text-size classes
 * still present on the same elements as safe fallbacks.
 */
.jonaki-homestay-scope .hero-dyn-text {
	font-size: var(--fs-m, inherit) !important;
}
.jonaki-homestay-scope .hero-dyn-img {
	object-position: var(--pos-m, center) !important;
}
.jonaki-homestay-scope .hero-dyn-height {
	min-height: var(--h-m, 100dvh) !important;
}
@media (min-width: 1024px) {
	.jonaki-homestay-scope .hero-dyn-text {
		font-size: var(--fs-d, inherit) !important;
	}
	.jonaki-homestay-scope .hero-dyn-img {
		object-position: var(--pos-d, center) !important;
	}
	.jonaki-homestay-scope .hero-dyn-height {
		min-height: var(--h-d, 100dvh) !important;
	}
}

/* Two small utility classes the original compiled CSS didn't include
   (nothing in the original design used them), needed for the hero text
   position (vertical/horizontal) admin controls. */
.jonaki-homestay-scope .justify-end {
	justify-content: flex-end;
}
.jonaki-homestay-scope .text-right {
	text-align: right;
}

/**
 * Hero heading/paragraph entrance animations (admin-selectable, off by
 * default). Deliberately fast (0.45s) rather than slow/showy — the brief
 * covers the animation is a nice-to-have, not something that should make
 * visitors wait. Re-plays every time the slider changes image because the
 * text block gets a fresh React `key` per slide (see app.js), which is the
 * simplest and cheapest way to retrigger a CSS animation.
 */
.jonaki-homestay-scope .hero-anim-fade {
	animation: jonakiHeroFade 0.45s ease-out both;
}
.jonaki-homestay-scope .hero-anim-slideup {
	animation: jonakiHeroSlideUp 0.45s ease-out both;
}
.jonaki-homestay-scope .hero-anim-slidedown {
	animation: jonakiHeroSlideDown 0.45s ease-out both;
}
.jonaki-homestay-scope .hero-anim-slideleft {
	animation: jonakiHeroSlideLeft 0.45s ease-out both;
}
.jonaki-homestay-scope .hero-anim-zoom {
	animation: jonakiHeroZoom 0.45s ease-out both;
}
@keyframes jonakiHeroFade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes jonakiHeroSlideUp {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes jonakiHeroSlideDown {
	from { opacity: 0; transform: translateY(-22px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes jonakiHeroSlideLeft {
	from { opacity: 0; transform: translateX(22px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes jonakiHeroZoom {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}