.pawstay-related {
	margin: 34px 0;
	padding: clamp(22px, 4vw, 34px);
	border: 1px solid var(--pawstay-border);
	border-radius: var(--pawstay-radius);
	background: color-mix(in srgb, var(--pawstay-accent) 7%, var(--pawstay-surface));
}

.pawstay-related__header {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 22px;
}

.pawstay-related__header > span {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 50%;
	background: var(--pawstay-accent);
	color: var(--pawstay-text);
}

.pawstay-related__header .pawstay-icon { width: 19px; }
.pawstay-related__header h2 { margin: 0; color: var(--pawstay-primary); }

.pawstay-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 18px;
}

.pawstay-related__card {
	overflow: hidden;
	border: 1px solid var(--pawstay-border);
	border-radius: calc(var(--pawstay-radius) - 5px);
	background: var(--pawstay-surface);
	transition: transform .2s ease, box-shadow .2s ease;
}

.pawstay-related__card:hover { transform: translateY(-3px); box-shadow: var(--pawstay-shadow); }
.pawstay-related__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.pawstay-related__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.pawstay-related__card:hover .pawstay-related__media img { transform: scale(1.035); }
.pawstay-related__placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: var(--pawstay-highlight); color: var(--pawstay-primary); }
.pawstay-related__placeholder .pawstay-icon { width: 38px; height: 38px; opacity: .5; }
.pawstay-related__body { padding: 15px; }
.pawstay-related__body time { display: block; margin-bottom: 5px; color: color-mix(in srgb, var(--pawstay-text) 68%, transparent); font-size: .75rem; }
.pawstay-related__body h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.pawstay-related__body h3 a { color: var(--pawstay-primary); text-decoration: none; }
.pawstay-related__body h3 a:hover { text-decoration: underline; }

.pawstay-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	margin: 34px 0;
}

.pawstay-post-nav__card {
	display: grid;
	grid-template-columns: 82px minmax(0, 1fr) 22px;
	align-items: center;
	gap: 14px;
	min-height: 108px;
	padding: 12px;
	border: 1px solid var(--pawstay-border);
	border-radius: var(--pawstay-radius);
	background: var(--pawstay-surface);
	color: var(--pawstay-text);
	text-decoration: none;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--pawstay-primary-dark) 6%, transparent);
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.pawstay-post-nav__card:hover,
.pawstay-post-nav__card:focus-visible {
	border-color: var(--pawstay-accent);
	color: var(--pawstay-text);
	transform: translateY(-2px);
	box-shadow: var(--pawstay-shadow);
}

