/* Homepage "Latest from LinkedIn" carousel. Mirrors the "area of work" section: green leaf background, white-framed image cards, round white arrows. */
.linkedin-feed{--c-green:#587b26;--c-teal:#008b6a;--c-li:#0a66c2;
	position: relative;width: 100%;padding: 70px 0 60px;background: url(../images/work-bg.jpg) center no-repeat;background-size: cover;overflow: hidden;}
.linkedin-feed .container{width: 77%;margin: 0 auto;}

/* Heading — same treatment as the area-of-work title */
.li-head{text-align: center;max-width: 720px;margin: 0 auto 34px;}
.linkedin-feed .title{position: relative;}
.linkedin-feed .title h2{font-size: 38px;font-weight: 600;color: #fff;margin: 15px 0 10px;position: relative;}
.linkedin-feed .title h2::after{content: '';position: absolute;background: url(../images/trustea-leaf.png) center no-repeat;width: 60px;height: 60px;top: -40px;margin-left: -15px;background-size: contain;}
.li-head p{font-size: 16px;line-height: 1.7;color: rgba(255,255,255,.9);margin: 0 0 18px;}
.li-follow{display: inline-flex;align-items: center;gap: 10px;background: #fff;color: var(--c-li);border-radius: 50px;padding: 10px 24px;font-size: 14px;font-weight: 700;box-shadow: 0 6px 16px rgba(0,0,0,.15);transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;}
.li-follow i{font-size: 20px;}
.li-follow:hover,.li-follow:focus{background: var(--c-li);color: #fff;transform: translateY(-2px);box-shadow: 0 10px 22px rgba(0,0,0,.22);}

/* Card */
.li-card{position: relative;height: 440px;border: 4px solid #fff;border-radius: 8px;overflow: hidden;background: #1e3a2c;box-shadow: 0 10px 24px rgba(0,0,0,.18);transition: transform .3s ease, box-shadow .3s ease;}
.li-card:hover{transform: translateY(-6px);box-shadow: 0 18px 34px rgba(0,0,0,.28);}
.li-media{position: absolute;inset: 0;}
.li-carousel .li-media img{width: 100%;height: 100%;object-fit: cover;transition: transform .8s ease;}
.li-card:hover .li-media img{transform: scale(1.08);}
.li-shade{position: absolute;inset: 0;background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,.15) 45%, rgba(10,30,15,.88) 100%);transition: background .3s ease;}
.li-card:hover .li-shade{background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.05) 25%, rgba(20,45,15,.55) 45%, rgba(10,30,15,.95) 100%);}

