/**
 * Elcogen Board Member Widget Styles
 *
 * Person card with optional contact info and accordion biography section
 * Includes responsive layouts for desktop, tablet, and mobile devices
 *
 * Uses CSS Container Queries for true responsive behavior based on container width,
 * with media query fallbacks for older browsers.
 *
 * Layout behavior:
 * - Containers < 31.25rem: Vertical layout (image on top, text below)
 * - Containers > 31.25rem: Horizontal layout (image left, text right)
 * - Containers < 30rem: Smaller typography
 *
 * @package Elcogen_Elementor_Widgets
 * @since 1.0.0
 */

/* ========================================
   BASE STYLES
   ======================================== */

/* Container flex layout for board member cards
   - Max 3 cards per row
   - Cards wrap when narrower than 16rem
   - Works in Elementor containers (max-width 48.75rem recommended) */
.e-con-inner:has(> .elementor-widget-elcogen-board-member),
.elementor-widget-wrap:has(> .elementor-widget-elcogen-board-member) {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.elementor-widget-elcogen-board-member {
    flex: 1 1 16rem;
    min-width: 16rem !important;
    max-width: 20rem !important;
}
@media (max-width: 62.125rem) {
    .elementor-widget-elcogen-board-member {
        max-width: 31.25rem !important;
    }
}

.elcogen-board-member {
	width: 100%;
	display: block;
	container-type: inline-size;
	container-name: board-member;
	flex: 1;
  height: 100%;
}

.elcogen-board-member {
	height: 100%;
	display: flex;
	flex-direction: column;
  }

.elcogen-board-member__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	width: 100%;
	height: 100%;
}

/* ========================================
   IMAGE STYLES
   ======================================== */

.elcogen-board-member__image {
	flex-shrink: 0;
	width: 100%;
	height: 15.625rem;
	overflow: hidden;
	position: relative;
}

.elcogen-board-member__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ========================================
   CONTENT AREA
   ======================================== */

.elcogen-board-member__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0; /* Allow flex item to shrink below content size */
	padding-top: 1rem;
	width: 100%;
}

/* ========================================
   PERSON INFO SECTION
   ======================================== */

.elcogen-board-member__info {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
}

.elcogen-board-member__name {
	font-family: var(--font-family-headings), sans-serif;
	font-size: 1.5625rem;
	font-weight: 700;
	line-height: 2.4375rem;
	letter-spacing: 0;
	color: var(--color-text-primary);
	margin: 0;
	padding: 0;
}

.elcogen-board-member__title {
	font-family: var(--font-family-body), sans-serif;
	font-size: 1.3125rem;
	font-weight: 400;
	line-height: 2.4375rem;
	letter-spacing: 0;
	color: var(--color-text-primary);
}

.elcogen-board-member__short-bio {
	font-family: var(--font-family-body), sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5rem;
	letter-spacing: 0;
	color: var(--color-text-primary);
}

/* ========================================
   CONTACT INFO SECTION
   ======================================== */

.elcogen-board-member__contact {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	font-family: var(--font-family-body), sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.75rem;
	letter-spacing: 0;
	color: #000000;
}

.elcogen-board-member__email,
.elcogen-board-member__phone {
	margin: 0;
}

/* ========================================
   ACCORDION STYLES
   ======================================== */

.elcogen-board-member__accordion {
	flex: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--color-white);
	border: none;
	margin: 0;
	padding: 0;
}

/* Accordion Button (Summary) — now a vertical flex container: info + contact + trigger row */
.elcogen-board-member__accordion-button {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--color-white);
	border: none;
	cursor: pointer;
	list-style: none;
	transition: var(--transition-all);
	text-align: left;
	width: 100%;
}

/* Remove default details/summary marker */
.elcogen-board-member__accordion-button::-webkit-details-marker,
.elcogen-board-member__accordion-button::marker {
	display: none;
}

/* Accordion button focus state */
.elcogen-board-member__accordion-button:focus,
.elcogen-board-member__accordion-button:focus-visible {
	box-shadow: 0rem 0rem 0rem 0.1875rem #669CC8;
	outline: none;
}

/* Trigger row: "Read more" text + icon — sits at bottom of summary */
.elcogen-board-member__accordion-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.4375rem 1rem 1.5rem 1rem;
	background: var(--color-white);
	border-top: none;
	border-bottom: 1px solid var(--color-neutral-200);
	font-family: var(--font-family-body), sans-serif;
	font-size: 1.4375rem;
	font-weight: 600;
	line-height: 2rem;
	letter-spacing: 0;
	color: var(--color-cobalt-blue-400);
	margin-top: auto;
	width: 100%;
}

