/* ==================== Blog category page ==================== */

.blog-sec__breadcrumb {
	margin-bottom: 24px;
}

.blog-sec__page-title {
	margin-bottom: 32px;
}

/* Category filter pills */
.blog-sec__cat-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
}

.cat-list__btn {
	display: inline-block;
	padding: 8px 20px;
	border: 1.5px solid #DDDDDD;
	border-radius: 100px;
	font-size: 14px;
	color: #1F2A37;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease;
}

.cat-list__btn:hover,
.cat-list__item.current .cat-list__btn {
	border-color: #1F2A37;
	color: #1F2A37;
}

/* Blog cards grid */
.blog-sec__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 30px;
	list-style: none;
	padding: 0;
	margin: 0;
}

.blog-card {
	display: flex;
	flex-direction: column;
	gap: 16px 0;
}

.blog-card__thumb {
	display: block;
	border-radius: 24px;
	overflow: hidden;
	width: 100%;
}

.blog-card__img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .3s ease;
}

.blog-card__thumb:hover .blog-card__img {
	transform: scale(1.03);
}

.blog-card__title {
	font-size: 16px;
	line-height: 1.35;
	font-weight: 500;
	margin: 0;
}

.blog-card__title a {
	color: #1F2A37;
	text-decoration: none;
}

.blog-card__title a:hover {
	color: #0059D8;
}

.blog-card__date {
	display: block;
	font-size: 12px;
	color: #7A8899;
	line-height: 1.5;
	margin-top: -6px;
}

.blog-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 0 8px;
	color: #0059D8;
	font-size: 14px;
	text-decoration: none;
	margin-top: auto;
}

.blog-card__btn svg {
	transform: scale(.7) translateX(5px);
}

/* Pagination */
.blog-sec__pagination {
	margin-top: 48px;
}

.blog-sec__empty {
	margin-top: 40px;
	color: #7A8899;
}

/* ==================== Blog post page ==================== */

.post-content__breadcrumb {
	margin-bottom: 32px;
	padding-top: 20px;
}

.post-content__content-group {
	max-width: 800px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.post-content__title-group {
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px 0;
}

.post-content__last-cat {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #0059D8;
	text-decoration: none;
}

.post-content__last-cat a {
	font-size: inherit;
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.post-content__last-cat a:hover {
	text-decoration: underline;
}

.post-content__page-title {
	font-size: 32px;
	line-height: 1.2;
}

.post-content__date {
	display: block;
	font-size: 12px;
	color: #7A8899;
	line-height: 1.5;
}

.post-content__img {
	width: 100%;
	object-fit: cover;
	aspect-ratio: 1.8/1;
	border-radius: 20px;
	display: block;
	margin-bottom: 32px;
}

/* Post content typography */
.post-content__content {
	font-size: 16px;
	line-height: 1.7;
	color: #1F2A37;
}

.post-content__content h2 {
	font-size: 22px;
	font-weight: 600;
	margin: 32px 0 16px;
	line-height: 1.3;
}

.post-content__content h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 24px 0 12px;
}

.post-content__content p {
	margin: 0 0 16px;
}

.post-content__content ul,
.post-content__content ol {
	padding-left: 24px;
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 6px 0;
}

.post-content__content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.post-content__content a {
	color: #0059D8;
}

/* Inline product cards inside post */
.post-content .products {
	margin: 24px 0;
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ==================== Adaptive ==================== */
@media (max-width: 1080px) {
	.blog-sec__cards {
		grid-template-columns: repeat(3, 1fr);
		gap: 30px 20px;
	}
}

@media (max-width: 768px) {
	.blog-sec__cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px 16px;
	}

	.blog-sec__page-title {
		margin-bottom: 20px;
	}

	.blog-sec__cat-list {
		gap: 8px;
		margin-bottom: 28px;
	}

	.post-content__page-title {
		font-size: 24px;
	}

	.post-content .products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.blog-sec__cards {
		grid-template-columns: 1fr;
	}

	.post-content__page-title {
		font-size: 20px;
	}
}

/* ==================== Additional responsive fixes ==================== */

@media (max-width: 768px) {
  /* Blog post content: reduce heading sizes */
  .post-content__content h2 {
    font-size: 18px;
    margin: 24px 0 12px;
  }
  .post-content__content h3 {
    font-size: 15px;
    margin: 18px 0 10px;
  }
  .post-content__content {
    font-size: 15px;
  }

  /* Post breadcrumb */
  .post-content__breadcrumb {
    padding-top: 12px;
    margin-bottom: 20px;
  }
}

@media (max-width: 520px) {
  /* Blog category list: allow wrapping naturally */
  .blog-sec__cat-list {
    gap: 6px;
  }
  .cat-list__btn {
    padding: 6px 14px;
    font-size: 13px;
  }

  /* Blog card title */
  .blog-card__title {
    font-size: 15px;
  }

  /* Blog pagination */
  .blog-sec__pagination {
    margin-top: 32px;
  }

  /* Post content images */
  .post-content__img {
    border-radius: 12px;
    margin-bottom: 20px;
  }
}

@media (max-width: 480px) {
  /* Post: title group */
  .post-content__title-group {
    gap: 10px 0;
  }

  /* Blog cards gap */
  .blog-sec__cards {
    gap: 20px;
  }

  /* Post content h2/h3 */
  .post-content__content h2 {
    font-size: 17px;
  }
  .post-content__content h3 {
    font-size: 15px;
  }
}