/* LNTA — links across to Liberia's tourism site.
   Note: this site's custom CSS carries a blanket `.elementor * { color:#fff }`
   that beats any single-class rule inside the Elementor wrapper, so every
   colour below is set through two classes. */

/* ---------- Destination cards: now real links ---------- */

/* The theme's card has one anchor on the title. Stretching it over the whole
   card makes the image clickable too, without touching the markup. */
.destination-item2 {
	position: relative;
}

.destination-item2 .lnta-ul-card-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}

.destination-item2 .lnta-ul-card-link {
	transition: color 0.2s ease;
}

/* ---------- "Come and experience Unforgettable Liberia" panel ----------
   Text on the left, a linked collage on the right. Colours are set through
   two classes throughout, because this site's custom CSS carries a blanket
   `.elementor * { color:#fff }` that beats any single-class rule. */

.lnta-ul-panel {
	position: relative;
	display: grid;
	/* The text side gets the larger share so the headline sits on two lines
	   rather than three at desktop widths. */
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 44px;
	align-items: center;
	max-width: 1180px;
	margin: 0 auto;
	padding: 52px 48px;
	border-radius: 22px;
	overflow: hidden;
	background:
		linear-gradient(115deg, rgba(3, 41, 2, 0.97) 0%, rgba(2, 31, 7, 0.93) 60%, rgba(3, 41, 2, 0.9) 100%),
		url('https://lnta.gov.lr/wp-content/uploads/2026/09/lnta-hero-film-poster.jpg') center/cover no-repeat;
	box-shadow: 0 22px 48px rgba(3, 41, 2, 0.28);
}

.lnta-ul-panel::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 22px;
	border: 1px solid rgba(240, 168, 24, 0.38);
	pointer-events: none;
}

.lnta-ul-panel .lnta-ul-panel__text {
	position: relative;
	z-index: 1;
}

.lnta-ul-panel .lnta-ul-panel__eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(240, 168, 24, 0.16);
	border: 1px solid rgba(240, 168, 24, 0.5);
	color: #f0a818;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.lnta-ul-panel .lnta-ul-panel__title {
	margin: 0 0 16px;
	color: #ffffff;
	font-size: clamp(1.9rem, 1.2rem + 2.1vw, 3rem);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-wrap: balance;
	/* Last-resort break for the brand name, which is joined by a
	   non-breaking space so it stays on one line wherever it fits. */
	overflow-wrap: break-word;
}

.lnta-ul-panel .lnta-ul-panel__lead {
	margin: 0 0 20px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 46ch;
}

.lnta-ul-panel .lnta-ul-panel__points {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.lnta-ul-panel .lnta-ul-panel__points li {
	position: relative;
	margin: 0;
	padding-left: 30px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.99rem;
	line-height: 1.5;
}

.lnta-ul-panel .lnta-ul-panel__points li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 16px;
	height: 8px;
	border-left: 2px solid #f0a818;
	border-bottom: 2px solid #f0a818;
	transform: rotate(-45deg);
}

.lnta-ul-panel .lnta-ul-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}

.lnta-ul-panel .lnta-ul-panel__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 15px 30px;
	border-radius: 999px;
	background: linear-gradient(135deg, #f4c15c 0%, #f0a818 100%);
	color: #032902 !important;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lnta-ul-panel .lnta-ul-panel__btn::after {
	content: '\2192';
	font-weight: 600;
}

.lnta-ul-panel .lnta-ul-panel__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(240, 168, 24, 0.36);
}

.lnta-ul-panel .lnta-ul-panel__btn--ghost {
	background: transparent;
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.lnta-ul-panel .lnta-ul-panel__btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	box-shadow: none;
}

/* ---- collage: one tall shot beside two stacked ---- */

.lnta-ul-panel .lnta-ul-panel__media {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 14px;
	height: 100%;
	min-height: 340px;
}

