/* ═══════════════════════════════════════════════
 *  Kiwwwi CPT Posts Grid — Styles v2.3
 * ═══════════════════════════════════════════════ */

/* ── Card base ── */
.kiwwwi-cpt-grid__card {
	margin-bottom: 1.5em;
	transition: box-shadow .25s ease;
}
.kiwwwi-cpt-grid__card:hover {
	box-shadow: 0 4px 20px rgba(0,0,0,.08);
}
.kiwwwi-cpt-grid__img {
	width: 100%;
	height: auto;
	display: block;
}
.kiwwwi-cpt-grid__placeholder {
	width: 100%;
	padding-top: 56.25%;
	background: #f0f0f0;
}
.kiwwwi-cpt-grid__body {
	padding: 1em 1.2em 1.4em;
}
.kiwwwi-cpt-grid__title {
	margin-bottom: .35em;
}
.kiwwwi-cpt-grid__title a {
	color: inherit;
	text-decoration: none;
}
.kiwwwi-cpt-grid .box-blog-post .post-title a {
	margin-bottom: 0 !important;
	font-size: 20px !important;
	color: #231F20 !important;
}
.kiwwwi-cpt-grid .box-blog-post .post-title a:hover {
	color: #231F20 !important;
	opacity: .75;
}
.kiwwwi-cpt-grid__date {
	margin-bottom: .4em;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: .78em;
}

/* ── ACF fields ── */
.kiwwwi-cpt-grid__acf {
	margin-bottom: .45em;
	font-size: .88em;
	line-height: 1.4;
}
.kiwwwi-cpt-grid__acf-label {
	font-weight: 600;
	opacity: .7;
}
.kiwwwi-cpt-grid__acf img {
	max-width: 100%;
	height: auto;
	margin-top: .3em;
}

/* ACF link field — LinkedIn style */
.kiwwwi-cpt-grid .kiwwwi-cpt-grid__acf-link {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-decoration: none !important;
	color: #222 !important;
	font-weight: 500;
}
.kiwwwi-cpt-grid .kiwwwi-cpt-grid__acf-link:hover {
	color: #3893AA !important;
}
.kiwwwi-cpt-grid .kiwwwi-cpt-grid__acf-link-icon {
	display: inline-block;
	width: 21px;
	height: 21px;
	flex-shrink: 0;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'><path d='M19.4455 0H1.55039C0.693164 0 0 0.676758 0 1.51348V19.4824C0 20.3191 0.693164 21 1.55039 21H19.4455C20.3027 21 21 20.3191 21 19.4865V1.51348C21 0.676758 20.3027 0 19.4455 0ZM6.23027 17.8951H3.11309V7.8709H6.23027V17.8951ZM4.67168 6.50508C3.6709 6.50508 2.86289 5.69707 2.86289 4.70039C2.86289 3.70371 3.6709 2.8957 4.67168 2.8957C5.66836 2.8957 6.47637 3.70371 6.47637 4.70039C6.47637 5.69297 5.66836 6.50508 4.67168 6.50508ZM17.8951 17.8951H14.782V13.0225C14.782 11.8617 14.7615 10.3646 13.1619 10.3646C11.5418 10.3646 11.2957 11.632 11.2957 12.9404V17.8951H8.18672V7.8709H11.1727V9.24082H11.2137C11.6279 8.45332 12.6451 7.6207 14.1586 7.6207C17.3127 7.6207 17.8951 9.69609 17.8951 12.3949V17.8951Z' fill='%233893AA'/></svg>") center/contain no-repeat;
}

/* Card title */
.kiwwwi-cpt-grid .post-title {
	font-weight: 700;
	letter-spacing: .02em;
	margin-bottom: .15em;
}

/* ACF field 1 */
.kiwwwi-cpt-grid__acf--1 {
	font-size: 18px !important;
	margin-bottom: 30px;
	color: #555;
}

/* ACF field 2 */
.kiwwwi-cpt-grid__acf--2 {
	margin-bottom: 40px;
	color: #555;
}

