/**
 * Staff Frontend Styles
 * 
 * Uses Ensemble Designer CSS variables for theming consistency
 * 
 * @package Ensemble
 * @subpackage Addons/Staff
 * @version 1.1.0
 * 
 * Changes in 1.1.0:
 * - Fixed CSS variable fallback chain to match Designer system
 * - Uses --ensemble-* Designer variables directly
 * - Consistent with other addons (Maps, Downloads, etc.)
 */


/* ============================================
   CSS VARIABLES NOTE
   ============================================
   Uses --ensemble-* Designer variables directly.
   Dark/Light mode handled by Designer system.
   See CSS-ARCHITECTURE.md for variable reference.
   ============================================ */

/* ============================================
   STAFF GRID LAYOUT
   ============================================ */

.es-staff-grid-wrapper {
    padding: 1rem 0;
}

.es-staff-grid {
    display: grid;
    gap: var(--ensemble-grid-gap, 24px);
}

.es-staff-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.es-staff-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.es-staff-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
    .es-staff-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .es-staff-grid--cols-3,
    .es-staff-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .es-staff-grid { grid-template-columns: 1fr; }
}

/* Staff Member Card */
.es-staff-member {
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
    overflow: hidden;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-member:hover {
    box-shadow: var(--ensemble-shadow-lg, 0 4px 16px rgba(0, 0, 0, 0.15));
    transform: translateY(-2px);
}

.es-staff-member__image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ensemble-bg, #ffffff);
}

.es-staff-member__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-member:hover .es-staff-member__image img {
    transform: scale(1.05);
}

