/*
 * Wayfinder patterns built from native Divi modules.
 *
 * These classes are carried by named Divi presets. Editors keep the native
 * content controls, accessibility behaviour, responsive options, and module
 * updates; the preset supplies the TRBC design language. Custom modules are
 * reserved for structures Divi cannot express (page header, feature row,
 * link card, event data).
 *
 * Preset map:
 *   divi/cta            .trbc-wf-notice, .trbc-wf-action-panel
 *   divi/row            .trbc-wf-detail-strip
 *   divi/blurb          .trbc-wf-detail
 *   divi/testimonial    .trbc-wf-story
 *   divi/accordion      .trbc-wf-faq
 *   divi/accordion-item .trbc-wf-faq-item
 */

/* ---------- shared native-module normalization ---------- */
.trbc-wf-notice,
.trbc-wf-action-panel,
.trbc-wf-detail,
.trbc-wf-story,
.trbc-wf-faq,
.trbc-wf-faq-item {
	font-family: var(--trbc-face);
}

.trbc-wf-notice .et_pb_module_header,
.trbc-wf-action-panel .et_pb_module_header,
.trbc-wf-detail .et_pb_module_header,
.trbc-wf-faq .et_pb_toggle_title,
.trbc-wf-faq-item .et_pb_toggle_title {
	font-family: var(--trbc-face);
	letter-spacing: var(--trbc-tracking-tight);
}

/* ---------- status notice ----------
 * A compact interruption for time-sensitive or operational information. It
 * is deliberately quieter than a hero and stronger than body copy.
 */
.et_pb_promo.trbc-wf-notice {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--trbc-space-5) var(--trbc-space-8);
	padding: var(--trbc-space-5) var(--trbc-space-6) var(--trbc-space-5) var(--trbc-space-8);
	border: 1px solid var(--trbc-accent-line);
	border-radius: var(--trbc-radius-lg);
	background: var(--trbc-accent-surface) !important;
	box-shadow: none;
	color: var(--trbc-ink);
	text-align: left;
}

.et_pb_promo.trbc-wf-notice::before {
	content: "";
	position: absolute;
	left: var(--trbc-space-4);
	top: var(--trbc-space-4);
	bottom: var(--trbc-space-4);
	width: 4px;
	border-radius: var(--trbc-radius-pill);
	background: var(--trbc-brand);
}

.trbc-wf-notice .et_pb_promo_description {
	padding: 0;
	text-align: left !important;
}

.trbc-wf-notice .et_pb_module_header,
.trbc-wf-notice .et_pb_module_header h1,
.trbc-wf-notice .et_pb_module_header h2,
.trbc-wf-notice .et_pb_module_header h3 {
	margin: 0 0 var(--trbc-space-1);
	padding: 0;
	font-size: var(--trbc-text-lg);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-snug);
	color: var(--trbc-ink) !important;
	text-align: left !important;
}

.trbc-wf-notice .et_pb_promo_description,
.trbc-wf-notice .et_pb_promo_description p {
	font-size: var(--trbc-text-base);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink-soft) !important;
	text-align: left !important;
}

.trbc-wf-notice .et_pb_button_wrapper {
	margin: 0;
}

.trbc-wf-notice .et_pb_promo_button.et_pb_button {
	min-height: var(--trbc-tap);
	padding: 0 var(--trbc-space-5) !important;
	border: 1px solid var(--trbc-brand-border) !important;
	border-radius: var(--trbc-radius-md) !important;
	background: var(--trbc-surface) !important;
	box-shadow: none;
	font-size: var(--trbc-text-base) !important;
	font-weight: var(--trbc-weight-semibold) !important;
	line-height: calc(var(--trbc-tap) - 2px) !important;
	color: var(--trbc-brand-deep) !important;
}

.trbc-wf-notice .et_pb_promo_button.et_pb_button:hover {
	border-color: var(--trbc-brand) !important;
	background: var(--trbc-brand-tint) !important;
}

