/* Zimozi Insights page — font, spacing, card & pagination fixes. Scoped to page-id-26811 only. */

.page-id-insights,
.page-id-insights * {
	font-family: 'IBM Plex Sans', sans-serif !important;
}

/* Same Elementor default-flex-gap issue as the card fix above, this time on
   the pillar/category page's root container (breadcrumb/h1/subtitle/grid) —
   Elementor containers default to a 20px gap between children unless
   explicitly zeroed, which was stacking on top of each widget's own margin. */
.page-id-insights .elementor-element-plroot,
.page-id-insights .elementor-element-insroot {
	gap: 0 !important;
}
/* Zeroing insroot's gap above also removed the space between the tabs and
   the newsletter card below it (they were touching) — restore it explicitly. */
.page-id-insights .elementor-element-nlwrap {
	margin-top: 48px !important;
}

/* BASE card styling. On dev this comes from an Elementor loop-item template's
   own generated CSS; production's cards are pure PHP/HTML (no Elementor
   template dependency), so the base look has to live here instead of relying
   on a template that doesn't exist on this site. Without this, cards have no
   border/background and their inner layout isn't flex. */
.elementor-53042 .elementor-element.elementor-element-inscard1 {
	border: 1px solid #E3E3E3;
	border-radius: 12px;
	background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	gap: 0;
	overflow: hidden;
}
.elementor-53042 .elementor-element.elementor-element-insbody1 {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
}
/* The meta/title/excerpt widgets each wrap their content in a <p>, which
   carries the browser's default ~16px top/bottom margin — that was the real
   source of the "too much space" between the image and the date pills. */
.elementor-53042 .ins-card__meta p,
.elementor-53042 .ins-card__excerpt p {
	margin: 0;
}
.elementor-53042 .elementor-element.elementor-element-institl1 .elementor-heading-title {
	color: #111111;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.2em;
}
.elementor-53042 .elementor-element.elementor-element-insexc1 {
	color: #69727D;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elementor-53042 .elementor-element.elementor-element-institl1 .elementor-heading-title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}
.elementor-53042 .elementor-element.elementor-element-institl1 .elementor-heading-title a {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
}
.elementor-53042.e-loop-item {
	height: 100%;
}
.elementor-53042 .elementor-element.elementor-element-inscard1 {
	height: 100%;
}

/* Fix: several Elementor container/widget wrappers collapse to width:0 on this
   page (missing container width setting), which also shrinks card images and
   hides pagination. Force them to fill their parent. */
.page-id-insights .elementor-element-instabs,
.page-id-insights .elementor-element-instabs > .elementor-widget-container,
.page-id-insights .e-n-tabs,
.page-id-insights .elementor-element-paneal1,
.page-id-insights .elementor-element-panere1,
.page-id-insights .elementor-element-paneth1,
.page-id-insights .elementor-element-paneca1,
.page-id-insights .elementor-element-loopall,
.page-id-insights .elementor-element-looprec,
.page-id-insights .elementor-element-loopall > .elementor-widget-container,
.page-id-insights .elementor-element-looprec > .elementor-widget-container,
.page-id-insights .elementor-element-insmedia1,
.page-id-insights .elementor-pagination {
	width: 100% !important;
}

/* Tabs */
.page-id-insights .e-n-tabs-heading {
	gap: 10px !important;
	margin-bottom: 14px !important;
}
/* The tab content wrapper had its own padding-top:24px (from the tabs widget's
   own custom_css) stacking on top of the margin-bottom above, doubling the
   gap to the grid. Zero it so margin-bottom is the single source of truth. */
.page-id-insights .e-n-tabs-content {
	padding-top: 0 !important;
}
.page-id-insights .e-n-tab-title {
	height: 44px !important;
	padding: 0 18px !important;
	border-radius: 8px !important;
}

/* Card image */
.page-id-insights .elementor-element-insmedia1 img {
	aspect-ratio: 16 / 9 !important;
	object-fit: cover !important;
	width: 100% !important;
	height: auto !important;
	display: block !important;
}
.page-id-insights .elementor-element-inscard1 {
	border-radius: 12px !important;
	overflow: hidden !important;
	transition: box-shadow .2s ease, transform .2s ease !important;
}
/* Loop card template (53042) ships a default padding on its background layer
   that shrinks the image area below the card edges — zero it out. Confirmed
   fix, tested in devtools. */
.elementor-53042 .elementor-element.elementor-element-inscard1:not(.elementor-motion-effects-element-type-background),
.elementor-53042 .elementor-element.elementor-element-inscard1 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-color: #FFFFFF;
	padding: 0;
}
.page-id-insights .elementor-element-inscard1:hover {
	box-shadow: 0 8px 24px rgba(17,17,17,.08) !important;
	transform: translateY(-2px) !important;
}

/* Card body spacing */
.page-id-insights .elementor-element-insbody1 {
	padding: 18px !important;
	gap: 10px !important;
}
.page-id-insights .elementor-element-institl1 .elementor-heading-title {
	font-weight: 600 !important;
	font-size: 19px !important;
	line-height: 1.35 !important;
	margin-top: 2px !important;
}
.page-id-insights .elementor-element-insexc1 {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: #667085 !important;
}
.page-id-insights .ins-pill {
	margin: 0 8px 0 0 !important;
}

