/* LNTA Experience Grid Style — replaces the 3D coverflow trip carousel
   in the "Every Visit Becomes an Experience" section with a clean
   static grid, matching the offline reference's .experience-grid
   design. Scoped to specific Elementor element IDs for this one
   section, so nothing else on the site is affected. */

/* Remove the orange full-bleed background + wave dividers that wrapped
   the carousel — the offline reference's equivalent section sits on
   plain white. */
.elementor-element-e795f59 {
	background-color: #ffffff !important;
	background-image: none !important;
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}
.elementor-element-e795f59 .elementor-shape {
	display: none !important;
}

/* Hide the original carousel — its data has already been read once by
   experience.js and re-rendered into .lnta-exp-grid below it. */
.elementor-element-d8e371d {
	display: none !important;
}

.lnta-exp-grid {
	/* The grid's parent (.e-con-inner) is an Elementor flex container.
	   Without an explicit width, this new element defaulted to its
	   min-content flex-item size (~100px) before grid-template-columns
	   had anything real to divide up, so every tile resolved to 0x0. */
	width: 100% !important;
	flex: 1 1 100% !important;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	max-width: 1200px;
	/* No top margin here — the heading widget above (.tourmsectiontitle)
	   already carries ~49px of its own trailing space, same as the
	   "Key Destinations" and "News & Articles" sections that reuse the
	   same widget. Adding margin here on top of that stacked an extra
	   32px gap that made this section's heading-to-content spacing
	   visibly bigger than every other section on the page. */
	margin: 0 auto;
	padding: 0 1rem;
}
.lnta-exp-tile {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: 14px;
	overflow: hidden;
	color: #ffffff;
	text-decoration: none !important;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.25s ease;
}
.lnta-exp-tile.is-revealed,
.lnta-exp-grid.is-revealed-all .lnta-exp-tile {
	opacity: 1;
	transform: translateY(0);
}
.lnta-exp-tile:hover {
	box-shadow: 0 24px 48px rgba(15, 47, 15, 0.25);
}
.lnta-exp-tile__media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #0f2f0f;
	transition: transform 0.5s ease;
}
.lnta-exp-tile:hover .lnta-exp-tile__media {
	transform: scale(1.08);
}
.lnta-exp-tile::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(15, 47, 15, 0.88) 0%, rgba(15, 47, 15, 0.15) 55%, rgba(15, 47, 15, 0.35) 100%);
}
.lnta-exp-tile__content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.25rem;
	z-index: 1;
}
.lnta-exp-tile__content h3 {
	color: #ffffff !important;
	font-size: 1.15rem !important;
	margin: 0 0 0.2rem !important;
	line-height: 1.3;
}
.lnta-exp-tile__content p {
	margin: 0 0 0.6rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
}
.lnta-exp-tile__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-weight: 600;
	font-size: 0.85rem;
	color: #f4c15c;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.lnta-exp-tile:hover .lnta-exp-tile__cta {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 900px) {
	.lnta-exp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.lnta-exp-grid {
		grid-template-columns: 1fr;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lnta-exp-tile {
		opacity: 1;
		transform: none;
		transition: none;
	}
}