.li-top{position: absolute;left: 16px;right: 16px;top: 16px;display: flex;align-items: center;gap: 8px;z-index: 2;}
.li-badge{display: inline-flex;align-items: center;justify-content: center;width: 32px;height: 32px;border-radius: 6px;background: var(--c-li);color: #fff;font-size: 17px;box-shadow: 0 3px 8px rgba(0,0,0,.25);}
.li-date,.li-type{display: inline-flex;align-items: center;gap: 6px;font-size: 12px;font-weight: 700;color: #fff;background: rgba(255,255,255,.18);border: 1px solid rgba(255,255,255,.3);border-radius: 50px;padding: 5px 11px;-webkit-backdrop-filter: blur(4px);backdrop-filter: blur(4px);}
.li-type{margin-left: auto;}

/* Video play button with pulse ring */
.li-play{position: absolute;left: 50%;top: 40%;z-index: 3;width: 72px;height: 72px;display: flex;align-items: center;justify-content: center;margin: -36px 0 0 -36px;border: 0;border-radius: 50%;background: rgba(255,255,255,.95);color: var(--c-green);font-size: 24px;padding-left: 5px;box-shadow: 0 8px 22px rgba(0,0,0,.3);cursor: pointer;transition: transform .25s ease, background .25s ease, color .25s ease;}
.li-play::before{content: '';position: absolute;inset: -10px;border-radius: 50%;border: 2px solid rgba(255,255,255,.7);animation: liPulse 2s ease-out infinite;}
.li-play:hover,.li-play:focus{transform: scale(1.08);background: var(--c-green);color: #fff;outline: none;}
@keyframes liPulse{0%{transform: scale(.85);opacity: 1;}100%{transform: scale(1.35);opacity: 0;}}

.li-content{position: absolute;left: 0;right: 0;bottom: 0;z-index: 2;padding: 22px 22px 22px;color: #fff;transform: translateY(8px);transition: transform .3s ease;}
.li-card:hover .li-content{transform: translateY(0);}
.li-content h4{font-size: 21px;font-weight: 700;line-height: 1.35;color: #fff;margin: 0 0 8px;text-shadow: 0 2px 6px rgba(0,0,0,.35);display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
.li-content p{font-family: 'Arial', sans-serif;font-size: 14px;line-height: 1.55;color: rgba(255,255,255,.88);margin: 0 0 14px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.li-more{display: inline-flex;align-items: center;gap: 8px;border: 1px solid rgba(255,255,255,.85);color: #fff;border-radius: 50px;padding: 8px 18px;font-size: 13px;font-weight: 700;transition: background .2s ease, color .2s ease, border-color .2s ease;}
.li-more i{transition: transform .2s ease;}
.li-more:hover,.li-more:focus,.li-card:hover .li-more{background: #fff;border-color: #fff;color: var(--c-green);}
.li-more:hover i{transform: translateX(4px);}

/* Carousel chrome — round white arrows on the sides, like the area-of-work slider */
.li-carousel .owl-stage-outer{padding: 10px 0 18px;margin: -10px 0 -8px;}
.li-carousel.owl-theme .owl-nav{margin: 0;}
.li-carousel.owl-theme .owl-nav [class*=owl-]{position: absolute;top: 45%;margin: -25px 0 0;width: 50px;height: 50px;border-radius: 50%;background: #fff;color: #171717;font-size: 26px;line-height: 1;display: inline-flex;align-items: center;justify-content: center;box-shadow: 0 6px 16px rgba(0,0,0,.2);transition: background .2s ease, color .2s ease;}
.li-carousel.owl-theme .owl-nav [class*=owl-]:hover{background: var(--c-green);color: #fff;}
.li-carousel.owl-theme .owl-nav .owl-prev{left: -25px;}
.li-carousel.owl-theme .owl-nav .owl-next{right: -25px;}
.li-carousel.owl-theme .owl-dots{display: block;float: none;width: auto;height: auto;background: none;text-align: center;margin-top: 14px;}
.li-carousel.owl-theme .owl-dots.disabled{display: none;}
.li-carousel.owl-theme .owl-dots .owl-dot{display: inline-block;background: none;border: 0;padding: 0;}
.li-carousel.owl-theme .owl-dots .owl-dot span{display: block;width: 9px;height: 9px;margin: 4px;border-radius: 50px;background: rgba(255,255,255,.45);transition: all .25s ease;}
.li-carousel.owl-theme .owl-dots .owl-dot.active span,.li-carousel.owl-theme .owl-dots .owl-dot:hover span{width: 26px;background: #fff;}

/* Video lightbox */
.li-modal{position: fixed;inset: 0;z-index: 99999;display: flex;align-items: center;justify-content: center;padding: 20px;background: rgba(8,20,10,.88);animation: liFade .25s ease;}
.li-modal[hidden]{display: none;}
.li-modal-box{position: relative;width: 100%;max-width: 960px;}
.li-modal video{display: block;width: 100%;max-height: 80vh;border-radius: 10px;background: #000;box-shadow: 0 20px 50px rgba(0,0,0,.5);}
.li-modal-title{margin-top: 12px;color: #fff;font-size: 16px;font-weight: 700;text-align: center;}
.li-modal-close{position: absolute;right: -14px;top: -14px;z-index: 2;width: 40px;height: 40px;display: flex;align-items: center;justify-content: center;border: 0;border-radius: 50%;background: #fff;color: #171717;font-size: 18px;box-shadow: 0 4px 12px rgba(0,0,0,.3);cursor: pointer;transition: background .2s ease, color .2s ease;}
.li-modal-close:hover,.li-modal-close:focus{background: var(--c-green);color: #fff;outline: none;}
body.li-modal-open{overflow: hidden;}
@keyframes liFade{from{opacity: 0;}to{opacity: 1;}}

@media (max-width: 1199px){
	.linkedin-feed .container{width: 85%;}
}
@media (max-width: 767px){
	.linkedin-feed{padding: 55px 0 40px;}
	.linkedin-feed .container{width: 100%;}
	.linkedin-feed .title h2{font-size: 28px;}
	.linkedin-feed .title h2::after{width: 38px;height: 38px;top: -29px;margin-left: -10px;}
	.li-head p{font-size: 14px;}
	.li-card{height: 400px;}
	.li-content h4{font-size: 18px;}
	.li-carousel .owl-stage-outer{margin-left: -15px;margin-right: -15px;}
	.li-carousel.owl-theme .owl-nav .owl-prev{left: 4px;}
	.li-carousel.owl-theme .owl-nav .owl-next{right: 4px;}
	.li-carousel.owl-theme .owl-nav [class*=owl-]{width: 40px;height: 40px;margin-top: -20px;font-size: 22px;}
	.li-modal-close{right: 0;top: -50px;}
}
@media (prefers-reduced-motion: reduce){
	.linkedin-feed *{transition: none !important;}
	.li-play::before{animation: none;}
	.linkedin-feed .moveUp{visibility: visible;animation: none !important;}
}
