Polish responsive design across all screen sizes and refine card blocks

- Enhance SurfaceCard with refined borders, layered shadows, and polished
  primary-tinted header with an icon container
- Update homepage blocks (hero, features, stats, login, news, photos) for
  proper mobile/tablet/desktop responsiveness and tighter mobile spacing
- Improve content-card, stat-block, card-grid and card styling with subtle
  depth (layered shadow + inner hairline) and smoother hover states
- Refine site header, footer, top header and site layout spacing for small
  screens while keeping a consistent professional look on large screens
- Add min-tap-height targets and responsive typography on mobile

src/components/site-header.tsx

@@ -36,7 +36,7 @@ export async function SiteHeader() {
 	return (
 		<div
 			className="site-header relative w-full overflow-hidden"
-			style={{ minHeight: "clamp(12rem, 30vw, 18rem)" }}
+			style={{ minHeight: "clamp(10rem, 25vw, 18rem)" }}
 		>
 			{/* Background image */}
 			<div
@@ -65,19 +65,19 @@ export async function SiteHeader() {
 
 			{/* Decorative glows */}
 			<div
-				className="absolute -top-24 -right-24 w-96 h-96 rounded-full opacity-[0.12] blur-[120px]"
+				className="absolute -top-24 -right-24 w-64 h-64 sm:w-96 sm:h-96 rounded-full opacity-[0.12] blur-[120px]"
 				style={{ background: "var(--color-primary)" }}
 			/>
 			<div
-				className="absolute -bottom-24 -left-24 w-72 h-72 rounded-full opacity-[0.08] blur-[100px]"
+				className="absolute -bottom-24 -left-24 w-48 h-48 sm:w-72 sm:h-72 rounded-full opacity-[0.08] blur-[100px]"
 				style={{ background: "var(--color-primary)" }}
 			/>
 
 			{/* Content */}
-			<div className="relative flex flex-col items-center justify-center px-4 py-8 md:py-12 min-h-[clamp(12rem,30vw,18rem)]">
+			<div className="relative flex flex-col items-center justify-center px-3 py-6 sm:px-4 sm:py-8 md:py-12 min-h-[clamp(10rem,25vw,18rem)]">
 				<Link
 					href="/"
-					className="transition-transform duration-300 hover:scale-105 mb-8"
+					className="transition-transform duration-300 hover:scale-105 mb-5 sm:mb-8"
 				>
 					{logo ? (
 						<Image
@@ -86,7 +86,11 @@ export async function SiteHeader() {
 							alt={hotelName}
 							width={200}
 							height={120}
-							style={{ maxHeight: 120, width: "auto", height: "auto" }}
+							style={{
+								maxHeight: "clamp(60px, 15vw, 120px)",
+								width: "auto",
+								height: "auto",
+							}}
 							unoptimized
 						/>
 					) : (
@@ -95,7 +99,7 @@ export async function SiteHeader() {
 								className="font-black tracking-tight leading-none text-white"
 								style={{
 									fontFamily: "var(--font-nunito)",
-									fontSize: "clamp(2.8rem, 8vw, 5.5rem)",
+									fontSize: "clamp(2rem, 7vw, 5.5rem)",
 									textShadow:
 										"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
 									letterSpacing: "0.04em",
@@ -104,7 +108,7 @@ export async function SiteHeader() {
 								{hotelName}
 							</h1>
 							<p
-								className="text-sm md:text-base font-bold tracking-[0.15em] uppercase mt-1"
+								className="text-xs sm:text-sm md:text-base font-bold tracking-[0.15em] uppercase mt-1"
 								style={{
 									color: "color-mix(in srgb, var(--color-primary) 70%, white)",
 									textShadow: "0 2px 12px rgba(0,0,0,0.5)",
@@ -119,7 +123,7 @@ export async function SiteHeader() {
 
 				{/* Online badge */}
 				<div
-					className="flex items-center gap-3 px-6 py-3 rounded-full"
+					className="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-2 sm:py-3 rounded-full"
 					style={{
 						background: "rgba(255,255,255,0.08)",
 						backdropFilter: "blur(16px)",
@@ -128,12 +132,12 @@ export async function SiteHeader() {
 						boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
 					}}
 				>
-					<span className="relative flex h-2.5 w-2.5">
+					<span className="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
 						<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-						<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-green-500" />
+						<span className="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-green-500" />
 					</span>
 					<span
-						className="text-sm font-bold tracking-wide"
+						className="text-xs sm:text-sm font-bold tracking-wide"
 						style={{ color: "rgba(255,255,255,0.9)" }}
 					>
 						{t("online", { count: online, hotel: hotelName })}