/* LNTA Who We Serve Style — cosmetic overrides for the homepage
   audience cards, matching the offline reference design. Every
   selector targets specific, stable Elementor element IDs for this
   one section, so nothing else on the site is affected. */

/* Matches the font/size/weight/color of the page's other real section
   titles ("Key Destinations", "News & Articles" etc.) — this heading
   doesn't exist in the stored content at all, so without this it would
   just inherit whatever ambient font happened to be in scope at the
   injection point. The clamp() value here must stay identical to
   .sec-title's in lnta-typography-style — that plugin was built after
   this one and reduced every real section title from 48px to 32px
   max, but this hardcoded injected heading was never updated to match
   and kept rendering at the old, larger scale. */
.lnta-wws-heading {
	text-align: center;
	font-family: "Montserrat", sans-serif !important;
	font-size: clamp(1.5rem, 3vw, 2rem) !important;
	font-weight: 700 !important;
	color: #225321 !important;
	margin: 3rem 0 1rem;
}

/* ---- Card containers: cream background, green top accent, modest
   rounded corners instead of the current 47px + harsh dark hover. ---- */
.elementor-element-a1c6469,
.elementor-element-20a0a65,
.elementor-element-40463bd,
.elementor-element-ae38aed {
	background-color: #f7ecd9 !important;
	border: 1px solid #ecdfc0 !important;
	border-top: 4px solid #1c4d1c !important;
	border-radius: 14px !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.elementor-element-a1c6469:hover,
.elementor-element-20a0a65:hover,
.elementor-element-40463bd:hover,
.elementor-element-ae38aed:hover {
	background-color: #f7ecd9 !important;
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(15, 47, 15, 0.12);
}

/* Even columns with real spacing between them — the row currently
   has --gap:0px set by Elementor, so the cards touch edge to edge. */
.elementor-element-026580d > .e-con-inner {
	gap: 1.75rem !important;
}
.elementor-element-a1c6469,
.elementor-element-20a0a65,
.elementor-element-40463bd,
.elementor-element-ae38aed {
	flex: 1 1 0 !important;
	margin-right: 0 !important;
}

/* ---- Card content: left-aligned text (was centered), an emoji icon
   badge (was a 512x512 image squashed into 100x200 — and now matches
   the offline reference's icon choice + hover animation exactly),
   gold eyebrow, and an appended Learn More link. ---- */
.elementor-element-84d192e,
.elementor-element-9d23628,
.elementor-element-3777b64,
.elementor-element-783b6ab {
	text-align: left !important;
}
/* The card titles ("International Tourists" etc.) were Manrope/black
   in the source content — the rest of the page's headings are all
   Montserrat in the brand green. */
.elementor-element-84d192e h5,
.elementor-element-9d23628 h5,
.elementor-element-3777b64 h5,
.elementor-element-783b6ab h5 {
	font-family: "Montserrat", sans-serif !important;
	color: #225321 !important;
}

/* Stretch every level from the card down to the widget container so
   `margin-top: auto` on the Learn More link can push it to the same
   bottom edge on all 4 cards. `height: 100%` alone isn't reliable here
   because it depends on every ancestor already having a resolved
   height — card 1's extra empty <p> in its source markup made its own
   widget wrapper taller than the others, so percentage heights through
   that chain landed inconsistently. Cascading flex:1 + min-height:0 at
   each level fixes that regardless of how much content any card has. */
.elementor-element-84d192e,
.elementor-element-9d23628,
.elementor-element-3777b64,
.elementor-element-783b6ab {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
}
.elementor-element-84d192e .elementor-widget-container,
.elementor-element-9d23628 .elementor-widget-container,
.elementor-element-3777b64 .elementor-widget-container,
.elementor-element-783b6ab .elementor-widget-container {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-height: 0 !important;
	box-sizing: border-box;
}
/* Card 1's icon is uniquely wrapped in its own <p> in the source markup
   (the other 3 cards don't have this) — reset its default paragraph
   margin so it doesn't add extra space under the icon. The <p> is a
   child of .elementor-widget-container, not of the outer
   .elementor-element-84d192e wrapper — the earlier selector skipped
   that level and never actually matched anything, which is why this
   card kept a visibly bigger gap than the other three. */
.elementor-element-84d192e .elementor-widget-container > p:first-child {
	margin: 0 !important;
}

.lnta-wws-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	font-size: 1.7rem;
	line-height: 1;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(15, 47, 15, 0.1);
	margin: 0 0 0.3rem;
	transition: box-shadow 0.3s ease;
}
/* The real culprit behind the large icon-to-text gap: the source
   content has two <br> tags between the icon and the heading on all
   4 cards, each adding a full line-height of empty space on top of
   any margin. */
