/*
 * Archive Member — observatorio-cero-theme
 *
 * Styles for archive-miembro.html template:
 *   - Search & filter controls
 *   - Member card grid (block style member-card)
 *   - Avatar (image + initials fallback)
 *   - Ámbito tag with 3 color variants (WCAG AA)
 *   - Social links (LinkedIn, email)
 *   - No results message
 *   - Pagination
 *
 * Uses only CSS custom properties from theme.json / color-modes.css.
 */

/* ═══════════════════════════════════════════
 * Search & Filter Controls
 * ═══════════════════════════════════════════ */

.oc-member-controls {
	width: 100%;
}

.oc-member-controls > .wp-block-columns {
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

/* Search input */
.oc-member-search {
	position: relative;
	width: 100%;
}

/* WP Search block overrides */
.oc-member-search.wp-block-search {
	flex-wrap: nowrap;
	margin: 0;
}

.oc-member-search .wp-block-search__inside-wrapper {
	position: relative;
	width: 100%;
	border: none !important;
	padding: 0 !important;
}

.oc-member-search .wp-block-search__input {
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--border-radius--default);
	color: var(--wp--preset--color--on-surface);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--typography--line-height--body-md);
	box-shadow: var(--wp--preset--shadow--elevated);
	transition:
		border-color var(--wp--custom--ui--interaction--medium),
		box-shadow var(--wp--custom--ui--interaction--medium);
}

.oc-member-search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--on-surface-variant);
	opacity: var(--wp--custom--ui--opacity--medium);
}

.oc-member-search .wp-block-search__input:focus {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

.oc-member-search .wp-block-search__button {
	display: none;
}

.oc-member-search__icon {
	position: absolute;
	left: var(--wp--preset--spacing--40);
	top: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--on-surface-variant);
	pointer-events: none;
	display: flex;
}

.oc-member-search__icon svg {
	width: var(--wp--custom--ui--control-size--mobile);
	height: var(--wp--custom--ui--control-size--mobile);
	fill: currentColor;
}

.oc-member-search__input {
	width: 100%;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	padding-left: var(--wp--custom--ui--sizes--search-icon-pad);
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--outline);
	border-radius: var(--wp--custom--border-radius--default);
	color: var(--wp--preset--color--on-surface);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body-md);
	line-height: var(--wp--custom--typography--line-height--body-md);
	box-shadow: var(--wp--preset--shadow--elevated);
	transition:
		border-color var(--wp--custom--ui--interaction--medium),
		box-shadow var(--wp--custom--ui--interaction--medium);
}

.oc-member-search__input::placeholder {
	color: var(--wp--preset--color--on-surface-variant);
	opacity: var(--wp--custom--ui--opacity--medium);
}

.oc-member-search__input:focus {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

.oc-member-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

/* ═══════════════════════════════════════════
 * Member Grid
 * ═══════════════════════════════════════════ */

.oc-member-grid {
	display: grid !important;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	align-items: stretch;
}

@media (min-width: 600px) {
	.oc-member-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.oc-member-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wp-block-post {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-post > .wp-block-group {
	width: 100%;
	flex: 1 1 auto;
	min-height: 0;
}

/* Hidden card (filtered out by JS) */
.wp-block-post.oc-member-hidden {
	display: none !important;
}

/* ═══════════════════════════════════════════
 * Member Card — Block Style
 * ═══════════════════════════════════════════ */

.wp-block-group.is-style-member-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: var(--wp--custom--ui--border-width--thin) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	border-radius: var(--wp--custom--border-radius--xl);
	box-shadow: var(--wp--preset--shadow--soft);
	transition:
		transform var(--wp--custom--ui--interaction--medium),
		box-shadow var(--wp--custom--ui--interaction--medium),
		border-color var(--wp--custom--ui--interaction--medium);
}

.wp-block-group.is-style-member-card:hover {
	transform: translateY(var(--wp--custom--ui--decoration--transform-translate-sm));
	box-shadow: var(--wp--preset--shadow--elevated);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border), transparent);
}

/* ═══════════════════════════════════════════
 * Avatar — Image or Initials Fallback
 * ═══════════════════════════════════════════ */

.oc-member-card__avatar {
	width: var(--wp--custom--ui--sizes--avatar-card);
	height: var(--wp--custom--ui--sizes--avatar-card);
	border-radius: var(--wp--custom--border-radius--full);
	overflow: hidden;
	margin-bottom: var(--wp--preset--spacing--40);
	border: var(--wp--custom--ui--border-width--standard, 2px) solid color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--hairline), transparent);
	flex-shrink: 0;
}

