/*
 * LunSoul Widgets
 *
 * Two constraints shape everything here:
 *
 *  1. This CSS lands inside somebody else's theme. Every rule is scoped under
 *     .lunsoul-widget, list styles and margins are reset explicitly rather than
 *     assumed, and nothing is set on a bare element selector.
 *  2. The site owner must be able to restyle it without editing the plugin.
 *     Hence the custom properties on .lunsoul-widget: overriding
 *     --lunsoul-accent in their own stylesheet is the supported way to match
 *     the widget to their brand.
 */

.lunsoul-widget {
	--lunsoul-bg: #ffffff;
	--lunsoul-text: #18181b;
	--lunsoul-muted: #6b7280;
	--lunsoul-border: #e5e7eb;
	--lunsoul-accent: #7c3aed;
	--lunsoul-star: #fbbc05;
	--lunsoul-radius: 14px;

	box-sizing: border-box;
	max-width: 100%;
	margin: 0 auto;
	color: var(--lunsoul-text);
	background: var(--lunsoul-bg);
	font-size: 15px;
	line-height: 1.6;
	text-align: right;
}

.lunsoul-widget.lunsoul-theme-dark {
	--lunsoul-bg: #0f0f14;
	--lunsoul-text: #f5f5f7;
	--lunsoul-muted: #a1a1aa;
	--lunsoul-border: #26262e;
}

.lunsoul-widget *,
.lunsoul-widget *::before,
.lunsoul-widget *::after {
	box-sizing: inherit;
}

.lunsoul-widget img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* --- credit line --------------------------------------------------------- */

.lunsoul-widget .lunsoul-credit {
	margin: 10px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--lunsoul-muted);
	text-align: center;
}

.lunsoul-widget .lunsoul-credit a {
	color: inherit;
	text-decoration: underline;
}

/* --- stars --------------------------------------------------------------- */

/*
 * Two stacked copies of the same five glyphs, the filled one clipped to the
 * rating. Letter-spacing is zeroed because a theme that sets it globally would
 * otherwise misalign the two layers and the fill would sit half a star off.
 */
.lunsoul-widget .lunsoul-stars {
	position: relative;
	display: inline-block;
	flex-shrink: 0;
	line-height: 1;
	font-size: 15px;
	letter-spacing: 0;
	white-space: nowrap;
}

.lunsoul-widget .lunsoul-stars__empty {
	color: var(--lunsoul-border);
}

.lunsoul-widget .lunsoul-stars__full {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var(--lunsoul-star);
	/* The fill grows from the start edge, which in RTL is the right one. */
	direction: ltr;
	unicode-bidi: isolate;
}

/*
 * In RTL the overlay must be clipped from the right, and `direction: ltr` above
 * flips the glyph order back so the first star filled is the rightmost one.
 */
.lunsoul-widget[dir='rtl'] .lunsoul-stars__full {
	direction: rtl;
}

/* --- instagram feed ------------------------------------------------------ */

.lunsoul-feed__header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 14px 12px;
	border-bottom: 1px solid var(--lunsoul-border);
}

.lunsoul-feed__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 1px solid var(--lunsoul-border);
}

.lunsoul-feed__identity {
	flex: 1;
	min-width: 0;
}

.lunsoul-feed__name {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	direction: ltr;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lunsoul-feed__name a {
	color: inherit;
	text-decoration: none;
}

.lunsoul-feed__name a:hover {
	text-decoration: underline;
}

.lunsoul-feed__stats {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--lunsoul-muted);
}

.lunsoul-feed__stats strong {
	color: var(--lunsoul-text);
	font-weight: 700;
}

.lunsoul-feed__glyph {
	flex-shrink: 0;
}

.lunsoul-feed__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.lunsoul-feed__tile {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--lunsoul-border);
}

.lunsoul-feed__tile a {
	display: block;
	width: 100%;
	height: 100%;
}

.lunsoul-feed__tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.lunsoul-feed__tile a:hover img {
	transform: scale(1.04);
}

/* CSS triangle, so a play badge costs no request and no font. */
.lunsoul-feed__play {
	position: absolute;
	top: 6px;
	inset-inline-start: 6px;
	width: 0;
	height: 0;
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-inline-end: 11px solid #fff;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

/* --- google reviews ------------------------------------------------------ */

.lunsoul-reviews__summary {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px;
	border: 1px solid var(--lunsoul-border);
	border-radius: var(--lunsoul-radius);
	margin-bottom: 14px;
}

.lunsoul-reviews__score {
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
}

.lunsoul-reviews__count {
	font-size: 13px;
	color: var(--lunsoul-muted);
}

.lunsoul-reviews__glyph {
	margin-inline-start: auto;
	flex-shrink: 0;
}

.lunsoul-reviews__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lunsoul-reviews--grid .lunsoul-reviews__list {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.lunsoul-review {
	margin: 0;
	padding: 14px;
	list-style: none;
	border: 1px solid var(--lunsoul-border);
	border-radius: var(--lunsoul-radius);
	background: var(--lunsoul-bg);
}

.lunsoul-review__head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.lunsoul-review__avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.lunsoul-review__initial {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
	background: var(--lunsoul-accent);
}

.lunsoul-review__meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.lunsoul-review__author {
	font-weight: 700;
	font-size: 14px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lunsoul-review__when {
	font-size: 12px;
	color: var(--lunsoul-muted);
}

.lunsoul-review__body {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--lunsoul-text);
	overflow-wrap: anywhere;
	/* Line breaks in the review survive without either renderer emitting <br>. */
	white-space: pre-line;
}

.lunsoul-review__link {
	display: inline-block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--lunsoul-accent);
	text-decoration: none;
}

.lunsoul-review__link:hover {
	text-decoration: underline;
}

.lunsoul-reviews__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 12px;
	font-size: 13px;
}

.lunsoul-reviews__all {
	font-weight: 700;
	color: var(--lunsoul-accent);
	text-decoration: none;
}

.lunsoul-reviews__all:hover {
	text-decoration: underline;
}

/*
 * Required attribution. It is small, but it is never hidden, never
 * display:none, and never behind a hover. See includes/render-reviews.php.
 */
.lunsoul-reviews__attribution {
	color: var(--lunsoul-muted);
}

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 480px) {
	.lunsoul-reviews__score {
		font-size: 26px;
	}

	.lunsoul-reviews--grid .lunsoul-reviews__list {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lunsoul-feed__tile img,
	.lunsoul-feed__tile a:hover img {
		transition: none;
		transform: none;
	}
}