.es-staff-member__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-staff-member__image--placeholder a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.es-staff-icon {
    color: var(--ensemble-text-muted, #94a3b8);
}

.es-staff-icon svg {
    width: 48px;
    height: 48px;
}

.es-staff-member__content {
    padding: var(--ensemble-card-padding, 20px);
}

.es-staff-member__name {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: var(--ensemble-button-weight, 600);
    color: var(--ensemble-text, #1a1a1a);
}

.es-staff-member__name a {
    color: inherit;
    text-decoration: none;
}

.es-staff-member__name a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-member__position {
    margin: 0 0 0.5rem;
    color: var(--ensemble-primary, #3b82f6);
    font-weight: var(--ensemble-body-weight, 400);
    font-size: 0.9rem;
}

.es-staff-member__department,
.es-staff-member__responsibility {
    margin: 0 0 0.25rem;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.85rem;
}

.es-staff-member__office-hours {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.85rem;
}

.es-staff-member__office-hours svg {
    flex-shrink: 0;
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-member__excerpt {
    margin: 0.75rem 0 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.9rem;
    line-height: 1.5;
}

.es-staff-member__contact {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.es-staff-member__email,
.es-staff-member__phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ensemble-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-member__email:hover,
.es-staff-member__phone:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-member__email svg,
.es-staff-member__phone svg {
    flex-shrink: 0;
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-member__social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ensemble-border, #e2e8f0);
}

.es-staff-member__social a {
    color: var(--ensemble-text-secondary, #64748b);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-member__social a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

/* ============================================
   STAFF LIST LAYOUT
   ============================================ */

.es-staff-list-wrapper {
    padding: 1rem 0;
}

.es-staff-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.es-staff-list-item {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1.25rem;
    align-items: center;
    padding: var(--ensemble-card-padding, 20px);
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-list-item:hover {
    box-shadow: var(--ensemble-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.es-staff-list-item__image {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ensemble-bg, #ffffff);
}

.es-staff-list-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-staff-list-item__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--ensemble-text-muted, #94a3b8);
}

.es-staff-list-item__placeholder svg {
    width: 32px;
    height: 32px;
}

.es-staff-list-item__header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.es-staff-list-item__name {
    margin: 0;
    font-size: 1.1rem;
    font-weight: var(--ensemble-button-weight, 600);
}

.es-staff-list-item__name a {
    color: var(--ensemble-text, #1a1a1a);
    text-decoration: none;
}

.es-staff-list-item__name a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-list-item__position {
    color: var(--ensemble-primary, #3b82f6);
    font-size: 0.9rem;
}

.es-staff-list-item__meta {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.85rem;
}

.es-staff-list-item__office-hours {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.85rem;
}

.es-staff-list-item__office-hours svg {
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-list-item__excerpt {
    margin: 0.5rem 0 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.9rem;
    line-height: 1.5;
}

.es-staff-list-item__contact {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.es-staff-list-item__social {
    display: flex;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.es-staff-list-item__social a {
    color: var(--ensemble-text-secondary, #64748b);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-list-item__social a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

@media (max-width: 768px) {
    .es-staff-list-item {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .es-staff-list-item__image {
        margin: 0 auto;
    }
    
    .es-staff-list-item__header {
        justify-content: center;
    }
    
    .es-staff-list-item__meta {
        justify-content: center;
    }
    
    .es-staff-list-item__contact {
        justify-content: center;
    }
}

/* ============================================
   STAFF CARDS (FLIP) LAYOUT
   ============================================ */

.es-staff-cards-wrapper {
    padding: 1rem 0;
}

.es-staff-cards {
    display: grid;
    gap: var(--ensemble-grid-gap, 24px);
}

.es-staff-cards--cols-2 { grid-template-columns: repeat(2, 1fr); }
.es-staff-cards--cols-3 { grid-template-columns: repeat(3, 1fr); }
.es-staff-cards--cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
    .es-staff-cards--cols-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .es-staff-cards--cols-3,
    .es-staff-cards--cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .es-staff-cards { grid-template-columns: 1fr; }
}

.es-staff-card-item {
    perspective: 1000px;
    height: 350px;
}

.es-staff-card-item__inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: var(--ensemble-transition, all 0.3s ease);
    transform-style: preserve-3d;
}

.es-staff-card-item:hover .es-staff-card-item__inner {
    transform: rotateY(180deg);
}

.es-staff-card-item__front,
.es-staff-card-item__back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--ensemble-card-radius, 12px);
    overflow: hidden;
}

.es-staff-card-item__front {
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
}

.es-staff-card-item__back {
    background: var(--ensemble-primary, #3b82f6);
    color: #ffffff;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ensemble-card-padding, 20px);
}

.es-staff-card-item__image {
    height: 70%;
    overflow: hidden;
    background: var(--ensemble-bg, #ffffff);
}

.es-staff-card-item__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-staff-card-item__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ensemble-text-muted, #94a3b8);
}

.es-staff-card-item__image--placeholder svg {
    width: 64px;
    height: 64px;
}

.es-staff-card-item__info {
    padding: 1rem;
    text-align: center;
}

.es-staff-card-item__name {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: var(--ensemble-button-weight, 600);
}

.es-staff-card-item__position {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.es-staff-card-item__back-content {
    text-align: center;
    width: 100%;
}

.es-staff-card-item__back .es-staff-card-item__name {
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.es-staff-card-item__responsibility,
.es-staff-card-item__department {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.es-staff-card-item__office-hours {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0.5rem 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.es-staff-card-item__contact {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.es-staff-card-item__contact a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    opacity: 0.9;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-card-item__contact a:hover {
    opacity: 1;
}

.es-staff-card-item__social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.es-staff-card-item__social a {
    color: #ffffff;
    opacity: 0.8;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-card-item__social a:hover {
    opacity: 1;
}

.es-staff-card-item__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--ensemble-radius, 8px);
    color: #ffffff;
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-card-item__link:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   SINGLE STAFF CARD
   ============================================ */

.es-staff-card-single {
    display: flex;
    flex-direction: column;
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
    overflow: hidden;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-card-single:hover {
    box-shadow: var(--ensemble-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.es-staff-card-single__image {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--ensemble-bg, #ffffff);
}

.es-staff-card-single__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-staff-card-single__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-staff-card-single__image--placeholder svg {
    width: 48px;
    height: 48px;
    color: var(--ensemble-text-muted, #94a3b8);
}

.es-staff-card-single__content {
    padding: var(--ensemble-card-padding, 20px);
}

.es-staff-card-single__name {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: var(--ensemble-button-weight, 600);
}

.es-staff-card-single__name a {
    color: var(--ensemble-text, #1a1a1a);
    text-decoration: none;
}

.es-staff-card-single__name a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-card-single__position {
    margin: 0 0 0.25rem;
    color: var(--ensemble-primary, #3b82f6);
    font-size: 0.9rem;
}

.es-staff-card-single__department {
    margin: 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.85rem;
}

.es-staff-card-single__contact {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.es-staff-card-single__contact a {
    color: var(--ensemble-text-secondary, #64748b);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-card-single__contact a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

/* ============================================
   STAFF COMPACT
   ============================================ */

.es-staff-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.es-staff-compact__image {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.es-staff-compact__info {
    display: flex;
    flex-direction: column;
}

.es-staff-compact__info strong {
    color: var(--ensemble-text, #1a1a1a);
    font-size: 0.95rem;
}

.es-staff-compact__info span {
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.85rem;
}

/* ============================================
   STAFF FULL
   ============================================ */

.es-staff-full {
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
    padding: var(--ensemble-card-padding, 20px);
}

.es-staff-full__header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.es-staff-full__image {
    width: 120px;
    height: 120px;
    border-radius: var(--ensemble-card-radius, 12px);
    overflow: hidden;
    flex-shrink: 0;
}

.es-staff-full__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-staff-full__intro {
    flex: 1;
}

.es-staff-full__name {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    font-weight: var(--ensemble-button-weight, 600);
}

.es-staff-full__name a {
    color: var(--ensemble-text, #1a1a1a);
    text-decoration: none;
}

.es-staff-full__name a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-full__position {
    margin: 0 0 0.25rem;
    color: var(--ensemble-primary, #3b82f6);
    font-size: 1rem;
}

.es-staff-full__department {
    margin: 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.9rem;
}

.es-staff-full__contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.es-staff-full__contact a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ensemble-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-staff-full__contact a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-full__contact svg {
    color: var(--ensemble-primary, #3b82f6);
}

.es-staff-full__bio {
    color: var(--ensemble-text, #1a1a1a);
    font-size: 0.95rem;
    line-height: 1.7;
}

.es-staff-full__bio p:first-child {
    margin-top: 0;
}

.es-staff-full__bio p:last-child {
    margin-bottom: 0;
}

@media (max-width: 480px) {
    .es-staff-full__header {
        flex-direction: column;
        text-align: center;
    }
    
    .es-staff-full__image {
        margin: 0 auto;
    }
    
    .es-staff-full__contact {
        align-items: center;
    }
}

/* ============================================
   EVENT CONTACTS
   ============================================ */

.es-event-contacts {
    margin: 2rem 0;
    padding: var(--ensemble-card-padding, 20px);
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
}

.es-event-contacts__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-size: 1.1rem;
    font-weight: var(--ensemble-button-weight, 600);
    color: var(--ensemble-text, #1a1a1a);
}

.es-event-contacts__title svg {
    color: var(--ensemble-primary, #3b82f6);
}

.es-event-contacts__list {
    display: grid;
    gap: 1rem;
}

@media (min-width: 768px) {
    .es-event-contacts__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

.es-event-contact {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--ensemble-bg, #ffffff);
    border-radius: var(--ensemble-radius, 8px);
}

.es-event-contact__image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--ensemble-surface, #f8fafc);
}

.es-event-contact__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-event-contact__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-event-contact__image--placeholder svg {
    width: 28px;
    height: 28px;
    color: var(--ensemble-text-muted, #94a3b8);
}

.es-event-contact__info {
    flex: 1;
    min-width: 0;
}

.es-event-contact__name {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: var(--ensemble-button-weight, 600);
}

.es-event-contact__name a {
    color: var(--ensemble-text, #1a1a1a);
    text-decoration: none;
}

.es-event-contact__name a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-event-contact__position {
    margin: 0;
    color: var(--ensemble-primary, #3b82f6);
    font-size: 0.85rem;
}

.es-event-contact__department,
.es-event-contact__responsibility {
    margin: 0.125rem 0 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.8rem;
}

.es-event-contact__hours {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.8rem;
}

.es-event-contact__hours svg {
    color: var(--ensemble-primary, #3b82f6);
}

.es-event-contact__links {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.es-event-contact__email,
.es-event-contact__phone {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ensemble-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.8rem;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-event-contact__email:hover,
.es-event-contact__phone:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-event-contact__email svg,
.es-event-contact__phone svg {
    flex-shrink: 0;
    color: var(--ensemble-primary, #3b82f6);
}

.es-event-contact__phone-type {
    color: var(--ensemble-text-muted, #94a3b8);
    font-size: 0.75rem;
}

.es-event-contact__social {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.es-event-contact__social-link {
    color: var(--ensemble-text-secondary, #64748b);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-event-contact__social-link:hover {
    color: var(--ensemble-primary, #3b82f6);
}

/* ============================================
   LAYOUT: Grid (Standard)
   ============================================ */
.es-event-contacts--grid .es-event-contacts__list {
    display: grid;
    gap: 1rem;
}

/* ============================================
   LAYOUT: List
   ============================================ */
.es-event-contacts--list .es-event-contacts__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.es-event-contacts--list .es-event-contact {
    flex-direction: row;
    align-items: center;
    padding: 0.75rem 1rem;
}

.es-event-contacts--list .es-event-contact__image {
    width: 48px;
    height: 48px;
}

.es-event-contacts--list .es-event-contact__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.5rem;
}

.es-event-contacts--list .es-event-contact__name {
    margin: 0;
}

.es-event-contacts--list .es-event-contact__position,
.es-event-contacts--list .es-event-contact__department {
    margin: 0;
    font-size: 0.8rem;
}

.es-event-contacts--list .es-event-contact__links {
    margin-left: auto;
}

/* ============================================
   LAYOUT: Cards
   ============================================ */
.es-event-contacts--cards .es-event-contacts__list {
    display: grid;
    gap: 1.25rem;
}

.es-event-contacts--cards .es-event-contact {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.es-event-contacts--cards .es-event-contact__image {
    width: 80px;
    height: 80px;
    margin-bottom: 0.75rem;
}

.es-event-contacts--cards .es-event-contact__links {
    justify-content: center;
}

.es-event-contacts--cards .es-event-contact__social {
    justify-content: center;
}

/* ============================================
   COLUMNS: 2, 3, 4
   ============================================ */

/* 2 Spalten */
.es-event-contacts--cols-2 .es-event-contacts__list {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 Spalten */
.es-event-contacts--cols-3 .es-event-contacts__list {
    grid-template-columns: repeat(3, 1fr);
}

/* 4 Spalten */
.es-event-contacts--cols-4 .es-event-contacts__list {
    grid-template-columns: repeat(4, 1fr);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .es-event-contacts--cols-4 .es-event-contacts__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .es-event-contacts--cols-3 .es-event-contacts__list,
    .es-event-contacts--cols-4 .es-event-contacts__list {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .es-event-contacts--list .es-event-contact {
        flex-wrap: wrap;
    }
    
    .es-event-contacts--list .es-event-contact__links {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .es-event-contacts--cols-2 .es-event-contacts__list,
    .es-event-contacts--cols-3 .es-event-contacts__list,
    .es-event-contacts--cols-4 .es-event-contacts__list {
        grid-template-columns: 1fr;
    }
}








/* ============================================
   LOCATION CONTACTS
   ============================================ */

.es-location-contacts {
    margin: 2rem 0;
    padding: var(--ensemble-card-padding, 20px);
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
}

.es-location-contacts__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-size: 1.1rem;
    font-weight: var(--ensemble-button-weight, 600);
    color: var(--ensemble-text, #1a1a1a);
}

.es-location-contacts__title svg {
    color: var(--ensemble-primary, #3b82f6);
}

.es-location-contacts__list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.es-location-contact {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    background: var(--ensemble-bg, #ffffff);
    border-radius: var(--ensemble-radius, 8px);
}

.es-location-contact__image {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ensemble-surface, #f8fafc);
}

.es-location-contact__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-location-contact__image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.es-location-contact__image--placeholder svg {
    width: 28px;
    height: 28px;
    color: var(--ensemble-text-muted, #94a3b8);
}

.es-location-contact__info {
    min-width: 0;
}

.es-location-contact__name {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: var(--ensemble-button-weight, 600);
}

.es-location-contact__name a {
    color: var(--ensemble-text, #1a1a1a);
    text-decoration: none;
}

.es-location-contact__name a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-location-contact__position {
    margin: 0;
    color: var(--ensemble-primary, #3b82f6);
    font-size: 0.85rem;
}

.es-location-contact__department,
.es-location-contact__responsibility {
    margin: 0.125rem 0 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.8rem;
}

.es-location-contact__hours {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    color: var(--ensemble-text-secondary, #64748b);
    font-size: 0.8rem;
}

.es-location-contact__hours svg {
    color: var(--ensemble-primary, #3b82f6);
}

.es-location-contact__contact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.es-location-contact__link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--ensemble-text-secondary, #64748b);
    text-decoration: none;
    font-size: 0.8rem;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-location-contact__link:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-location-contact__link svg {
    flex-shrink: 0;
    color: var(--ensemble-primary, #3b82f6);
}

.es-location-contact__phone-type {
    color: var(--ensemble-text-muted, #94a3b8);
    font-size: 0.75rem;
}

.es-location-contact__social {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.es-location-contact__social-link {
    color: var(--ensemble-text-secondary, #64748b);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-location-contact__social-link:hover {
    color: var(--ensemble-primary, #3b82f6);
}

@media (max-width: 600px) {
    .es-location-contact {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .es-location-contact__image {
        margin: 0 auto;
    }
    
    .es-location-contact__contact {
        align-items: center;
    }
}

/* ============================================
   CONTACT FORM
   ============================================ */

.es-contact-form-wrapper {
    max-width: 600px;
}

.es-contact-form__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    font-weight: var(--ensemble-button-weight, 600);
    color: var(--ensemble-text, #1a1a1a);
}

.es-contact-form__description {
    margin: 0 0 1.5rem;
    color: var(--ensemble-text-secondary, #64748b);
}

.es-contact-form__recipient {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--ensemble-bg, #ffffff);
    border-radius: var(--ensemble-radius, 8px);
}

.es-contact-form__recipient-image {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.es-contact-form__recipient-info {
    display: flex;
    flex-direction: column;
}

.es-contact-form__recipient-info strong {
    color: var(--ensemble-text, #1a1a1a);
}

.es-contact-form__recipient-info span {
    font-size: 0.85rem;
    color: var(--ensemble-text-secondary, #64748b);
}

.es-contact-form__row {
    margin-bottom: 1.25rem;
}

.es-contact-form__row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 480px) {
    .es-contact-form__row--2col {
        grid-template-columns: 1fr;
    }
}

.es-contact-form__field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: var(--ensemble-body-weight, 400);
    color: var(--ensemble-text, #1a1a1a);
}

.es-contact-form__field label .required {
    color: var(--ensemble-danger, #ef4444);
}

.es-contact-form__field input[type="text"],
.es-contact-form__field input[type="email"],
.es-contact-form__field input[type="url"],
.es-contact-form__field textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-radius, 8px);
    background: var(--ensemble-surface, #f8fafc);
    color: var(--ensemble-text, #1a1a1a);
    font-size: 1rem;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-contact-form__field input:focus,
.es-contact-form__field textarea:focus {
    outline: none;
    border-color: var(--ensemble-primary, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* File Upload */
.es-contact-form__file-wrapper {
    position: relative;
}

.es-contact-form__file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.es-contact-form__file-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 1rem;
    border: 2px dashed var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-radius, 8px);
    text-align: center;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-contact-form__file-wrapper:hover .es-contact-form__file-display,
.es-contact-form__file-wrapper.is-dragover .es-contact-form__file-display {
    border-color: var(--ensemble-primary, #3b82f6);
    background: rgba(59, 130, 246, 0.02);
}

.es-contact-form__file-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--ensemble-text-secondary, #64748b);
}

.es-contact-form__file-placeholder svg {
    color: var(--ensemble-primary, #3b82f6);
}

.es-contact-form__file-name {
    display: none;
    color: var(--ensemble-text, #1a1a1a);
    font-weight: var(--ensemble-body-weight, 400);
}

.es-contact-form__file-wrapper.has-file .es-contact-form__file-placeholder {
    display: none;
}

.es-contact-form__file-wrapper.has-file .es-contact-form__file-name {
    display: block;
}

.es-contact-form__file-info {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    color: var(--ensemble-text-secondary, #64748b);
}

/* Einreichungsarten und Link-Feld (10.10.2026) */
.es-contact-form__field[hidden] {
    display: none;
}

.es-contact-form__kinds {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.es-contact-form__kinds legend {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0;
    color: var(--ensemble-text, #1a1a1a);
}

.es-contact-form__kind {
    position: relative;
    cursor: pointer;
}

.es-contact-form__kind input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.es-contact-form__kind span {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-button-radius, 999px);
    background: var(--ensemble-surface, #f8fafc);
    color: var(--ensemble-text, #1a1a1a);
    font-size: 0.9rem;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-contact-form__kind input:checked + span {
    border-color: var(--ensemble-primary, #3b82f6);
    background: var(--ensemble-primary, #3b82f6);
    color: var(--ensemble-button-text, #ffffff);
}

.es-contact-form__kind input:focus-visible + span {
    outline: 2px solid var(--ensemble-primary, #3b82f6);
    outline-offset: 2px;
}

/* Privacy Checkbox */
.es-contact-form__checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.es-contact-form__checkbox input {
    margin-top: 0.25rem;
    accent-color: var(--ensemble-primary, #3b82f6);
}

.es-contact-form__checkbox span {
    font-size: 0.9rem;
    color: var(--ensemble-text-secondary, #64748b);
}

.es-contact-form__checkbox a {
    color: var(--ensemble-primary, #3b82f6);
}

/* Submit Button */
.es-contact-form__submit {
    margin-top: 1.5rem;
}

/* Messages */
.es-contact-form__messages {
    margin-top: 1rem;
}

.es-contact-form__success,
.es-contact-form__error {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--ensemble-radius, 8px);
}

.es-contact-form__success {
    background: color-mix(in srgb, var(--ensemble-success, #10b981) 15%, transparent);
    color: var(--ensemble-success, #10b981);
}

.es-contact-form__error {
    background: color-mix(in srgb, var(--ensemble-danger, #ef4444) 15%, transparent);
    color: var(--ensemble-danger, #ef4444);
}

/* ============================================
   BUTTONS
   ============================================ */

.es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--ensemble-radius, 8px);
    font-size: 1rem;
    font-weight: var(--ensemble-body-weight, 400);
    cursor: pointer;
    text-decoration: none;
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-btn--primary {
    background: var(--ensemble-primary, #3b82f6);
    color: #ffffff;
}

.es-btn--primary:hover {
    background: var(--ensemble-hover, #2563eb);
}

.es-btn--outline {
    background: transparent;
    border: 1px solid var(--ensemble-border, #e2e8f0);
    color: var(--ensemble-text, #1a1a1a);
}

.es-btn--outline:hover {
    border-color: var(--ensemble-primary, #3b82f6);
    color: var(--ensemble-primary, #3b82f6);
}

.es-btn__loading {
    display: none;
}

.es-btn.is-loading .es-btn__text {
    display: none;
}

.es-btn.is-loading .es-btn__loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Spinner */
.es-spinner {
    animation: es-spin 1s linear infinite;
}

@keyframes es-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   SINGLE STAFF PAGE
   ============================================ */

.es-single-staff {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.es-single-staff__header {
    margin-bottom: 2rem;
}

.es-single-staff__header-inner {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.es-single-staff__image {
    width: 200px;
    height: 200px;
    border-radius: var(--ensemble-card-radius, 12px);
    overflow: hidden;
    flex-shrink: 0;
}

.es-single-staff__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.es-single-staff__name {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    font-weight: var(--ensemble-heading-weight, 700);
    color: var(--ensemble-text, #1a1a1a);
}

.es-single-staff__position {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--ensemble-primary, #3b82f6);
    font-weight: var(--ensemble-body-weight, 400);
}

.es-single-staff__department {
    margin: 0 0 0.5rem;
    color: var(--ensemble-text-secondary, #64748b);
}

.es-single-staff__responsibility {
    margin: 0;
    color: var(--ensemble-text-secondary, #64748b);
}

.es-single-staff__body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
}

.es-single-staff__bio {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ensemble-text, #1a1a1a);
}

.es-single-staff__form-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ensemble-border, #e2e8f0);
}

.es-single-staff__form-section h2 {
    margin: 0 0 1rem;
    font-size: 1.5rem;
    color: var(--ensemble-text, #1a1a1a);
}

.es-single-staff__contact-card,
.es-single-staff__social-card {
    padding: 1.5rem;
    background: var(--ensemble-surface, #f8fafc);
    border: 1px solid var(--ensemble-border, #e2e8f0);
    border-radius: var(--ensemble-card-radius, 12px);
    margin-bottom: 1.5rem;
}

.es-single-staff__contact-card h3,
.es-single-staff__social-card h3 {
    margin: 0 0 1rem;
    font-size: 1.1rem;
    font-weight: var(--ensemble-button-weight, 600);
    color: var(--ensemble-text, #1a1a1a);
}

.es-single-staff__contact-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ensemble-border, #e2e8f0);
}

.es-single-staff__contact-item:last-child {
    border-bottom: none;
}

.es-single-staff__contact-item svg {
    color: var(--ensemble-primary, #3b82f6);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.es-single-staff__contact-label {
    display: block;
    font-size: 0.8rem;
    color: var(--ensemble-text-secondary, #64748b);
    margin-bottom: 0.125rem;
}

.es-single-staff__contact-item a {
    color: var(--ensemble-text, #1a1a1a);
    text-decoration: none;
}

.es-single-staff__contact-item a:hover {
    color: var(--ensemble-primary, #3b82f6);
}

.es-single-staff__social-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.es-single-staff__social-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ensemble-text, #1a1a1a);
    text-decoration: none;
    padding: 0.5rem;
    background: var(--ensemble-bg, #ffffff);
    border-radius: var(--ensemble-radius, 8px);
    transition: var(--ensemble-transition, all 0.3s ease);
}

.es-single-staff__social-link:hover {
    background: var(--ensemble-border, #e2e8f0);
    color: var(--ensemble-primary, #3b82f6);
}

.es-single-staff__social-link svg {
    color: var(--ensemble-primary, #3b82f6);
}

@media (max-width: 768px) {
    .es-single-staff__header-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .es-single-staff__body {
        grid-template-columns: 1fr;
    }
    
    .es-single-staff__sidebar {
        order: -1;
    }
}