/* LinkedIn Recommendations Showcase — frontend */

.lrs-wrapper {
	--lrs-accent: #0A66C2;
	--lrs-radius: 16px;
	--lrs-gap: 20px;
	--lrs-logo: 90px;
	--lrs-badge: 30px;
	--lrs-spin: 6s;
	--lrs-ink: #1D2939;
	--lrs-muted: #667085;
	max-width: 1240px;
	margin: 0 auto;
	padding: 10px 0 30px;
	box-sizing: border-box;
	font-family: inherit;
}
.lrs-wrapper *, .lrs-wrapper *::before, .lrs-wrapper *::after { box-sizing: border-box; }

.lrs-section-title {
	color: var(--lrs-ink);
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 22px;
	text-align: center;
}

.lrs-layout {
	display: flex;
	align-items: center;
	gap: 28px;
}

/* ---------------------------------------------------------- brand panel */
.lrs-brand {
	flex: 0 0 230px;
	max-width: 230px;
	text-align: left;
}
.lrs-brand__logowrap {
	margin-bottom: 14px;
	line-height: 0;
}

/* ---- 3D logo that never appears mirrored ----------------------------
   Two identical faces are stacked. The back one is pre-rotated 180deg and
   each face hides its own backface, so as the wrapper turns past 90deg the
   back face takes over the right way round: the logo always reads correctly.
   The pixel size is written inline by PHP, so nothing here depends on the
   surrounding theme for dimensions. */
