/**
 * Profile Cards Widget Styles
 *
 * Static grid of profile photo cards with name and title.
 * Used for Board of Directors and similar non-interactive sections.
 *
 * Uses flexbox (not CSS Grid) so that incomplete last rows are
 * automatically centered by justify-content: center — no orphan
 * nth-child hacks needed.
 *
 * Figma: 2061:1316 (Board of Directors)
 *
 * CSS custom properties (set via inline style from Elementor controls):
 *   --pc-card-bg      Card background       default: --color-container-card-blue
 *   --pc-card-border  Card border color      default: --color-brand-primary
 *   --pc-photo-bg     Photo placeholder bg   default: --color-container-blue
 *
 * @package Zededa
 */

/* ==========================================================================
   1. Elementor Kit Specificity Overrides
   [class*="elementor-kit-"] sets global h3, body typography that cascade into widget.
   ========================================================================== */

[class*="elementor-kit-"] .zededa-profile-cards {
	font-family: var(--typography-font-family-base);
}

[class*="elementor-kit-"] .zededa-profile-cards__name {
	font-family: var(--typography-font-family-cta);
	color: var(--color-neutral-white);
}

[class*="elementor-kit-"] .zededa-profile-cards__title {
	font-family: var(--typography-font-family-base);
	color: var(--color-neutral-white);
}

/* ==========================================================================
   2. Defaults
   ========================================================================== */

.zededa-profile-cards {
	--pc-card-bg: var(--color-container-card-blue);
	--pc-card-border: var(--color-brand-primary);
	--pc-photo-bg: var(--color-container-blue);
}

/* ==========================================================================
   3. Flexbox Layout
   justify-content: center naturally centers orphan rows (e.g. 3 of 4).
   ========================================================================== */

.zededa-profile-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-xl);
	width: 100%;
}

/* Column modifiers — flex-basis calculated as:
   (100% - (cols - 1) * gap) / cols */
.zededa-profile-cards--cols-3 > .zededa-profile-cards__card {
	flex: 0 0 calc((100% - 2 * var(--spacing-xl)) / 3);
}

.zededa-profile-cards--cols-4 > .zededa-profile-cards__card {
	flex: 0 0 calc((100% - 3 * var(--spacing-xl)) / 4);
}

/* ==========================================================================
   4. Card
   ========================================================================== */

.zededa-profile-cards__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--spacing-lg);
	background-color: var(--pc-card-bg);
	border: var(--border-width-base) solid var(--pc-card-border);
	box-sizing: border-box;
}

/* ==========================================================================
   5. Photo
   Figma: ~147x163px, 1px white border, #133844 bg placeholder
   ========================================================================== */

.zededa-profile-cards__photo-wrapper {
	width: 100%;
	max-width: 147px;
	aspect-ratio: 147 / 163;
	border: var(--border-width-thin) solid var(--color-neutral-white);
	background-color: var(--pc-photo-bg);
	overflow: hidden;
	margin-bottom: var(--spacing-md);
}

.zededa-profile-cards__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   6. Typography
   ========================================================================== */

/* Name — Figma: Plus Jakarta Sans Bold 26px, white, tracking -0.52px, lh 1.2 */
.zededa-profile-cards__name {
	font-family: var(--typography-font-family-cta);
	font-size: clamp(20px, calc(0.56vw + 17.92px), 26px);
	font-weight: var(--typography-font-weight-bold);
	line-height: var(--typography-line-height-tight);
	letter-spacing: -0.02em;
	color: var(--color-neutral-white);
	margin: 0 0 var(--spacing-xs) 0;
}

/* Title — Figma: IBM Plex Sans Bold 18px, white at 70% opacity, tracking -0.09px, lh 1.45 */
.zededa-profile-cards__title {
	font-family: var(--typography-font-family-base);
	font-size: clamp(15px, calc(0.21vw + 14px), 18px);
	font-weight: var(--typography-font-weight-bold);
	line-height: 1.45;
	letter-spacing: -0.005em;
	color: var(--color-neutral-white);
	opacity: 0.7;
	margin: 0;
}

/* ==========================================================================
   7. Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.zededa-profile-cards *,
	.zededa-profile-cards *::before,
	.zededa-profile-cards *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   8. Responsive: Tablet (max-width: 1024px)
   4-col → 3-col. Orphan centering is automatic via flexbox.
   ========================================================================== */

@media (max-width: 1024px) {
	.zededa-profile-cards--cols-4 > .zededa-profile-cards__card {
		flex: 0 0 calc((100% - 2 * var(--spacing-xl)) / 3);
	}
}

/* ==========================================================================
   9. Responsive: Mobile (max-width: 767px)
   All → 2-col; tighter gap.
   ========================================================================== */

@media (max-width: 767px) {
	.zededa-profile-cards {
		gap: var(--spacing-md);
	}

	.zededa-profile-cards--cols-3 > .zededa-profile-cards__card,
	.zededa-profile-cards--cols-4 > .zededa-profile-cards__card {
		flex: 0 0 calc((100% - var(--spacing-md)) / 2);
	}

	.zededa-profile-cards__card {
		padding: var(--spacing-md);
	}
}