/**
 * Одиночна сторінка статті (post).
 */

.granulka-contacts__breadcrumbs {
	margin-bottom: 40px;
}

body.granulka-single-article-page {
	overflow-x: hidden;
	background-color: #f0f0f0;
}

/* Щоб фон заповнював екран по краях (як на макеті) */
body.granulka-single-article-page .granulka-page {
	width: 100%;
	margin: 0;
	background-color: #f0f0f0;
}

.granulka-single-article {
	width: 100%;
	max-width: 1440px;
	background-color: #f0f0f0;
	margin: 0 auto;
	padding: 16px 64px 0;
	box-sizing: border-box;
}

.granulka-single-article__inner {
	max-width: 1440px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
}

/* ========== Layout ========== */
.granulka-single-article__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.granulka-single-article__layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
}

.granulka-single-article__main {
	flex: 1 1 848px;
	max-width: 848px;
	min-width: 0;
}

.granulka-single-article__sidebar {
	flex: 0 0 440px;
	max-width: 440px;
}

.granulka-single-article__sidebar--desktop {
	position: sticky;
	/* When scrolled, "Інші публікації" should move closer to the top. */
	top: 56px;
	align-self: flex-start;
}

.granulka-single-article__sidebar--mobile {
	display: none;
}

/* ========== Card ========== */
.granulka-single-article__card {
	background: #ffffff;
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.granulka-single-article__hero {
	min-height: 223px;
	width: 100%;
	aspect-ratio: 633 / 372;
	border-radius: 8px;
	overflow: hidden;
}

.granulka-single-article__hero-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.granulka-single-article__meta {
	display: flex;
	align-items: center;
}

.granulka-single-article__date {
	font-family: 'Onest', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.16px;
	color: #464646;
}

.granulka-single-article__title {
	margin: 0;
	font-family: 'Onest', sans-serif;
	font-size: 24px;
	font-weight: 600;
	line-height: 40px;
	letter-spacing: 0.24px;
	color: #464646;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Article body typography */
.granulka-single-article__body {
	font-family: 'Onest', sans-serif;
	color: #6b6b6b;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.16px;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.granulka-single-article__body p {
	margin: 0 0 16px;
}

.granulka-single-article__body p:last-child {
	margin-bottom: 0;
}

.granulka-single-article__body h2,
.granulka-single-article__body h3 {
	color: #464646;
	margin: 24px 0 12px;
	font-weight: 600;
	letter-spacing: 0.18px;
}

.granulka-single-article__body h2 {
	font-size: 18px;
	line-height: 28px;
}

.granulka-single-article__body h3 {
	font-size: 18px;
	line-height: 28px;
}

/* ========== Share / Likes row ========== */
.granulka-single-article__share-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

/* Reuse styles from archive-news.php naming convention */
.granulka-news-card__share-wrap {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.granulka-news-card__share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #464646;
	cursor: pointer;
}

.granulka-news-card__share-feedback {
	display: none;
	font-family: 'Onest', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.16px;
	color: #464646;
	white-space: nowrap;
}

.granulka-news-card__share-wrap.is-copied .granulka-news-card__share-feedback {
	display: inline-flex;
}

.granulka-single-article__share-label {
	font-family: 'Onest', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.16px;
	color: #464646;
	white-space: nowrap;
}

/* ========== Other publications ========== */
.granulka-other-publications {
	background: #ffffff;
	border-radius: 8px;
	padding: 16px;
}

.granulka-other-publications__title {
	font-family: 'Onest', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0.18px;
	color: #464646;
	margin-bottom: 16px;
}

.granulka-other-publications__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.granulka-other-publications__card {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 8px;
	border-radius: 8px;
	text-decoration: none;
	border: 1px solid #f0f0f0;
	background: #ffffff;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.granulka-other-publications__card--variant2 {
	border-color: #d9d9d9;
}

.granulka-other-publications__thumb {
	width: 115px;
	height: 100px;
	border-radius: 4px;
	overflow: hidden;
	background: #f0f0f0;
	flex-shrink: 0;
}

.granulka-other-publications__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.granulka-other-publications__thumb--placeholder {
	background: #f0f0f0;
}

.granulka-other-publications__text {
	display: flex;
	flex-direction: column;
	gap: 9px;
	align-items: flex-start;
	min-width: 0;
	max-width: 100%;
	flex: 1 1 auto;
	max-width: 224px;
}

.granulka-other-publications__card--variant2 .granulka-other-publications__text {
	max-width: 240px;
}

.granulka-other-publications__item-title {
	font-family: 'Onest', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.16px;
	color: #464646;
	display: block;
	word-break: break-word;
	overflow-wrap: anywhere;
	white-space: normal;
	overflow: visible;
}

.granulka-other-publications__card--variant2 .granulka-other-publications__item-title {
	color: #464646;
}

.granulka-other-publications__card:hover .granulka-other-publications__item-title {
	color: #11b568;
}

.granulka-other-publications__item-date {
	font-family: 'Onest', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.14px;
	color: #464646;
}

/* ========== Comments (basic styling) ========== */

.granulka-single-article__comments {
	margin-top: 24px;
	width: 100%;
}

.granulka-comments {
	background: #ffffff;
	border-radius: 8px;
	padding: 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.granulka-comments__title {
	font-family: 'Onest', sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: 0.18px;
	color: #464646;
	margin: 0;
}

.granulka-comments__count {
	font-family: 'Onest', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.16px;
	color: #464646;
	margin: 0;
}

.granulka-comment-form {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.granulka-comment-form p {
	margin: 0;
}

/* Hide default comment labels (we use placeholders from Figma). */
.granulka-comment-form label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.granulka-comment-field {
	background: #f8f8f8;
	border: 1px solid #dedede;
	border-radius: 8px;
}

.granulka-comment-field--author {
	margin-bottom: 16px;
	height: 56px;
	padding: 0 16px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.granulka-comment-form .form-submit {
	width: 210px;
	margin-left: auto;
	margin-top: 0;
}

.granulka-comment-field--comment {
	height: 120px;
	padding: 16px;
	box-sizing: border-box;
	margin-bottom: 16px;
}

.granulka-comment-field input,
.granulka-comment-field textarea {
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font-family: 'Onest', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.16px;
	color: #6b6b6b;
	resize: none;
}

.granulka-comment-field textarea {
	height: 100%;
}

.granulka-comment-field input::placeholder,
.granulka-comment-field textarea::placeholder {
	color: #7a7a7a;
}

.granulka-comment-submit-wrap {
	margin-top: 16px;
}

.granulka-comment-form .form-submit input[type="submit"],
.granulka-comment-submit-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 24px;
	border-radius: 8px;
	border: 0.5px solid #11b568;
	background: #ffffff;
	color: #11b568;
	font-family: 'Onest', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.14px;
	text-transform: uppercase;
	cursor: pointer;
}

.granulka-comment-form .form-submit input[type="submit"]:hover {
	background: #f0f8f0;
}

/* Basic list spacing to keep layout consistent. */
.granulka-comments__list .comment {
	margin: 0 0 16px;
	padding: 0;
}

/* ===== Comments (Figma-like cards) ===== */
.granulka-comments__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 0;
	width: 100%;
}

.granulka-comments__list .comment {
	list-style: none;
	margin: 0;
}

.granulka-comments__list .granulka-comment__row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.granulka-comments__list .granulka-comment__avatar {
	width: 40px;
	height: 40px;
	background: #f0f0f0;
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
}

.granulka-comments__list .granulka-comment__avatar-icon-wrap {
	position: relative;
	width: 24px;
	height: 24px;
	overflow: hidden; /* match Figma "overflow-clip" on the inner icon */
}

.granulka-comments__list .granulka-comment__avatar-icon {
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}

.granulka-comments__list .granulka-comment__avatar-icon--outer {
	top: 8.33%;
	left: 8.33%;
	right: 8.33%;
	bottom: 8.33%;
}

.granulka-comments__list .granulka-comment__avatar-icon--mid {
	top: 64.58%;
	left: 17.8%;
	right: 17.8%;
	bottom: 23.56%;
}

.granulka-comments__list .granulka-comment__avatar-icon--inner {
	top: 25%;
	left: 37.5%;
	right: 37.5%;
	bottom: 50%;
}

.granulka-comments__list .granulka-comment__bubble {
	background: #f8f8f8;
	border-radius: 8px;
	padding: 16px;
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
}

.granulka-comments__list .granulka-comment__name {
	font-family: 'Onest', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.06px;
	color: #464646;
	margin: 0 0 8px;
}

.granulka-comments__list .granulka-comment__text {
	font-family: 'Onest', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: 0.06px;
	color: #6b6b6b;
}

.granulka-comments__list .granulka-comment__text p {
	margin: 0;
}

.granulka-comments__list .comment-body {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	background: transparent;
}

/* Avatar (use WP default avatar image but wrap look via background/border radius) */
.granulka-comments__list .avatar {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: transparent;
	padding: 0;
	box-sizing: border-box;
}

.granulka-comments__list .comment-metadata {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
}

.granulka-comments__list .comment-metadata time {
	display: none; /* date not shown in Figma card */
}

.granulka-comments__list .comment-content {
	background: #f8f8f8;
	border-radius: 8px;
	padding: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

.granulka-comments__list .comment-content p {
	margin: 0;
}

.granulka-comments__list .comment-reply-link,
.comment-respond .comment-reply-title,
.granulka-comments__list .comment-reply-login {
	display: none;
}

/* ========== Responsive ========== */
@media (max-width: 991px) {
	.granulka-footer {
		margin-top: 89px;
	}

	.granulka-comment-form .form-submit {
		width: 100%;
	}

	.granulka-contacts__breadcrumbs {
		margin-bottom: 16px;
	}

	.granulka-single-article {
		padding: 0;
	}

	.granulka-single-article__main {
		flex: 1 1 auto;
		width: 100%;
	}

	.granulka-single-article__sidebar {
		flex: 0 0 320px;
		max-width: 320px;
	}
}

/* Prevent horizontal overflow on medium desktop widths (e.g. 1024-1280). */
@media (max-width: 1280px) and (min-width: 768px) {
	.granulka-single-article {
		padding-left: 24px;
		padding-right: 24px;
	}

	.granulka-single-article__layout {
		gap: 16px;
	}

	.granulka-single-article__sidebar {
		flex: 0 0 300px;
		max-width: 300px;
	}
}

@media (max-width: 767px) {
	.granulka-single-article__content {
		gap: 8px;
	}

	.granulka-single-article__layout {
		flex-direction: column;
		gap: 16px;
	}

	.granulka-single-article__sidebar--desktop {
		display: none;
	}

	.granulka-single-article__sidebar--mobile {
		display: block;
		flex: 1 1 auto;
		max-width: 100%;
		width: 100%;
	}

	.granulka-single-article__main {
		flex: 1 1 auto;
	}

	.granulka-single-article__card {
		padding: 16px;
		gap: 16px;
	}

	.granulka-single-article__share-label {
		font-size: 16px;
	}

	.granulka-single-article__comments {
		margin-top: 8px;
	}

	.granulka-comments {
		padding: 16px;
	}

	/* Mobile "Інші публікації" block near footer, per Figma 359-1311. */
	.granulka-other-publications--mobile {
		border-radius: 0;
		padding: 16px;
		width: 100%;
		box-sizing: border-box;
	}

	.granulka-other-publications--mobile .granulka-other-publications__list {
		gap: 16px;
	}
}
/*likes block*/
.granulka-single-article__share-row .granulka-single-article__likes .wpulike.wpulike-heart {
	padding: 0;
}

.granulka-single-article__share-row .granulka-single-article__likes .wpulike.wpulike-heart .wp_ulike_general_class {
	padding: 7px 12px;
	border-radius: 100px;
	border: 1px solid #E0E0E0;
	box-shadow: none;
}

.granulka-single-article__share-row .granulka-single-article__likes .wpulike.wpulike-heart .wp_ulike_general_class .count-box {
	margin-left: 4px;
	padding: 0;
}