/* Safee Experience Suite 3.1.0 — blog listing layout (blog page, Safee News / Updates, category and tag archives). */
.sxp-listing{
	--sxp-green:#249461;
	--sxp-green-light:#3fbd61;
	--sxp-grey:#40403f;
	--sxp-beige:#fbf0df;
	--sxp-white:#fff;
	--sxp-muted:#686866;
	--sxp-soft:#8a8a87;
	--sxp-line:#ebe6dc;
	--sxp-wide:1180px;
	--sxp-h1:44px;
	--sxp-h1-m:32px;
	--sxp-radius:16px;
	--sxp-shadow:0 1px 2px rgba(64,64,63,.04),0 6px 20px rgba(64,64,63,.05);
	--sxp-shadow-hover:0 2px 4px rgba(64,64,63,.04),0 16px 36px rgba(64,64,63,.11);
	display:block;
	position:relative;
	width:100%;
	max-width:none;
	margin:0;
	padding:0;
	border:0;
	float:none;
	overflow-x:hidden;
	overflow-x:clip;
	background:var(--sxp-white);
	color:var(--sxp-grey);
	font-family:inherit;
	line-height:1.6;
	text-align:start;
}
.sxp-listing *,
.sxp-listing *::before,
.sxp-listing *::after{box-sizing:border-box}