.pawstay-post-nav__media { display: block; width: 82px; height: 82px; overflow: hidden; border-radius: calc(var(--pawstay-radius) - 8px); }
.pawstay-post-nav__media img { width: 100%; height: 100%; object-fit: cover; }
.pawstay-post-nav__placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: var(--pawstay-highlight); color: var(--pawstay-primary); }
.pawstay-post-nav__placeholder .pawstay-icon { width: 28px; height: 28px; opacity: .48; }
.pawstay-post-nav__content { min-width: 0; }
.pawstay-post-nav__content small { display: block; margin-bottom: 4px; color: var(--pawstay-primary); font-size: .72rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.pawstay-post-nav__content strong { display: -webkit-box; overflow: hidden; color: var(--pawstay-primary); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pawstay-post-nav__arrow { color: var(--pawstay-primary); transition: transform .2s ease; }
.pawstay-post-nav__card--previous .pawstay-post-nav__arrow { transform: rotate(180deg); }
.pawstay-post-nav__card--previous:hover .pawstay-post-nav__arrow { transform: rotate(180deg) translateX(4px); }
.pawstay-post-nav__card--next:hover .pawstay-post-nav__arrow { transform: translateX(4px); }

.sidebar .widget.widget_pawstay_posts_widget {
	position: relative;
	overflow: hidden;
	padding: 0;
	background: linear-gradient(155deg, var(--pawstay-surface) 0%, color-mix(in srgb, var(--pawstay-accent) 5%, var(--pawstay-surface)) 100%);
	box-shadow: 0 16px 42px color-mix(in srgb, var(--pawstay-primary-dark) 10%, transparent);
}

.sidebar .widget.widget_pawstay_posts_widget::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: linear-gradient(90deg, var(--pawstay-accent), color-mix(in srgb, var(--pawstay-accent) 45%, var(--pawstay-primary)));
	content: "";
}

.pawstay-posts-widget__header {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 24px 22px 18px;
}

.pawstay-posts-widget__header-icon {
	display: grid;
	width: 42px;
	height: 42px;
	flex: 0 0 auto;
	place-items: center;
	border-radius: 14px;
	background: var(--pawstay-primary);
	color: #fff;
	box-shadow: 0 7px 18px color-mix(in srgb, var(--pawstay-primary) 24%, transparent);
}

.pawstay-posts-widget__header-icon .pawstay-icon { width: 21px; height: 21px; }
.pawstay-posts-widget__header .widget-title { display: block; margin: 0; color: var(--pawstay-primary); font-size: 1.28rem; line-height: 1.15; }
.pawstay-posts-widget__list { display: grid; padding: 0 18px; }
.pawstay-posts-widget__item { min-width: 0; }
.pawstay-posts-widget__link { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 17px; align-items: center; gap: 12px; padding: 14px 2px; border-top: 1px solid color-mix(in srgb, var(--pawstay-border) 78%, transparent); color: var(--pawstay-text); text-decoration: none; }
.pawstay-posts-widget__thumb { display: block; width: 72px; height: 64px; overflow: hidden; border-radius: 11px; background: var(--pawstay-highlight); }
.pawstay-posts-widget__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.pawstay-posts-widget__placeholder { display: grid; width: 100%; height: 100%; place-items: center; background: linear-gradient(145deg, var(--pawstay-highlight), color-mix(in srgb, var(--pawstay-primary) 18%, var(--pawstay-highlight))); color: var(--pawstay-primary); }
.pawstay-posts-widget__placeholder .pawstay-icon { width: 26px; height: 26px; opacity: .42; }
.pawstay-posts-widget__content { min-width: 0; }
.pawstay-posts-widget__content h3 { display: -webkit-box; overflow: hidden; margin: 4px 0 0; color: var(--pawstay-primary); font-size: .92rem; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pawstay-posts-widget__meta { display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--pawstay-primary); font-size: .65rem; font-weight: 750; letter-spacing: .035em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.pawstay-posts-widget__meta time { overflow: hidden; color: color-mix(in srgb, var(--pawstay-text) 58%, transparent); font-weight: 650; text-overflow: ellipsis; }
.pawstay-posts-widget__meta span + time::before { margin-right: 6px; color: var(--pawstay-border); content: "•"; }
.pawstay-posts-widget__arrow { color: var(--pawstay-primary); transition: transform .2s ease; }
.pawstay-posts-widget__arrow .pawstay-icon { width: 16px; height: 16px; }
.pawstay-posts-widget__link:hover .pawstay-posts-widget__thumb img,
.pawstay-posts-widget__link:focus-visible .pawstay-posts-widget__thumb img { transform: scale(1.06); }
.pawstay-posts-widget__link:hover .pawstay-posts-widget__arrow,
.pawstay-posts-widget__link:focus-visible .pawstay-posts-widget__arrow { transform: translateX(3px); }
.pawstay-posts-widget__link:focus-visible { border-radius: 10px; outline: 2px solid var(--pawstay-primary); outline-offset: 2px; }

.pawstay-posts-widget__item:first-child { padding-bottom: 5px; }
.pawstay-posts-widget__item:first-child .pawstay-posts-widget__link { display: block; overflow: hidden; padding: 0; border: 1px solid var(--pawstay-border); border-radius: 14px; background: var(--pawstay-surface); box-shadow: 0 8px 22px color-mix(in srgb, var(--pawstay-primary-dark) 7%, transparent); }
.pawstay-posts-widget__item:first-child .pawstay-posts-widget__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.pawstay-posts-widget__item:first-child .pawstay-posts-widget__content { display: block; padding: 14px 45px 16px 15px; }
.pawstay-posts-widget__item:first-child .pawstay-posts-widget__content h3 { margin-top: 6px; font-size: 1.04rem; line-height: 1.3; }
.pawstay-posts-widget__item:first-child .pawstay-posts-widget__arrow { position: absolute; right: 14px; bottom: 17px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--pawstay-accent) 13%, transparent); }

.pawstay-posts-widget__all { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 15px 20px 17px; border-top: 1px solid var(--pawstay-border); color: var(--pawstay-primary); font-size: .78rem; font-weight: 800; letter-spacing: .025em; text-decoration: none; }
.pawstay-posts-widget__all .pawstay-icon { width: 16px; height: 16px; color: var(--pawstay-primary); transition: transform .2s ease; }
.pawstay-posts-widget__all:hover { color: var(--pawstay-primary-dark); }
.pawstay-posts-widget__all:hover .pawstay-icon { transform: translateX(4px); }

@media (max-width: 700px) {
	.pawstay-post-nav { grid-template-columns: 1fr; }
	.pawstay-post-nav__empty { display: none; }
}

@media (max-width: 420px) {
	.pawstay-related__grid { grid-template-columns: 1fr; }
	.pawstay-post-nav__card { grid-template-columns: 68px minmax(0, 1fr) 18px; }
	.pawstay-post-nav__media { width: 68px; height: 68px; }
}

@media (prefers-reduced-motion: reduce) {
	.pawstay-related__card,
	.pawstay-related__media img,
	.pawstay-post-nav__card,
	.pawstay-post-nav__arrow { transition: none; }
	.pawstay-posts-widget__thumb img,
	.pawstay-posts-widget__arrow,
	.pawstay-posts-widget__all .pawstay-icon { transition: none; }
}