/* =========================================================
   VANAFLY HOMEPAGE STORIES
   ========================================================= */


/* =========================================================
   SECTION
   ========================================================= */

.home .vf-stories {
	position: relative;

	width: 100%;

	padding-top: 20px !important;
	padding-bottom: 70px !important;

	background: #ffffff;
}


/* =========================================================
   DESKTOP CONTAINER
   Match Popular Destinations width.
   ========================================================= */

.home .vf-stories > .container {
	width: 100% !important;
	max-width: 1170px !important;

	margin-left: auto !important;
	margin-right: auto !important;

	padding-left: 0 !important;
	padding-right: 0 !important;
}


.home .vf-stories > .container > .row {
	margin-left: -15px !important;
	margin-right: -15px !important;
}


/* =========================================================
   HEADER
   ========================================================= */

.home
.vf-stories
> .container
> .row
> .col-md-12 {
	padding-left: 15px !important;
	padding-right: 15px !important;
}


.home .vf-stories .vf-stories__header {
	display: flex !important;

	align-items: center !important;
	justify-content: space-between !important;

	width: 100% !important;

	gap: 24px;

	margin: 0 0 20px !important;
	padding: 0 !important;
}


.home .vf-stories .vf-stories__title {
	margin: 0 !important;
	padding: 0 !important;

	color: #3d3d3d !important;

	font-size: 32px !important;
	line-height: 38px !important;
	font-weight: 700 !important;
}


/* =========================================================
   SEE ALL
   ========================================================= */

.home .vf-stories .vf-stories__see-all {
	display: inline-flex !important;

	align-items: center !important;
	justify-content: center !important;

	min-height: 38px;

	margin: 0 0 0 auto !important;
	padding: 7px 17px !important;

	border: 1px solid #3d3d3d !important;
	border-radius: 5px !important;

	background: #ffffff !important;

	color: #303030 !important;

	font-size: 14px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;

	text-decoration: none !important;

	white-space: nowrap;

	transition:
		border-color 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}


.home .vf-stories .vf-stories__see-all:hover,
.home .vf-stories .vf-stories__see-all:focus {
	border-color: #128add !important;

	background: #f7fbfe !important;

	color: #128add !important;
}


/* =========================================================
   COLUMNS
   ========================================================= */

.home .vf-stories .vf-stories__featured,
.home .vf-stories .vf-stories__side {
	box-sizing: border-box !important;

	margin-top: 0 !important;
	padding-top: 0 !important;

	padding-left: 15px !important;
	padding-right: 15px !important;
}


/* =========================================================
   RESET LEGACY CARD STYLING
   ========================================================= */

.home .vf-stories .card,
.home .vf-stories .card-body,
.home .vf-stories .post-card__body-meta {
	margin: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;

	box-shadow: none !important;
}


.home .vf-stories .card {
	width: 100% !important;

	padding: 0 !important;
}


.home .vf-stories .card-body {
	padding: 0 !important;
}


/* =========================================================
   FEATURED STORY
   ========================================================= */

.home
.vf-stories
.vf-stories__featured
.card-img-top {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;

	height: 350px !important;
	min-height: 350px !important;
	max-height: 350px !important;

	aspect-ratio: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 14px !important;

	object-fit: cover !important;
	object-position: center center !important;
}