/* Trigger row hover */
.elcogen-board-member__accordion-button:hover .elcogen-board-member__accordion-trigger {
	background: var(--color-light-purple-100);
	color: var(--color-text-primary);
}

/* Trigger row when open */
.elcogen-board-member__accordion[open] .elcogen-board-member__accordion-trigger {
	color: var(--color-dark-neutral);
}

/* Accordion button when open */
.elcogen-board-member__accordion[open] .elcogen-board-member__accordion-button {
	background: var(--color-white);
}

/* Accordion Title */
.elcogen-board-member__accordion-title {
	flex: 1;
	display: block;
}

/* Accordion Icon Container */
.elcogen-board-member__accordion-icon {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

/* Create CSS-based PLUS icon (default/closed state) */
.elcogen-board-member__accordion-icon::before,
.elcogen-board-member__accordion-icon::after {
	content: '';
	position: absolute;
	background-color: var(--color-cobalt-blue-400);
	transition: var(--transition-all);
}

/* Vertical line of the plus */
.elcogen-board-member__accordion-icon::before {
	width: 0.125rem;
	height: 1.1669rem;
	transform: translateX(0);
}

/* Horizontal line of the plus */
.elcogen-board-member__accordion-icon::after {
	width: 1.1669rem;
	height: 0.125rem;
	transform: translateY(0);
}

/* Icon color on hover */
.elcogen-board-member__accordion-button:hover .elcogen-board-member__accordion-icon::before,
.elcogen-board-member__accordion-button:hover .elcogen-board-member__accordion-icon::after {
	background-color: var(--color-text-primary);
}

/* Icon color on focus */
.elcogen-board-member__accordion-button:focus .elcogen-board-member__accordion-icon::before,
.elcogen-board-member__accordion-button:focus .elcogen-board-member__accordion-icon::after,
.elcogen-board-member__accordion-button:focus-visible .elcogen-board-member__accordion-icon::before,
.elcogen-board-member__accordion-button:focus-visible .elcogen-board-member__accordion-icon::after {
	background-color: var(--color-text-primary);
}

/* Transform plus to minus when open */
.elcogen-board-member__accordion[open] .elcogen-board-member__accordion-icon::before {
	opacity: 0;
	transform: rotate(90deg);
}

/* Keep horizontal line visible when open (minus icon) */
.elcogen-board-member__accordion[open] .elcogen-board-member__accordion-icon::after {
	background-color: var(--color-dark-neutral);
}

/* Accordion Content */
.elcogen-board-member__accordion-content {
	padding: 1rem;
	background: var(--color-white);
	border-bottom: 1px solid #8a8797;
	font-family: var(--font-family-body), sans-serif;
	font-size: 1.3125rem;
	font-weight: 400;
	line-height: 2.4375rem;
	letter-spacing: 0;
	color: var(--color-text-primary);
}

.elcogen-board-member__accordion-content p {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

/* Info + contact sections inside summary get padding */
.elcogen-board-member__accordion-button .elcogen-board-member__info,
.elcogen-board-member__accordion-button .elcogen-board-member__contact {
	padding: 0 1rem;
}


/* ========================================
   LAYOUT MODE - MANUAL OVERRIDES
   ======================================== */

/* Force horizontal layout when manually selected */
.elcogen-board-member.layout-mode-row .elcogen-board-member__container {
	flex-direction: row !important;
	gap: 1.5rem !important;
}

.elcogen-board-member.layout-mode-row .elcogen-board-member__image {
	width: 15.625rem !important;
	height: 15.625rem;
	flex-shrink: 0;
}

/* Force vertical layout when manually selected */
.elcogen-board-member.layout-mode-column .elcogen-board-member__container {
	flex-direction: column !important;
	gap: 0 !important;
}

.elcogen-board-member.layout-mode-column .elcogen-board-member__image {
	width: 100% !important;
	height: 15.625rem;
}

/* ========================================
   CONTAINER QUERIES - AUTO MODE
   ======================================== */

/* Auto mode: Use container queries for responsive behavior */

/* Always start with vertical layout for containers up to 31.25rem */
@container board-member (max-width: 31.25rem) {
	.elcogen-board-member.layout-mode-auto .elcogen-board-member__container {
		flex-direction: column;
		gap: 0;
	}

	.elcogen-board-member.layout-mode-auto .elcogen-board-member__image {
		width: 100% !important;
		height: 15.625rem;
	}
}

/* Only use horizontal layout for containers wider than 31.25rem */
@container board-member (min-width: 31.3125rem) {
	.elcogen-board-member.layout-mode-auto .elcogen-board-member__container {
		flex-direction: row;
		gap: 1.5rem;
	}

	.elcogen-board-member.layout-mode-auto .elcogen-board-member__image {
		width: 15.625rem;
		height: 15.625rem;
		flex-shrink: 0;
	}
}

/* Extra small containers (below 30rem) */
@container board-member (max-width: 30rem) {
	.elcogen-board-member__image {
		height: auto;
	}

	.elcogen-board-member__name {
		font-size: 1.3125rem;
		line-height: 2rem;
	}

	.elcogen-board-member__title {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.elcogen-board-member__short-bio {
		font-size: 0.875rem;
		line-height: 1.5rem;
	}

	.elcogen-board-member__contact {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.elcogen-board-member__accordion-button {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.elcogen-board-member__accordion-content {
		font-size: 1.3125rem;
		line-height: 2.4375rem;
	}
}

/* ========================================
   MEDIA QUERIES - FALLBACK FOR OLDER BROWSERS
   ======================================== */

/* Fallback: Default to vertical for narrow viewports */
@media screen and (max-width: 31.25rem) {
	.elcogen-board-member__container {
		flex-direction: column;
		gap: 0;
	}

	.elcogen-board-member__image {
		width: 100%;
		height: 15.625rem;
	}
}

/* Fallback: Horizontal layout for wider viewports */
@media screen and (min-width: 31.3125rem) {
	.elcogen-board-member__container {
		flex-direction: row;
		gap: 1.5rem;
	}

	.elcogen-board-member__image {
		width: 15.625rem;
		height: 15.625rem;
	}
}

/* Additional tablet-specific adjustments (40.0625rem - 64rem) */
@media screen and (max-width: 64rem) and (min-width: 40.0625rem) {

	/* Adjust typography for tablet */
	.elcogen-board-member__name {
		font-size: 1.5625rem;
		line-height: 2.4375rem;
	}

	.elcogen-board-member__title {
		font-size: 1.3125rem;
		line-height: 2.4375rem;
	}

	.elcogen-board-member__short-bio {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.elcogen-board-member__contact {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.elcogen-board-member__accordion-button {
		font-size: 1.4375rem;
		line-height: 2rem;
		padding: 1.4375rem 1rem 1.5rem 1rem;
	}

	.elcogen-board-member__accordion-content {
		font-size: 1.3125rem;
		line-height: 2.4375rem;
	}
}

/* ========================================
   RESPONSIVE STYLES - MOBILE (Extra Small) FALLBACK
   ======================================== */

/* Fallback media query for mobile when container queries not supported */
@media screen and (max-width: 30rem) {
	/* Image with aspect ratio on very small screens */
	.elcogen-board-member__image {
		height: auto;
	}

	/* Smaller typography for mobile */
	.elcogen-board-member__name {
		font-size: 1.3125rem;
		line-height: 2rem;
	}

	.elcogen-board-member__title {
		font-size: 1.125rem;
		line-height: 1.75rem;
	}

	.elcogen-board-member__short-bio {
		font-size: 0.875rem;
		line-height: 1.5rem;
	}

	.elcogen-board-member__contact {
		font-size: 1rem;
		line-height: 1.5rem;
	}

	/* Smaller accordion button on mobile */
	.elcogen-board-member__accordion-button {
		font-size: 1rem;
		line-height: 1.5rem;
		padding: 1.4375rem 1rem 1.5rem 1rem;
		gap: 1rem;
	}

	/* Smaller icon on mobile */
	.elcogen-board-member__accordion-icon {
		width: 2rem;
		height: 2rem;
	}

	.elcogen-board-member__accordion-icon::before {
		height: 1.1669rem;
	}

	.elcogen-board-member__accordion-icon::after {
		width: 1.1669rem;
	}

	/* Smaller content text on mobile */
	.elcogen-board-member__accordion-content {
		font-size: 1.3125rem;
		line-height: 2.4375rem;
		padding: 1rem;
	}
}

/* ========================================
   RTL SUPPORT
   ======================================== */

.rtl .elcogen-board-member__accordion-button {
	text-align: right;
	flex-direction: row-reverse;
}

.rtl .elcogen-board-member__container {
	flex-direction: row-reverse;
}

@media screen and (max-width: 64rem) {
	.rtl .elcogen-board-member__container {
		flex-direction: column;
	}
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
	/* Hide accordion icon in print */
	.elcogen-board-member__accordion-icon {
		display: none;
	}

	/* Ensure content is visible when printing */
	.elcogen-board-member__accordion-content {
		display: block !important;
	}
}