/**
 * Ruwa — Team / Advisors Grid widget.
 *
 * Self-contained styles for the `ruwa-team-grid` widget. Mobile-first
 * (base = 1 column, min-width queries widen to 2 then 3). Uses the theme's
 * design tokens so it inherits the brand automatically and degrades to sensible
 * fallbacks if a token is missing. Loaded only on pages that use the widget
 * (declared via get_style_depends()).
 */

/* Grid: 1 column on mobile, 2 from 600px, 3 from 900px. */
.ruwa-team .ruwa-team-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-5, 24px);
}

/* Card. */
.ruwa-team .ruwa-team-card {
	display: flex;
	flex-direction: column;
	background: var(--surface, #fff);
	border: 1px solid var(--line, #e9e5e8);
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* Photo area — fixed aspect ratio avoids layout shift (CLS) whether the photo
   is present or replaced by the gradient placeholder. The gradient lives on
   ::before, NOT the element: Elementor's lazyload module strips element-level
   background-image (`...:not(.e-lazyloaded) * { background-image: none
   !important }`) until its IntersectionObserver runs, which blanked these
   cards white in any unscrolled render (2026-07-12 audit). Pseudo-elements
   escape the `*` selector; background-color stays as a solid fallback. */
.ruwa-team .ruwa-team-photo {
	position: relative;
	aspect-ratio: 4 / 5;
	background-color: var(--accent-soft, #d7c0d5);
	overflow: hidden;
}
.ruwa-team .ruwa-team-photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--accent-soft, #d7c0d5), var(--accent, #854982));
}

/* Cycled placeholder / overlay tints, matching the event-card treatment. */
.ruwa-team .ruwa-team-photo--1::before {
	background: linear-gradient(135deg, var(--accent-soft, #d7c0d5), var(--accent, #854982));
}
.ruwa-team .ruwa-team-photo--2::before {
	background: linear-gradient(135deg, var(--accent, #854982), var(--accent-deep, #623761));
}
.ruwa-team .ruwa-team-photo--3::before {
	background: linear-gradient(135deg, var(--accent, #854982), var(--ink, #2b1729));
}

.ruwa-team .ruwa-team-photo-img {
	position: relative; /* paints above the ::before gradient */
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Body. */
.ruwa-team .ruwa-team-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--s-5, 24px);
}

.ruwa-team .ruwa-team-name {
	font-family: var(--serif, Georgia, serif);
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--ink, #2b1729);
	margin: 0 0 var(--s-2, 8px);
}

.ruwa-team .ruwa-team-role {
	font-family: var(--sans, sans-serif);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent, #854982);
	margin: 0 0 var(--s-3, 12px);
}

.ruwa-team .ruwa-team-bio {
	font-size: .92rem;
	line-height: 1.6;
	color: var(--ink-2, #492647);
	margin: 0;
	flex-grow: 1;
}

/* LinkedIn link — calm, accessible, touch-friendly target. */
.ruwa-team .ruwa-team-linkedin {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2, 8px);
	margin-top: var(--s-4, 16px);
	min-height: 44px;
	font-family: var(--sans, sans-serif);
	font-size: .9rem;
	font-weight: 500;
	color: var(--accent, #854982);
	text-decoration: none;
	transition: color .2s ease;
}
.ruwa-team .ruwa-team-linkedin:hover,
.ruwa-team .ruwa-team-linkedin:focus-visible {
	color: var(--accent-deep, #623761);
}
.ruwa-team .ruwa-team-linkedin svg {
	flex: 0 0 auto;
}

/* Hover/focus lift — calm, matching the other Ruwa cards. */
.ruwa-team .ruwa-team-card:hover,
.ruwa-team .ruwa-team-card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg, 0 30px 60px -24px rgba(43, 23, 41, .18));
	border-color: var(--accent-soft, #d7c0d5);
}

/* Tablet: two columns. */
@media (min-width: 600px) {
	.ruwa-team .ruwa-team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Desktop: three columns. */
@media (min-width: 900px) {
	.ruwa-team .ruwa-team-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Count-aware: a single member (e.g. a founder-only grid) centers as one
   comfortable card instead of sitting in the first of three columns. The
   :has() argument outranks the media-query rules above at every width. */
.ruwa-team .ruwa-team-grid:has(> .ruwa-team-card:only-child) {
	grid-template-columns: minmax(0, 420px);
	justify-content: center;
}

/* Respect reduced-motion: keep the visual lift, drop the transition. */
@media (prefers-reduced-motion: reduce) {
	.ruwa-team .ruwa-team-card,
	.ruwa-team .ruwa-team-linkedin {
		transition: none;
	}
}

/* Founder profile mode (2026-07-17) --------------------------------------
   A single member no longer renders as one lonely portrait card: the card
   becomes a wide horizontal plaque at the letter-sheet width - portrait
   panel left, credential block right (role above a large serif name, bio
   at a readable measure, vertically centred). Count-aware like the tiers
   grids: add a second member and the responsive grid above returns.
   The photoless portrait panel is designed, not apologising: the gradient
   keeps an inner keyline + serif brand monogram (same language as the
   founder-visual fallback); a real photo added in the editor replaces it
   automatically (the ::after only paints when no img is present). */
.ruwa-team .ruwa-team-grid:has(> .ruwa-team-card:only-child) {
	grid-template-columns: minmax(0, var(--container-narrow, 880px));
}
.ruwa-team .ruwa-team-card:only-child .ruwa-team-photo {
	aspect-ratio: 3 / 2;
}
.ruwa-team .ruwa-team-card:only-child .ruwa-team-photo:not(:has(.ruwa-team-photo-img))::after {
	content: 'R';
	position: absolute;
	inset: var(--s-4, 16px);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: calc(var(--radius-lg, 20px) - 10px);
	font-family: var(--serif, Georgia, serif);
	font-style: italic;
	font-size: clamp(4rem, 10vw, 6rem);
	line-height: 1;
	color: rgba(255, 255, 255, .18);
	pointer-events: none;
}
.ruwa-team .ruwa-team-card:only-child .ruwa-team-body {
	justify-content: center;
}
.ruwa-team .ruwa-team-card:only-child .ruwa-team-role {
	order: -1;
	margin: 0 0 var(--s-2, 8px);
}
.ruwa-team .ruwa-team-card:only-child .ruwa-team-name {
	font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2rem);
	margin: 0 0 var(--s-3, 12px);
}
.ruwa-team .ruwa-team-card:only-child .ruwa-team-bio {
	flex-grow: 0;
	font-size: .98rem;
	max-width: 52ch;
}
@media (min-width: 700px) {
	.ruwa-team .ruwa-team-card:only-child {
		display: grid;
		grid-template-columns: clamp(220px, 34%, 320px) minmax(0, 1fr);
		align-items: stretch;
	}
	.ruwa-team .ruwa-team-card:only-child .ruwa-team-photo {
		aspect-ratio: 4 / 5;
	}
	.ruwa-team .ruwa-team-card:only-child .ruwa-team-body {
		padding: var(--s-6, 32px) var(--s-7, 48px) var(--s-6, 32px) var(--s-6, 32px);
	}
}