.home
.vf-stories
.vf-stories__featured
.card-body {
	padding-top: 14px !important;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.home .vf-stories .tag-line,
.home .vf-stories p.tag-line {
	display: block !important;

	width: auto !important;
	height: auto !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 0 !important;

	background: transparent !important;
	background-color: transparent !important;

	box-shadow: none !important;

	color: #128add !important;

	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;

	text-align: left !important;
	text-transform: uppercase !important;
}


/* =========================================================
   ARTICLE TITLES
   ========================================================= */

.home .vf-stories .card-title,
.home .vf-stories a .card-title,
.home .vf-stories .card-title * {
	color: #303030 !important;

	background: transparent !important;

	text-decoration: none !important;
}


.home
.vf-stories
.vf-stories__featured
.card-title {
	margin: 7px 0 8px !important;

	font-size: 17px !important;
	line-height: 1.45 !important;
	font-weight: 700 !important;
}


/* =========================================================
   FEATURED EXCERPT
   ========================================================= */

.home .vf-stories .post_excerpt {
	display: block !important;

	margin: 0 0 14px !important;

	color: #707070 !important;

	font-size: 16px !important;
	line-height: 1.6 !important;
	font-weight: 400 !important;
}


/* =========================================================
   RIGHT COLUMN
   Stretch to the height of the featured card.
   ========================================================= */

.home .vf-stories .vf-stories__side {
	display: flex !important;
	flex-direction: column !important;

	align-self: stretch !important;
}


.home .vf-stories .tiled-posts-container {
	display: flex !important;

	flex: 1 1 auto !important;
	flex-direction: column !important;

	justify-content: space-between !important;

	width: 100% !important;
	height: 100% !important;

	gap: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	background: transparent !important;

	box-shadow: none !important;
}


/* =========================================================
   REMOVE ALL DIVIDER / GREY LINES
   ========================================================= */

.home .vf-stories .tiled-posts-container > a,
.home .vf-stories .tiled-posts-container > a:last-child {
	display: block !important;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	background: transparent !important;

	color: inherit !important;

	text-decoration: none !important;

	box-shadow: none !important;
}


.home .vf-stories .tiled-posts-container::before,
.home .vf-stories .tiled-posts-container::after,
.home .vf-stories .tiled-posts-container > a::before,
.home .vf-stories .tiled-posts-container > a::after,
.home .vf-stories .tiled-posts-container .card::before,
.home .vf-stories .tiled-posts-container .card::after,
.home .vf-stories .tiled-posts-container .card-body::before,
.home .vf-stories .tiled-posts-container .card-body::after,
.home .vf-stories .post-card__body-meta::before,
.home .vf-stories .post-card__body-meta::after {
	content: none !important;

	display: none !important;

	border: 0 !important;

	box-shadow: none !important;
}


/* =========================================================
   RIGHT-SIDE ARTICLE
   ========================================================= */

.home
.vf-stories
.tiled-posts-container
.card {
	display: grid !important;

	grid-template-columns:
		112px
		minmax(0, 1fr) !important;

	align-items: center !important;

	column-gap: 24px !important;

	width: 100% !important;

	min-height: 112px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;

	box-sizing: border-box !important;
}


/* =========================================================
   RIGHT-SIDE THUMBNAILS
   ========================================================= */

.home
.vf-stories
.tiled-posts-container
.card-img-top {
	display: block !important;

	width: 112px !important;
	min-width: 112px !important;
	max-width: 112px !important;

	height: 112px !important;
	min-height: 112px !important;
	max-height: 112px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 10px !important;

	object-fit: cover !important;
	object-position: center center !important;
}


/* =========================================================
   RIGHT-SIDE TEXT
   ========================================================= */

.home
.vf-stories
.tiled-posts-container
.card-body {
	display: flex !important;

	flex-direction: column !important;
	justify-content: center !important;

	min-width: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
}


.home
.vf-stories
.tiled-posts-container
.tag-line {
	margin: 0 0 6px !important;

	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
}


.home
.vf-stories
.tiled-posts-container
.card-title {
	margin: 0 0 9px !important;

	color: #303030 !important;

	font-size: 16px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
}


/* =========================================================
   AUTHOR / READ TIME
   ========================================================= */

.home .vf-stories .post-card__body-meta {
	padding: 0 !important;
}


.home .vf-stories .post-card-meta-group {
	display: flex !important;

	align-items: center !important;

	gap: 8px !important;

	margin: 0 !important;
	padding: 0 !important;

	color: #3d3d3d !important;

	font-size: 14px !important;
	line-height: 1.35 !important;
	font-weight: 400 !important;
}


.home .vf-stories .post-card-meta-group-separator {
	color: #8b949c !important;
}


/* =========================================================
   AUTHOR AVATAR
   ========================================================= */

.home .vf-stories .vf-story-author-avatar {
	display: flex !important;

	align-items: center !important;
	justify-content: center !important;

	width: 32px !important;
	min-width: 32px !important;
	max-width: 32px !important;

	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;

	flex: 0 0 32px !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	background: transparent 50% !important;

	background: #ffffff !important;

	box-sizing: border-box !important;

	overflow: hidden !important;
}


.home .vf-stories .vf-story-author-avatar img,
.home
.vf-stories
.vf-story-author-avatar
.author-avatar {
	display: block !important;

	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;

	height: 100% !important;
	min-height: 100% !important;
	max-height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	border: 0 !important;
	border-radius: 50% !important;

	object-fit: cover !important;
	object-position: center center !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

	.home .vf-stories {
		padding-top: 20px !important;
		padding-bottom: 60px !important;
	}


	.home .vf-stories > .container {
		max-width: 100% !important;

		padding-left: 15px !important;
		padding-right: 15px !important;
	}


	.home .vf-stories > .container > .row {
		margin-left: -15px !important;
		margin-right: -15px !important;
	}


	.home .vf-stories .vf-stories__title {
		font-size: 25px !important;
		line-height: 31px !important;
	}


	.home .vf-stories .vf-stories__featured .card-img-top {
		width: 100% !important;

		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;

		aspect-ratio: 4 / 3 !important;

		object-fit: cover !important;
	}


	.home .vf-stories .vf-stories__side {
		display: block !important;

		margin-top: 28px !important;
	}


	.home .vf-stories .tiled-posts-container {
		display: flex !important;

		height: auto !important;

		gap: 18px !important;
	}


	.home
	.vf-stories
	.tiled-posts-container
	.card {
		grid-template-columns:
			100px
			minmax(0, 1fr) !important;

		column-gap: 18px !important;

		min-height: 100px !important;
	}


	.home
	.vf-stories
	.tiled-posts-container
	.card-img-top {
		width: 100px !important;
		min-width: 100px !important;
		max-width: 100px !important;

		height: 100px !important;
		min-height: 100px !important;
		max-height: 100px !important;
	}

}


/* =========================================================
   PHONE
   ========================================================= */

@media (max-width: 575px) {

	.home .vf-stories {
		padding-top: 20px !important;
		padding-bottom: 55px !important;
	}


	.home .vf-stories .vf-stories__header {
		margin-bottom: 18px !important;
	}


	.home .vf-stories .vf-stories__see-all {
		min-height: 36px;

		padding: 6px 14px !important;

		font-size: 14px !important;
	}


	.home .vf-stories .vf-stories__featured .card-title {
		font-size: 16px !important;
	}


	.home .vf-stories .post_excerpt {
		font-size: 15px !important;
	}


	.home .vf-stories .tiled-posts-container {
		gap: 16px !important;
	}


	.home
	.vf-stories
	.tiled-posts-container
	.card {
		grid-template-columns:
			92px
			minmax(0, 1fr) !important;

		column-gap: 14px !important;

		min-height: 92px !important;
	}


	.home
	.vf-stories
	.tiled-posts-container
	.card-img-top {
		width: 92px !important;
		min-width: 92px !important;
		max-width: 92px !important;

		height: 92px !important;
		min-height: 92px !important;
		max-height: 92px !important;

		border-radius: 10px !important;
	}


	.home
	.vf-stories
	.tiled-posts-container
	.card-title {
		font-size: 16px !important;
		line-height: 1.4 !important;
	}

}

/* Reduce the featured story image height by 25% on tablet portrait. */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
	.home .vf-stories .vf-stories__featured .card-img-top {
		aspect-ratio: 16 / 9 !important;
	}
}