.lnta-ul-panel .lnta-ul-panel__shot {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 14px;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.lnta-ul-panel .lnta-ul-panel__shot--main {
	grid-row: span 2;
}

.lnta-ul-panel .lnta-ul-panel__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.lnta-ul-panel .lnta-ul-panel__shot::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(2, 31, 7, 0) 45%, rgba(2, 31, 7, 0.82) 100%);
}

.lnta-ul-panel .lnta-ul-panel__cap {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 12px;
	z-index: 1;
	color: #ffffff;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
}

.lnta-ul-panel .lnta-ul-panel__shot:hover img {
	transform: scale(1.06);
}

.lnta-ul-panel .lnta-ul-panel__shot:hover {
	box-shadow: 0 14px 30px rgba(240, 168, 24, 0.3);
}

@media (max-width: 1024px) {
	.lnta-ul-panel {
		grid-template-columns: minmax(0, 1fr);
		gap: 34px;
		padding: 42px 34px;
	}

	.lnta-ul-panel .lnta-ul-panel__media {
		min-height: 300px;
	}
}

@media (max-width: 640px) {
	.lnta-ul-panel {
		padding: 32px 22px;
		border-radius: 16px;
	}

	.lnta-ul-panel .lnta-ul-panel__actions {
		flex-direction: column;
	}

	.lnta-ul-panel .lnta-ul-panel__btn {
		justify-content: center;
	}

	/* One row of three on a phone keeps the collage from dominating. */
	.lnta-ul-panel .lnta-ul-panel__media {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: 1fr;
		min-height: 150px;
	}

	.lnta-ul-panel .lnta-ul-panel__shot--main {
		grid-row: span 1;
	}

	.lnta-ul-panel .lnta-ul-panel__cap {
		font-size: 0.72rem;
		left: 8px;
		right: 8px;
	}
}

/* ---------- Experiences heading: signposted across ---------- */

.lnta-ul-heading .lnta-ul-heading-cta {
	margin: 14px 0 0;
	text-align: center;
}

.lnta-ul-heading .lnta-ul-heading-cta__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 24px;
	border-radius: 999px;
	background: rgba(240, 168, 24, 0.12);
	border: 1px solid rgba(240, 168, 24, 0.55);
	color: #b8790b !important;
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lnta-ul-heading .lnta-ul-heading-cta__link:hover {
	background: #f0a818;
	color: #032902 !important;
	transform: translateY(-2px);
}

.lnta-ul-heading .lnta-ul-heading-cta__arrow {
	transition: transform 0.2s ease;
}

.lnta-ul-heading .lnta-ul-heading-cta__link:hover .lnta-ul-heading-cta__arrow {
	transform: translateX(3px);
}

@media (max-width: 767px) {
	/* "Unforgettable Liberia" is joined by a non-breaking space so the brand
	   name never splits. At the desktop floor of 1.9rem that run measures
	   340px against a 331px column on a 375px phone, so it hung over the
	   panel's right edge. Lowering the floor here keeps the name intact and
	   inside the panel; it still reaches 1.9rem by the time the column is
	   wide enough to hold it. */
	.lnta-ul-panel .lnta-ul-panel__title {
		font-size: clamp(1.5rem, 1rem + 3vw, 1.9rem);
	}

	.lnta-ul-promo {
		margin: 32px 12px 4px;
		padding: 32px 22px;
		border-radius: 14px;
	}

	.lnta-ul-promo .lnta-ul-promo__actions {
		flex-direction: column;
	}

	.lnta-ul-promo .lnta-ul-promo__btn {
		justify-content: center;
	}
}

/* ==========================================================================
   "Unforgettable Liberia" services section — replaces the newsletter block.
   Big headline and arrow-bulleted links on the left, pictures on the right,
   over the site's own mask-motif pattern. Two-class selectors throughout,
   because of the site-wide `.elementor * { color:#fff }` rule.
   ========================================================================== */

/* The band this sits in was the newsletter's cream card — a 1100px-wide box
   with a radius, green top rule and padding. Those are stripped so the section
   can run the full width of the page instead of sitting inside a card. */
