/* ==========================================================================
   OIB Breadcrumbs — page header with breadcrumb trail + title + description
   ========================================================================== */

.oib-crumbs {
	--oib-crumbs-pt: 64px;
	--oib-crumbs-pb: 56px;

	position: relative;
	padding: var(--oib-crumbs-pt) 24px var(--oib-crumbs-pb);
	font-family: var(--oib-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	-webkit-font-smoothing: antialiased;
}

.oib-crumbs__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ---- Breadcrumb trail ---- */
.oib-crumbs__nav {
	width: 100%;
}

.oib-crumbs__list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13.5px;
	line-height: 1.4;
}

.oib-crumbs__item {
	display: inline-flex;
	align-items: center;
}

.oib-crumbs__link {
	color: #64748b;
	text-decoration: none;
	transition: color 0.18s ease;
}

.oib-crumbs__link:hover,
.oib-crumbs__link:focus-visible {
	color: #7E5D74;
	outline: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.oib-crumbs__current {
	color: #0f172a;
	font-weight: 600;
}

.oib-crumbs__sep {
	color: #cbd5e1;
	font-size: 14px;
	user-select: none;
	line-height: 1;
}

/* ---- Title ---- */
.oib-crumbs__title {
	margin: 0 0 14px;
	color: #0f172a;
	font-size: clamp(32px, 4.4vw, 52px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.025em;
}

.oib-crumbs__title:last-child {
	margin-bottom: 0;
}

/* ---- Description ---- */
.oib-crumbs__desc {
	margin: 0;
	color: #475569;
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.6;
	max-width: 640px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
	.oib-crumbs {
		padding: clamp(48px, 10vw, 64px) 20px clamp(40px, 9vw, 56px);
	}

	.oib-crumbs__title {
		font-size: clamp(26px, 7vw, 36px);
	}

	.oib-crumbs__desc {
		font-size: 15px;
	}
}

@media (max-width: 480px) {
	.oib-crumbs {
		padding-left: 16px;
		padding-right: 16px;
	}

	.oib-crumbs__list {
		gap: 6px;
		font-size: 12.5px;
		margin-bottom: 14px;
	}

	/* Truncate very long crumb labels on phones */
	.oib-crumbs__current,
	.oib-crumbs__link {
		max-width: 60vw;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ==========================================================================
   Banner / Hero variant
   ==========================================================================
   Amber gradient background, breadcrumb in a translucent pill, large white
   title — matches a "page header" hero layout used by many modern blogs. */

.oib-crumbs--banner {
	--oib-crumbs-banner-from:  var(--oib-primary-light, #917388);
	--oib-crumbs-banner-to:    var(--oib-primary-dark,  #6A4960);
	--oib-crumbs-banner-angle: 135deg;

	position: relative;
	padding: clamp(56px, 8vw, 100px) 24px;
	background:
		linear-gradient(var(--oib-crumbs-banner-angle), var(--oib-crumbs-banner-from) 0%, var(--oib-crumbs-banner-to) 100%);
	color: #ffffff;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 280px;
}

/* ---------------------------------------------------------------------------
   Force system-palette gradient & white text on the banner.
   Elementor stores inline per-instance values for widgets saved before the
   palette swap (and before this design refresh). These !important rules pin
   the banner to the brand purple + white text without forcing every editor
   to re-open and re-save the widget. Remove this block once you want
   per-instance color customization via Elementor controls again.
   --------------------------------------------------------------------------- */
.oib-crumbs--banner {
	background:
		linear-gradient(135deg, var(--oib-primary-light, #917388) 0%, var(--oib-primary-dark, #6A4960) 100%) !important;
}

.oib-crumbs--banner .oib-crumbs__title,
.oib-crumbs--banner .oib-crumbs__current,
.oib-crumbs--banner .oib-crumbs__link,
.oib-crumbs--banner .oib-crumbs__sep,
.oib-crumbs--banner .oib-crumbs__desc {
	color: #ffffff !important;
}

.oib-crumbs--banner .oib-crumbs__link {
	opacity: 0.88;
}

.oib-crumbs--banner .oib-crumbs__link:hover,
.oib-crumbs--banner .oib-crumbs__link:focus-visible {
	opacity: 1;
}

.oib-crumbs--banner .oib-crumbs__sep {
	opacity: 0.7;
}

/* Decorative SVG icon pattern — translucent white shapes scattered behind text */
.oib-crumbs--banner__pattern,
.oib-crumbs--banner .oib-crumbs__pattern,
.oib-crumbs--banner::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.15;
	background-image:
		/* speech bubble — top left */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>"),
		/* paper plane — left */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='22' y1='2' x2='11' y2='13'/><polygon points='22 2 15 22 11 13 2 9 22 2'/></svg>"),
		/* mic — top */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z'/><path d='M19 10v2a7 7 0 0 1-14 0v-2'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='8' y1='23' x2='16' y2='23'/></svg>"),
		/* phone — top right */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='2' width='14' height='20' rx='2' ry='2'/><line x1='12' y1='18' x2='12.01' y2='18'/></svg>"),
		/* sparkle — top right */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/></svg>"),
		/* sound wave — right */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><line x1='4' y1='12' x2='4' y2='12'/><line x1='8' y1='8' x2='8' y2='16'/><line x1='12' y1='4' x2='12' y2='20'/><line x1='16' y1='8' x2='16' y2='16'/><line x1='20' y1='12' x2='20' y2='12'/></svg>"),
		/* headphones — bottom center */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 18v-6a9 9 0 0 1 18 0v6'/><path d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3z'/><path d='M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'/></svg>"),
		/* chart up — bottom right */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='23 6 13.5 15.5 8.5 10.5 1 18'/><polyline points='17 6 23 6 23 12'/></svg>"),
		/* id card — left */
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2' ry='2'/><circle cx='9' cy='10' r='2'/><path d='M15 8h2'/><path d='M15 12h2'/><path d='M7 16h10'/></svg>");
	background-position:
		3% 18%, 8% 70%, 28% 8%, 76% 6%, 92% 22%, 88% 50%, 50% 88%, 95% 80%, 12% 40%;
	background-repeat: no-repeat;
}

/* Use the pattern span when it's rendered (avoids ::before stacking conflict) */
.oib-crumbs--banner .oib-crumbs__pattern { z-index: 0; }
.oib-crumbs--banner .oib-crumbs__pattern + .oib-crumbs__inner { position: relative; z-index: 1; }

/* When pattern span exists, suppress the ::before duplicate */
.oib-crumbs--banner:has(.oib-crumbs__pattern)::before { content: none; }

/* Inner sits above the pattern */
.oib-crumbs--banner .oib-crumbs__inner {
	position: relative;
	z-index: 1;
}

/* Breadcrumb pill */
.oib-crumbs--banner .oib-crumbs__list {
	display: inline-flex;
	flex-wrap: nowrap;
	margin: 0 0 22px;
	padding: 9px 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.22);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	font-size: 14px;
	gap: 10px;
}

.oib-crumbs--banner .oib-crumbs__link {
	color: rgba(255, 255, 255, 0.88);
	font-weight: 500;
}

.oib-crumbs--banner .oib-crumbs__link:hover,
.oib-crumbs--banner .oib-crumbs__link:focus-visible {
	color: #ffffff;
	text-decoration: none;
}

.oib-crumbs--banner .oib-crumbs__current {
	color: #ffffff;
	font-weight: 700;
}

.oib-crumbs--banner .oib-crumbs__sep {
	color: rgba(255, 255, 255, 0.7);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* Title + description go big and white */
.oib-crumbs--banner .oib-crumbs__title {
	margin: 0 0 8px;
	color: #ffffff;
	font-family: var(--oib-font-heading, "Satoshi", "Inter", system-ui, sans-serif);
	font-size: clamp(44px, 6.4vw, 78px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.12);
}

.oib-crumbs--banner .oib-crumbs__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
	font-size: clamp(15px, 1.15vw, 17px);
	line-height: 1.55;
	max-width: 680px;
}

@media (max-width: 768px) {
	.oib-crumbs--banner {
		min-height: 220px;
	}
	.oib-crumbs--banner .oib-crumbs__title {
		font-size: clamp(32px, 8vw, 48px);
	}
	/* Slightly smaller pattern on phones so it doesn't crowd the text */
	.oib-crumbs--banner::before,
	.oib-crumbs--banner .oib-crumbs__pattern {
		background-size: 50px 50px;
	}
	/* Constrain the pill so it never overflows the section on narrow screens */
	.oib-crumbs--banner .oib-crumbs__list {
		max-width: calc(100vw - 48px);
		overflow: hidden;
	}
}