/**
 * Chrono Luxury Story Showcase - Frontend Stylesheet
 * Blue Shades Edition
 */

:root {
	--chrono-blue-dark: #0B1B33;
	--chrono-blue-navy: #0E294B;
	--chrono-blue-royal: #2563EB;
	--chrono-blue-sapphire: #1D4ED8;
	--chrono-blue-light: #60A5FA;
	--chrono-blue-ice: #F0F6FC;
	--chrono-blue-ice-card: #EBF2FA;
	--chrono-blue-slate: #3E5067;
	--chrono-blue-border: #DDE7F2;
	--chrono-font-serif: 'Playfair Display', Georgia, Cambria, 'Times New Roman', serif;
	--chrono-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--chrono-radius: 14px;
	--chrono-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ========================================================
   Container & Wrapper
   ======================================================== */
.chrono-story-wrapper {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--chrono-font-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.chrono-story-wrapper *,
.chrono-story-wrapper *::before,
.chrono-story-wrapper *::after {
	box-sizing: border-box;
}

.chrono-story-container {
	display: flex;
	flex-direction: column;
	row-gap: 36px;
	width: 100%;
}

/* ========================================================
   Section Block (Each of the 3 sections)
   ======================================================== */
.chrono-story-section {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 60px;
	row-gap: 30px;
	padding: 55px;
	border-radius: var(--chrono-radius);
	border: 1px solid var(--chrono-blue-border);
	transition: var(--chrono-transition);
	position: relative;
	overflow: hidden;
}

/* Default Section Backgrounds with Subtle Blue Shade */
.chrono-section-1 {
	background: linear-gradient(135deg, #F0F6FC 0%, #E8F1FB 100%);
	box-shadow: 0 10px 30px -10px rgba(14, 41, 75, 0.05);
}

.chrono-section-2 {
	background: #FFFFFF;
	box-shadow: 0 12px 35px -10px rgba(14, 41, 75, 0.06);
	border-color: #E2EAF4;
}

.chrono-section-3 {
	background: linear-gradient(135deg, #F3F7FB 0%, #EBF2F9 100%);
	box-shadow: 0 10px 30px -10px rgba(14, 41, 75, 0.05);
}

.chrono-single-block {
	background: linear-gradient(135deg, #F0F6FC 0%, #E8F1FB 100%);
	box-shadow: 0 10px 30px -10px rgba(14, 41, 75, 0.05);
}

/* Layout Directions */
.chrono-story-section.layout-text-left {
	flex-direction: row;
}

.chrono-story-section.layout-img-left {
	flex-direction: row-reverse;
}

/* ========================================================
   Text Column
   ======================================================== */
.chrono-text-content {
	flex: 1 1 50%;
	max-width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 2;
}

/* Eyebrow / Subtitle */
.chrono-subtitle {
	font-family: var(--chrono-font-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2.2px;
	text-transform: uppercase;
	color: var(--chrono-blue-royal);
	margin: 0 0 14px 0;
	line-height: 1.4;
}

/* Main Heading / Title */
.chrono-title {
	font-family: var(--chrono-font-serif);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.18;
	color: var(--chrono-blue-dark);
	margin: 0 0 16px 0;
	letter-spacing: -0.5px;
}

/* Accent Horizontal Line */
.chrono-accent-bar {
	width: 48px;
	height: 3px;
	background: linear-gradient(90deg, #1D4ED8 0%, #60A5FA 100%);
	border-radius: 3px;
	margin: 0 0 22px 0;
	flex-shrink: 0;
}

/* Description */
.chrono-description {
	font-family: var(--chrono-font-sans);
	font-size: 15.5px;
	line-height: 1.78;
	color: var(--chrono-blue-slate);
	max-width: 520px;
	margin: 0;
}

.chrono-description p {
	margin: 0 0 16px 0;
}

.chrono-description p:last-child {
	margin-bottom: 0;
}

/* ========================================================
   Image Column
   ======================================================== */
.chrono-image-content {
	flex: 1 1 50%;
	max-width: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}

.chrono-image-wrapper {
	width: 100%;
	border-radius: var(--chrono-radius);
	overflow: hidden;
	position: relative;
	box-shadow: 0 20px 45px -15px rgba(11, 27, 51, 0.14);
	line-height: 0;
	background: #0B1B33;
}

.chrono-image-wrapper img {
	width: 100%;
	height: 380px;
	object-fit: cover;
	object-position: center;
	display: block;
	border-radius: var(--chrono-radius);
	transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}

/* Hover Animations */
.chrono-story-wrapper.hover-zoom .chrono-story-section:hover .chrono-image-wrapper img,
.chrono-single-block:hover .chrono-image-wrapper img {
	transform: scale(1.045);
}

.chrono-story-wrapper.hover-lift .chrono-story-section:hover,
.chrono-single-block:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 45px -12px rgba(14, 41, 75, 0.12);
}

.chrono-story-wrapper.hover-glow .chrono-story-section:hover .chrono-image-wrapper {
	box-shadow: 0 20px 50px -10px rgba(37, 99, 235, 0.28);
}

/* ========================================================
   Responsive Media Queries
   ======================================================== */

/* Tablet (Max 1024px) */
@media (max-width: 1024px) {
	.chrono-story-section {
		padding: 40px 35px;
		column-gap: 40px;
	}

	.chrono-title {
		font-size: 36px;
	}

	.chrono-image-wrapper img {
		height: 320px;
	}

	.chrono-description {
		font-size: 15px;
	}
}

/* Mobile Devices (Max 767px) */
@media (max-width: 767px) {
	.chrono-story-container {
		row-gap: 24px;
	}

	.chrono-story-section {
		flex-direction: column !important;
		padding: 32px 24px;
		row-gap: 28px;
		border-radius: 12px;
	}

	/* Keep consistent order on mobile (Text on top, Image below or vice versa) */
	.chrono-story-section.layout-text-left .chrono-text-content {
		order: 1;
	}
	.chrono-story-section.layout-text-left .chrono-image-content {
		order: 2;
	}

	.chrono-story-section.layout-img-left .chrono-image-content {
		order: 2;
	}
	.chrono-story-section.layout-img-left .chrono-text-content {
		order: 1;
	}

	.chrono-text-content,
	.chrono-image-content {
		flex: 1 1 100%;
		max-width: 100%;
		width: 100%;
	}

	.chrono-title {
		font-size: 29px;
		margin-bottom: 12px;
	}

	.chrono-subtitle {
		font-size: 12px;
		letter-spacing: 1.8px;
		margin-bottom: 10px;
	}

	.chrono-accent-bar {
		margin-bottom: 18px;
		width: 42px;
		height: 2.5px;
	}

	.chrono-description {
		font-size: 14.5px;
		line-height: 1.7;
	}

	.chrono-image-wrapper img {
		height: 260px;
	}
}

/* Small Phones (Max 480px) */
@media (max-width: 480px) {
	.chrono-story-section {
		padding: 26px 18px;
		row-gap: 22px;
	}

	.chrono-title {
		font-size: 26px;
	}

	.chrono-image-wrapper img {
		height: 220px;
	}
}