/* ---------- component-lab framing ----------
 * Labels make the demonstration legible without becoming part of the pattern
 * itself. These classes are intentionally useful only on a showcase page.
 */
.trbc-wayfinder-showcase .trbc-pattern-demo {
	margin-top: var(--trbc-space-10);
}

.trbc-wayfinder-showcase .trbc-section-head + .trbc-pattern-demo {
	margin-top: var(--trbc-space-8);
}

.trbc-pattern-label {
	margin: 0 0 var(--trbc-space-4);
}

.trbc-pattern-label h3 {
	margin: 0 0 var(--trbc-space-1);
	padding: 0;
	font-family: var(--trbc-face);
	font-size: var(--trbc-text-lg);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-snug);
	letter-spacing: var(--trbc-tracking-tight);
	color: var(--trbc-ink);
}

.trbc-pattern-label p {
	max-width: var(--trbc-measure-prose);
	margin: 0;
	padding: 0;
	font-family: var(--trbc-face);
	font-size: var(--trbc-text-base);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink-soft);
}

.et_pb_row.trbc-pattern-pair {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--trbc-space-6);
}

.et_pb_row.trbc-pattern-pair > .et_pb_column.et_pb_column {
	display: flex;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
}

.et_pb_row.trbc-pattern-pair .trbc-wf-story,
.et_pb_row.trbc-pattern-pair .trbc-wf-faq {
	flex: 1 1 auto;
}

/* ---------- key-detail strip ----------
 * A semantic summary rail for the few facts a visitor is most likely to scan
 * before reading the page: when, where, audience, accessibility, or cost.
 */
.et_pb_row.trbc-wf-detail-strip {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	width: min(90%, var(--trbc-measure)) !important;
	max-width: var(--trbc-measure) !important;
	padding: 0 !important;
	border: 1px solid var(--trbc-line);
	border-radius: var(--trbc-radius-lg);
	background: var(--trbc-surface);
	box-shadow: var(--trbc-shadow-1);
	overflow: hidden;
}

.et_pb_row.trbc-wf-detail-strip > .et_pb_column.et_pb_column {
	display: flex;
	width: auto !important;
	margin: 0 !important;
}

.et_pb_row.trbc-wf-detail-strip > .et_pb_column + .et_pb_column {
	border-left: 1px solid var(--trbc-line);
}

.trbc-wf-detail.et_pb_blurb {
	width: 100%;
	margin: 0;
	padding: var(--trbc-space-5) var(--trbc-space-6);
	background: transparent;
}

.trbc-wf-detail .et_pb_blurb_content {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr);
	align-items: center;
	gap: 0 var(--trbc-space-3);
	max-width: none;
	text-align: left;
}

.trbc-wf-detail .et_pb_main_blurb_image {
	grid-row: 1 / span 2;
	grid-column: 1;
	display: grid;
	place-items: center;
	width: 36px;
	margin: 0;
}

.trbc-wf-detail .et-pb-icon,
.trbc-wf-detail .et_pb_image_wrap {
	font-size: 22px !important;
	color: var(--trbc-brand-deep) !important;
}

.trbc-wf-detail .et_pb_blurb_container {
	grid-column: 2;
	display: contents;
}

.trbc-wf-detail .et_pb_module_header {
	grid-column: 2;
	margin: 0;
	padding: 0;
	font-size: var(--trbc-text-xs);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-snug);
	letter-spacing: var(--trbc-tracking-wide);
	text-transform: uppercase;
	color: var(--trbc-ink-soft);
}

.trbc-wf-detail .et_pb_blurb_description {
	grid-column: 2;
	margin-top: 2px;
	font-size: var(--trbc-text-md);
	font-weight: var(--trbc-weight-semibold);
	line-height: var(--trbc-leading-snug);
	color: var(--trbc-ink);
}