/* Dynamic Themes/Categories box grid ([zmz_themes] / [zmz_categories] shortcodes) */
.page-id-insights .zmz-tbox-grid {
	display: grid;
	gap: 20px;
}
.page-id-insights .zmz-tbox-item {
	min-width: 0;
}
/* Theme boxes get a category chip row (member categories, real WP children —
   grows automatically). Move the card border to the item wrapper so the
   chips sit inside the same card below the description. */
.page-id-insights .zmz-tbox-item {
	border: 1px solid #E3E3E3;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
}
.page-id-insights .zmz-tbox-item .elementor-image-box-wrapper {
	border: none !important;
	border-radius: 0 !important;
}
.page-id-insights .zmz-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.page-id-insights .zmz-tbox-item .zmz-chip-row {
	padding: 0 20px 20px;
}
.page-id-insights .zmz-rec-section .zmz-chip-row {
	margin: 0 0 20px;
}
.page-id-insights .zmz-chip {
	display: inline-block;
	font-size: 12px;
	line-height: 1.4;
	color: #69727D;
	background: #F5F6F7;
	border: 1px solid #E3E3E3;
	border-radius: 20px;
	padding: 4px 10px;
	text-decoration: none;
	white-space: nowrap;
}
.page-id-insights .zmz-chip:hover {
	background: #EAF5F3;
	color: #0F8A73;
	border-color: #16B296;
}

/* Dynamic Recommended sections ([zmz_recommended] shortcode) */
.page-id-insights .zmz-rec-section--divider {
	margin-top: 40px !important;
	padding-top: 40px !important;
	border-top: 1px solid #E3E3E3 !important;
}
.page-id-insights .zmz-rec-heading {
	font-size: 22px !important;
	font-weight: 500 !important;
	color: #1D1D1D !important;
	margin: 0 0 6px !important;
}
.page-id-insights .zmz-rec-desc {
	font-size: 15px !important;
	color: #69727D !important;
	line-height: 1.6 !important;
	margin: 0 0 20px !important;
}
.page-id-insights .zmz-rec-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 22px 20px !important;
}
.page-id-insights .zmz-rec-grid .e-loop-item {
	min-width: 0;
	margin: 0 !important;
}
@media (max-width: 1024px) {
	.page-id-insights .zmz-rec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.page-id-insights .zmz-tbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.page-id-insights .zmz-rec-grid { grid-template-columns: minmax(0, 1fr) !important; }
	.page-id-insights .zmz-tbox-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Newsletter card ([zmz-nl-card]) overflows on mobile: its custom CSS uses
   align-items:center in column layout, which lets the left block and the
   MailPoet form size to their natural (wider-than-viewport) width instead
   of stretching to fit — causing horizontal page overflow. Force stretch. */
@media (max-width: 767px) {
	.page-id-insights .elementor-element-nlwrap .zmz-nl-card {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
	}
	.page-id-insights .elementor-element-nlwrap .zmz-nl-left,
	.page-id-insights .elementor-element-nlwrap .zmz-nl-form,
	.page-id-insights .elementor-element-nlwrap .zmz-nl-form .mailpoet_form,
	.page-id-insights .elementor-element-nlwrap .zmz-nl-form form {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}
	.page-id-insights .elementor-element-nlwrap .zmz-nl-left {
		flex-wrap: wrap;
	}
	.page-id-insights .elementor-element-nlwrap .zmz-nl-desc {
		min-width: 0;
	}
	/* MailPoet's own form keeps the input at a fixed ~200px width, which
	   overlaps the Subscribe button once the row is squeezed to mobile
	   width. Stack input above button instead of fighting the shrink math. */
	/* Elementor's own generated CSS for this widget (post-53609.css) sets
	   ".elementor-53609 .elementor-element.elementor-element-nlwrap
	   #mailpoet_form_1 form.mailpoet_form { flex-flow: row !important }" —
	   higher specificity than a plain descendant selector beats source
	   order even with !important, so match its exact selector to win. */
	.page-id-insights .elementor-element-nlwrap #mailpoet_form_1 form,
	.elementor-53609 .elementor-element.elementor-element-nlwrap #mailpoet_form_1 form.mailpoet_form {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		gap: 10px !important;
	}
	.page-id-insights .elementor-element-nlwrap .mailpoet_paragraph {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		margin: 0 !important;
	}
	.page-id-insights .elementor-element-nlwrap #mailpoet_form_1 input.mailpoet_text,
	.page-id-insights .elementor-element-nlwrap #mailpoet_form_1 input[type="submit"] {
		width: 100% !important;
		box-sizing: border-box !important;
	}
}

/* Pagination */
.page-id-insights .elementor-pagination {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 56px 0 32px !important;
}
.page-id-insights .elementor-pagination .page-numbers {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 12px !important;
	border-radius: 8px !important;
	border: 1px solid #E3E3E3 !important;
	color: #69727D !important;
	text-decoration: none !important;
	font-size: 15px !important;
	transition: all .15s ease !important;
}
.page-id-insights .elementor-pagination .page-numbers.current {
	background: #16B296 !important;
	border-color: #16B296 !important;
	color: #fff !important;
}
.page-id-insights .elementor-pagination .page-numbers:hover:not(.current) {
	background: #F1F1F1 !important;
	color: #111 !important;
}
.page-id-insights .elementor-pagination .page-numbers.dots {
	border: none !important;
}