/* Brave Ronil — Board / Team carousel. Pixel-perfect from Figma 5014:9705
   (desktop 1440). Swiper slider, 3 cards per view, 24px gap. */

.brb-team {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 64px;
	/* Top padding present: the section above Team (Story, #fff7f5) has a
	   different background, and every background change on the site is a 192px
	   seam — both sections pad. Only a section continuing the SAME background
	   drops its top padding (see .brb-board below Team, .brb-mi below .brb-st). */
	padding: 96px 32px;
	background: #ffffff;
	-webkit-font-smoothing: antialiased;
}
.brb-team *,
.brb-team *::before,
.brb-team *::after {
	box-sizing: border-box;
}

/* ---------- Header ---------- */
.brb-team__head {
	width: 100%;
	max-width: 1216px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
}
.brb-team__badge {
	display: flex;
	align-items: center;
	gap: 8px;
}
.brb-team__dot {
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ff4405;
}
.brb-team__badge-txt {
	font-family: 'Inter Tight', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: #181d27;
	white-space: nowrap;
}
.brb-team__title {
	margin: 0;
	max-width: 782px;
	font-family: 'Bitter', serif;
	font-weight: 600;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -0.96px;
	text-align: center;
	color: #181d27;
}

/* ---------- Slider ---------- */
.brb-team__slider {
	width: 100%;
	max-width: 1216px;
	margin: 0 auto;
	overflow: hidden;
}
.brb-team__slider .swiper-wrapper {
	align-items: stretch;
}

/* ---------- Card ---------- */
.brb-team-card {
	display: flex;
	flex-direction: column;
	gap: 28px;
	height: auto;
	padding: 24px 24px 40px;
	background: #f5f5f5;
	border-radius: 16px;
}
.brb-team-card__img {
	flex: none;
	width: 100%;
	aspect-ratio: 364.667 / 452;
	border-radius: 8px;
	overflow: hidden;
	background: #e6e6e6;
}
.brb-team-card__img img,
.brb-team-card__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}
.brb-team-card__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Social icons (inline SVG, brand colors) */
.brb-team-card__social {
	display: flex;
	align-items: center;
	gap: 14px;
}
.brb-team-card__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	line-height: 1;
	font-size: 24px;
	color: #181d27;
	cursor: pointer;
	transition: color 0.15s ease;
}
.brb-team-card__ico:hover {
	color: #219839;
}
/* Normalize inline SVG, uploaded SVG/<img>, and font-icon glyphs to 24px */
.brb-team-card__ico .brb-team-card__svg,
.brb-team-card__ico svg,
.brb-team-card__ico img {
	display: block;
	width: 24px;
	height: 24px;
}
/* Force uploaded SVGs to inherit the icon color so hover applies.
   CSS fill overrides any fill="…" baked into the file. */
.brb-team-card__ico svg,
.brb-team-card__ico svg * {
	fill: currentColor;
}
.brb-team-card__ico i {
	font-size: 24px;
	line-height: 1;
}
a.brb-team-card__ico:focus-visible {
	outline: 2px solid #181d27;
	outline-offset: 2px;
	border-radius: 2px;
}

/* Text block */
.brb-team-card__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brb-team-card__title {
	display: flex;
	flex-direction: column;
}
.brb-team-card__name {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 1.5;
	color: #000000;
}
.brb-team-card__role {
	margin: 0;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: #000000;
}
.brb-team-card__bio {
	margin: 0;
	font-family: 'Inter Tight', sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #414651;
	--brb-bio-lines: 6;
}

/* Collapsed bio: every card shows the SAME number of lines, so the cards start
   at equal height no matter how long the text is. JS adds .is-clamped (and
   reveals the button) only when the text actually overflows — without JS the
   full bio stays visible. */
.brb-team-card__bio.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--brb-bio-lines, 6);
	line-clamp: var(--brb-bio-lines, 6);
	overflow: hidden;
}

/* See more / See less — toggles the line clamp on .brb-team-card__bio. */
.brb-team .brb-team-card__more {
	align-self: flex-start;
	width: auto;
	margin: -4px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	/* Theme/Elementor button skins add a fill, border and shadow — strip them
	   all so this reads as a text link in every state. */
	background: none !important;
	box-shadow: none;
	font-family: 'Inter Tight', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: #219839;
	cursor: pointer;
	text-decoration: none;
	transition: none;
}
.brb-team .brb-team-card__more:hover,
.brb-team .brb-team-card__more:focus,
.brb-team .brb-team-card__more:active,
.brb-team .brb-team-card__more:focus-visible {
	background: none !important;
	border: 0;
	box-shadow: none;
	color: #219839;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.brb-team-card__more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}
.brb-team-card__more[hidden] {
	display: none;
}

/* ---------- Tablet (Figma 5014:9951, 834) ---------- */
@media (max-width: 1024px) {
	.brb-team {
		gap: 48px;
		padding: 80px 32px;
	}
	.brb-team__head {
		max-width: 770px;
		gap: 8px;
	}
	.brb-team__title {
		max-width: 642px;
		font-size: 36px;
		line-height: 44px;
		letter-spacing: -0.72px;
	}
	/* Cards sit directly on the section — no panel.
	   !important overrides the editor's Card Background control on tablet. */
	.brb-team-card {
		padding: 0;
		background: transparent !important;
		border-radius: 0;
	}
	.brb-team-card__img {
		aspect-ratio: 412.667 / 452;
	}
	/* Bio + See more stay on tablet/mobile (the Figma tablet frame drops the
	   bio, but the carousel is the only place these read). */
	.brb-team-card__info {
		gap: 8px;
	}
}

 .team-grid{
    grid-template-columns: repeat(2, 1fr);
    display: grid;
    gap: 20px;
    max-width: 802px;
    margin: 0 auto;
}


/* ---------- Mobile (Figma 5014:9815, 375) ---------- */
@media (max-width: 767px) {
	.brb-team {
		padding: 64px 16px;
	}
	.brb-team__head {
		max-width: 343px;
	}
	.brb-team__title {
		max-width: none;
		font-size: 32px;
		line-height: 40px;
		letter-spacing: 0;
	}
	.brb-team__slider {
		max-width: 100%;
	}
	/* One card per view (302px) with the next peeking in. */
	.brb-team__slider .swiper-slide {
		width: min(302px, calc(100% - 41px));
	}
	.brb-team-card__bio,
	.brb-team .brb-team-card__more {
		font-size: 14px;
		line-height: 22px;
	}
}

@media only screen and (max-width:480px){
    .team-grid{
         grid-template-columns: repeat(1, 1fr);
    }
}