.trbc-wf-detail .et_pb_blurb_description p {
	padding: 0;
	color: inherit;
}

/* ---------- next-step panel ----------
 * One recommended action near the end of a page. This is intentionally a
 * compound native CTA, not another bespoke custom module.
 */
.et_pb_promo.trbc-wf-action-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--trbc-space-6) var(--trbc-space-10);
	padding: var(--trbc-space-10) var(--trbc-space-12);
	border: 1px solid var(--trbc-line-inverse);
	border-radius: var(--trbc-radius-xl);
	background:
		radial-gradient(circle at 8% 0%, rgba(73, 149, 209, 0.24), transparent 42%),
		var(--trbc-ink-inverse-ground) !important;
	box-shadow: var(--trbc-shadow-2);
	text-align: left;
}

.trbc-wf-action-panel .et_pb_promo_description {
	max-width: 60ch;
	padding: 0;
	text-align: left !important;
}

.trbc-wf-action-panel .et_pb_module_header {
	margin: 0 0 var(--trbc-space-2);
	padding: 0;
	font-size: var(--trbc-text-2xl);
	font-weight: var(--trbc-weight-bold);
	line-height: var(--trbc-leading-tight);
	color: var(--trbc-ink-invert) !important;
	text-align: left !important;
}

.trbc-wf-action-panel .et_pb_promo_description,
.trbc-wf-action-panel .et_pb_promo_description p {
	font-size: var(--trbc-text-md);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink-inverse-soft) !important;
	text-align: left !important;
}

.trbc-wf-action-panel .et_pb_button_wrapper {
	margin: 0;
}

.trbc-wf-action-panel .et_pb_promo_button.et_pb_button {
	min-height: 48px;
	padding: 0 var(--trbc-space-6) !important;
	border: 1px solid transparent !important;
	border-radius: var(--trbc-radius-md) !important;
	background: var(--trbc-brand) !important;
	box-shadow: var(--trbc-shadow-brand);
	font-size: var(--trbc-text-base) !important;
	font-weight: var(--trbc-weight-semibold) !important;
	line-height: 46px !important;
	color: var(--trbc-ink-invert) !important;
}

.trbc-wf-action-panel .et_pb_promo_button.et_pb_button:hover {
	background: var(--trbc-brand-hover) !important;
	box-shadow: var(--trbc-shadow-brand-hover);
}

/* ---------- story / quotation ---------- */
.et_pb_testimonial.trbc-wf-story {
	position: relative;
	margin: 0;
	padding: var(--trbc-space-8) var(--trbc-space-8) var(--trbc-space-8) var(--trbc-space-16);
	border: 1px solid var(--trbc-line);
	border-radius: var(--trbc-radius-lg);
	background: var(--trbc-surface) !important;
	box-shadow: var(--trbc-shadow-1);
	color: var(--trbc-ink);
}

.et_pb_testimonial.trbc-wf-story::before {
	left: var(--trbc-space-6);
	top: var(--trbc-space-7, 28px);
	margin: 0;
	border-radius: var(--trbc-radius-sm);
	background: var(--trbc-brand-tint);
	font-size: 26px;
	color: var(--trbc-brand-deep);
}

.trbc-wf-story .et_pb_testimonial_description {
	margin-left: 0 !important;
}

.trbc-wf-story .et_pb_testimonial_description_inner,
.trbc-wf-story .et_pb_testimonial_description_inner p {
	font-size: var(--trbc-text-lg);
	font-style: normal;
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink);
}

.trbc-wf-story .et_pb_testimonial_author {
	margin-top: var(--trbc-space-4);
	font-size: var(--trbc-text-base);
	font-weight: var(--trbc-weight-bold);
	color: var(--trbc-ink);
}

.trbc-wf-story .et_pb_testimonial_meta,
.trbc-wf-story .et_pb_testimonial_position {
	font-size: var(--trbc-text-sm);
	color: var(--trbc-ink-soft);
}