.oc-member-card__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--wp--custom--ui--interaction--medium);
}

.wp-block-group.is-style-member-card:hover .oc-member-card__avatar img {
	transform: scale(var(--wp--custom--ui--scale--tag-cloud));
}

.oc-member-card__initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--hairline), transparent);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--headline-md);
	font-weight: var(--wp--custom--typography--font-weight--headline-md);
	letter-spacing: var(--wp--custom--typography--letter-spacing--headline-md);
}

/* ═══════════════════════════════════════════
 * Name — Linked Title
 * ═══════════════════════════════════════════ */

.oc-member-card__name {
	font-size: var(--wp--preset--font-size--headline-sm);
	font-weight: var(--wp--custom--typography--font-weight--headline-sm);
	line-height: var(--wp--custom--typography--line-height--headline-sm);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.oc-member-card__name a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: color var(--wp--custom--ui--interaction--medium);
}

.oc-member-card__name a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--ui--decoration--text-underline-offset, 2px);
}

.oc-member-card__name a:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
	border-radius: var(--wp--custom--border-radius--sm);
}

/* ═══════════════════════════════════════════
 * Ámbito Tag — 3 Color Variants (WCAG AA)
 * ═══════════════════════════════════════════ */

.oc-member-card__ambito {
	display: inline-block;
	padding: 0.25em 0.75em;
	border-radius: var(--wp--custom--border-radius--full);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: var(--wp--custom--typography--font-weight--label-sm);
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--typography--letter-spacing--label-sm);
	line-height: var(--wp--custom--typography--line-height--label-sm);
	margin-bottom: var(--wp--preset--spacing--30);
	transition:
		background-color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing),
		color var(--wp--custom--mode-transitions--duration) var(--wp--custom--mode-transitions--timing);
}

/* Operativo — primary-container / on-primary-container (WCAG AA all modes) */
.oc-member-card__ambito--operativo {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--on-primary-container);
}

/* Tecnológico — secondary-container / on-secondary-container (WCAG AA all modes) */
.oc-member-card__ambito--tecnologico {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

/* Gestión — tertiary-container / on-tertiary-container (WCAG AA all modes) */
.oc-member-card__ambito--gestion {
	background-color: var(--wp--preset--color--tertiary-container);
	color: var(--wp--preset--color--on-tertiary-container);
}

/* ═══════════════════════════════════════════
 * Excerpt
 * ═══════════════════════════════════════════ */

.oc-member-card__excerpt {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: var(--wp--custom--typography--line-height--body-sm);
	margin: 0 0 var(--wp--preset--spacing--40);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ═══════════════════════════════════════════
 * Social Links — LinkedIn + Email
 * ═══════════════════════════════════════════ */

.oc-member-card__social {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin-top: auto;
}

.oc-member-card__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--ui--sizes--icon-2xl);
	height: var(--wp--custom--ui--sizes--icon-2xl);
	border-radius: var(--wp--custom--border-radius--lg);
	background-color: color-mix(in srgb, var(--wp--preset--color--surface-container-high) 50%, transparent);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border: var(--wp--custom--ui--border-width--thin) solid color-mix(in srgb, var(--wp--preset--color--outline-variant) var(--wp--custom--blend--border), transparent);
	transition:
		transform var(--wp--custom--ui--interaction--medium),
		background-color var(--wp--custom--ui--interaction--fast),
		color var(--wp--custom--ui--interaction--fast),
		border-color var(--wp--custom--ui--interaction--fast);
}

.oc-member-card__social-link:hover,
.oc-member-card__social-link:focus-visible {
	background-color: color-mix(in srgb, var(--wp--preset--color--surface-container-high) 80%, transparent);
	color: var(--wp--preset--color--primary);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) var(--wp--custom--blend--border), transparent);
	transform: scale(var(--wp--custom--ui--scale--icon));
}

.oc-member-card__social-link:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

.oc-member-card__social-link svg {
	width: var(--wp--custom--ui--control-size--mobile);
	height: var(--wp--custom--ui--control-size--mobile);
	fill: currentColor;
	transition: transform var(--wp--custom--ui--interaction--medium);
}

