/* ==========================================================================
   LCD Presence Now — "Who's in the lab" shortcode styles
   Mobile-first, compatible with TwentyTwentyFive FSE theme variables.
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
    --lpn-bg:           var(--primary-background, #ffffff);
    --lpn-card-bg:      var(--secondary-background, #f9f9f9);
    --lpn-text:         var(--primary-text, #1a1a1a);
    --lpn-text-muted:   var(--quinary-text, #666666);
    --lpn-border:       var(--border, #e0e0e0);
    --lpn-radius:       var(--border-radius, 12px);
    --lpn-spacing-md:   var(--spacing-md, 24px);
    --lpn-spacing-sm:   var(--spacing-sm, 12px);
    --lpn-font-head:    var(--font-headline, inherit);
    --lpn-font-body:    var(--font-body, inherit);
    --lpn-green:        #22c55e;
    --lpn-shadow:       0 1px 4px rgba(0, 0, 0, 0.08);
    --lpn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
    --lpn-transition:   0.25s ease;
}

/* ---------- Section wrapper ---------- */
.lcd-presence-now.team-section {
    background: var(--lpn-bg);
    padding: var(--lpn-spacing-md) 0;
    font-family: var(--lpn-font-body);
}

.lcd-presence-now .team-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--lpn-spacing-sm);
}

/* ---------- Header ---------- */
.lcd-presence-now .team-header {
    text-align: center;
    margin-bottom: var(--lpn-spacing-md);
}

.lcd-presence-now .team-title {
    font-family: var(--lpn-font-head);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--lpn-text);
    margin: 0 0 8px;
}

.lcd-presence-now .team-subtitle {
    font-size: 0.95rem;
    color: var(--lpn-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
}

/* ---------- Pulsing green badge ---------- */
.lcd-presence-now__badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lpn-green);
    animation: lpn-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes lpn-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(1.3); }
}

/* ---------- Empty state ---------- */
.lcd-presence-now__empty {
    text-align: center;
    padding: 48px var(--lpn-spacing-sm);
    color: var(--lpn-text-muted);
}

.lcd-presence-now__empty-icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 12px;
}

.lcd-presence-now__empty p {
    margin: 0;
    font-size: 1.05rem;
}

/* ---------- Card grid — mobile: horizontal scroll ---------- */
.lcd-presence-now__grid {
    display: flex;
    gap: var(--lpn-spacing-sm);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;

    /* Fade-out edges on mobile */
    mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
}

/* ---------- Card ---------- */
.lcd-presence-now__card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--lpn-card-bg);
    border: 1px solid var(--lpn-border);
    border-radius: var(--lpn-radius);
    padding: 14px 18px;
    min-width: 240px;
    scroll-snap-align: start;
    box-shadow: var(--lpn-shadow);
    transition: box-shadow var(--lpn-transition), transform var(--lpn-transition);
    position: relative;
    animation: lpn-fade-in 0.35s ease both;
}

.lcd-presence-now__card:hover {
    box-shadow: var(--lpn-shadow-hover);
    transform: translateY(-2px);
}

/* ---------- Green dot indicator ---------- */
.lcd-presence-now__dot {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--lpn-green);
    animation: lpn-pulse 1.5s ease-in-out infinite;
}

/* ---------- Avatar ---------- */
.lcd-presence-now__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--lpn-border);
}

/* ---------- Info column ---------- */
.lcd-presence-now__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lcd-presence-now__name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--lpn-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lcd-presence-now__role {
    font-size: 0.82rem;
    color: var(--lpn-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lcd-presence-now__elapsed {
    font-size: 0.78rem;
    color: var(--lpn-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.lcd-presence-now__elapsed::before {
    content: '⏱';
    font-size: 0.75rem;
}

/* ---------- Fade-in animation ---------- */
@keyframes lpn-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Stagger animation delay for cards ---------- */
.lcd-presence-now__card:nth-child(1) { animation-delay: 0.00s; }
.lcd-presence-now__card:nth-child(2) { animation-delay: 0.06s; }
.lcd-presence-now__card:nth-child(3) { animation-delay: 0.12s; }
.lcd-presence-now__card:nth-child(4) { animation-delay: 0.18s; }
.lcd-presence-now__card:nth-child(5) { animation-delay: 0.24s; }
.lcd-presence-now__card:nth-child(6) { animation-delay: 0.30s; }
.lcd-presence-now__card:nth-child(7) { animation-delay: 0.36s; }
.lcd-presence-now__card:nth-child(8) { animation-delay: 0.42s; }
.lcd-presence-now__card:nth-child(9) { animation-delay: 0.48s; }
.lcd-presence-now__card:nth-child(10) { animation-delay: 0.54s; }

/* ==========================================================================
   Responsive — desktop: multi-column grid
   ========================================================================== */

@media (min-width: 640px) {
    .lcd-presence-now__grid {
        flex-wrap: wrap;
        overflow-x: visible;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .lcd-presence-now__card {
        min-width: 0;
        flex: 1 1 calc(50% - var(--lpn-spacing-sm));
        max-width: calc(50% - var(--lpn-spacing-sm));
    }
}

@media (min-width: 960px) {
    .lcd-presence-now .team-title {
        font-size: 1.75rem;
    }

    .lcd-presence-now__card {
        flex: 1 1 calc(33.333% - var(--lpn-spacing-sm));
        max-width: calc(33.333% - var(--lpn-spacing-sm));
    }
}

/* ==========================================================================
   Dark mode — respects prefers-color-scheme or TwentyTwentyFive
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --lpn-bg:           var(--primary-background, #1a1a1a);
        --lpn-card-bg:      var(--secondary-background, #2a2a2a);
        --lpn-text:         var(--primary-text, #f0f0f0);
        --lpn-text-muted:   var(--quinary-text, #a0a0a0);
        --lpn-border:       var(--border, #3a3a3a);
        --lpn-shadow:       0 1px 4px rgba(0, 0, 0, 0.3);
        --lpn-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.45);
    }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lcd-presence-now__card,
    .lcd-presence-now__badge,
    .lcd-presence-now__dot {
        animation: none;
        transition: none;
    }
}