/* ---------- FAQ ---------- */
.et_pb_accordion.trbc-wf-faq {
	border: 1px solid var(--trbc-line);
	border-radius: var(--trbc-radius-lg);
	background: var(--trbc-surface);
	box-shadow: var(--trbc-shadow-1);
	overflow: hidden;
}

.trbc-wf-faq .et_pb_toggle,
.et_pb_toggle.trbc-wf-faq-item {
	margin: 0 !important;
	padding: var(--trbc-space-5) var(--trbc-space-6) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--trbc-line) !important;
	background: var(--trbc-surface) !important;
	box-shadow: none;
}

.trbc-wf-faq .et_pb_toggle:last-child,
.et_pb_toggle.trbc-wf-faq-item:last-child {
	border-bottom: 0 !important;
}

.trbc-wf-faq .et_pb_toggle_title,
.trbc-wf-faq-item .et_pb_toggle_title {
	padding: 0 calc(var(--trbc-space-6) + 18px) 0 0 !important;
	font-size: var(--trbc-text-md);
	font-weight: var(--trbc-weight-semibold);
	line-height: var(--trbc-leading-snug);
	color: var(--trbc-ink) !important;
}

.trbc-wf-faq .et_pb_toggle_title::before,
.trbc-wf-faq-item .et_pb_toggle_title::before {
	right: 0;
	margin-top: -11px;
	font-size: 22px;
	color: var(--trbc-brand-deep) !important;
}

.trbc-wf-faq .et_pb_toggle_content,
.trbc-wf-faq-item .et_pb_toggle_content {
	max-width: var(--trbc-measure-prose);
	padding-top: var(--trbc-space-3);
	font-size: var(--trbc-text-base);
	line-height: var(--trbc-leading-normal);
	color: var(--trbc-ink-soft);
}

.trbc-wf-faq .et_pb_toggle_open,
.trbc-wf-faq-item.et_pb_toggle_open {
	background: var(--trbc-ground-lift) !important;
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
	.et_pb_promo.trbc-wf-notice,
	.et_pb_promo.trbc-wf-action-panel {
		grid-template-columns: 1fr;
	}

	.trbc-wf-notice .et_pb_button_wrapper,
	.trbc-wf-action-panel .et_pb_button_wrapper {
		justify-self: start;
	}

	.et_pb_row.trbc-wf-detail-strip {
		grid-template-columns: 1fr;
	}

	.et_pb_row.trbc-wf-detail-strip > .et_pb_column + .et_pb_column {
		border-top: 1px solid var(--trbc-line);
		border-left: 0;
	}

	.et_pb_row.trbc-pattern-pair {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.et_pb_promo.trbc-wf-notice {
		padding: var(--trbc-space-5) var(--trbc-space-5) var(--trbc-space-5) var(--trbc-space-8);
	}

	.trbc-wf-notice .et_pb_button_wrapper,
	.trbc-wf-notice .et_pb_promo_button.et_pb_button,
	.trbc-wf-action-panel .et_pb_button_wrapper,
	.trbc-wf-action-panel .et_pb_promo_button.et_pb_button {
		width: 100%;
	}

	.et_pb_promo.trbc-wf-action-panel {
		padding: var(--trbc-space-8) var(--trbc-space-6);
	}

	.et_pb_testimonial.trbc-wf-story {
		padding: var(--trbc-space-8) var(--trbc-space-5) var(--trbc-space-6);
	}

	.et_pb_testimonial.trbc-wf-story::before {
		position: relative;
		left: auto;
		top: auto;
		display: grid;
		place-items: center;
		width: 36px;
		height: 36px;
		margin: 0 0 var(--trbc-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.trbc-wf-notice .et_pb_promo_button.et_pb_button,
	.trbc-wf-action-panel .et_pb_promo_button.et_pb_button {
		transition: none;
	}
}