/* Hide social links with empty href (no data available) */
.oc-member-card__social-link[href=""],
.oc-member-card__social-link[href="#"] {
	display: none;
}

/* ═══════════════════════════════════════════
 * No Results Message
 * ═══════════════════════════════════════════ */

.oc-member-no-results {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--margin-desktop) 0;
	text-align: center;
}

.oc-member-no-results.is-visible {
	display: flex;
}

.oc-member-no-results__icon {
	width: var(--wp--custom--ui--sizes--no-results-icon);
	height: var(--wp--custom--ui--sizes--no-results-icon);
	border-radius: var(--wp--custom--border-radius--full);
	background-color: var(--wp--preset--color--surface-container-high);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--on-surface-variant);
}

.oc-member-no-results__icon svg {
	width: var(--wp--preset--spacing--60);
	height: var(--wp--preset--spacing--60);
	fill: currentColor;
}

.oc-member-no-results__title {
	font-size: var(--wp--preset--font-size--headline-md);
	font-weight: var(--wp--custom--typography--font-weight--headline-md);
	color: var(--wp--preset--color--primary);
	margin: 0 0 var(--wp--preset--spacing--20);
}

.oc-member-no-results__text {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: var(--wp--preset--font-size--body-md);
	margin: 0;
}

/* ═══════════════════════════════════════════
 * Pagination
 * ═══════════════════════════════════════════ */

.oc-member-archive .wp-block-query-pagination {
	margin-top: var(--wp--preset--spacing--60);
}

/* ═══════════════════════════════════════════
 * Member Detail Modal & Skeleton Loader
 * ═══════════════════════════════════════════ */

.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"]:not(.is-open):not([style*="display: block"]):not([style*="display: flex"]),
.wp-block-cloudcatch-light-modal-block__wrapper.oc-member-modal-wrapper:not(.is-open):not([style*="display: block"]):not([style*="display: flex"]) {
	display: none;
}

.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"].is-open,
.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"][style*="display: block"],
.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"][style*="display: flex"],
.wp-block-cloudcatch-light-modal-block__wrapper.oc-member-modal-wrapper.is-open,
.wp-block-cloudcatch-light-modal-block__wrapper.oc-member-modal-wrapper[style*="display: block"],
.wp-block-cloudcatch-light-modal-block__wrapper.oc-member-modal-wrapper[style*="display: flex"] {
	backdrop-filter: blur(var(--wp--custom--site-header--glass-blur, 12px));
	-webkit-backdrop-filter: blur(var(--wp--custom--site-header--glass-blur, 12px));
	background-color: rgba(0, 0, 0, 0.65);
	z-index: var(--wp--custom--ui--z-index--modal, 9999);
	padding: var(--wp--custom--ui--modal--margin-block, 5dvh) var(--wp--preset--spacing--30);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	inset: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	margin: 0;
}

.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block,
.wp-block-cloudcatch-light-modal-block.oc-member-modal-dialog {
	max-width: min(var(--wp--custom--ui--modal--max-width, 56rem), var(--wp--custom--ui--modal--viewport-width, 92vw));
	width: 100%;
	height: auto;
	max-height: var(--wp--custom--ui--modal--max-height, 85dvh);
	margin: auto;
	box-sizing: border-box;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	border: var(--wp--custom--ui--border-width--thin, 1px) solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--border-radius--xl, 1rem);
	box-shadow: var(--wp--preset--shadow--elevated, 0 12px 32px rgba(0, 0, 0, 0.2));
	padding: 0;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Dark Mode Overrides */
html[data-theme="dark"] .wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block,
html[data-theme="dark"] .wp-block-cloudcatch-light-modal-block.oc-member-modal-dialog {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	border-color: var(--wp--preset--color--outline-variant);
}

/* High Contrast Mode Overrides */
html[data-theme="high-contrast"] .wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block,
html[data-theme="high-contrast"] .wp-block-cloudcatch-light-modal-block.oc-member-modal-dialog {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
	border: var(--wp--custom--ui--border-width--standard, 2px) solid var(--wp--preset--color--outline);
	box-shadow: none;
}

.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__content,
.oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__content {
	overflow-y: auto;
	overscroll-behavior: contain;
	height: 100%;
	max-height: 85dvh;
	padding: var(--wp--preset--spacing--40);
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--outline) transparent;
	background-color: transparent;
	color: inherit;
}

@media (min-width: 782px) {
	.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__content,
	.oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__content {
		padding: var(--wp--preset--spacing--60);
	}
}