.elementor-element-f18bb5c {
	padding: 0 !important;
}

.elementor-element-eac0442 {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	/* The newsletter card was pulled up 45px on phones so it straddled the
	   boundary with the News section above — a deliberate look for a card,
	   but with the card gone it dragged the full-bleed band up underneath
	   the News section's shape divider (which sits at z-index 2), hiding the
	   band's gold hairline and leaving the eyebrow pill 7px of clearance
	   instead of the 44px its padding asks for. Desktop never showed it
	   because the margin only applies at phone widths. */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	max-width: 100% !important;
	width: 100% !important;
	--container-max-width: 100%;
}

.elementor-element-lntaulsectors,
.elementor-element-lntaulsectors > .elementor-widget-container {
	width: 100% !important;
	max-width: 100% !important;
}

/* Full-bleed band: background runs edge to edge, content stays readable. */
.lnta-ul-sectors {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 86px 0;
	border: 0;
	border-radius: 0;
	/* The mask motif moved to the animated ::after layer below; what stays
	   here is the flat tint it drifts over. */
	background: linear-gradient(180deg, rgba(246, 250, 246, 0.95), rgba(236, 244, 236, 0.95));
	box-shadow: inset 0 1px 0 rgba(3, 41, 2, 0.08), inset 0 -1px 0 rgba(3, 41, 2, 0.08);
	overflow: hidden;
}

/* The flat tint read as dead space behind the content, so the band gets a
   slow-moving backdrop: the site's own mask motif plus two wide, very faint
   colour washes in the brand green and gold, drifting across each other.
   It is one composited layer animated with transform only — no paint work
   per frame, nothing that can reflow the content sitting above it. Inset
   past the edges so the drift never uncovers a corner, and the whole thing
   sits at z-index 0 under .lnta-ul-sectors__inner. */
.lnta-ul-sectors::after {
	content: '';
	position: absolute;
	inset: -18%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(38% 46% at 18% 28%, rgba(34, 83, 33, 0.16), rgba(34, 83, 33, 0) 70%),
		radial-gradient(34% 42% at 82% 72%, rgba(240, 168, 24, 0.17), rgba(240, 168, 24, 0) 70%),
		url('https://lnta.gov.lr/wp-content/uploads/2025/12/about_bg_9-1.jpg') center/560px repeat;
	opacity: 0.85;
	will-change: transform;
	animation: lnta-ul-drift 46s ease-in-out infinite;
}

@keyframes lnta-ul-drift {
	0% {
		transform: translate3d(-1.6%, -1.2%, 0) scale(1.04);
	}

	50% {
		transform: translate3d(1.6%, 1.2%, 0) scale(1.08);
	}

	100% {
		transform: translate3d(-1.6%, -1.2%, 0) scale(1.04);
	}
}

/* Anyone who has asked their system to stop moving things gets the same
   backdrop, held still. */
@media (prefers-reduced-motion: reduce) {
	.lnta-ul-sectors::after {
		animation: none;
	}
}

/* A gold hairline across the top, echoing the brand ticker, so the band reads
   as a deliberate section rather than a change of background colour. */
.lnta-ul-sectors::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	/* Above the drifting backdrop, which would otherwise paint over it. */
	z-index: 2;
	background: linear-gradient(90deg, #032902 0%, #f0a818 50%, #032902 100%);
}

.lnta-ul-sectors .lnta-ul-sectors__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 60px;
	align-items: center;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 32px;
}

/* The text column ran ~130px short of the photo collage beside it, which
   read as a hole in the middle of the band rather than as breathing room.
   An eyebrow above the heading and a closing CTA below the list fill it
   with content that earns its place, and balance the two columns. The
   eyebrow repeats the treatment already used on the "Come and experience"
   panel, so the two Unforgettable Liberia blocks read as a pair. */