/* Read more button */
a.kiwwwi-cpt-grid__readmore-btn.kiwwwi-cpt-grid__readmore-btn,
.kiwwwi-cpt-grid .box-blog-post .box-text-inner a.kiwwwi-cpt-grid__readmore-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 14px 20px !important;
	background: #52C1DE !important;
	color: #053238 !important;
	border: 1px solid #52C1DE !important;
	border-radius: 4px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	letter-spacing: .05em !important;
	text-transform: uppercase !important;
	text-underline-offset: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	cursor: pointer;
	font-family: inherit !important;
	transition: transform .3s, border .3s, background .3s, box-shadow .3s, opacity .3s, color .3s;
}
a.kiwwwi-cpt-grid__readmore-btn span,
.kiwwwi-cpt-grid .box-blog-post .box-text-inner a.kiwwwi-cpt-grid__readmore-btn span {
	color: inherit !important;
	font: inherit !important;
	text-decoration: none !important;
}
a.kiwwwi-cpt-grid__readmore-btn.kiwwwi-cpt-grid__readmore-btn:hover,
.kiwwwi-cpt-grid .box-blog-post .box-text-inner a.kiwwwi-cpt-grid__readmore-btn:hover {
	box-shadow: inset 0 0 0 100px rgba(0,0,0,.2);
}

.kiwwwi-cpt-grid__excerpt {
	margin-top: .5em;
	opacity: .75;
}
.kiwwwi-cpt-grid__readmore {
	margin-top: .8em;
}
.kiwwwi-cpt-grid__empty {
	text-align: center;
	opacity: .6;
	padding: 2em;
}

/* Image height override */
.kiwwwi-cpt-grid__card .box-image[style*="padding-top"] img {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kiwwwi-cpt-grid__acf-link-text {
	font-family: Inter;
	font-weight: 700;
	font-size: 18px;
	line-height: 100%;
	vertical-align: middle;
	text-decoration: underline;
	text-decoration-style: solid;
	color: #3893AA;
}


/* ═══════════════════════════════════════════════
 *  TAXONOMY FILTER DROPDOWNS (native fallback)
 * ═══════════════════════════════════════════════ */
.kiwwwi-cpt-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 28px;
	padding: 0;
}

/* Alignment */
.kiwwwi-cpt-filters--left   { justify-content: flex-start; }
.kiwwwi-cpt-filters--center { justify-content: center; }
.kiwwwi-cpt-filters--right  { justify-content: flex-end; }

.kiwwwi-cpt-filters__item {
	position: relative;
	min-width: 200px;
	max-width: 300px;
	flex: 0 1 auto;
	margin: 0;
}

/* Native multiselect (kept as no-JS fallback). The JS hides this and
   inserts a custom .kcg-ms dropdown in its place. */
.kiwwwi-cpt-filter-select {
	display: block;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 400;
	color: #333;
	background-color: #fff;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
}

.kiwwwi-cpt-filter-select:hover {
	border-color: #98a2b3;
}

.kiwwwi-cpt-filter-select:focus {
	outline: none;
	border-color: #3893AA;
	box-shadow: 0 0 0 3px rgba(56, 147, 170, .15);
}


/* ═══════════════════════════════════════════════
 *  MULTISELECT FILTER DROPDOWN (JS-enhanced)
 * ═══════════════════════════════════════════════ */
.kcg-ms {
	position: relative;
	width: 100%;
}

