/* ============================================================
   SHIVA TOURS — TOUR PACKAGES
   PREMIUM PAGE STYLES
============================================================ */

.shiva-tour-packages-page {
	--tour-green: #0d382f;
	--tour-green-dark: #082a24;
	--tour-cream: #f3efe5;
	--tour-gold: #d7ad59;
	--tour-white: #ffffff;
	--tour-text: #24332f;

	background: var(--tour-cream);
	color: var(--tour-text);
	overflow: hidden;
}


/* ============================================================
   CONTAINER
============================================================ */

.tour-packages-container {
	width: min(1380px, calc(100% - 80px));
	margin: 0 auto;
}


/* ============================================================
   LABEL
============================================================ */

.tour-packages-label {
	display: flex;
	align-items: center;
	gap: 16px;

	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;

	color: var(--tour-gold);
}


/* ============================================================
   HERO
============================================================ */

.tour-packages-hero {
	position: relative;
	min-height: 620px;
	height: min(78vh, 760px);

	display: flex;
	align-items: center;

	overflow: hidden;
	background: #183d36;
}


.tour-packages-hero-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}


.tour-packages-hero-media img {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;
	object-position: center;

	transform: scale(1.02);

	animation: tourHeroZoom 14s ease-in-out infinite alternate;
}


@keyframes tourHeroZoom {
	from {
		transform: scale(1.02);
	}

	to {
		transform: scale(1.08);
	}
}


.tour-packages-hero-overlay {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			90deg,
			rgba(4, 31, 27, 0.92) 0%,
			rgba(4, 31, 27, 0.72) 36%,
			rgba(4, 31, 27, 0.20) 72%,
			rgba(4, 31, 27, 0.05) 100%
		);
}


.tour-packages-hero-content {
	position: relative;
	z-index: 2;

	width: min(700px, calc(100% - 80px));
	margin-left: max(40px, calc((100% - 1380px) / 2));

	color: var(--tour-white);

	animation: tourHeroContent 1.1s ease both;
}


