.links-center {
	display: grid;
	gap: 16px;
}

.links-hero {
	position: relative;
	min-height: 268px;
	overflow: hidden;
	border: 1px solid var(--home-line);
	border-radius: 14px;
	background:
		linear-gradient(90deg, #fff3df 0%, rgb(255 243 223 / 97%) 43%, rgb(255 243 223 / 72%) 58%, rgb(255 243 223 / 4%) 76%),
		url("../images/links/links-hero.jpg") right center / auto 100% no-repeat,
		#fff3df;
	box-shadow: var(--home-shadow);
}

.links-hero__content {
	position: relative;
	z-index: 1;
	width: 59%;
	padding: 70px 42px 35px;
}

.links-hero h1 {
	margin: 0;
	font-size: 29px;
	line-height: 1.25;
}

.links-hero h1 span {
	font-size: 25px;
}

.links-hero p {
	margin: 13px 0 24px;
	color: #796a5e;
	font-size: 14px;
	line-height: 1.8;
}

.links-hero__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.links-hero__actions strong,
.links-hero__actions a {
	display: inline-flex;
	align-items: center;
	height: 31px;
	padding: 0 15px;
	border-radius: 999px;
	background: rgb(255 253 249 / 82%);
	color: #e88436;
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
}

.links-hero__actions a {
	border: 1px solid rgb(255 151 71 / 30%);
}

.links-hero__actions a:hover {
	background: var(--home-orange);
	color: #fff;
}

.links-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 62px;
	padding: 10px 14px;
	border: 1px solid var(--home-line);
	border-radius: 13px;
	background: var(--home-card);
}

.links-filters {
	display: flex;
	align-items: center;
	gap: 9px;
	min-width: 0;
}

.links-filters button {
	min-width: 64px;
	height: 35px;
	min-height: 35px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: #fffaf3;
	color: #776b62;
	font-size: 12px;
}