.kcg-ms__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0 40px 0 16px;
	font-size: 14px;
	font-weight: 400;
	color: #333;
	text-align: left;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .2s, box-shadow .2s;
	box-sizing: border-box;
}
.kcg-ms__toggle:hover { border-color: #98a2b3; }
.kcg-ms--open .kcg-ms__toggle {
	border-color: #3893AA;
	box-shadow: 0 0 0 3px rgba(56,147,170,.15);
}

.kcg-ms__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kcg-ms:not(.kcg-ms--has-value) .kcg-ms__label { color: #667085; }

.kcg-ms__panel {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 50;
	max-height: 280px;
	overflow-y: auto;
	padding: 6px;
	background: #fff;
	border: 1px solid #d0d5dd;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0,0,0,.10);
	display: none;
}
.kcg-ms--open .kcg-ms__panel { display: block; }

.kcg-ms__opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	font-size: 14px;
	line-height: 1.3;
	color: #344054;
	border-radius: 6px;
	cursor: pointer;
	margin: 0;
}
.kcg-ms__opt:hover { background: rgba(56,147,170,.06); }
.kcg-ms__opt input {
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
	accent-color: #3893AA;
}

.kcg-ms__opt--disabled {
	opacity: .35;
	cursor: not-allowed;
	pointer-events: none;
	display: none;
}

/* Mobile: stack full width */
@media (max-width: 549px) {
	.kiwwwi-cpt-filters__item {
		min-width: 100%;
		max-width: 100%;
	}
}


/* ═══════════════════════════════════════════════
 *  TAXONOMY BADGES
 * ═══════════════════════════════════════════════ */
.kiwwwi-cpt-grid__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
	margin-bottom: 12px;
}

.kiwwwi-cpt-grid__badge {
	display: inline-block;
	padding: 6px 20px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	color: #FFF;
	background: #0A2235;
	border-radius: 40px;
	white-space: nowrap;
}


/* ═══════════════════════════════════════════════
 *  COLUMN SPACING (custom px via slider)
 * ═══════════════════════════════════════════════ */
.kiwwwi-cpt-grid[style*="--kcg-gap"] > .col {
	padding-left: var(--kcg-gap) !important;
	padding-right: var(--kcg-gap) !important;
}
.kiwwwi-cpt-grid[style*="--kcg-gap"] {
	margin-left: calc( var(--kcg-gap) * -1 ) !important;
	margin-right: calc( var(--kcg-gap) * -1 ) !important;
}


/* ═══════════════════════════════════════════════
 *  FOOTER (article count + pagination)
 * ═══════════════════════════════════════════════ */
.kiwwwi-cpt-footer {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
	margin-bottom: 16px;
	position: relative;
}

/* Article count — left side */
.kiwwwi-cpt-footer__info {
	position: absolute;
	left: 0;
	font-size: inherit;
	color: inherit;
	line-height: 1.5;
}

.kiwwwi-cpt-footer__total,
.kiwwwi-cpt-footer__page {
	font-weight: inherit;
	color: inherit;
}

.kiwwwi-cpt-footer__sep {
	display: inline-block;
	margin: 0 8px;
	opacity: .4;
}

/* Pagination nav — centered */
.kiwwwi-cpt-pagination__nav {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* Individual page link — fully rounded */
.kiwwwi-cpt-pagination__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: #344054;
	background: #fff;
	border: 1px solid #d0d5dd;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: all .2s ease;
}

.kiwwwi-cpt-pagination__link:hover {
	color: #52C1DE;
	border-color: #52C1DE;
	background: rgba(82, 193, 222, .06);
	text-decoration: none;
}

/* Active page */
.kiwwwi-cpt-pagination__link--active,
.kiwwwi-cpt-pagination__link--active:hover {
	color: #fff !important;
	background: #52C1DE !important;
	border-color: #52C1DE !important;
}

/* Prev / Next arrows */
.kiwwwi-cpt-pagination__prev,
.kiwwwi-cpt-pagination__next {
	font-size: 18px;
	font-weight: 400;
}

/* Dots */
.kiwwwi-cpt-pagination__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	font-size: 14px;
	color: #98a2b3;
	user-select: none;
}

/* ── Override Flatsome default .page-numbers if present ── */
.kiwwwi-cpt-footer .page-numbers,
.kiwwwi-cpt-footer .page-numbers.current,
.kiwwwi-cpt-footer .nav-links {
	all: unset;
}