@keyframes tourHeroContent {
	from {
		opacity: 0;
		transform: translateY(35px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


.tour-packages-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;

	margin-bottom: 24px;

	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 4px;
}


.tour-packages-eyebrow span {
	width: 42px;
	height: 1px;
	background: var(--tour-gold);
}


.tour-packages-hero h1 {
	margin: 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(58px, 6.3vw, 100px);
	font-weight: 400;
	line-height: 0.94;
	letter-spacing: -3px;
}


.tour-packages-hero h1 span {
	color: var(--tour-gold);
	font-style: italic;
}


.tour-packages-hero p {
	max-width: 610px;

	margin: 30px 0 34px;

	font-family: Arial, sans-serif;
	font-size: 18px;
	line-height: 1.75;

	color: rgba(255, 255, 255, 0.82);
}


.tour-packages-hero-button {
	display: inline-flex;
	align-items: center;
	gap: 22px;

	padding: 16px 20px 16px 24px;

	border: 1px solid rgba(215, 173, 89, 0.7);

	color: #fff;
	text-decoration: none;

	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;

	transition:
		background 0.35s ease,
		color 0.35s ease,
		transform 0.35s ease;
}


.tour-packages-hero-button span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	border: 1px solid rgba(255,255,255,0.4);
	border-radius: 50%;
}


.tour-packages-hero-button:hover {
	background: var(--tour-gold);
	color: #152f2a;
	transform: translateY(-3px);
}


.tour-packages-hero-scroll {
	position: absolute;
	z-index: 3;

	right: 42px;
	bottom: 30px;

	display: flex;
	align-items: center;
	gap: 15px;

	color: rgba(255,255,255,0.75);

	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;
}


.tour-packages-hero-scroll i {
	display: block;

	width: 1px;
	height: 55px;

	background: var(--tour-gold);

	animation: scrollLine 1.8s ease-in-out infinite;
}


@keyframes scrollLine {
	0%,
	100% {
		transform: scaleY(0.55);
		transform-origin: top;
	}

	50% {
		transform: scaleY(1);
		transform-origin: top;
	}
}


/* ============================================================
   INTRO
============================================================ */

.tour-packages-intro {
	padding: 130px 0 140px;
}


.tour-packages-intro-grid {
	display: grid;
	grid-template-columns: 80px 1.1fr 0.9fr;
	gap: 60px;
	align-items: start;
}


.tour-packages-section-number {
	font-family: Georgia, serif;
	font-size: 14px;
	color: #a68b56;
	padding-top: 8px;
}


.tour-packages-intro-heading h2 {
	margin: 20px 0 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(48px, 5vw, 76px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -2px;
}


.tour-packages-intro-heading h2 span {
	color: var(--tour-gold);
	font-style: italic;
}


.tour-packages-intro-copy {
	padding-top: 55px;
}


.tour-packages-intro-copy p {
	margin: 0 0 24px;

	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: #65706d;
}


.tour-packages-intro-copy .tour-packages-lead {
	font-family: Georgia, serif;
	font-size: 23px;
	line-height: 1.55;
	color: #30423d;
}


/* ============================================================
   DESTINATIONS
============================================================ */

.tour-packages-destinations {
	padding: 125px 0 150px;

	background: #e9e4d8;
}


.tour-packages-section-header {
	max-width: 750px;
	margin-bottom: 65px;
}


.tour-packages-section-header h2 {
	margin: 22px 0 22px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(48px, 5vw, 78px);
	font-weight: 400;
	line-height: 0.98;
	letter-spacing: -2px;
}


.tour-packages-section-header h2 span {
	color: var(--tour-gold);
	font-style: italic;
}


.tour-packages-section-header p {
	max-width: 600px;

	margin: 0;

	font-family: Arial, sans-serif;
	font-size: 17px;
	line-height: 1.7;

	color: #69726e;
}


/* ============================================================
   DESTINATION CARDS
============================================================ */

.tour-destination-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}


.tour-destination-card {
	position: relative;

	display: block;

	min-height: 590px;

	overflow: hidden;

	text-decoration: none;

	background: #183c35;

	isolation: isolate;

	box-shadow:
		0 15px 35px rgba(20, 40, 35, 0.10);

	transition:
		transform 0.55s cubic-bezier(.2,.7,.2,1),
		box-shadow 0.55s ease;
}


.tour-destination-card:hover {
	transform: translateY(-12px);

	box-shadow:
		0 30px 60px rgba(20, 40, 35, 0.20);
}


/* IMAGE */

.tour-destination-image {
	position: absolute;
	inset: 0;

	overflow: hidden;
}


.tour-destination-image img {
	width: 100%;
	height: 100%;

	display: block;

	object-fit: cover;

	transform: scale(1.01);

	transition:
		transform 1s cubic-bezier(.2,.7,.2,1);
}


.tour-destination-card:hover
.tour-destination-image img {
	transform: scale(1.09);
}


/* DARK GRADIENT */

.tour-destination-overlay {
	position: absolute;
	inset: 0;

	z-index: 1;

	background:
		linear-gradient(
			180deg,
			rgba(4, 27, 23, 0.08) 0%,
			rgba(4, 27, 23, 0.12) 28%,
			rgba(4, 27, 23, 0.70) 65%,
			rgba(4, 27, 23, 0.94) 100%
		);

	transition:
		background 0.6s ease;
}


.tour-destination-card:hover
.tour-destination-overlay {
	background:
		linear-gradient(
			180deg,
			rgba(4, 27, 23, 0.12) 0%,
			rgba(4, 27, 23, 0.18) 25%,
			rgba(4, 27, 23, 0.75) 62%,
			rgba(4, 27, 23, 0.97) 100%
		);
}


/* NUMBER */

.tour-destination-number {
	position: absolute;
	z-index: 3;

	top: 28px;
	right: 28px;

	font-family: Georgia, serif;
	font-size: 16px;

	color: rgba(255,255,255,0.75);

	letter-spacing: 2px;
}


/* CARD CONTENT */

.tour-destination-content {
	position: absolute;
	z-index: 4;

	left: 32px;
	right: 32px;
	bottom: 32px;

	color: #fff;

	transform: translateY(10px);

	transition:
		transform 0.55s cubic-bezier(.2,.7,.2,1);
}


.tour-destination-card:hover
.tour-destination-content {
	transform: translateY(0);
}


.tour-destination-tag {
	margin-bottom: 13px;

	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 3px;

	color: var(--tour-gold);
}


.tour-destination-content h3 {
	margin: 0 0 15px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(42px, 4vw, 58px);
	font-weight: 400;
	line-height: 1;

	color: #fff;
}


.tour-destination-content p {
	max-width: 390px;

	margin: 0 0 24px;

	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.65;

	color: rgba(255,255,255,0.76);
}


.tour-destination-link {
	display: inline-flex;
	align-items: center;
	gap: 15px;

	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;

	color: #fff;
}


.tour-destination-link b {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	border: 1px solid rgba(255,255,255,0.45);
	border-radius: 50%;

	font-size: 15px;
	font-weight: 400;

	transition:
		background 0.3s ease,
		color 0.3s ease,
		transform 0.3s ease;
}


.tour-destination-card:hover
.tour-destination-link b {
	background: var(--tour-gold);
	color: #16352e;
	transform: translateX(5px);
}


/* ============================================================
   SHIVA EXPERIENCE
============================================================ */

.tour-shiva-experience {
	padding: 135px 0 145px;

	background: var(--tour-green);
	color: #fff;
}


.tour-experience-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 100px;
}


