/* CSS variables applied by inline settings */
.abegc-layout{
--abegc-chip-bg: #eef2f7;
--abegc-chip-color: #111827;
--abegc-chip-border: #d1d5db;
--abegc-chip-radius: 20px;
--abegc-chip-pad-y: 6px;
--abegc-chip-pad-x: 12px;
--abegc-chip-gap: 8px;
--abegc-title-font: inherit;
--abegc-title-size: 18px;
--abegc-title-color: #111827;
--abegc-title-line: 1.3;
--abegc-title-align: center;
--abegc-job-font: inherit;
--abegc-job-size: 14px;
--abegc-job-color: #374151;
}

/* AB Employee Grid and Carousel - Frontend Styles v3.0.3 */
/* Enhanced with Working Stream field and dynamic field controls */

.abegc-grid-container.abegc-layout {
max-width: 1200px;
margin: 0 auto;
padding: 24px 16px;
}

.abegc-grid-inner {
display: grid;
gap: var(--abegc-gap, 20px);
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
}

/* Responsive grid adjustments */
@media (max-width: 1200px) {
.abegc-grid-container[data-columns="6"] .abegc-grid-inner,
.abegc-grid-container[data-columns="4"] .abegc-grid-inner {
grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 968px) {
.abegc-grid-inner {
grid-template-columns: repeat(2, 1fr) !important;
gap: 16px;
}
}

@media (max-width: 640px) {
.abegc-grid-inner {
grid-template-columns: 1fr !important;
gap: 12px;
}
.abegc-grid-container.abegc-layout {
padding: 20px 12px;
}
}

/* ====== CARD DESIGN - Uses Dynamic Settings ====== */
.abegc-layout .abegc-card {
background: var(--abegc-bg-color, #ffffff);
background: var(--abegc-bg-gradient, var(--abegc-bg-color, #ffffff));
border-radius: var(--abegc-border-radius, 16px);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
height: 100%;
min-height: var(--abegc-height, 380px);
padding: 0;
box-shadow: var(--abegc-shadow, 0 4px 20px 0 rgba(0, 0, 0, 0.08));
border: 1px solid rgba(0, 0, 0, 0.04);
position: relative;
}

.abegc-layout .abegc-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.15);
border-color: rgba(0, 0, 0, 0.08);
}

/* ====== FIXED IMAGE CONTAINER - NO WHITE OVERLAY ====== */
.abegc-layout .abegc-card-image {
position: relative;
width: 100%;
height: var(--abegc-img-height, 220px);
overflow: hidden;
flex-shrink: 0;
background: var(--abegc-img-bg, #f8fafc);
display: flex;
align-items: center;
justify-content: center;
}

.abegc-layout .abegc-card-img {
width: 100%;
height: 100%;
object-fit: var(--abegc-img-fit, contain);
object-position: center center;
display: block;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
background: transparent;
}

.abegc-layout .abegc-card:hover .abegc-card-img {
transform: scale(1.02);
}

/* ====== CONTENT LAYOUT ====== */
.abegc-layout .abegc-card-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--abegc-padding, 20px);
min-height: 140px;
}

.abegc-layout .abegc-card-header {
margin-bottom: 12px;
text-align: center;
}

/* ====== TYPOGRAPHY - Dynamic from Settings ====== */
.abegc-layout .abegc-card-name {
font-size: var(--abegc-name-size, 17px);
font-weight: var(--abegc-name-weight, 700);
line-height: 1.2;
margin: 0 0 8px 0;
color: var(--abegc-name-color, #1a202c);
letter-spacing: -0.01em;
}

.abegc-layout .abegc-card-name a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}

.abegc-layout .abegc-card-name a:hover {
color: #3182ce;
}

.abegc-layout .abegc-employee-label {
font-size: 11px;
font-weight: 500;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}

.abegc-layout .abegc-card-job-info {
color: #64748b;
font-size: 14px;
line-height: 1.4;
margin-bottom: 4px;
}

.abegc-layout .abegc-job-title { 
font-family: var(--abegc-job-font); 
font-size: var(--abegc-job-size); 
color: var(--abegc-job-color); 
margin-bottom: 3px;
}

.abegc-layout .abegc-company {
font-weight: 400;
color: #64748b;
font-size: 13px;
margin-bottom: 3px;
}

/* NEW: Working Stream styles */
.abegc-layout .abegc-working-stream {
font-weight: 500;
color: #3b82f6;
font-size: 12px;
margin-bottom: 3px;
padding: 2px 8px;
background: #eff6ff;
border-radius: 4px;
display: inline-block;
}

/* ====== SKILL CHIPS ====== */
.abegc-layout .abegc-chip-wrap {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-top: auto;
padding-top: 12px;
}

.abegc-layout .abegc-chip { 
background: var(--abegc-chip-bg); 
color: var(--abegc-chip-color); 
border: 1px solid var(--abegc-chip-border); 
border-radius: var(--abegc-chip-radius); 
padding: var(--abegc-chip-pad-y) var(--abegc-chip-pad-x); 
}

.abegc-layout .abegc-chip:hover {
background: #e2e8f0;
color: #334155;
transform: translateY(-1px);
border-color: #cbd5e1;
}

/* ====== CAROUSEL LAYOUT - FIXED ARROWS ====== */
.abegc-carousel-wrap.abegc-layout {
max-width: 1200px;
margin: 0 auto;
padding: 24px 16px;
position: relative;
}

.abegc-carousel-wrap.abegc-layout .abegc-card {
height: 100%;
margin: 0;
min-height: var(--abegc-height, 380px) !important;
}

.abegc-layout .abegc-swiper {
padding-bottom: 50px !important;
position: relative;
}

.abegc-layout .abegc-swiper .swiper-pagination {
bottom: 0 !important;
}

.abegc-layout .abegc-swiper .swiper-pagination-bullet {
width: var(--abegc-dots-size, 10px) !important;
height: var(--abegc-dots-size, 10px) !important;
background: var(--abegc-dots-color, #cbd5e1) !important;
opacity: 1;
transition: all 0.3s ease;
margin: 0 4px !important;
}

.abegc-layout .abegc-swiper .swiper-pagination-bullet-active {
background: var(--abegc-dots-active-color, #3182ce) !important;
transform: scale(1.2);
box-shadow: 0 2px 8px rgba(49, 130, 206, 0.3);
}

.abegc-layout .abegc-swiper .swiper-button-prev,
.abegc-layout .abegc-swiper .swiper-button-next {
width: var(--abegc-arrow-size, 44px) !important;
height: var(--abegc-arrow-size, 44px) !important;
background: var(--abegc-arrow-bg, rgba(255,255,255,0.95)) !important;
border-radius: 50% !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
transition: all 0.3s ease !important;
color: var(--abegc-arrow-color, #475569) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
backdrop-filter: blur(10px);
top: 45% !important;
margin-top: 0 !important;
}

.abegc-layout .abegc-swiper .swiper-button-prev:hover,
.abegc-layout .abegc-swiper .swiper-button-next:hover {
background: rgba(255, 255, 255, 1) !important;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15) !important;
color: #3182ce !important;
}

.abegc-layout .abegc-swiper .swiper-button-prev:after,
.abegc-layout .abegc-swiper .swiper-button-next:after {
font-size: 16px !important;
font-weight: 700 !important;
}

.abegc-layout .abegc-swiper .swiper-button-prev {
left: -22px !important;
}

.abegc-layout .abegc-swiper .swiper-button-next {
right: -22px !important;
}

/* ====== RESPONSIVE OPTIMIZATIONS ====== */
@media (max-width: 768px) {
.abegc-layout .abegc-card {
min-height: 340px !important;
}

.abegc-layout .abegc-card-image {
height: 180px;
}

.abegc-layout .abegc-card-content {
min-height: 120px;
padding: 18px;
}

.abegc-layout .abegc-card-name {
font-size: 16px;
margin-bottom: 6px;
}

.abegc-layout .abegc-job-title { 
font-family: var(--abegc-job-font); 
font-size: var(--abegc-job-size); 
color: var(--abegc-job-color); 
}

.abegc-layout .abegc-company {
font-size: 12px;
}

.abegc-layout .abegc-working-stream {
font-size: 11px;
}

.abegc-layout .abegc-chip { 
background: var(--abegc-chip-bg); 
color: var(--abegc-chip-color); 
border: 1px solid var(--abegc-chip-border); 
border-radius: var(--abegc-chip-radius); 
padding: var(--abegc-chip-pad-y) var(--abegc-chip-pad-x); 
}

.abegc-layout .abegc-swiper .swiper-button-prev {
left: 8px !important;
}

.abegc-layout .abegc-swiper .swiper-button-next {
right: 8px !important;
}
}

@media (max-width: 480px) {
.abegc-layout .abegc-card {
min-height: 320px !important;
}

.abegc-layout .abegc-card-image {
height: 160px;
}

.abegc-layout .abegc-card-content {
min-height: 100px;
padding: 16px;
}

.abegc-layout .abegc-card-name {
font-size: 15px;
}

.abegc-layout .abegc-chip { 
background: var(--abegc-chip-bg); 
color: var(--abegc-chip-color); 
border: 1px solid var(--abegc-chip-border); 
border-radius: var(--abegc-chip-radius); 
padding: var(--abegc-chip-pad-y) var(--abegc-chip-pad-x); 
}
}

/* ====== CAROUSEL SPECIFIC FIXES ====== */
.abegc-layout .abegc-carousel-wrap .swiper-wrapper {
align-items: stretch;
}

.abegc-layout .abegc-carousel-wrap .swiper-slide {
height: auto;
display: flex;
flex-direction: column;
}

.abegc-layout .abegc-carousel-wrap .abegc-card {
height: var(--abegc-height, 380px) !important;
max-height: var(--abegc-height, 380px);
}

/* ====== ACCESSIBILITY ====== */
.abegc-layout .abegc-card:focus-within {
outline: 2px solid #3182ce;
outline-offset: 2px;
}

.abegc-layout .abegc-card-name a:focus {
outline: none;
color: #3182ce;
text-decoration: underline;
}

/* Swiper buttons tweaks */
.abegc-swiper .swiper-button-next, 
.abegc-swiper .swiper-button-prev { 
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
z-index: 10; 
}