.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__close,
.oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__close {
	position: absolute;
	top: var(--wp--preset--spacing--30);
	right: var(--wp--preset--spacing--30);
	width: var(--wp--custom--ui--sizes--icon-2xl, 2.5rem);
	height: var(--wp--custom--ui--sizes--icon-2xl, 2.5rem);
	border-radius: var(--wp--custom--border-radius--full, 9999px);
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface);
	border: var(--wp--custom--ui--border-width--thin, 1px) solid var(--wp--preset--color--outline);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: calc(var(--wp--custom--ui--z-index--modal, 9999) + 2);
	padding: 0;
	transition:
		background-color var(--wp--custom--ui--interaction--fast, 0.15s),
		border-color var(--wp--custom--ui--interaction--fast, 0.15s),
		transform var(--wp--custom--ui--interaction--fast, 0.15s),
		color var(--wp--custom--ui--interaction--fast, 0.15s);
}

.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__close svg,
.oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__close svg {
	width: var(--wp--custom--ui--control-size--icon, 1.125rem);
	height: var(--wp--custom--ui--control-size--icon, 1.125rem);
	fill: currentColor;
	color: inherit;
	pointer-events: none;
	display: block;
}

.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__close path,
.oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__close path {
	fill: currentColor;
	pointer-events: none;
}

.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__close:hover,
.wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__close:focus-visible,
.oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__close:hover,
.oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__close:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	border-color: var(--wp--preset--color--primary);
	outline: var(--wp--custom--ui--focus--width, 2px) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset, 2px);
	transform: scale(var(--wp--custom--ui--scale--subtle, 1.05));
}

/* High Contrast Mode Close Button Overrides */
html[data-theme="high-contrast"] .wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__close,
html[data-theme="high-contrast"] .oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__close {
	background-color: var(--wp--preset--color--surface-container-lowest);
	color: var(--wp--preset--color--on-surface);
	border: var(--wp--custom--ui--border-width--standard, 2px) solid var(--wp--preset--color--on-surface);
}

html[data-theme="high-contrast"] .wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__close:hover,
html[data-theme="high-contrast"] .wp-block-cloudcatch-light-modal-block__wrapper[data-modal-id="modal-miembro-detalle"] .wp-block-cloudcatch-light-modal-block__close:focus-visible,
html[data-theme="high-contrast"] .oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__close:hover,
html[data-theme="high-contrast"] .oc-member-modal-dialog .wp-block-cloudcatch-light-modal-block__close:focus-visible {
	background-color: var(--wp--preset--color--inverse-surface);
	color: var(--wp--preset--color--inverse-on-surface);
	border: var(--wp--custom--ui--border-width--standard, 2px) solid var(--wp--preset--color--inverse-surface);
	outline: var(--wp--custom--ui--border-width--standard, 2px) solid var(--wp--preset--color--inverse-surface);
}

/* Modal Inner Details Adjustments */
.oc-member-modal-detail .oc-member-hero {
	background-color: transparent;
	padding: 0 0 var(--wp--preset--spacing--40) 0;
	border-bottom: var(--wp--custom--ui--border-width--thin, 1px) solid var(--wp--preset--color--outline-variant);
}

.oc-member-modal-detail .oc-member-hero__inner {
	padding: 0;
	max-width: 100%;
}

@media (max-width: 767px) {
	.oc-member-modal-detail .oc-member-hero__grid {
		gap: var(--wp--preset--spacing--30);
	}

	.oc-member-modal-detail .oc-member-hero__photo img,
	.oc-member-modal-detail .oc-member-hero__initials {
		max-width: var(--wp--custom--ui--avatar--modal, 9.5rem);
		max-height: var(--wp--custom--ui--avatar--modal, 9.5rem);
		margin: 0 auto;
	}

	.oc-member-modal-detail .oc-member-hero__name {
		font-size: var(--wp--preset--font-size--headline-md);
		text-align: center;
	}

	.oc-member-modal-detail .oc-member-hero__cargo,
	.oc-member-modal-detail .oc-member-hero__titulacion,
	.oc-member-modal-detail .oc-member-hero__ambito-wrapper {
		text-align: center;
	}
}

.oc-member-modal-detail .oc-member-trayectoria {
	background-color: transparent;
	padding-top: var(--wp--preset--spacing--40);
}