.tour-experience-heading {
	position: sticky;
	top: 100px;
	align-self: start;
}


.tour-experience-heading h2 {
	margin: 28px 0 18px;

	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(52px, 5vw, 78px);
	font-weight: 400;
	line-height: 0.96;
	letter-spacing: -2px;
}


.tour-experience-heading > p {
	margin: 0;

	font-family: Georgia, serif;
	font-size: 22px;
	font-style: italic;

	color: var(--tour-gold);
}


.tour-experience-items {
	border-top: 1px solid rgba(255,255,255,0.15);
}


.tour-experience-item {
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 25px;

	padding: 34px 0;

	border-bottom: 1px solid rgba(255,255,255,0.15);

	transition:
		padding-left 0.35s ease;
}


.tour-experience-item:hover {
	padding-left: 12px;
}


.tour-experience-item > span {
	font-family: Georgia, serif;
	font-size: 14px;
	color: var(--tour-gold);
}


.tour-experience-item h3 {
	margin: 0 0 10px;

	font-family: Georgia, serif;
	font-size: 27px;
	font-weight: 400;
}


.tour-experience-item p {
	max-width: 500px;

	margin: 0;

	font-family: Arial, sans-serif;
	font-size: 14px;
	line-height: 1.7;

	color: rgba(255,255,255,0.65);
}


/* ============================================================
   CUSTOM TRIP
============================================================ */

.tour-custom-trip {
	padding: 150px 30px;

	background:
		linear-gradient(
			135deg,
			#e8e2d5 0%,
			#f4f0e7 100%
		);

	text-align: center;
}


.tour-custom-trip-inner {
	max-width: 800px;
	margin: 0 auto;
}


.tour-custom-trip-inner .tour-packages-label {
	justify-content: center;
}


.tour-custom-trip h2 {
	margin: 25px 0;

	font-family: Georgia, serif;
	font-size: clamp(48px, 5vw, 76px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -2px;
}


.tour-custom-trip p {
	max-width: 650px;

	margin: 0 auto 35px;

	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 1.8;

	color: #66716d;
}


.tour-custom-button {
	display: inline-flex;
	align-items: center;
	gap: 20px;

	padding: 17px 20px 17px 25px;

	background: var(--tour-green);

	color: #fff;

	text-decoration: none;

	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;

	transition:
		transform 0.35s ease,
		background 0.35s ease;
}


.tour-custom-button span {
	font-size: 18px;
}


.tour-custom-button:hover {
	transform: translateY(-4px);
	background: #155044;
}


/* ============================================================
   FINAL CTA
============================================================ */

.tour-packages-final {
	padding: 135px 30px 150px;

	background: var(--tour-green-dark);

	text-align: center;
	color: #fff;
}


.tour-packages-final-inner {
	max-width: 900px;
	margin: 0 auto;
}


.tour-packages-final-inner .tour-packages-label {
	justify-content: center;
}


.tour-packages-final h2 {
	margin: 25px 0 45px;

	font-family: Georgia, serif;
	font-size: clamp(55px, 6vw, 90px);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -3px;
}


.tour-packages-final h2 span {
	color: var(--tour-gold);
	font-style: italic;
}


.tour-final-buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}


.tour-final-primary,
.tour-final-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 55px;

	padding: 0 24px;

	font-family: Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;

	text-decoration: none;

	transition:
		transform 0.35s ease,
		background 0.35s ease,
		color 0.35s ease;
}


.tour-final-primary {
	gap: 18px;

	background: var(--tour-gold);
	color: #17362f;
}


.tour-final-primary span {
	font-size: 18px;
}


