/* ==========================================================================
   LinkedIn Embed Feed — Frontend Styles  v1.4
   Layouts: Normal, Grid, Carousel.
   Carousel: arrows sit OUTSIDE the slides, in reserved space on left/right.
             No dots. No shimmer.
   ========================================================================== */

/* ------------------------------------------------------------------
   Feed wrapper
   ------------------------------------------------------------------ */
.lef-feed {
	--lef-cols : 3;
	--lef-gap  : 20px;
	width      : 100%;
	box-sizing : border-box;
}

/* ------------------------------------------------------------------
   Item — zero visual chrome; the iframe IS the element.
   ------------------------------------------------------------------ */
.lef-item {
	background  : none;
	border      : none !important;
	box-shadow  : none !important;
	outline     : none !important;
	padding     : 0;
	margin      : 0;
	overflow    : visible;
	position    : relative;
	box-sizing  : border-box;
	display     : block;
	line-height : 0;
}
.lef-item:focus,
.lef-item:focus-visible,
.lef-item:active {
	border     : none !important;
	box-shadow : none !important;
	outline    : none !important;
}

.lef-item iframe {
	display        : block;
	width          : 100% !important;
	height         : auto !important;
	min-height     : 650px;
	border         : none !important;
	outline        : none !important;
	box-shadow     : none !important;
	margin         : 0;
	padding        : 0;
	vertical-align : top;
	overflow       : hidden;
}

/* ------------------------------------------------------------------
   1. Normal layout
   ------------------------------------------------------------------ */
.lef-feed--normal {
	display               : grid;
	grid-template-columns : repeat( var(--lef-cols), 1fr );
	gap                   : var(--lef-gap);
}

/* ------------------------------------------------------------------
   2. Grid layout
   ------------------------------------------------------------------ */
.lef-feed--grid {
	display               : grid;
	grid-template-columns : repeat( var(--lef-cols), 1fr );
	gap                   : var(--lef-gap);
}

/* ------------------------------------------------------------------
   3. Carousel
   ──────────────────────────────────────────────────────────────────
   HTML structure (rendered by PHP — unchanged):
     <div class="lef-feed lef-feed--carousel">        ← outer wrapper
       <div class="lef-carousel__viewport">            ← clips sliding track
         <button class="...btn--prev">‹</button>       ← moved outside via CSS
         <button class="...btn--next">›</button>       ← moved outside via CSS
         <div class="lef-carousel__track">             ← slides
           <div class="lef-item">…</div>
         </div>
       </div>
     </div>

   Strategy — arrows OUTSIDE the iframes, zero overlap:
   ─────────────────────────────────────────────────────
   • .lef-feed--carousel is the positioning ancestor (position:relative).
   • It gets horizontal padding equal to (arrow width + gap).
     This shrinks the viewport inward, leaving empty columns on each side.
   • The two buttons are pulled out of the viewport's overflow:hidden clip
     by positioning them on .lef-feed--carousel with negative or zero inset,
     vertically centered with top:50% / translateY(-50%).
   • The viewport itself stays overflow:hidden to clip the sliding track.
   • No iframes are ever overlapped.
   ------------------------------------------------------------------ */

/* Arrow button dimensions — define once, reuse in padding calc */
.lef-feed--carousel {
	--lef-arrow-size : 44px;   /* button diameter             */
	--lef-arrow-gap  : 12px;   /* space between arrow & slide */

	position   : relative;
	width      : 100%;
	box-sizing : border-box;

	/* Reserve space on each side so the viewport shrinks inward */
	padding-left  : calc( var(--lef-arrow-size) + var(--lef-arrow-gap) );
	padding-right : calc( var(--lef-arrow-size) + var(--lef-arrow-gap) );
}

/* Viewport clips the sliding track only — no longer the arrow anchor */
.lef-carousel__viewport {
	overflow : hidden;
	width    : 100%;
}

.lef-carousel__track {
	display     : flex;
	gap         : var(--lef-gap);
	transition  : transform 420ms cubic-bezier(.4, 0, .2, 1);
	will-change : transform;
	--lef-slide-cols : 3; /* overwritten by JS */
}

/* Slide width = (track width − inter-slide gaps) / visible cols.
   Track width = viewport width = outer width − both paddings. */
.lef-feed--carousel .lef-item {
	flex : 0 0 calc(
		( 100% - ( var(--lef-slide-cols) - 1 ) * var(--lef-gap) ) / var(--lef-slide-cols)
	);
}

/* ------------------------------------------------------------------
   Arrow buttons
   Positioned on .lef-feed--carousel (position:relative).
   top:50% + translateY(-50%) centres them on the viewport height.
   left / right inset = 0 puts them in the reserved padding column.
   ------------------------------------------------------------------ */
.lef-carousel__btn {
	position  : absolute;
	top       : 50%;
	transform : translateY(-50%);
	z-index   : 10;

	width          : var(--lef-arrow-size);
	height         : var(--lef-arrow-size);
	border-radius  : 50%;
	background     : #2D2D2D;
	color          : #fff;
	font-size      : 26px;
	line-height    : 1;
	cursor         : pointer;
	display        : flex;
	align-items    : center;
	justify-content: center;
	flex-shrink    : 0;
	transition     : background .18s, opacity .18s;
	user-select    : none;

	/* Kill every border / outline / shadow */
	border      : none !important;
	outline     : none !important;
	box-shadow  : none !important;
	-webkit-tap-highlight-color : transparent;
	-moz-appearance : none;
	appearance  : none;
}

/* Left arrow — sits in the left padding column, right-aligned to the gap */
.lef-carousel__btn--prev {
	left  : 0;
	right : auto;
}

/* Right arrow — sits in the right padding column, left-aligned to the gap */
.lef-carousel__btn--next {
	right : 0;
	left  : auto;
}

/* Zero out focus ring on every pseudo-class */
.lef-carousel__btn:link,
.lef-carousel__btn:visited,
.lef-carousel__btn:hover,
.lef-carousel__btn:focus,
.lef-carousel__btn:focus-within,
.lef-carousel__btn:focus-visible,
.lef-carousel__btn:active {
	border     : none !important;
	outline    : none !important;
	box-shadow : none !important;
}

/* Firefox inner focus ring */
.lef-carousel__btn::-moz-focus-inner {
	border  : none !important;
	padding : 0;
}

.lef-carousel__btn:hover  { background : #444; }
.lef-carousel__btn:active { background : #1a1a1a; }

/* Disabled state — bounded mode at first / last slide */
.lef-carousel__btn:disabled,
.lef-carousel__btn[disabled] {
	opacity    : .35;
	cursor     : not-allowed;
	background : #2D2D2D;
}

/* ------------------------------------------------------------------
   Lazy-load placeholder (no shimmer)
   ------------------------------------------------------------------ */
.lef-item--lazy {
	min-height  : 650px;
	background  : #f3f4f6;
	line-height : normal;
}

.lef-item--lazy.lef-loaded {
	background  : none;
	min-height  : 0;
	line-height : 0;
}

/* ------------------------------------------------------------------
   Responsive breakpoints
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
	.lef-feed--normal,
	.lef-feed--grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
	.lef-feed--normal,
	.lef-feed--grid { grid-template-columns: 1fr; }
	.lef-feed       { --lef-gap: 14px; }

	/* Smaller arrows on mobile; padding shrinks to match */
	.lef-feed--carousel {
		--lef-arrow-size : 34px;
		--lef-arrow-gap  : 8px;
	}

	.lef-carousel__btn {
		font-size : 20px;
	}
}