.oc-member-modal-detail .oc-member-trayectoria__inner {
	padding: 0;
	max-width: 100%;
}

.oc-member-modal-detail .oc-member-trayectoria__title {
	margin-bottom: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--primary);
}

.oc-member-modal-detail .oc-member-section {
	margin-bottom: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: var(--wp--custom--ui--border-width--thin, 1px) solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--border-radius--lg);
	padding: var(--wp--preset--spacing--30);
}

/* ═══════════════════════════════════════════
 * Skeleton Loading State
 * ═══════════════════════════════════════════ */

.oc-member-modal-skeleton {
	padding: var(--wp--preset--spacing--20);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.oc-member-skeleton-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

@media (min-width: 782px) {
	.oc-member-skeleton-hero {
		grid-template-columns: var(--wp--custom--ui--sizes--grid-column-mobile, 280px) 1fr;
		gap: var(--wp--preset--spacing--50);
	}
}

.oc-member-skeleton-photo {
	width: 100%;
	max-width: var(--wp--custom--ui--sizes--grid-column-mobile, 280px);
	aspect-ratio: var(--wp--custom--ui--aspect-ratio--square, 1 / 1);
	border-radius: var(--wp--custom--border-radius--lg);
	background: linear-gradient(90deg, var(--wp--preset--color--surface-container-low) 25%, var(--wp--preset--color--surface-container-high) 50%, var(--wp--preset--color--surface-container-low) 75%);
	background-size: 200% 100%;
	animation: oc-skeleton-shimmer var(--wp--custom--scroll-animations--duration, 1.5s) infinite;
}

.oc-member-skeleton-info {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.oc-member-skeleton-line {
	height: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--border-radius--default);
	background: linear-gradient(90deg, var(--wp--preset--color--surface-container-low) 25%, var(--wp--preset--color--surface-container-high) 50%, var(--wp--preset--color--surface-container-low) 75%);
	background-size: 200% 100%;
	animation: oc-skeleton-shimmer var(--wp--custom--scroll-animations--duration, 1.5s) infinite;
}

.oc-member-skeleton-pill {
	width: var(--wp--custom--ui--sizes--badge, 5rem);
	height: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--border-radius--full);
}

.oc-member-skeleton-title {
	width: 80%;
	height: var(--wp--preset--spacing--60);
}

.oc-member-skeleton-subtitle {
	width: 50%;
	height: var(--wp--preset--font-size--body-lg);
}

.oc-member-skeleton-text {
	width: 95%;
	height: var(--wp--preset--font-size--body-md);
}

.oc-member-skeleton-text--short {
	width: 70%;
}

.oc-member-skeleton-heading {
	width: 40%;
	height: var(--wp--preset--font-size--headline-md);
	margin-bottom: var(--wp--preset--spacing--30);
}

.oc-member-skeleton-box {
	height: var(--wp--custom--ui--sizes--card-min-height, 11rem);
	border-radius: var(--wp--custom--border-radius--lg);
	background: linear-gradient(90deg, var(--wp--preset--color--surface-container-low) 25%, var(--wp--preset--color--surface-container-high) 50%, var(--wp--preset--color--surface-container-low) 75%);
	background-size: 200% 100%;
	animation: oc-skeleton-shimmer var(--wp--custom--scroll-animations--duration, 1.5s) infinite;
	margin-bottom: var(--wp--preset--spacing--30);
}

@keyframes oc-skeleton-shimmer {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

.oc-member-modal-error {
	padding: var(--wp--preset--spacing--50);
	text-align: center;
	color: var(--wp--preset--color--on-surface);
}

.oc-member-modal-error h3 {
	color: var(--wp--preset--color--error);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* ═══════════════════════════════════════════
 * Reduced Motion
 * ═══════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.oc-member-search__input,
	.wp-block-group.is-style-member-card,
	.oc-member-card__name a,
	.oc-member-card__ambito,
	.oc-member-card__social-link,
	.oc-member-card__avatar img,
	.oc-member-modal-close {
		transition: none !important;
	}

	.oc-member-skeleton-photo,
	.oc-member-skeleton-line,
	.oc-member-skeleton-box {
		animation: none !important;
	}

	.wp-block-group.is-style-member-card:hover {
		transform: none;
	}

	.wp-block-group.is-style-member-card:hover .oc-member-card__avatar img {
		transform: none;
	}

	.oc-member-card__social-link:hover {
		transform: none;
	}
}