.tour-final-primary:hover {
	transform: translateY(-4px);
	background: #e5c477;
}


.tour-final-secondary {
	border: 1px solid rgba(255,255,255,0.3);

	color: #fff;
}


.tour-final-secondary:hover {
	transform: translateY(-4px);
	background: rgba(255,255,255,0.08);
}


/* ============================================================
   SUBTLE SCROLL REVEAL
   DOES NOT HIDE CONTENT IF JS FAILS
============================================================ */

@media (prefers-reduced-motion: no-preference) {

	.tour-destination-card {
		animation: cardAppear 0.8s ease both;
	}

	.tour-destination-card:nth-child(1) {
		animation-delay: 0.08s;
	}

	.tour-destination-card:nth-child(2) {
		animation-delay: 0.18s;
	}

	.tour-destination-card:nth-child(3) {
		animation-delay: 0.28s;
	}

	.tour-experience-item {
		animation: experienceAppear 0.7s ease both;
	}

	.tour-experience-item:nth-child(1) {
		animation-delay: 0.05s;
	}

	.tour-experience-item:nth-child(2) {
		animation-delay: 0.15s;
	}

	.tour-experience-item:nth-child(3) {
		animation-delay: 0.25s;
	}

	.tour-experience-item:nth-child(4) {
		animation-delay: 0.35s;
	}
}


@keyframes cardAppear {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


@keyframes experienceAppear {
	from {
		opacity: 0;
		transform: translateX(25px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}


/* ============================================================
   RESPONSIVE — TABLET
============================================================ */

@media (max-width: 1100px) {

	.tour-packages-container {
		width: min(100% - 50px, 900px);
	}

	.tour-packages-intro-grid {
		grid-template-columns: 50px 1fr;
		gap: 30px;
	}

	.tour-packages-intro-copy {
		grid-column: 2;
		padding-top: 0;
	}

	.tour-destination-list {
		grid-template-columns: 1fr;
		max-width: 650px;
		margin: 0 auto;
	}

	.tour-destination-card {
		min-height: 560px;
	}

	.tour-experience-grid {
		grid-template-columns: 1fr;
		gap: 70px;
	}

	.tour-experience-heading {
		position: static;
	}

}


/* ============================================================
   RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 700px) {

	.tour-packages-container {
		width: calc(100% - 36px);
	}

	.tour-packages-hero {
		min-height: 620px;
		height: 78vh;
	}

	.tour-packages-hero-content {
		width: calc(100% - 36px);
		margin: 0 18px;
	}

	.tour-packages-hero h1 {
		font-size: clamp(48px, 14vw, 68px);
		letter-spacing: -2px;
	}

	.tour-packages-hero p {
		font-size: 15px;
		line-height: 1.65;
	}

	.tour-packages-hero-scroll {
		display: none;
	}

	.tour-packages-intro {
		padding: 90px 0;
	}

	.tour-packages-intro-grid {
		display: block;
	}

	.tour-packages-section-number {
		margin-bottom: 25px;
	}

	.tour-packages-intro-heading h2,
	.tour-packages-section-header h2 {
		font-size: 48px;
	}

	.tour-packages-intro-copy {
		margin-top: 35px;
	}

	.tour-packages-intro-copy .tour-packages-lead {
		font-size: 20px;
	}

	.tour-packages-destinations {
		padding: 90px 0;
	}

	.tour-destination-card {
		min-height: 520px;
	}

	.tour-destination-content {
		left: 24px;
		right: 24px;
		bottom: 25px;
	}

	.tour-destination-content h3 {
		font-size: 44px;
	}

	.tour-shiva-experience {
		padding: 90px 0;
	}

	.tour-experience-heading h2 {
		font-size: 50px;
	}

	.tour-custom-trip {
		padding: 100px 20px;
	}

	.tour-custom-trip h2 {
		font-size: 48px;
	}

	.tour-packages-final {
		padding: 100px 20px;
	}

	.tour-packages-final h2 {
		font-size: 54px;
	}

	.tour-final-buttons {
		flex-direction: column;
	}

	.tour-final-primary,
	.tour-final-secondary {
		width: 100%;
		max-width: 320px;
	}

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

@media (prefers-reduced-motion: reduce) {

	.tour-packages-hero-media img,
	.tour-destination-card,
	.tour-experience-item {
		animation: none !important;
		transition: none !important;
	}

	.tour-destination-card:hover {
		transform: none;
	}

}