.elementor-element-84d192e .elementor-widget-container br,
.elementor-element-9d23628 .elementor-widget-container br,
.elementor-element-3777b64 .elementor-widget-container br,
.elementor-element-783b6ab .elementor-widget-container br {
	display: none !important;
}
.elementor-element-a1c6469:hover .lnta-wws-icon,
.elementor-element-20a0a65:hover .lnta-wws-icon,
.elementor-element-40463bd:hover .lnta-wws-icon,
.elementor-element-ae38aed:hover .lnta-wws-icon {
	box-shadow: 0 4px 12px rgba(15, 47, 15, 0.18);
}

/* Per-icon hover animations, identical to the offline reference. */
.elementor-element-a1c6469:hover .lnta-wws-icon--plane { animation: lnta-wws-fly 0.8s ease; }
@keyframes lnta-wws-fly {
	0% { transform: translateX(0) translateY(0); }
	45% { transform: translateX(22px) translateY(-6px); }
	55% { transform: translateX(-14px) translateY(2px); opacity: 0.4; }
	100% { transform: translateX(0) translateY(0); opacity: 1; }
}
.elementor-element-20a0a65:hover .lnta-wws-icon--home { animation: lnta-wws-bounce 0.7s ease; }
@keyframes lnta-wws-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-8px); }
	55% { transform: translateY(0); }
	75% { transform: translateY(-3px); }
}
.elementor-element-40463bd:hover .lnta-wws-icon--money { animation: lnta-wws-pulse 0.7s ease; }
@keyframes lnta-wws-pulse {
	0%, 100% { transform: scale(1) rotate(0deg); }
	30% { transform: scale(1.18) rotate(-8deg); }
	60% { transform: scale(1.05) rotate(6deg); }
}
.elementor-element-ae38aed:hover .lnta-wws-icon--handshake { animation: lnta-wws-shake 0.6s ease; }
@keyframes lnta-wws-shake {
	0%, 100% { transform: rotate(0deg); }
	20% { transform: rotate(-12deg); }
	40% { transform: rotate(10deg); }
	60% { transform: rotate(-8deg); }
	80% { transform: rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
	.lnta-wws-icon--plane, .lnta-wws-icon--home, .lnta-wws-icon--money, .lnta-wws-icon--handshake {
		animation: none !important;
	}
}

.lnta-wws-eyebrow {
	font-family: "Montserrat", sans-serif !important;
	color: #d18a1f !important;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin: -0.5rem 0 0.75rem;
}

/* margin-top:auto is what keeps this aligned to the same bottom edge
   across all 4 cards, same as the offline .audience-card__link rule. */
.lnta-wws-learnmore {
	display: inline-flex !important;
	align-items: center;
	gap: 0.3rem;
	margin-top: auto !important;
	padding-top: 0.6rem;
	font-family: "Montserrat", sans-serif !important;
	font-weight: 700;
	font-size: 0.9rem;
	color: #1c4d1c !important;
	text-decoration: none !important;
}
.lnta-wws-learnmore:hover {
	text-decoration: underline !important;
}
/* The arrow was inheriting a global white text color the same way the
   heading/eyebrow did before their !important fix — explicit color
   here is what actually makes it visible against the cream card. */
.lnta-wws-arrow {
	color: #1c4d1c !important;
	display: inline-block;
	transition: transform 0.25s ease;
}
.lnta-wws-learnmore:hover .lnta-wws-arrow {
	transform: translateX(4px);
}

/* Scroll-triggered fade/slide-up reveal, staggered per card via inline
   transition-delay set in JS — matches the offline [data-reveal] card
   entrance animation. */
.lnta-wws-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
.lnta-wws-reveal.lnta-wws-revealed {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	.lnta-wws-reveal { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
	.elementor-element-026580d > .e-con-inner {
		flex-direction: column !important;
	}
}