/* The theme column around the template (Astra boxes it and greys the page). */
body.safee-xp-listing .site-content>.ast-container{display:block;max-width:none;padding:0}
body.safee-xp-listing.ast-separate-container,
body.safee-xp-listing.ast-separate-container .site-content{background-color:#fff}
body.safee-xp-listing .site-content{padding-top:0;padding-bottom:0}

/* ------------------------------------------------------------------ Hero */
.sxp-listing .sxp-hero{
	position:relative;
	margin:0;
	padding:56px 20px 40px;
	border-bottom:1px solid var(--sxp-line);
	background:linear-gradient(180deg,#fffdf9 0%,rgba(251,240,223,.75) 100%);
	text-align:center;
	isolation:isolate;
}
/* Faint route line behind the title. */
.sxp-listing .sxp-hero::before{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:url("../images/listing-placeholder.svg") center/cover no-repeat;
	opacity:.28;
	-webkit-mask-image:linear-gradient(90deg,#000 0,transparent 28%,transparent 72%,#000 100%);
	mask-image:linear-gradient(90deg,#000 0,transparent 28%,transparent 72%,#000 100%);
	pointer-events:none;
}
.sxp-listing .sxp-hero__inner{
	width:min(820px,100%);
	margin:0 auto;
}
.sxp-listing .sxp-hero__kicker{
	display:inline-flex;
	align-items:center;
	gap:10px;
	margin:0 0 12px;
	padding:0;
	color:var(--sxp-green);
	font-size:13px;
	font-weight:700;
	line-height:1.3;
	letter-spacing:.09em;
	text-transform:uppercase;
}
.sxp-listing .sxp-hero__kicker::before,
.sxp-listing .sxp-hero__kicker::after{
	content:"";
	width:22px;
	height:2px;
	border-radius:2px;
	background:var(--sxp-green-light);
	opacity:.7;
}
.sxp-listing .sxp-hero__title{
	margin:0;
	padding:0;
	border:0;
	color:var(--sxp-grey);
	font-family:inherit;
	font-size:clamp(var(--sxp-h1-m),2.2vw + 14px,var(--sxp-h1));
	font-weight:800;
	line-height:1.15;
	letter-spacing:-.02em;
	text-transform:none;
	overflow-wrap:anywhere;
}
.sxp-listing .sxp-hero__subtitle{
	max-width:640px;
	margin:14px auto 0;
	color:var(--sxp-muted);
	font-size:18px;
	line-height:1.65;
}
.sxp-listing .sxp-hero__subtitle p{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.sxp-listing .sxp-hero__subtitle p+p{margin-top:8px}

/* Tabs bar, centred under the subtitle. */
.sxp-listing .sxp-hero__tabs{margin:26px 0 0}
.sxp-listing .sxp-hero__tabs .safee-xp-blog-tabs{
	margin:0;
	text-align:center;
	box-shadow:none;
}
.sxp-listing .sxp-hero__tabs .safee-xp-blog-tabs__list{
	background:#fff;
	border:1px solid var(--sxp-line);
	box-shadow:0 4px 14px rgba(64,64,63,.06);
	text-align:start;
}
.sxp-listing .sxp-hero__tabs .safee-xp-blog-tabs a.safee-xp-blog-tabs__link{
	min-height:40px;
	padding:9px 18px;
	font-size:15px;
}
.sxp-listing .sxp-hero__tabs .safee-xp-blog-tabs a.safee-xp-blog-tabs__link:hover{box-shadow:none;background:rgba(63,189,97,.10)}
.sxp-listing .sxp-hero__tabs .safee-xp-blog-tabs a.safee-xp-blog-tabs__link.is-current,
.sxp-listing .sxp-hero__tabs .safee-xp-blog-tabs a.safee-xp-blog-tabs__link[aria-current]{
	border-color:var(--sxp-green);
	background:var(--sxp-green);
	color:#fff;
	box-shadow:none;
}

/* --------------------------------------------------------------- Content */
.sxp-listing .sxp-content{
	width:min(var(--sxp-wide),calc(100% - 40px));
	margin:0 auto;
	padding:44px 0 72px;
}
.sxp-listing .sxp-content__heading{
	display:flex;
	align-items:center;
	gap:14px;
	margin:52px 0 22px;
	padding:0;
	border:0;
	color:var(--sxp-grey);
	font-family:inherit;
	font-size:20px;
	font-weight:700;
	line-height:1.3;
	letter-spacing:0;
	text-transform:none;
}
.sxp-listing .sxp-content__heading::after{
	content:"";
	flex:1 1 auto;
	height:1px;
	background:var(--sxp-line);
}
.sxp-listing .sxp-content>.sxp-content__heading:first-child,
.sxp-listing .sxp-content>.safee-xp-blog-tabs+.sxp-content__heading{margin-top:0}

/* Shared: image box, placeholder, stretched link, meta line. */
.sxp-listing .sxp-media{
	position:relative;
	display:block;
	margin:0;
	overflow:hidden;
	background:var(--sxp-beige);
	aspect-ratio:16/9;
}
.sxp-listing .sxp-media img,
.sxp-listing .sxp-media .sxp-media__img{
	position:absolute;
	inset:0;
	display:block;
	/* !important: some themes (Twenty Twenty-One) print an inline width / height style on attachment images. */
	width:100%!important;
	height:100%!important;
	max-width:none!important;
	max-height:none!important;
	margin:0;
	padding:0;
	border:0;
	border-radius:0;
	object-fit:cover;
	object-position:50% 50%;
	box-shadow:none;
	transition:transform .45s ease;
}
.sxp-listing .sxp-placeholder{
	position:absolute;
	inset:0;
	display:block;
	background:var(--sxp-beige) url("../images/listing-placeholder.svg") center/cover no-repeat;
}
.sxp-listing a.sxp-stretch{
	color:inherit;
	text-decoration:none;
	box-shadow:none;
	background:none;
}
.sxp-listing a.sxp-stretch::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:2;
	border-radius:var(--sxp-radius);
}
.sxp-listing a.sxp-stretch:focus{outline:none}
.sxp-listing a.sxp-stretch:focus-visible::after{
	outline:3px solid var(--sxp-green);
	outline-offset:3px;
}
.sxp-listing .sxp-meta{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:4px 0;
	margin:auto 0 0;
	color:var(--sxp-soft);
	font-size:13.5px;
	line-height:1.5;
}
.sxp-listing .sxp-meta__read::before{
	content:"";
	display:inline-block;
	width:4px;
	height:4px;
	margin:0 10px;
	border-radius:50%;
	background:currentColor;
	opacity:.6;
	vertical-align:middle;
}
.sxp-listing .sxp-arrow{
	display:inline-block;
	width:8px;
	height:8px;
	margin-inline-start:9px;
	border-top:2px solid currentColor;
	border-inline-end:2px solid currentColor;
	transform:rotate(45deg);
	transition:transform .2s ease;
}
.sxp-listing[dir="rtl"] .sxp-arrow{transform:rotate(-45deg)}

/* -------------------------------------------------------- Featured post */
.sxp-listing .sxp-feature{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);
	align-items:stretch;
	margin:0;
	overflow:hidden;
	border:1px solid var(--sxp-line);
	border-radius:calc(var(--sxp-radius) + 4px);
	background:#fff;
	box-shadow:var(--sxp-shadow);
	transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.sxp-listing .sxp-feature__media{aspect-ratio:auto;width:100%;min-width:0;height:100%;min-height:260px}
.sxp-listing .sxp-feature__body{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	min-width:0;
	padding:36px 40px;
}
.sxp-listing .sxp-feature__label{
	display:inline-flex;
	flex-wrap:wrap;
	align-items:center;
	gap:0;
	margin:0 0 14px;
	color:var(--sxp-green);
	font-size:13px;
	font-weight:700;
	line-height:1.4;
	letter-spacing:.06em;
	text-transform:uppercase;
}
.sxp-listing .sxp-feature__label-sep{
	display:inline-block;
	width:4px;
	height:4px;
	margin:0 10px;
	border-radius:50%;
	background:currentColor;
	opacity:.6;
}
.sxp-listing .sxp-feature__title{
	display:-webkit-box;
	margin:0 0 14px;
	padding:0;
	border:0;
	overflow:hidden;
	color:var(--sxp-grey);
	font-family:inherit;
	font-size:clamp(23px,1.1vw + 15px,31px);
	font-weight:800;
	line-height:1.25;
	letter-spacing:-.015em;
	text-transform:none;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	line-clamp:3;
}
.sxp-listing .sxp-feature__excerpt{
	display:-webkit-box;
	margin:0 0 20px;
	overflow:hidden;
	color:var(--sxp-muted);
	font-size:16.5px;
	line-height:1.65;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	line-clamp:3;
}
.sxp-listing .sxp-feature .sxp-meta{margin:0}
.sxp-listing .sxp-feature__more{
	display:inline-flex;
	align-items:center;
	margin-top:22px;
	color:var(--sxp-green);
	font-size:15px;
	font-weight:700;
	line-height:1.3;
}

/* ------------------------------------------------------------------ Grid */
.sxp-listing .sxp-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:28px;
	margin:0;
	padding:0;
}
.sxp-listing .sxp-card{
	position:relative;
	display:flex;
	flex-direction:column;
	min-width:0;
	margin:0;
	overflow:hidden;
	border:1px solid var(--sxp-line);
	border-radius:var(--sxp-radius);
	background:#fff;
	box-shadow:var(--sxp-shadow);
	transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.sxp-listing .sxp-chip{
	position:absolute;
	inset-block-start:12px;
	inset-inline-start:12px;
	z-index:1;
	max-width:calc(100% - 24px);
	overflow:hidden;
	padding:5px 11px;
	border-radius:999px;
	background:rgba(255,255,255,.94);
	box-shadow:0 2px 8px rgba(64,64,63,.12);
	color:var(--sxp-green);
	font-size:12px;
	font-weight:700;
	line-height:1.35;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.sxp-listing .sxp-card__body{
	display:flex;
	flex:1 1 auto;
	flex-direction:column;
	min-width:0;
	padding:20px 22px 22px;
}
.sxp-listing .sxp-card__title{
	display:-webkit-box;
	margin:0 0 10px;
	padding:0;
	border:0;
	overflow:hidden;
	color:var(--sxp-grey);
	font-family:inherit;
	font-size:19px;
	font-weight:700;
	line-height:1.4;
	letter-spacing:-.005em;
	text-transform:none;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3;
	line-clamp:3;
}
.sxp-listing .sxp-card__excerpt{
	display:-webkit-box;
	margin:0 0 18px;
	overflow:hidden;
	color:var(--sxp-muted);
	font-size:15px;
	line-height:1.6;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	line-clamp:2;
}

/* Hover: a small lift, the title turns green, the image zooms a little. */
.sxp-listing .sxp-card:hover,
.sxp-listing .sxp-feature:hover{
	transform:translateY(-3px);
	border-color:rgba(36,148,97,.32);
	box-shadow:var(--sxp-shadow-hover);
}
.sxp-listing .sxp-card:hover .sxp-card__title,
.sxp-listing .sxp-feature:hover .sxp-feature__title{color:var(--sxp-green)}
.sxp-listing .sxp-card:hover .sxp-media img,
.sxp-listing .sxp-feature:hover .sxp-media img{transform:scale(1.03)}
.sxp-listing .sxp-feature:hover .sxp-arrow{transform:translateX(3px) rotate(45deg)}
.sxp-listing[dir="rtl"] .sxp-feature:hover .sxp-arrow{transform:translateX(-3px) rotate(-45deg)}

/* ------------------------------------------------------------ Pagination */
.sxp-listing .sxp-pagination{margin:52px 0 0}
.sxp-listing .sxp-pagination__list{
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
	gap:8px;
	margin:0;
	padding:0;
	list-style:none;
}
.sxp-listing .sxp-pagination__item{margin:0;padding:0;list-style:none}
.sxp-listing .sxp-pagination__item::before,
.sxp-listing .sxp-pagination__item::marker{content:none}
.sxp-listing .sxp-pagination .page-numbers{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:44px;
	height:44px;
	padding:0 14px;
	border:1px solid var(--sxp-line);
	border-radius:12px;
	background:#fff;
	color:var(--sxp-grey);
	font-size:15px;
	font-weight:600;
	line-height:1;
	text-decoration:none;
	box-shadow:none;
	transition:border-color .15s ease,color .15s ease,background-color .15s ease;
}
.sxp-listing .sxp-pagination a.page-numbers:hover{border-color:var(--sxp-green);color:var(--sxp-green)}
.sxp-listing .sxp-pagination .page-numbers.current{
	border-color:var(--sxp-green);
	background:var(--sxp-green);
	color:#fff;
}
.sxp-listing .sxp-pagination .page-numbers.dots{min-width:28px;padding:0 4px;border-color:transparent;background:transparent}
.sxp-listing .sxp-pagination .prev .sxp-arrow,
.sxp-listing .sxp-pagination .next .sxp-arrow{width:7px;height:7px}
.sxp-listing .sxp-pagination .prev .sxp-arrow{margin-inline:0 8px;transform:rotate(-135deg)}
.sxp-listing[dir="rtl"] .sxp-pagination .prev .sxp-arrow{transform:rotate(135deg)}
.sxp-listing .sxp-pagination a.page-numbers:focus-visible,
.sxp-listing .safee-xp-blog-tabs a:focus-visible{outline:3px solid var(--sxp-green);outline-offset:2px}

/* ---------------------------------------------------------------- Empty */
.sxp-listing .sxp-empty{
	padding:56px 24px;
	border:1px dashed var(--sxp-line);
	border-radius:var(--sxp-radius);
	background:#fffdf9;
	text-align:center;
}
.sxp-listing .sxp-empty__title{margin:0 0 8px;color:var(--sxp-grey);font-size:22px;font-family:inherit}
.sxp-listing .sxp-empty p{margin:0;color:var(--sxp-muted)}

/* The built-in lead form after the grid (it keeps its own design). */
.sxp-listing>.sscta-form-section{margin-top:0}

/* ---------------------------------------------------------------- Arabic */
.sxp-listing[dir="rtl"]{text-align:right}
.sxp-listing[dir="rtl"] .sxp-hero{text-align:center}
.sxp-listing[dir="rtl"] .sxp-hero__kicker,
.sxp-listing[dir="rtl"] .sxp-feature__label{letter-spacing:0;text-transform:none;font-size:14px}
.sxp-listing[dir="rtl"] .sxp-hero__title,
.sxp-listing[dir="rtl"] .sxp-feature__title,
.sxp-listing[dir="rtl"] .sxp-card__title{letter-spacing:0;line-height:1.45}
.sxp-listing[dir="rtl"] .sxp-hero__title{line-height:1.3}
.sxp-listing[dir="rtl"] .sxp-card__excerpt,
.sxp-listing[dir="rtl"] .sxp-feature__excerpt{line-height:1.75}
.sxp-listing[dir="rtl"] .sxp-hero__tabs .safee-xp-blog-tabs{text-align:center}

/* -------------------------------------------------------------- Tablet */
@media (max-width:1024px){
	.sxp-listing .sxp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
	.sxp-listing .sxp-feature__body{padding:28px 30px}
	.sxp-listing .sxp-feature__excerpt{-webkit-line-clamp:2;line-clamp:2}
}
@media (max-width:860px){
	.sxp-listing .sxp-feature{grid-template-columns:minmax(0,1fr)}
	.sxp-listing .sxp-feature__media{aspect-ratio:16/9;height:auto;min-height:0}
	.sxp-listing .sxp-feature__body{padding:24px 24px 26px}
	.sxp-listing .sxp-feature__excerpt{-webkit-line-clamp:3;line-clamp:3}
}

/* -------------------------------------------------------------- Mobile */
@media (max-width:640px){
	.sxp-listing .sxp-hero{padding:38px 17px 28px}
	.sxp-listing .sxp-hero__title{font-size:var(--sxp-h1-m)}
	.sxp-listing .sxp-hero__subtitle{font-size:16px}
	.sxp-listing .sxp-hero__tabs{margin-top:20px}
	.sxp-listing .sxp-content{width:calc(100% - 34px);padding:28px 0 52px}
	.sxp-listing .sxp-grid{grid-template-columns:minmax(0,1fr);gap:20px}
	.sxp-listing .sxp-content__heading{margin:38px 0 18px;font-size:18px}
	.sxp-listing .sxp-feature__body{padding:20px 20px 22px}
	.sxp-listing .sxp-feature__title{font-size:22px}
	.sxp-listing .sxp-feature__excerpt{font-size:15.5px}
	.sxp-listing .sxp-card__body{padding:18px 18px 20px}
	.sxp-listing .sxp-card__title{font-size:18px}
	.sxp-listing .sxp-pagination{margin-top:40px}
	.sxp-listing .sxp-pagination__list{gap:6px}
	.sxp-listing .sxp-pagination .page-numbers{min-width:40px;height:40px;padding:0 11px;font-size:14px}
	.sxp-listing .sxp-pagination .sxp-pagination__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
	.sxp-listing .sxp-pagination .prev .sxp-arrow{margin:0}
	.sxp-listing .sxp-pagination .next .sxp-arrow{margin:0}
}
@media (max-width:400px){
	.sxp-listing .sxp-hero{padding-inline:12px}
	.sxp-listing .sxp-hero__tabs .safee-xp-blog-tabs__list{gap:0;padding:3px}
	.sxp-listing .sxp-hero__tabs .safee-xp-blog-tabs a.safee-xp-blog-tabs__link{min-height:38px;padding:8px 10px;font-size:13px}
	.sxp-listing[dir="rtl"] .sxp-hero__tabs .safee-xp-blog-tabs a.safee-xp-blog-tabs__link{font-size:13.5px}
}

@media (prefers-reduced-motion:reduce){
	.sxp-listing .sxp-card,
	.sxp-listing .sxp-feature,
	.sxp-listing .sxp-media img,
	.sxp-listing .sxp-arrow,
	.sxp-listing .sxp-pagination .page-numbers{transition:none}
	.sxp-listing .sxp-card:hover,
	.sxp-listing .sxp-feature:hover,
	.sxp-listing .sxp-card:hover .sxp-media img,
	.sxp-listing .sxp-feature:hover .sxp-media img{transform:none}
	.sxp-listing .sxp-feature:hover .sxp-arrow{transform:rotate(45deg)}
	.sxp-listing[dir="rtl"] .sxp-feature:hover .sxp-arrow{transform:rotate(-45deg)}
}

@media print{
	.sxp-listing .sxp-hero::before,
	.sxp-listing .sxp-hero__tabs,
	.sxp-listing .sxp-pagination{display:none}
	.sxp-listing .sxp-card,
	.sxp-listing .sxp-feature{box-shadow:none;break-inside:avoid}
}
