/* ==========================================================================
   Page Builder — module styles
   Reuses shared tokens/utilities from css/theme.css (--color-teal,
   --color-gray, --color-dark-green, .btn*, .section-*, .cs-container*,
   .text-header-*, .body-text, .bg-gray, .bg-dark-green) and, where the HTML
   handoff already proved a component reusable, the exact same classes
   (.faq-*, .about-teams__list/card, .investment-team__list/card,
   .careers-teams__list/card, .career-opportunities__list/card,
   .trust-center-content*).
   ========================================================================== */

#page-builder section {
	position: relative;
}

/* Accordion text color follows the section, not a hardcoded white. */
.faq-question {
	color: inherit;
}

/* --------------------------------------------------------------------
   About Hero (page-builder/modules/about-hero.php) reuses the ported
   .about-hero-sec / .about-hero__* rules already in css/theme.css —
   no page-builder-specific CSS needed for it.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   Hero — Content / Image
   Reuses .trust-center-hero__* classes/CSS already ported into
   css/theme.css.
   -------------------------------------------------------------------- */
.trust-center-hero__image img {
	width: 100%;
}

/* --------------------------------------------------------------------
   Text Left / Accordion Right
   Reuses the .about-culture__* classes/CSS already ported into
   css/theme.css — only the reverse-direction modifier is new.
   -------------------------------------------------------------------- */
.pb-text-accordion--reverse .about-culture__inner {
	flex-direction: row-reverse;
}

/* --------------------------------------------------------------------
   Text / Image Split
   Reuses .careers-layout__* classes/CSS already ported into css/theme.css.
   Only the reverse padding-swap (matching the original's
   .careers-layout-reverse-sec override) and the constrain-media modifier
   are new.
   -------------------------------------------------------------------- */
.pb-text-image-split--reverse .careers-layout__left {
	padding-left: 134px;
	padding-right: 0;
}

.pb-text-image-split__media--constrain {
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/* --------------------------------------------------------------------
   Feature Grid
   Reuses .careers-teams__list/card classes/CSS already ported into
   css/theme.css. Only the 4-column modifier and the optional card-link
   (not present in the original careers-teams-sec) are new.
   -------------------------------------------------------------------- */
.pb-feature-grid__list--cols-4 {
	grid-template-columns: repeat(4, 1fr) !important;
}

.careers-teams__card .card-link {
	display: inline-block;
	margin-top: 4px;
	font-weight: 600;
	color: var(--color-teal);
}

/* --------------------------------------------------------------------
   About Careers Box (about-careers-sec) and CTA Box (cta-sec) both reuse
   their exact classes/CSS already ported into css/theme.css — no
   page-builder-specific CSS needed for either.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   Content
   -------------------------------------------------------------------- */
.pb-content--narrow {
	max-width: 900px;
}

.pb-content__body :is(h2, h3, h4) {
	margin-top: 32px;
	margin-bottom: 12px;
}

.pb-content__body p {
	margin-bottom: 16px;
}

.pb-content__body ul,
.pb-content__body ol {
	margin-bottom: 16px;
	padding-left: 20px;
}

/* --------------------------------------------------------------------
   Form
   Reuses .contact-main__* classes/CSS already ported into css/theme.css.
   -------------------------------------------------------------------- */
.contact-main__left .body-text {
	margin-top: 16px;
}

.contact-main__left iframe {
	border-radius: 30px;
	border: 3px solid #000;
}

/* --------------------------------------------------------------------
   Heading + Item Grid (Trust Center monitoring / compliance)
   -------------------------------------------------------------------- */
.pb-compliance-grid .trust-center-content {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------
   People List — card-as-button reset + person bio modal
   .about-teams__card is a <button> when the person has a Bio, so it
   opens a native Bootstrap modal; otherwise it stays a plain <div>.
   -------------------------------------------------------------------- */
button.about-teams__card {
	background: none;
	border: 0;
	width: 100%;
	text-align: left;
	color: inherit;
	cursor: pointer;
}

/* Black & white, matching the bio modal's photo */
.pb-people-list .about-teams__card .card-image img {
	filter: grayscale(100%);
}

.person-modal .modal-content {
	flex-direction: row;
	border: 0;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.person-modal__photo {
	flex: 0 0 42%;
	max-width: 42%;
}

.person-modal__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%);
}

.person-modal__body {
	position: relative;
	flex: 1 1 58%;
	padding: 56px 48px;
	max-height: 90vh;
	overflow-y: auto;
}

.person-modal__close {
	position: absolute;
	top: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	background-size: 12px;
	opacity: 1;
}

.person-modal__name {
	font-size: 32px;
	font-weight: 700;
	padding-right: 48px;
}

.person-modal__role {
	color: var(--color-teal);
	font-weight: 500;
	margin-top: 4px;
	margin-bottom: 24px;
}

.person-modal__bio {
	font-size: 16px;
	line-height: 1.6;
	color: #333;
}

@media (max-width: 767px) {
	.person-modal .modal-content {
		flex-direction: column;
	}

	.person-modal__photo {
		max-width: 100%;
		flex-basis: auto;
		height: 240px;
	}

	.person-modal__body {
		padding: 32px 24px;
	}
}