/* =========================================================
HALF-SCREEN / TABLET STORIES ALIGNMENT
========================================================= */

@media (min-width: 992px) and (max-width: 1199px) and (orientation: landscape) {

	.home .vf-stories > .container {
		width: 960px !important;
		max-width: calc(100% - 30px) !important;

		margin-left: auto !important;
		margin-right: auto !important;
	}

}

@media (min-width: 1200px) and (max-width: 1366px) and (orientation: landscape) {

	.home .vf-stories > .container {
		width: 1110px !important;
		max-width: calc(100% - 30px) !important;

		margin-left: auto !important;
		margin-right: auto !important;
	}

}

@media (min-width: 768px) and (max-width: 991px) {

	.home .vf-stories {
		width: 720px;
		max-width: calc(100% - 30px);

		margin-left: auto !important;
		margin-right: auto !important;

		box-sizing: border-box;
	}

}

/* =========================================================
   STABLE DELAYED SCROLL PAINTING
   Keep the story cards in the normal paint path. This avoids
   Chromium/LiteSpeed leaving an unpainted viewport strip when
   the page sits idle before the first scroll.
   ========================================================= */

.home .vf-stories,
.home .vf-stories > .container,
.home .vf-stories > .container > .row,
.home .vf-stories .vf-stories__featured,
.home .vf-stories .vf-stories__side,
.home .vf-stories .tiled-posts-container,
.home .vf-stories .card,
.home .vf-stories .card-body {
	content-visibility: visible !important;
	contain: none !important;
	will-change: auto !important;
	backface-visibility: visible !important;
	-webkit-backface-visibility: visible !important;
}

