/**
 * Красивые ссылки (LinkPreview) — оформление блока-карточки.
 * Использует классы темы Invision Community, поэтому блок выглядит
 * так же, как встроенные блоки внутренних ссылок форума.
 *
 * @package krasivye-ssylki
 * @version 1.0.2
 */

/* Обёртка карточки */
.zlpEmbed {
	max-width: 600px;
	margin: 12px 0;
	border-radius: 6px;
	overflow: hidden;
	background: rgb(var(--theme-area_background_light, 246 247 249));
	border: 1px solid rgba(var(--theme-text_dark, 0 0 0), 0.08);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.2s ease-in-out;
}

.zlpEmbed:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}

/* Шапка: имя сайта + заголовок */
.zlpEmbed .ipsRichEmbed_header {
	padding: 12px 16px;
	border-bottom: 1px solid rgba(var(--theme-text_dark, 0 0 0), 0.05);
}

.zlpSite {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	opacity: 0.55;
	margin-bottom: 5px;
}

.zlpFavicon {
	width: 15px;
	height: 15px;
	border-radius: 3px;
	flex: 0 0 auto;
	display: inline-block;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.zlpEmbed .ipsRichEmbed_title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0;
	word-break: break-word;
}

/* Картинка-превью */
.zlpMasthead {
	background: rgb(var(--theme-area_background_dark, 230 232 235));
}

.zlpMasthead > a {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 200px;
	display: block;
}

/* Описание */
.zlpDescription {
	font-size: 13.5px;
	line-height: 1.5;
	opacity: 0.85;
	word-break: break-word;
}

/* Подвал со «чистой» ссылкой */
.zlpFooter {
	padding: 9px 16px;
	border-top: 1px solid rgba(var(--theme-text_dark, 0 0 0), 0.05);
	background: rgba(var(--theme-text_dark, 0 0 0), 0.015);
}

.zlpUrl {
	font-size: 11.5px;
	opacity: 0.6;
	text-decoration: none;
	word-break: break-all;
	display: block;
}

.zlpUrl:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Состояние загрузки */
.zlpLoading {
	display: flex;
	align-items: center;
	padding: 9px 16px;
	min-height: 40px;
	background: rgba(var(--theme-text_dark, 0 0 0), 0.02);
	border: 1px dashed rgba(var(--theme-text_dark, 0 0 0), 0.1);
	box-shadow: none;
}

.zlpLoaderText {
	font-size: 12px;
	opacity: 0.45;
}

/* На телефонах карточка — во всю ширину */
@media screen and (max-width: 500px) {
	.zlpEmbed {
		max-width: 100%;
	}

	.zlpMasthead > a {
		height: 150px;
	}
}