/* Mobile */
@media (max-width: 549px) {
	.kiwwwi-cpt-footer {
		flex-direction: column;
		align-items: stretch;
	}
	.kiwwwi-cpt-footer__info {
		position: static;
		text-align: left;
	}
	.kiwwwi-cpt-pagination__nav {
		justify-content: flex-end;
	}
	.kiwwwi-cpt-pagination__link {
		min-width: 32px;
		height: 32px;
		font-size: 13px;
		padding: 0 6px;
	}
	.kiwwwi-cpt-pagination__nav {
		gap: 3px;
	}
}


/* ═══════════════════════════════════════════════
 *  AJAX LOADING STATE
 * ═══════════════════════════════════════════════ */
.kiwwwi-cpt-grid-content {
	position: relative;
	transition: opacity .25s ease;
}

.kiwwwi-cpt-grid-content--loading {
	opacity: .35;
	pointer-events: none;
	min-height: 200px;
}

.kiwwwi-cpt-grid-content--loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid #d0d5dd;
	border-top-color: #3893AA;
	border-radius: 50%;
	animation: kiwwwi-spin .7s linear infinite;
}

@keyframes kiwwwi-spin {
	to { transform: rotate(360deg); }
}

.top-acf-display .blog-post-inner{
	display: flex;
	flex-direction: column;
}

.top-acf-display .kiwwwi-cpt-grid__acf--1{
	order: -1;
	margin-bottom: 15px;
}

.top-acf-display .kiwwwi-cpt-grid__badges{
	margin-bottom: 0;
	margin-top: 30px;
}


/* ═══════════════════════════════════════════════
 *  EQUAL HEIGHT CARDS + STRETCH SPACER
 * ═══════════════════════════════════════════════ */

/* Turn the column chain into nested flex columns so the
   card fills the full height the flex row gives it */
.kiwwwi-cpt-grid--equal-height > .col {
	display: flex;
}
.kiwwwi-cpt-grid--equal-height > .col > .col-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
}
.kiwwwi-cpt-grid--equal-height .col-inner > .box {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.kiwwwi-cpt-grid--equal-height .box > .box-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
.kiwwwi-cpt-grid--equal-height .box-text > .box-text-inner {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

/* Keep the image box at its natural (aspect-ratio) height.
   Without this, the flex column collapses the padding-top
   image box to zero height and the image disappears. */
.kiwwwi-cpt-grid--equal-height .box > .box-image {
	flex: 0 0 auto;
	width: 100%;
}
.kiwwwi-cpt-grid--equal-height .box-image .image-cover {
	position: relative;
	width: 100%;
}
.kiwwwi-cpt-grid--equal-height .box-image .image-cover > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.kiwwwi-cpt-grid--equal-height .box-image .image-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The spacer eats all leftover vertical space, pushing
   everything after it to the bottom of the card */
.kiwwwi-cpt-grid__spacer {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	pointer-events: none;
}


/* ═══════════════════════════════════════════════
 *  HOVER ARROW (image overlay)
 * ═══════════════════════════════════════════════ */
.kiwwwi-cpt-grid--hover-arrow .box-image {
	position: relative;
	overflow: hidden;
}

/* Dark veil over the image */
.kiwwwi-cpt-grid--hover-arrow .box-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	transition: opacity .3s ease;
	pointer-events: none;
	z-index: 1;
}
.kiwwwi-cpt-grid--hover-arrow .box:hover .box-image::after {
	opacity: 1;
}

/* Circular arrow — uses Flatsome primary color */
.kiwwwi-cpt-grid__hover-arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90px;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--primary-color, #52C1DE);
	color: #111;
	opacity: 0;
	transform: translate(-50%, -50%) scale(.7);
	transition: opacity .3s ease, transform .3s ease;
	pointer-events: none;
	z-index: 2;
}
.kiwwwi-cpt-grid--hover-arrow .box:hover .kiwwwi-cpt-grid__hover-arrow {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* ── Title underline on card hover ── */
.kiwwwi-cpt-grid .box.has-hover .post-title a:hover,
.kiwwwi-cpt-grid .box.has-hover .post-title .plain:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
	opacity: 1;
}