.links-filters button:hover,
.links-filters button:focus-visible,
.links-filters button.is-active {
	background: linear-gradient(135deg, #ffae5f, #ff9141);
	box-shadow: 0 5px 12px rgb(255 151 71 / 20%);
	color: #fff;
}

.links-sort {
	position: relative;
	flex: 0 0 auto;
}

.links-sort select {
	min-width: 112px;
	height: 36px;
	padding: 0 34px 0 14px;
	border: 1px solid var(--home-line);
	border-radius: 999px;
	background: var(--home-card);
	color: var(--home-text);
	font-size: 11px;
	appearance: none;
}

.links-sort .dashicons {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 14px;
	height: 14px;
	color: var(--home-orange);
	font-size: 14px;
	pointer-events: none;
}

.links-list {
	display: grid;
	gap: 12px;
}

.friend-card {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) auto 92px;
	align-items: center;
	gap: 17px;
	min-height: 112px;
	padding: 16px 19px;
	border: 1px solid var(--home-line);
	border-radius: 13px;
	background: var(--home-card);
	box-shadow: 0 6px 18px rgb(112 78 45 / 5%);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.friend-card:hover {
	border-color: #ffd8b3;
	box-shadow: 0 10px 25px rgb(112 78 45 / 9%);
	transform: translateY(-2px);
}

.friend-card[hidden] {
	display: none;
}

.friend-card__avatar {
	display: block;
	width: 68px;
	height: 68px;
	overflow: hidden;
	border: 3px solid #fff7ec;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgb(112 78 45 / 12%);
}

.friend-card__avatar img {
	display: block;
	width: 100%;
	height: 100%;
}

.friend-card__content {
	min-width: 0;
}

.friend-card h2 {
	margin: 0 0 6px;
	font-size: 15px;
	line-height: 1.4;
}

.friend-card h2 a {
	text-decoration: none;
}

.friend-card h2 a:hover {
	color: var(--home-orange);
}

.friend-card__content > p {
	overflow: hidden;
	margin: 0 0 9px;
	color: var(--home-muted);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.friend-card__content > div {
	display: flex;
	gap: 6px;
}

.friend-tag {
	display: inline-flex;
	align-items: center;
	height: 21px;
	padding: 0 8px;
	border-radius: 999px;
	background: #f3f0ff;
	color: #8d79cb;
	font-size: 9px;
}

.friend-tag--life { background: #e9f8f2; color: #47ad82; }
.friend-tag--tech { background: #eaf3ff; color: #498bd1; }
.friend-tag--design { background: #eaf9ff; color: #43a8c9; }
.friend-tag--anime { background: #fff0ed; color: #e77968; }
.friend-tag--other { background: #fff3e5; color: #d9904e; }

.friend-card__stats {
	display: flex;
	align-items: center;
	gap: 18px;
	color: #9c8d81;
	font-size: 10px;
	white-space: nowrap;
}

.friend-card__stats span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.friend-card__stats .dashicons {
	width: 14px;
	height: 14px;
	font-size: 14px;
}

.friend-card__visit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 32px;
	border-radius: 999px;
	background: #fff2e2;
	color: #f18b3d;
	font-size: 10px;
	text-decoration: none;
	white-space: nowrap;
}

.friend-card__visit:hover {
	background: var(--home-orange);
	color: #fff;
}

.links-empty {
	margin: 0;
	padding: 36px;
	border: 1px dashed #ffd7b0;
	border-radius: 13px;
	color: var(--home-muted);
	text-align: center;
}

.links-apply {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 19px 23px;
	border: 1px solid #f4dfc8;
	border-radius: 13px;
	background:
		linear-gradient(90deg, rgb(255 251 244 / 98%), rgb(255 245 228 / 84%)),
		url("../images/links/avatar-1.jpg") right center / 130px auto no-repeat;
	box-shadow: var(--home-shadow);
}

.links-apply h2 {
	margin: 0 0 5px;
	font-size: 16px;
}

.links-apply h2 span {
	font-size: 14px;
}

.links-apply p {
	margin: 0;
	color: var(--home-muted);
	font-size: 11px;
}

.links-apply > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 112px;
	height: 36px;
	border-radius: 999px;
	background: linear-gradient(135deg, #ffae5f, #ff9141);
	box-shadow: 0 5px 12px rgb(255 151 71 / 20%);
	color: #fff;
	font-size: 11px;
	text-decoration: none;
}

.links-apply .dashicons {
	width: 15px;
	height: 15px;
	font-size: 15px;
}

.links-closing {
	margin: 2px 0 0;
	color: #a59385;
	font-family: Georgia, serif;
	font-size: 16px;
	text-align: center;
}

.links-closing span {
	color: #ffc66e;
}

[data-theme="dark"] .links-hero {
	background:
		linear-gradient(90deg, #30241d 0%, rgb(48 36 29 / 97%) 43%, rgb(48 36 29 / 78%) 58%, rgb(48 36 29 / 22%) 78%),
		url("../images/links/links-hero.jpg") right center / auto 100% no-repeat,
		#30241d;
}

[data-theme="dark"] .links-hero p {
	color: var(--home-muted);
}

[data-theme="dark"] .links-filters button,
[data-theme="dark"] .links-apply {
	background: var(--home-card);
}

@media (max-width: 1199px) {
	.links-hero__content { width: 65%; padding-left: 30px; }
	.links-filters { gap: 5px; }
	.links-filters button { min-width: 52px; padding-inline: 11px; }
	.friend-card { grid-template-columns: 60px minmax(0, 1fr) 82px; gap: 13px; }
	.friend-card__avatar { width: 60px; height: 60px; }
	.friend-card__stats { grid-column: 2; grid-row: 2; margin-top: -8px; }
	.friend-card__visit { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 900px) {
	.links-center { grid-column: 1; }
	.links-toolbar { align-items: flex-start; flex-direction: column; }
	.links-filters { width: 100%; overflow-x: auto; padding-bottom: 3px; }
	.links-sort { align-self: flex-end; margin-top: -45px; }
	.links-filters { padding-right: 125px; }
}

@media (max-width: 680px) {
	.links-center { gap: 13px; }
	.links-hero {
		min-height: 244px;
		background:
			linear-gradient(90deg, rgb(255 243 223 / 96%) 0%, rgb(255 243 223 / 91%) 58%, rgb(255 243 223 / 38%) 100%),
			url("../images/links/links-hero.jpg") right center / auto 100% no-repeat,
			#fff3df;
	}
	.links-hero__content { width: 100%; padding: 46px 21px 24px; }
	.links-hero h1 { font-size: 25px; }
	.links-hero p { max-width: 285px; font-size: 12px; }
	.links-hero__actions { align-items: flex-start; flex-direction: column; gap: 7px; }
	.links-toolbar { display: block; padding: 12px; }
	.links-filters { padding-right: 0; }
	.links-sort { display: block; width: 125px; margin: 10px 0 0 auto; }
	.links-sort select { width: 100%; }
	.friend-card { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 14px; }
	.friend-card__avatar { width: 58px; height: 58px; }
	.friend-card__stats { grid-column: 1 / -1; grid-row: auto; margin: 0; padding-top: 8px; border-top: 1px solid var(--home-line); }
	.friend-card__visit { grid-column: 1 / -1; grid-row: auto; justify-self: end; width: 96px; margin-top: 0; }
	.links-apply { align-items: flex-start; flex-direction: column; padding: 18px; }
	.links-apply > a { align-self: flex-end; }
	[data-theme="dark"] .links-hero {
		background:
			linear-gradient(90deg, rgb(48 36 29 / 96%) 0%, rgb(48 36 29 / 91%) 58%, rgb(48 36 29 / 40%) 100%),
			url("../images/links/links-hero.jpg") right center / auto 100% no-repeat,
			#30241d;
	}
}

@media (max-width: 430px) {
	.links-hero__actions a { display: none; }
}