/**
 * Consolidated Directory Card Component Styles
 * Shared between Gutenberg and Frontend
 */
:root {
	/* Profile Card Specific Variables (Configurable) */
	--uwsp-profile-card-bg-color: #fff;
	--uwsp-profile-card-primary-color: var(--wp--preset--color--primary, #512698);
	--uwsp-profile-card-secondary-bg: var(--wp--preset--color--secondary, #f8f9fa);
	--uwsp-profile-card-text: #1a202c;
	--uwsp-profile-card-shadow: 0 0.5rem 1rem rgba(0, 1, 17, 0.15);
	--uwsp-profile-card-radius: 0.25rem;
	--uwsp-profile-card-border-color: #e2e8f0;
}

/* Card List Container (Gutenberg & PHP) */
.wp-block-uwsp-directory-profile-list {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	margin-bottom: 0;

	/* Responsive block container width controlled by CSS custom property */
	--profile-container-width: var(--profile-container-width-desktop, 100%);
	width: var(--profile-container-width) !important;

	/* Alignment rules using margins */
	&.align-left {
		margin-left: 0 !important;
		margin-right: auto !important;
	}
	&.align-center {
		margin-left: auto !important;
		margin-right: auto !important;
	}
	&.align-right {
		margin-left: auto !important;
		margin-right: 0 !important;
	}

	* { 
		box-sizing: border-box;
	}

	.uwsp-profile-card {
		width: calc(var(--profile-item-width, 25%) - var(--profile-item-margin-right, 0.5em));
		margin-right: var(--profile-item-margin-right, 0.5em);
		margin-bottom: 1em;
	}
}

/* Individual Profile Card */
.uwsp-profile-card {
	box-sizing: border-box;
	text-align: center;
	box-shadow: var(--uwsp-profile-card-shadow) !important;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-clip: border-box;
	border-radius: var(--uwsp-profile-card-radius);
	min-height: calc((1em * 20) + 150px + 2em);
	background-color: var(--uwsp-profile-card-bg-color);
	border: 1px solid var(--uwsp-profile-card-border-color);

	.card-header {
		background-color: var(--uwsp-profile-card-secondary-bg);
		color: var(--wp--preset--color--black);
		padding: 2px;
		height: 150px;

		img, .card-img-placeholder {
			border-radius: 50%;
			object-fit: cover;
			height: 100%;
			width: 100%;
			max-width: 150px;
			max-height: 150px;
			transform: translateY(0.875rem);
			vertical-align: middle;
			display: block;
			margin: 0 auto;
		}

		.card-img-placeholder {
			background-color: #eee;
			height: 150px; /* Match img max-height */
		}
	}

	&.is-loading, &.is-error {
		justify-content: center;
		align-items: center;
	}

	.card-body {
		background-color: transparent;
		flex: 1 1 auto;
		padding: 1rem 1rem;
		color: var(--uwsp-profile-card-text);

		*:first-child { margin-top: 0.25rem; }
		> div { margin-top: 1rem; }

		.card-contact {
			border-top: 1px solid var(--uwsp-profile-card-secondary-bg);
		}
	}

	.card-footer {
		border-radius: 0 0 calc(var(--uwsp-profile-card-radius) - 1px) calc(var(--uwsp-profile-card-radius) - 1px);
		background-color: transparent;
		padding: 1rem 1rem;

		a {
			text-decoration: none;
			font-weight: 700;
			text-transform: uppercase;
			color: var(--uwsp-profile-card-primary-color);
			display: inline-block;
			line-height: 1.5;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			user-select: none;
			background-color: transparent;
			border: 1px solid transparent;
			padding: 0.375rem 0.75rem;
			font-size: 1rem;
			border-radius: var(--uwsp-profile-card-radius);

			&:hover {
				color: color-mix(in srgb, var(--uwsp-profile-card-primary-color), black 20%);
			}
		}
	}
}

/* Shared Card Sub-elements */
.card-contact,
.card-titles,
.card-education,
.card-courses {
	margin: 0;
	padding: 0;
	list-style: none;

	ul, li {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	a { 
		text-decoration: none; 
		color: var(--uwsp-profile-card-primary-color);
		&:hover {
		  text-decoration: underline; 
		}
	}
}

.card-contact {
	font-size: 0.875rem;
	padding-top: 1rem;
	border-top: 1px solid var(--uwsp-profile-card-secondary-bg);

	.card-contact-label {
		font-weight: bold;
		display: inline-block;
		min-width: 60px;
		margin-right: 5px;
	}

	div {
		margin-bottom: 4px; 
	}
}

.card-titles {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;

	.card-title {
		font-weight: normal;
		margin-bottom: 2px;
		line-height: 1.3;
		list-style: none !important;
	}

	.card-title-more {
		font-size: 0.75em;
		font-weight: 100;
		margin-top: 5px;

		a { 
			color: var(--uwsp-profile-card-primary-color); 
		}
	}
}

/* Responsive adjustments for Profile List item width & container width */
@media only screen and (max-width: 991px) {
	/* If nested inside a Gutenberg Column, force 100% width on tablet/mobile to prevent squeezing */
	.wp-block-column .wp-block-uwsp-directory-profile-list .uwsp-profile-card {
		width: calc(100% - var(--profile-item-margin-right, 0.5em)) !important;
	}

	/* Container starts to borrow the margin on tablet (768px - 991px) */
	.wp-block-uwsp-directory-profile-list {
		--profile-container-width: calc(100% - (100% - var(--profile-container-width-desktop, 100%)) * 0.5) !important;
	}
}

@media only screen and (max-width: 767px) {
	/* Container borrows 80% of margin on smaller viewports (601px - 767px) */
	.wp-block-uwsp-directory-profile-list {
		--profile-container-width: calc(100% - (100% - var(--profile-container-width-desktop, 100%)) * 0.2) !important;
	}
}

@media only screen and (max-width: 600px) {
	.wp-block-uwsp-directory-profile-list .uwsp-profile-card {
		width: calc(100% - var(--profile-item-margin-right, 0.5em)) !important;
	}

	/* Container expands to 100% on mobile devices */
	.wp-block-uwsp-directory-profile-list {
		--profile-container-width: 100% !important;
	}
}

@media only screen and (min-width: 601px) and (max-width: 767px) {
	.wp-block-uwsp-directory-profile-list .uwsp-profile-card {
		width: calc(max(var(--profile-item-width, 25%), 50%) - var(--profile-item-margin-right, 0.5em)) !important;
	}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.wp-block-uwsp-directory-profile-list .uwsp-profile-card {
		width: calc(max(var(--profile-item-width, 25%), 33.333%) - var(--profile-item-margin-right, 0.5em)) !important;
	}
}