/* blog breadcrumbs */

.blog-breadcrumbs {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: min(8px, 0.556vw);
}

.blog-breadcrumbs a {
	transition: opacity 0.4s;
}

.blog-breadcrumbs .prev {
	height: min(56px, 3.889vw);
	width: min(56px, 3.889vw);
	border-radius: min(56px, 3.889vw);
	border: 1px solid var(--shark-shark-100, #E4E7E9);
	background: var(--White, #FFF);

	display: flex;
	justify-content: center;
	align-items: center;
}

.blog-breadcrumbs .prev:before {
	content: '';
	display: block;
	width: min(16px, 1.111vw);
	height: min(16px, 1.111vw);
	transition: opacity 0.4s;
	background: no-repeat center / contain url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjI0eDI0IC8gY2hldnJvbi1sZWZ0Ij4KPHBhdGggaWQ9Ikljb24iIGQ9Ik0xMCAxMkw2IDhMMTAgNCIgc3Ryb2tlPSIjMEEwQjBEIiBzdHJva2Utd2lkdGg9IjEuMzMzMzMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=);
}

.blog-tag {
	display: flex;
	height: min(56px, 3.889vw);
	padding: min(4px, 0.278vw) min(24px, 1.667vw) 0 min(24px, 1.667vw);
	justify-content: center;
	align-items: center;
	background: var(--Accent, #512CCC);
	color: var(--white);
	border-radius: 100px;
	width: fit-content;

	font-family: 'Rotunda',sans-serif;
	font-feature-settings: 'ss01'on, 'salt'on;
	font-size: min(11px, 0.764vw);
	line-height: 100%;
	letter-spacing: min(0.55px, 0.038vw);
	text-transform: uppercase;
	border: 1px solid var(--shark-shark-100, #E4E7E9);
}

.blog-list__menu .blog-tag.-black {
	color: var(--shark-shark-600, #0A0B0D);
	border: 1px solid var(--shark-shark-100, #E4E7E9);
}

.blog-tag.-black,
.blog-list__menu .blog-tag.-active.-black {
	background: var(--shark-shark-600, #0A0B0D);
	border-color: var(--shark-shark-600, #0A0B0D);
	color: var(--white);
}

.blog-tag.-green,
.blog-list__menu .blog-tag.-active.-green {
	background: var(--solids-padua, #D0F5DA);
	border-color: var(--solids-padua, #D0F5DA);
	color: var(--secondary-jade, #3AA670);
}

.blog-tag.-light-blue,
.blog-list__menu .blog-tag.-active.-light-blue {
	background: var(--solids-mabel, #DEF3FC);
	border-color: var(--solids-mabel, #DEF3FC);
	color: var(--secondary-anakiwa-tag, #4ACAF8);
}

.blog-tag.-blue,
.blog-list__menu .blog-tag.-active.-blue {
	color: var(--secondary-mariner, #0062C6);
	background: var(--solids-perano, #D3DEFB);
	border-color: var(--solids-perano, #D3DEFB);
}

.blog-tag.-purple,
.blog-list__menu .blog-tag.-active.-purple {
	background: var(--solids-perfume-tag, #EEE5FF);
	border-color: var(--solids-perfume-tag, #EEE5FF);
	color: var(--secondary-orchid-tag, #9B6EF5);
}

.blog-tag.-pink,
.blog-list__menu .blog-tag.-active.-pink {
	background: var(--solids-french-lilac, #F8E5FE);
	border-color: var(--solids-french-lilac, #F8E5FE);
	color: var(--secondary-brilliant-rose, #F25596);
}

.blog-list__menu>.blog-tag {
	background: rgba(0, 0, 0, 0);
}

/* blog card */

.post-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	border-radius: 16px;
	border: 1px solid var(--shark-shark-100, #E4E7E9);
	overflow: hidden;
}

.post-card .img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: min(280px, 19.444vw);
	overflow: hidden;
}

.post-card .img img {
	display: block;
	position: relative;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
	transform: translateZ(0);
}

.post-card .img .categorie {
	position: absolute;
	left: min(24px, 1.667vw);
	top: min(24px, 1.667vw);
}

.post-card .content {
	padding: min(24px, 1.667vw);
}

.post-card .content .categorie {
	margin-bottom: min(24px, 1.667vw);
}

.post-card .content .title {
	color: var(--shark-shark-600, #0A0B0D);
	transition: color 0.4s;
}

.post-card .content .title br,
.post-card .content .title span {
	display: none !important;
}

.post-card .content .date {
	margin-top: min(40px, 2.778vw);
	color: var(--shark-shark-300, #8C8F90);
}

.post-card .blog-tag {
	height: min(32px, 2.222vw);
	padding: min(4px, 0.278vw) min(12px, 0.833vw) 0 min(12px, 0.833vw);
}

.post-card.-bigger {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.post-card.-bigger .img {
	height: 100%;
	width: 100%;
	grid-column: span 1;
}

.post-card.-bigger .content {
	grid-column: span 1;
	padding: min(32px, 2.222vw) min(40px, 2.778vw) min(32px, 2.222vw) min(32px, 2.222vw);
	display: flex;
	flex-direction: column;
	height: 100%;
	justify-content: space-between;
}


/* single article */

.article .section-title {
	max-width: min(994px, 69.028vw);
	margin: 0 auto;
	margin-top: min(24px, 1.667vw);
}

.article .start-text {
	max-width: min(994px, 69.028vw);
	margin: 0 auto;
	margin-top: min(24px, 1.667vw);
}

.article .start-img {
	width: 100%;
	display: flex;
	justify-content: center;
	margin: min(80px, 5.556vw) auto 0 auto;

	max-width: 786px;
	border-radius: 16px;
}

.article .start-img img {
	display: block;
	width: 100%;
	border-radius: inherit;
}

.article-content {
	max-width: 786px;
	width: 100%;
	margin: min(80px, 5.556vw) auto 0 auto;
}

.article {
	margin-bottom: var(--default-section-margin);
}


.related-posts {
	margin: var(--default-section-margin) 0;
}

.related-posts__wrapper {
	margin-top: min(40px, 2.778vw);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: min(40px, 2.778vw);
	align-items: flex-start;
}

.related-posts__wrapper .post-card {
	grid-column: span 1;
}

/* blog */

.blog-slider-section {
	overflow: hidden;
}

.blog-slider {
	position: relative;
	margin-top: min(56px, 3.889vw);
}

.blog-slider .post-card {
	height: auto;
}

.blog-slider .nav-pag {
	margin-top: min(32px, 2.222vw);
}

.blog-slider .nav-pag .swiper-navigation__button {
	display: none;
}

.blog-slider .slider .navigation {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	pointer-events: none;
	z-index: 2;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.blog-slider .slider .swiper-wrapper {
	transition: transform 0.4s, height 0.7s;
}

.blog-slider .slider .navigation div {
	pointer-events: auto;
	background: var(--white);
}

.blog-slider .slider .navigation div.prev {
	margin-left: max(-40px, -2.778vw);
}

.blog-slider .slider .navigation div.next {
	margin-right: max(-40px, -2.778vw);
}

.blog-slider .swiper-slide {
	transition: transform 0.6s;
	transform: translateX(0);
}

.blog-slider .swiper-slide-prev {
	transform: translateX(-20vw);
}

/* blog post list */

.blog-list {
	margin: min(80px, 5.556vw) 0 min(200px, 13.889vw) 0;
}

.blog-list__menu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: min(8px, 0.556vw);
}

.blog-list__menu .blog-tag {
	transition: background 0.4s, color 0.4s, border 0.4s;
	cursor: pointer;
}

.blog-list__menu .blog-tag.all-tag.-active {
	pointer-events: none;
}

.blog-list__inner {
	margin-top: min(40px, 2.778vw);
}

.blog-list__inner .pc {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto;
	align-items: flex-start;
	align-content: flex-start;
	gap: min(40px, 2.778vw);
}

.blog-list__inner .mobile {
	display: none;
}

.blog-list__inner .col {
	display: flex;
	flex-direction: column;
	gap: min(40px, 2.778vw);
}

.blog-list__inner .post-card {
	position: relative;
}

.blog-list__inner.-loading {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.blog-list__inner.-loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Ensure filtered cards are visible */
.blog-list__inner .post-card {
	opacity: 1 !important;
	transform: none !important;
}

@media screen and (max-width: 1100px) {

	/* blog breadcrumbs */

	.blog-breadcrumbs {
		gap: 8px;
	}

	.blog-breadcrumbs .prev {
		height: 44px;
		width: 44px;
		border-radius: 44px;
	}

	.blog-breadcrumbs .prev:before {
		width: 16px;
		height: 16px;
	}

	.blog-tag {
		display: flex;
		height: 44px;
		padding: 4px 16px 0 16px;

		font-size: 10px;
		letter-spacing: 0;
	}

	/* blog card */

	.post-card .img {
		height: 200px;
	}

	.post-card .img .categorie {
		left: 16px;
		top: 16px;
	}

	.post-card .content {
		padding: 16px;
	}

	.post-card .content .categorie {
		margin-bottom: 16px;
	}

	.post-card .content .date {
		margin-top: 32px;
		color: var(--shark-shark-300, #8C8F90);
	}

	.post-card .blog-tag {
		height: 24px;
		padding: 4px 10px 0 10px;
	}

	.post-card.-bigger {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
	}

	.post-card.-bigger .img {
		height: 200px;
		min-height: 200px;
		width: 100%;
		grid-column: span 1;
	}

	.post-card.-bigger .content {
		padding: 16px;
		height: 100%;
	}



	/* single article */

	.article .section-title {
		max-width: 786px;
		margin: 0 auto;
		margin-top: 16px;
	}

	.article .start-text {
		max-width: 786px;
		margin: 0 auto;
		margin-top: 16px;
	}

	.article .start-img {
		margin: 40px auto 0 auto;
		max-width: 786px;
		border-radius: 16px;
	}

	.article-content {
		max-width: 786px;
		width: 100%;
		margin: 40px auto 0 auto;
	}


	.related-posts {
		margin: var(--default-section-margin) 0;
	}

	.related-posts__wrapper {
		margin-top: 16px;
		grid-template-columns: repeat(1, 1fr);
		gap: 16px;
	}


	/* blog */

	.blog-slider {
		margin-top: 40px;
	}

	.blog-slider .nav-pag {
		margin-top: 16px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16px;
	}

	.blog-slider .slider .navigation {
		display: none;
	}

	.blog-slider .nav-pag .swiper-navigation__button {
		display: flex;
	}

	.blog-slider .nav-pag .pagination {
		width: fit-content;
	}

	.blog-slider .swiper-slide {
		transition: transform 0.6s;
		transform: translateX(0);
	}

	.blog-slider .swiper-slide-next:not(.swiper-slide-active) {
		transform: translateX(10vw);
	}

	.blog-slider .swiper-slide-prev:not(.swiper-slide-active) {
		transform: translateX(-10vw);
	}


	/* blog post list */

	.blog-list {
		margin: 40px 0 80px 0;
	}

	.blog-list__menu {
		gap: 8px;
	}

	.blog-list__inner {
		margin-top: 16px;
	}

	.blog-list__pagination,
	.wp-pagenavi {
		margin-top: 40px;
		gap: 8px;
	}

	.blog-list__pagination div,
	.wp-pagenavi a {
		width: 44px;
		height: 44px;
	}

	.blog-list__pagination div.prev:before,
	.blog-list__pagination div.next:before,
	.wp-pagenavi a.nextpostslink:before,
	.wp-pagenavi a.previouspostslink:before {
		width: 16px;
		height: 16px;
	}


}

@media screen and (max-width: 760px) {
	.blog-list__inner .pc {
		display: none;
	}

	.blog-list__inner .mobile {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

}