.lnta-ul-sectors .lnta-ul-sectors__eyebrow {
	display: inline-block;
	margin: 0 0 18px;
	padding: 7px 16px;
	border-radius: 999px;
	background: rgba(3, 41, 2, 0.08);
	color: #225321;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.lnta-ul-sectors .lnta-ul-sectors__title {
	margin: 0 0 12px;
	color: #032902;
	font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.5rem);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.lnta-ul-sectors .lnta-ul-sectors__lead {
	margin: 0 0 26px;
	color: #4a5462;
	font-size: 1.04rem;
	line-height: 1.6;
	max-width: 42ch;
}

.lnta-ul-sectors .lnta-ul-sectors__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 18px;
}

.lnta-ul-sectors .lnta-ul-sectors__list li {
	margin: 0;
	padding: 0;
}

.lnta-ul-sectors .lnta-ul-sectors__list a {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: #14181f !important;
	font-size: 1.2rem;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s ease, gap 0.2s ease;
}

/* Circular arrow bullet, drawn in CSS so there is no icon font to load. */
.lnta-ul-sectors .lnta-ul-sectors__list a::before {
	content: '\2192';
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: #032902;
	color: #ffffff;
	font-size: 0.95rem;
	font-weight: 700;
	transition: background 0.2s ease, transform 0.2s ease;
}

.lnta-ul-sectors .lnta-ul-sectors__list a:hover {
	color: #032902 !important;
	gap: 18px;
}

.lnta-ul-sectors .lnta-ul-sectors__list a:hover::before {
	background: #f0a818;
	color: #032902;
	transform: translateX(2px);
}

/* ---- pictures ---- */

/* Gold pill, same shape and weight as the CTAs on the panel above, so the
   band closes on the same call to action the rest of the page uses. */
.lnta-ul-sectors .lnta-ul-sectors__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
	padding: 15px 30px;
	border-radius: 999px;
	background: #f0a818;
	color: #032902 !important;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.lnta-ul-sectors .lnta-ul-sectors__cta:hover {
	background: #ffbe33;
	color: #032902 !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(240, 168, 24, 0.34);
}

.lnta-ul-sectors .lnta-ul-sectors__cta-arrow {
	transition: transform 0.2s ease;
}

.lnta-ul-sectors .lnta-ul-sectors__cta:hover .lnta-ul-sectors__cta-arrow {
	transform: translateX(3px);
}

.lnta-ul-sectors .lnta-ul-sectors__media {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.lnta-ul-sectors .lnta-ul-sectors__shot {
	display: block;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 12px 26px rgba(16, 24, 40, 0.16);
	aspect-ratio: 4 / 3;
}

.lnta-ul-sectors .lnta-ul-sectors__shot--wide {
	grid-column: span 2;
	aspect-ratio: 16 / 9;
}

.lnta-ul-sectors .lnta-ul-sectors__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.45s ease;
}

.lnta-ul-sectors .lnta-ul-sectors__shot:hover img {
	transform: scale(1.06);
}

@media (max-width: 1024px) {
	.lnta-ul-sectors {
		padding: 56px 0;
	}

	.lnta-ul-sectors .lnta-ul-sectors__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
		padding: 0 24px;
	}
}

@media (max-width: 575px) {
	.lnta-ul-sectors {
		padding: 44px 0;
	}

	.lnta-ul-sectors .lnta-ul-sectors__inner {
		padding: 0 18px;
	}

	/* 30px rows are below the 44px a fingertip needs, so the whole row
	   becomes the tap target on phones. */
	.lnta-ul-sectors .lnta-ul-sectors__list a {
		font-size: 1.06rem;
		min-height: 44px;
	}

	.lnta-ul-sectors .lnta-ul-sectors__list {
		gap: 6px;
	}

	.lnta-ul-sectors .lnta-ul-sectors__eyebrow {
		margin-bottom: 14px;
	}

	.lnta-ul-sectors .lnta-ul-sectors__cta {
		margin-top: 26px;
		width: 100%;
		justify-content: center;
	}

	.lnta-ul-sectors .lnta-ul-sectors__media {
		gap: 12px;
	}
}