.lrs-wrapper .lrs-logo3d {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	perspective: 800px;
	line-height: 0;
	vertical-align: middle;
}
.lrs-wrapper .lrs-logo3d__inner {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
.lrs-wrapper .lrs-logo3d__face {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	min-width: 0;
	margin: 0;
	object-fit: contain;
	background: #fff;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.lrs-wrapper .lrs-logo3d__face--back {
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}

/* Longhand properties so one bad value cannot cancel the whole animation. */
.lrs-wrapper .lrs-logo3d.is-spinning .lrs-logo3d__inner {
	animation-name: lrs-spin3d;
	animation-duration: var(--lrs-spin, 6s);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: none;
}
@keyframes lrs-spin3d {
	from { transform: rotateY(0deg); }
	to   { transform: rotateY(360deg); }
}

/* brand logo gets padding and a soft shadow */
.lrs-wrapper .lrs-logo3d--brand .lrs-logo3d__face {
	padding: 6%;
	box-shadow: 0 6px 20px rgba(16, 24, 40, .12);
}

/* shape variants */
.lrs-wrapper .lrs-shape--circle .lrs-logo3d__face  { border-radius: 50%; }
.lrs-wrapper .lrs-shape--rounded .lrs-logo3d__face { border-radius: 22%; }
.lrs-wrapper .lrs-shape--square .lrs-logo3d__face  { border-radius: 4px; }

.lrs-brand__name {
	color: var(--lrs-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 8px;
}
.lrs-brand__stars { font-size: 20px; letter-spacing: 1px; line-height: 1; margin-bottom: 8px; }
.lrs-brand__count { color: var(--lrs-muted); font-size: 14px; margin: 0 0 16px; }

/* two buttons in one row: Write a Review (primary) + Connect (smaller) */
.lrs-brand__btns { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.lrs-brand__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 20px;
	border: 1px solid #D0D5DD;
	border-radius: 8px;
	color: var(--lrs-ink);
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
	background: #fff;
	cursor: pointer;
	transition: all .2s;
	font-family: inherit;
}
.lrs-brand__btn:hover {
	border-color: var(--lrs-accent);
	color: var(--lrs-accent);
	box-shadow: 0 4px 14px rgba(10, 102, 194, .18);
}
/* primary "Write a Review" */
.lrs-brand__btn--review {
	background: var(--lrs-accent);
	border-color: var(--lrs-accent);
	color: #fff;
	flex: 1 1 auto;
}
.lrs-brand__btn--review:hover {
	color: #fff;
	filter: brightness(1.06);
	box-shadow: 0 6px 18px rgba(10, 102, 194, .30);
}
/* smaller secondary "Connect on LinkedIn" */
.lrs-brand__btn--connect {
	flex: 0 0 auto;
	padding: 11px 16px;
	font-size: 13px;
}

/* ---- Write a Review modal ---- */
.lrs-review { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lrs-review[hidden] { display: none; }
.lrs-review__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .5); }
.lrs-review__box {
	position: relative; z-index: 1;
	background: #fff; border-radius: 16px;
	width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
	padding: 28px 28px 24px; margin: auto;
	box-shadow: 0 24px 70px rgba(16, 24, 40, .35);
	animation: lrs-pop .2s ease;
}
@keyframes lrs-pop { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lrs-review__close {
	position: absolute; top: 12px; right: 14px;
	width: 34px; height: 34px; border: 0; border-radius: 50%;
	background: #F2F4F7; color: var(--lrs-ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.lrs-review__close:hover { background: #E4E7EC; }
.lrs-review__title { margin: 0 0 18px; color: var(--lrs-ink); font-size: 20px; font-weight: 800; }
.lrs-review__label { display: block; font-weight: 600; color: var(--lrs-ink); font-size: 13.5px; margin: 14px 0 6px; }
.lrs-review__label span { color: #E5484D; }
.lrs-review__label em { color: var(--lrs-muted); font-style: normal; font-weight: 400; }
.lrs-review__form input,
.lrs-review__form textarea {
	width: 100%; box-sizing: border-box;
	border: 1px solid #D0D5DD; border-radius: 9px;
	padding: 11px 13px; font-size: 14.5px; font-family: inherit;
	background: #F9FAFB; color: var(--lrs-ink);
	transition: border-color .18s, box-shadow .18s;
}
.lrs-review__form input:focus,
.lrs-review__form textarea:focus {
	outline: none; border-color: var(--lrs-accent);
	box-shadow: 0 0 0 3px rgba(10, 102, 194, .15);
}
.lrs-review__form textarea { resize: vertical; min-height: 110px; }

.lrs-rev-stars { display: flex; gap: 4px; }
.lrs-rev-star {
	border: 0; background: none; cursor: pointer;
	font-size: 28px; line-height: 1; color: #D0D5DD; padding: 0; transition: color .12s, transform .12s;
}
.lrs-rev-star:hover { transform: scale(1.12); }
.lrs-rev-star.is-on { color: #FBBC04; }

.lrs-review__submit {
	width: 100%; margin-top: 20px; border: 0; border-radius: 999px;
	padding: 14px 22px; font-size: 15px; font-weight: 700; color: #fff; cursor: pointer;
	background: var(--lrs-accent); transition: filter .2s, box-shadow .2s;
}
.lrs-review__submit:hover { filter: brightness(1.06); box-shadow: 0 8px 22px rgba(10, 102, 194, .3); }
.lrs-review__submit:disabled { opacity: .7; cursor: default; }

.lrs-review__note { margin-top: 14px; padding: 12px 15px; border-radius: 10px; font-size: 14px; font-weight: 600; }
.lrs-review__note--ok  { background: #E7F7EE; color: #14804A; border: 1px solid #B8E8CC; }
.lrs-review__note--err { background: #FDECEC; color: #C0392B; border: 1px solid #F5C6C6; }

@media (max-width: 480px) {
	.lrs-brand__btns { flex-direction: column; }
	.lrs-brand__btn--connect { padding: 11px 20px; font-size: 14px; }
}

/* stars */
.lrs-star { color: #D0D5DD; position: relative; display: inline-block; }
.lrs-star.is-full { color: #FBBC04; }
.lrs-star.is-half::before {
	content: '\2605';
	color: #FBBC04;
	position: absolute;
	left: 0; top: 0;
	width: 50%;
	overflow: hidden;
}

/* ------------------------------------------------------------- carousel */
.lrs-carousel { position: relative; flex: 1 1 auto; min-width: 0; padding: 0 6px; }
.lrs-viewport { overflow: hidden; }
.lrs-track {
	display: flex;
	transition: transform .45s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.lrs-slide {
	flex: 0 0 var(--lrs-slide, 33.3333%);
	max-width: var(--lrs-slide, 33.3333%);
	padding: 10px calc(var(--lrs-gap) / 2) 14px;
}

/* ----------------------------------------------------------------- card */
.lrs-card {
	position: relative;
	background: #fff;
	border-radius: var(--lrs-radius);
	padding: 20px 20px 46px;
	box-shadow: 0 4px 20px rgba(16, 24, 40, .10);
	border: 1px solid rgba(16, 24, 40, .05);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform .25s ease, box-shadow .25s ease;
}
.lrs-wrapper.has-fixed-height .lrs-card { height: var(--lrs-card-h, 260px); }
.lrs-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(16, 24, 40, .16);
}

.lrs-card__head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.lrs-card__avatar {
	width: 42px; height: 42px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}
.lrs-card__avatar--ph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--lrs-accent), #5FA8E8);
	color: #fff;
	font-weight: 700;
	font-size: 18px;
}
.lrs-card__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lrs-card__name {
	color: var(--lrs-ink);
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.lrs-card__headline,
.lrs-card__date { color: var(--lrs-muted); font-size: 12.5px; margin-top: 1px; }
.lrs-card__headline {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


.lrs-card__stars {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 16px;
	letter-spacing: 1px;
	margin-bottom: 8px;
}
.lrs-verified { width: 16px; height: 16px; color: var(--lrs-accent); margin-left: 2px; flex-shrink: 0; }

.lrs-card__body { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.lrs-card__text {
	color: #475467;
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--lrs-clamp, 4);
	overflow: hidden;
}

.lrs-card__open {
	position: absolute;
	right: 14px;
	bottom: 12px;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 50%;
	background: var(--lrs-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 4px 12px rgba(10, 102, 194, .35);
	transition: transform .2s, box-shadow .2s;
}
.lrs-card__open svg { width: 20px; height: 20px; }
.lrs-card__open:hover { transform: scale(1.12); box-shadow: 0 6px 18px rgba(10, 102, 194, .5); }

/* --------------------------------------------------------- nav and dots */
.lrs-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid #E4E7EC;
	background: #fff;
	color: var(--lrs-ink);
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
	z-index: 3;
	transition: all .2s;
}
.lrs-nav:hover { background: var(--lrs-accent); color: #fff; border-color: var(--lrs-accent); }
.lrs-nav--prev { left: -16px; }
.lrs-nav--next { right: -16px; }
.lrs-nav:disabled { opacity: .35; cursor: default; }

.lrs-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.lrs-dots button {
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 0; padding: 0;
	background: #D0D5DD;
	cursor: pointer;
	transition: all .25s;
}
.lrs-dots button.active { width: 24px; border-radius: 5px; background: var(--lrs-accent); }

/* ---------------------------------------------------------------- modal */
.lrs-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lrs-modal[hidden] { display: none; }
.lrs-modal__backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .55); backdrop-filter: blur(2px); }
.lrs-modal__box {
	position: relative;
	background: #fff;
	border-radius: 18px;
	max-width: 620px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 26px 28px 30px;
	box-shadow: 0 24px 60px rgba(16, 24, 40, .3);
	animation: lrs-pop .22s ease;
}
@keyframes lrs-pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.lrs-modal__close {
	position: absolute;
	top: 12px; right: 14px;
	width: 32px; height: 32px;
	border: 0; border-radius: 50%;
	background: #F2F4F7;
	color: var(--lrs-ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.lrs-modal__close:hover { background: #E4E7EC; }

.lrs-modal__head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; padding-right: 34px; }
.lrs-modal__head > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lrs-modal__avatar {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--lrs-accent), #5FA8E8);
	color: #fff;
	font-weight: 700;
	font-size: 21px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
}
.lrs-modal__name { color: var(--lrs-ink); font-weight: 700; font-size: 17px; }
.lrs-modal__headline, .lrs-modal__date { color: var(--lrs-muted); font-size: 13px; }
.lrs-modal__headline:empty, .lrs-modal__date:empty, .lrs-modal__relationship:empty { display: none; }
.lrs-modal__badge { width: 34px; height: 34px; flex-shrink: 0; }
.lrs-modal__badge img { width: 100%; height: 100%; object-fit: contain; }
.lrs-shape--circle.lrs-modal__badge img  { border-radius: 50%; }
.lrs-shape--rounded.lrs-modal__badge img { border-radius: 22%; }
.lrs-shape--square.lrs-modal__badge img  { border-radius: 4px; }

.lrs-modal__stars { font-size: 18px; letter-spacing: 1px; margin-bottom: 10px; }
.lrs-modal__relationship { color: var(--lrs-muted); font-size: 13px; font-style: italic; margin: 0 0 12px; }
.lrs-modal__text {
	color: #344054;
	font-size: 15.5px;
	line-height: 1.75;
	white-space: pre-line;
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 900px) {
	.lrs-layout { flex-direction: column; align-items: stretch; gap: 20px; }
	.lrs-brand {
		flex: none;
		max-width: none;
		text-align: center;
	}
	.lrs-brand__logowrap { margin: 0 auto 12px; }
	.lrs-carousel { padding: 0 24px; }
	.lrs-nav--prev { left: -4px; }
	.lrs-nav--next { right: -4px; }
}
@media (max-width: 600px) {
	.lrs-section-title { font-size: 22px; }
	.lrs-modal__box { padding: 22px 20px 26px; max-height: 88vh; }
}

@media (prefers-reduced-motion: reduce) {
	.lrs-track { transition: none; }
	.lrs-logo3d.is-spinning .lrs-logo3d__inner { animation-name: none; }
	/* Admin can opt back in from the Branding tab. */
	.lrs-wrapper.lrs-force-motion .lrs-logo3d.is-spinning .lrs-logo3d__inner {
		animation-name: lrs-spin3d;
	}
	.lrs-card:hover { transform: none; }
}