.home .vf-stories .vf-stories__featured,
.home .vf-stories .vf-stories__side,
.home .vf-stories .tiled-posts-container,
.home .vf-stories .card,
.home .vf-stories .card-body {
	transform: none !important;
	-webkit-transform: none !important;
}

.home .vf-stories img {
	display: block;
	content-visibility: visible !important;
	visibility: visible !important;
	opacity: 1 !important;
	-webkit-transform: none !important;
	transform: none !important;
}

/*
 * Keep the complete component in one stable stacking context. Vivaldi can
 * otherwise retain a stale white compositor tile across the two story columns
 * after an idle tab is scrolled back into view.
 */
.home .vf-stories {
	isolation: isolate;
	overflow: visible !important;
}

.home .vf-stories .vf-stories__header,
.home .vf-stories .vf-stories__featured > a,
.home .vf-stories .tiled-posts-container > a {
	position: relative;
	z-index: 0;
	visibility: visible !important;
	opacity: 1 !important;
}

/* =========================================================
   PHONE SPACING — PORTRAIT AND LANDSCAPE
   ========================================================= */

@media (max-width: 767px),
	(orientation: landscape) and (max-width: 932px) and (max-height: 500px) {
	.home .vf-stories {
		padding-top: 48px !important;
		padding-bottom: 32px !important;
	}

	.home .vf-stories > .container {
		width: calc(100% - 32px) !important;
		max-width: none !important;
		padding-right: 0 !important;
		padding-left: 0 !important;
	}

	.home .vf-stories .vf-stories__header {
		gap: 16px;
		margin-bottom: 16px !important;
	}

	.home .vf-stories .vf-stories__see-all {
		min-height: 44px;
	}

	.home .vf-stories .vf-stories__side {
		margin-top: 24px !important;
	}

	.home .vf-stories .tiled-posts-container {
		gap: 16px !important;
	}
}

@media (orientation: landscape) and (max-width: 932px) and (max-height: 500px) {
	.home .vf-stories {
		padding-top: 32px !important;
		padding-bottom: 24px !important;
	}

	.home .vf-stories .vf-stories__side {
		margin-top: 20px !important;
	}
}

/* One authoritative homepage section-title scale in every orientation. */
.home .popular-destinations .h2-title,
.home .vf-stories .vf-stories__title,
.home .flights-faq.container.home-faq-section > .faq-row > .vf-home-faq-title {
	font-family: "Poppins", sans-serif !important;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 38px !important;
	letter-spacing: normal !important;
}

@media (max-width: 991px) {
	.home .popular-destinations .h2-title,
	.home .vf-stories .vf-stories__title,
	.home .flights-faq.container.home-faq-section > .faq-row > .vf-home-faq-title {
		font-size: 25px !important;
		line-height: 31px !important;
	}
}