:root {
        --maya-accent: #6366f1;
        --maya-accent-light: #6366f11a;
        --maya-accent-soft: #eef2ff;
        --maya-text: #0f172a;
        --maya-muted: #64748b;
        --maya-border: #e5e7eb;
        --maya-bg: #ffffff;
        --maya-radius: 16px;
        --maya-radius-lg: 20px;
        --maya-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
        --maya-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
        --maya-shadow-lg: 0 20px 40px -16px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
}

.maya-team-directory {
        max-width: 1200px;
        margin: 0 auto;
        padding: 24px;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        color: var(--maya-text);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

.maya-powered-by {
        margin-top: 32px;
        padding-top: 16px;
        border-top: 1px solid var(--maya-border);
        text-align: center;
        font-size: 12px;
        color: #94a3b8;
        letter-spacing: 0.02em;
}

.maya-powered-by a {
        color: #94a3b8;
        text-decoration: none;
        transition: color 0.2s;
}

.maya-powered-by a:hover {
        color: var(--maya-accent);
}

.maya-team-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 32px;
        align-items: center;
}

.maya-search-wrap {
        position: relative;
        flex: 1;
        min-width: 220px;
}

.maya-search-input {
        width: 100%;
        padding: 12px 16px 12px 44px;
        border: 1px solid var(--maya-border);
        border-radius: 12px;
        font-size: 15px;
        color: var(--maya-text);
        background: #fff;
        box-shadow: var(--maya-shadow-sm);
        transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s;
        outline: none;
        box-sizing: border-box;
}

.maya-search-input:hover {
        border-color: #cbd5e1;
}

.maya-search-input:focus {
        border-color: var(--maya-accent);
        box-shadow: 0 0 0 3px var(--maya-accent-light);
}

.maya-search-input::placeholder {
        color: #94a3b8;
}

.maya-search-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        color: #94a3b8;
        pointer-events: none;
}

.maya-filter-wrap {
        min-width: 180px;
}

.maya-group-filter {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid var(--maya-border);
        border-radius: 12px;
        font-size: 15px;
        color: var(--maya-text);
        background: #fff;
        box-shadow: var(--maya-shadow-sm);
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        outline: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 12px center;
        background-repeat: no-repeat;
        background-size: 20px;
        padding-right: 40px;
}

.maya-group-filter:focus {
        border-color: var(--maya-accent);
        box-shadow: 0 0 0 3px var(--maya-accent-light);
}

.maya-layout-toggle {
        display: flex;
        gap: 2px;
        background: #e2e8f0;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        padding: 3px;
}

.maya-layout-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: #000;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
}

.maya-layout-btn svg {
        width: 18px;
        height: 18px;
        display: block;
        stroke: currentColor;
        color: #000;
}

.maya-layout-btn:hover {
        background: rgba(255, 255, 255, 0.6);
        color: #000;
}

.maya-layout-btn.maya-layout-active {
        background: #fff;
        color: #000;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.maya-layout-btn.maya-layout-active svg {
        color: #000;
}

.maya-team-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 24px;
}

.maya-team-directory[style*="--maya-columns"] .maya-team-grid {
        grid-template-columns: repeat(var(--maya-columns), minmax(0, 1fr));
}

@media (max-width: 768px) {
        .maya-team-directory[style*="--maya-columns"] .maya-team-grid {
                grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        }
}

.maya-member-card {
        background: var(--maya-bg);
        border-radius: var(--maya-radius);
        overflow: hidden;
        border: 1px solid var(--maya-border);
        box-shadow: var(--maya-shadow-sm);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
        display: flex;
        flex-direction: column;
        position: relative;
}

.maya-member-card:hover {
        transform: translateY(-6px);
        box-shadow: var(--maya-shadow-lg);
        border-color: transparent;
}

.maya-card-link {
        text-decoration: none;
        color: inherit;
        display: block;
        flex: 1;
}

.maya-card-link:hover,
.maya-card-link:focus {
        text-decoration: none;
        color: inherit;
}

.maya-card-image {
        width: 100%;
        aspect-ratio: 1;
        overflow: hidden;
        background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
}

.maya-card-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0) 50%, rgba(15, 23, 42, 0.18) 100%);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
}

.maya-member-card:hover .maya-card-image::after {
        opacity: 1;
}

.maya-card-image img.maya-profile-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.maya-member-card:hover .maya-card-image img.maya-profile-photo {
        transform: scale(1.05);
}

.maya-placeholder-photo {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.maya-placeholder-photo svg {
        width: 48px;
        height: 48px;
        color: #818cf8;
}

.maya-card-content {
        padding: 20px;
        flex: 1;
}

.maya-card-groups {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 10px;
}

.maya-group-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        background: var(--maya-accent-soft);
        color: var(--maya-accent);
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        text-decoration: none;
        transition: all 0.2s ease;
        line-height: 1.4;
}

a.maya-group-badge.maya-group-link:hover,
a.maya-group-badge.maya-group-link:focus {
        background: var(--maya-accent);
        color: #fff;
        transform: translateY(-1px);
        text-decoration: none;
}

.maya-card-name {
        margin: 0 0 4px;
        font-size: 18px;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.3;
}

.maya-card-position {
        margin: 0 0 2px;
        font-size: 14px;
        color: var(--maya-accent);
        font-weight: 600;
        line-height: 1.4;
}

.maya-card-department {
        margin: 0 0 10px;
        font-size: 13px;
        color: #64748b;
        font-weight: 500;
        line-height: 1.4;
}

.maya-card-bio {
        margin: 0;
        font-size: 14px;
        color: #475569;
        line-height: 1.6;
}

.maya-card-footer {
        display: flex;
        gap: 8px;
        padding: 14px 20px;
        border-top: 1px solid #f1f5f9;
        align-items: center;
        flex-wrap: wrap;
}

.maya-contact-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: #f8fafc;
        color: var(--maya-muted);
        border: 1px solid var(--maya-border);
        transition: all 0.2s ease;
        text-decoration: none;
}

.maya-contact-link:hover {
        background: var(--maya-accent);
        color: #fff;
        border-color: var(--maya-accent);
        transform: translateY(-1px);
}

.maya-contact-link svg {
        width: 18px;
        height: 18px;
}

.maya-social-links {
        display: flex;
        gap: 4px;
        margin-left: auto;
}

.maya-social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: transparent;
        color: #94a3b8;
        transition: background 0.2s ease, color 0.2s ease;
        text-decoration: none;
}

.maya-social-link:hover {
        color: var(--maya-accent);
        background: var(--maya-accent-light);
}

.maya-social-link svg {
        width: 16px;
        height: 16px;
}

.maya-layout-list .maya-team-grid {
        grid-template-columns: 1fr;
        gap: 16px;
}

.maya-member-list-card {
        flex-direction: row;
        border-radius: 12px;
        overflow: visible;
}

.maya-member-list-card:hover {
        transform: translateY(-2px);
}

.maya-list-photo {
        flex-shrink: 0;
        width: 100px;
        height: 100px;
        overflow: hidden;
        border-radius: 12px 0 0 12px;
}

.maya-list-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.maya-list-photo .maya-placeholder-small {
        width: 100px;
        height: 100px;
        border-radius: 12px 0 0 12px;
        text-decoration: none;
}

.maya-list-photo .maya-placeholder-small svg {
        width: 32px;
        height: 32px;
}

.maya-list-content {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 16px 20px;
        min-width: 0;
}

.maya-list-main {
        min-width: 200px;
}

.maya-list-main .maya-card-name {
        font-size: 16px;
        margin-bottom: 2px;
}

.maya-list-main .maya-card-position {
        font-size: 13px;
}

.maya-list-main .maya-card-department {
        margin-bottom: 0;
}

.maya-list-bio {
        flex: 1;
        min-width: 0;
}

.maya-list-bio .maya-card-bio {
        font-size: 13px;
        line-height: 1.5;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}

.maya-list-meta .maya-card-footer {
        border-top: none;
        padding: 0;
        flex-direction: column;
        gap: 4px;
}

.maya-layout-compact .maya-team-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 12px;
}

.maya-member-compact-card {
        border-radius: 10px;
        padding: 0;
        overflow: hidden;
}

.maya-member-compact-card:hover {
        transform: translateY(-2px);
}

.maya-compact-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        text-decoration: none;
        color: inherit;
}

.maya-compact-link:hover {
        text-decoration: none;
        color: inherit;
}

.maya-compact-photo {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
}

.maya-compact-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.maya-placeholder-tiny {
        width: 48px;
        height: 48px;
        border-radius: 50%;
}

.maya-placeholder-tiny svg {
        width: 20px;
        height: 20px;
}

.maya-compact-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
}

.maya-compact-info .maya-card-name {
        font-size: 15px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.maya-compact-info .maya-card-position {
        font-size: 12px;
        margin: 0;
}

.maya-pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 4px;
        margin-top: 40px;
        flex-wrap: wrap;
}

.maya-pagination a,
.maya-pagination span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        height: 40px;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
}

.maya-pagination a {
        color: #475569;
        background: #f8fafc;
}

.maya-pagination a:hover {
        background: var(--maya-accent-light);
        color: var(--maya-accent);
}

.maya-pagination .current {
        background: var(--maya-accent);
        color: #fff;
}

.maya-no-members {
        text-align: center;
        padding: 60px 20px;
        color: #94a3b8;
        font-size: 16px;
}

.maya-team-directory.maya-loading {
        opacity: 0.6;
        pointer-events: none;
        transition: opacity 0.2s;
}

/* ===================================================================
   Single-member template — clean Minimal layout (default for free).
   Centered portrait photo, left-aligned identity block (name + position
   + social row), centered group link(s), full-width bio paragraph,
   pill-shaped Back-to-Directory link at the bottom.
   The Pro add-on ships additional template styles (Modern hero, Card,
   Magazine, Sidebar, and a richer Minimal variant) that a customer can
   switch to from its Settings tab.
   =================================================================== */
.maya-single-member.maya-layout-minimal {
        max-width: 920px;
        margin: 40px auto;
        padding: 0 20px;
        color: #1f2937;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ---- Centered portrait photo ---- */
.maya-mini-photo {
        margin: 0 0 22px;
        text-align: center;
}

.maya-mini-photo img,
.maya-mini-photo .maya-mini-placeholder {
        display: inline-block;
        width: 200px;
        height: 200px;
        max-width: 100%;
        object-fit: cover;
        border-radius: 6px;
        background: #f3f4f6;
        vertical-align: top;
}

.maya-mini-placeholder {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
}

.maya-mini-placeholder svg {
        width: 80px;
        height: 80px;
        max-width: none;
        max-height: none;
}

/* ---- Identity block (left-aligned) ---- */
.maya-mini-identity {
        margin: 0 0 24px;
        text-align: left;
        padding: 0;
}

.maya-mini-name {
        margin: 0 0 4px;
        font-size: 1.35em;
        font-weight: 700;
        color: #0f172a;
        line-height: 1.25;
        letter-spacing: -0.005em;
}

.maya-mini-position {
        margin: 0 0 2px;
        font-size: 0.95em;
        color: #6b7280;
        font-weight: 400;
}

.maya-mini-department {
        margin: 0 0 8px;
        font-size: 0.85em;
        color: #9ca3af;
}

/* ---- Social icon row (4 small circles, left-aligned) ---- */
.maya-mini-social {
        list-style: none !important;
        padding: 0 !important;
        margin: 14px 0 0 !important;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

.maya-mini-social li {
        list-style: none !important;
        padding: 0;
        margin: 0;
}

.maya-mini-social .maya-social-link {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 1px solid #d1d5db;
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #6b7280;
        text-decoration: none;
        transition: all 0.15s ease;
}

.maya-mini-social .maya-social-link svg {
        width: 13px;
        height: 13px;
}

.maya-mini-social .maya-social-link:hover,
.maya-mini-social .maya-social-link:focus {
        color: var(--maya-accent);
        border-color: var(--maya-accent);
        background: var(--maya-accent-light);
}

/* ---- Centered group link(s) ---- */
.maya-mini-groups {
        margin: 8px 0 28px;
        text-align: center;
        font-size: 14px;
        color: #6b7280;
}

.maya-mini-groups .maya-mini-group-link {
        color: var(--maya-accent);
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: color 0.15s ease;
}

.maya-mini-groups .maya-mini-group-link:hover,
.maya-mini-groups .maya-mini-group-link:focus {
        color: #0f172a;
}

.maya-mini-groups .maya-mini-group-sep {
        color: #cbd5e1;
        margin: 0 4px;
}

/* ---- Bio (full width, left-aligned) ---- */
.maya-mini-bio {
        font-size: 15px;
        line-height: 1.75;
        color: #374151;
        margin: 0 0 24px;
}

.maya-mini-bio p {
        margin: 0 0 16px;
}

.maya-mini-bio p:first-child {
        margin-top: 0;
}

.maya-mini-bio p:last-child {
        margin-bottom: 0;
}

/* ---- Back link footer ---- */
.maya-single-member.maya-layout-minimal .maya-single-nav {
        margin-top: 24px;
        padding-top: 20px;
        border-top: 1px solid #e5e7eb;
}

.maya-single-member.maya-layout-minimal .maya-back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        border-radius: 999px;
        color: #64748b;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: all 0.15s ease;
}

.maya-single-member.maya-layout-minimal .maya-back-link svg {
        width: 14px;
        height: 14px;
        transition: transform 0.15s ease;
}

.maya-single-member.maya-layout-minimal .maya-back-link:hover {
        background: var(--maya-accent);
        color: #fff;
        border-color: var(--maya-accent);
}

.maya-single-member.maya-layout-minimal .maya-back-link:hover svg {
        transform: translateX(-2px);
}
        transition: background 0.2s;
}

.maya-widget-member-link:hover {
        background: #f8fafc;
        text-decoration: none;
        color: inherit;
}

.maya-widget-photo {
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        overflow: hidden;
}

.maya-widget-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.maya-widget-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
        border-radius: 50%;
}

.maya-widget-placeholder svg {
        width: 20px;
        height: 20px;
        color: #818cf8;
}

.maya-widget-info {
        display: flex;
        flex-direction: column;
        min-width: 0;
}

.maya-widget-name {
        font-size: 14px;
        font-weight: 600;
        color: #0f172a;
        line-height: 1.3;
}

.maya-widget-position {
        font-size: 12px;
        color: #64748b;
        line-height: 1.4;
}

@media (max-width: 768px) {
        .maya-team-controls {
                flex-direction: column;
        }

        .maya-search-wrap,
        .maya-filter-wrap {
                width: 100%;
                min-width: 0;
        }

        .maya-team-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: 16px;
        }

        .maya-member-list-card {
                flex-direction: column;
        }

        .maya-list-photo {
                width: 100%;
                height: 200px;
                border-radius: 12px 12px 0 0;
        }

        .maya-list-content {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
        }

        .maya-single-member .maya-single-body {
                grid-template-columns: 1fr;
                gap: 32px;
        }

        .maya-single-member .maya-single-aside {
                position: static;
                max-width: 480px;
                margin: 0 auto;
        }

        .maya-aside-photo img,
        .maya-aside-photo .maya-aside-placeholder {
                aspect-ratio: 16 / 10;
        }

        .maya-content-title {
                text-align: center;
        }

        .maya-aside-breadcrumb {
                margin-left: auto;
                margin-right: auto;
                display: flex;
                justify-content: center;
        }

        .maya-aside-social {
                justify-content: flex-start;
        }
}

/* Mid-width themes (≈ 769–1024px content area) — keep the layout
   readable by stacking aside above main and centering both. */
@media (max-width: 1024px) and (min-width: 769px) {
        .maya-single-member .maya-single-body {
                grid-template-columns: 1fr;
                gap: 32px;
                max-width: 720px;
                margin-left: auto;
                margin-right: auto;
        }

        .maya-single-member .maya-single-aside {
                position: static;
                max-width: 480px;
                margin: 0 auto;
        }
}

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

        .maya-card-content {
                padding: 16px;
        }

        .maya-card-footer {
                padding: 12px 16px;
        }
}

/* === Modern (Hero Banner) Single Template === */
.maya-single-modern {
        max-width: 1100px;
        margin: 0 auto;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        color: var(--maya-text);
}

.maya-modern-hero {
        position: relative;
        min-height: 360px;
        border-radius: 0 0 var(--maya-radius-lg) var(--maya-radius-lg);
        overflow: hidden;
        display: flex;
        align-items: flex-end;
        padding: 60px 40px 40px;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

.maya-modern-bg {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        filter: blur(20px) brightness(0.55);
        transform: scale(1.1);
}

.maya-modern-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0.35) 0%, rgba(15, 23, 42, 0.75) 100%);
}

.maya-modern-hero-content {
        position: relative;
        z-index: 2;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        max-width: 100%;
}

.maya-modern-photo {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        overflow: hidden;
        border: 4px solid #fff;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
        margin-bottom: 16px;
        background: #e0e7ff;
}

.maya-modern-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.maya-modern-photo .maya-placeholder-large {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #818cf8;
}

.maya-modern-photo .maya-placeholder-large svg {
        width: 60px;
        height: 60px;
}

.maya-modern-name {
        font-size: 36px;
        font-weight: 800;
        margin: 0;
        color: #fff;
        letter-spacing: -0.02em;
        line-height: 1.1;
}

.maya-modern-position {
        font-size: 18px;
        font-weight: 600;
        margin: 0;
        color: #c7d2fe;
}

.maya-modern-department {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.75);
        margin: 0;
}

.maya-modern-groups {
        margin-top: 12px;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
}

.maya-modern-groups .maya-group-badge {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        backdrop-filter: blur(8px);
}

.maya-modern-groups a.maya-group-badge:hover {
        background: rgba(255, 255, 255, 0.3);
        color: #fff;
}

.maya-modern-body {
        display: grid;
        grid-template-columns: 1fr 320px;
        gap: 40px;
        padding: 40px;
}

.maya-modern-bio {
        font-size: 16px;
        line-height: 1.75;
        color: #334155;
}

.maya-modern-sidebar {
        display: flex;
        flex-direction: column;
        gap: 20px;
}

.maya-modern-block {
        background: #f8fafc;
        border: 1px solid var(--maya-border);
        border-radius: 14px;
        padding: 20px;
}

.maya-modern-block h3 {
        margin: 0 0 14px;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--maya-muted);
}

.maya-modern-block .maya-contact-detail {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        color: #334155;
        text-decoration: none;
        border-bottom: 1px solid #e2e8f0;
        transition: color 0.2s;
}

.maya-modern-block .maya-contact-detail:last-child { border-bottom: 0; }

.maya-modern-block .maya-contact-detail:hover { color: var(--maya-accent); }

.maya-modern-block .maya-contact-detail svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--maya-accent); }

.maya-modern-block .maya-single-social { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 768px) {
        .maya-modern-body { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
        .maya-modern-hero { padding: 40px 20px 24px; min-height: 280px; }
        .maya-modern-photo { width: 110px; height: 110px; }
        .maya-modern-name { font-size: 28px; }
}

/* === Centered Card Single Template === */
.maya-single-card-wrap {
        max-width: 640px;
        margin: 60px auto;
        padding: 0 20px;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.maya-single-card {
        background: #fff;
        border-radius: var(--maya-radius-lg);
        border: 1px solid var(--maya-border);
        box-shadow: var(--maya-shadow-md);
        padding: 48px 40px;
        text-align: center;
        color: var(--maya-text);
}

.maya-card-photo-circle {
        width: 160px;
        height: 160px;
        margin: 0 auto 24px;
        border-radius: 50%;
        overflow: hidden;
        background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
        border: 4px solid #fff;
        box-shadow: 0 10px 30px rgba(99, 102, 241, 0.25);
}

.maya-card-photo-circle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
}

.maya-placeholder-circle {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #818cf8;
}

.maya-placeholder-circle svg { width: 70px; height: 70px; }

.maya-card-single-name {
        font-size: 30px;
        font-weight: 800;
        margin: 0 0 6px;
        letter-spacing: -0.02em;
        color: #0f172a;
}

.maya-card-single-position {
        font-size: 16px;
        font-weight: 600;
        color: var(--maya-accent);
        margin: 0 0 4px;
}

.maya-card-single-department {
        font-size: 14px;
        color: var(--maya-muted);
        margin: 0 0 16px;
}

.maya-card-single-groups {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 24px;
}

.maya-card-single-bio {
        font-size: 15px;
        line-height: 1.7;
        color: #475569;
        margin-bottom: 28px;
        text-align: left;
}

.maya-card-single-contact {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 16px;
}

.maya-card-single-social {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 8px;
}

/* Single member - Minimal template */
.maya-single-minimal { max-width: 640px; margin: 40px auto; padding: 0 20px; text-align: center; }
.maya-minimal-header { margin-bottom: 24px; }
.maya-minimal-photo { border-radius: 50%; width: 140px; height: 140px; object-fit: cover; margin: 0 auto 16px; display: block; }
.maya-minimal-name { font-size: 28px; margin: 0 0 6px; font-weight: 700; }
.maya-minimal-position { color: #6b7280; margin: 0; font-size: 15px; }
.maya-minimal-groups { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
.maya-minimal-bio { margin: 24px 0; color: #374151; line-height: 1.7; text-align: left; }
.maya-minimal-contact { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin: 16px 0; font-size: 14px; }
.maya-minimal-contact a { color: #6366f1; text-decoration: none; }
.maya-minimal-contact a:hover { text-decoration: underline; }
.maya-minimal-social { justify-content: center; margin-top: 16px; }

/* Single member - Magazine template */
.maya-single-magazine { max-width: 1100px; margin: 40px auto; padding: 0 20px; }
.maya-magazine-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; }
.maya-magazine-photo { width: 100%; height: auto; border-radius: 8px; display: block; }
.maya-magazine-eyebrow { color: #6366f1; font-size: 12px; letter-spacing: 0.12em; margin: 0 0 10px; font-weight: 600; }
.maya-magazine-name { font-size: 38px; margin: 0 0 8px; font-weight: 800; line-height: 1.1; }
.maya-magazine-position { font-size: 18px; color: #4b5563; margin: 0 0 16px; }
.maya-magazine-groups { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.maya-magazine-bio { color: #374151; line-height: 1.75; font-size: 16px; margin-bottom: 20px; }
.maya-magazine-contact { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: #f9fafb; border-radius: 8px; margin-bottom: 16px; }
@media (max-width: 768px) { .maya-magazine-grid { grid-template-columns: 1fr; gap: 24px; } .maya-magazine-name { font-size: 28px; } }

/* Single member - Sidebar template */
.maya-single-sidebar { max-width: 1100px; margin: 40px auto; padding: 0 20px; display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start; }
.maya-sidebar-aside { background: #f9fafb; border-radius: 12px; padding: 24px; text-align: center; position: sticky; top: 24px; }
.maya-sidebar-photo-wrap { margin-bottom: 16px; }
.maya-sidebar-photo { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; margin: 0 auto; display: block; }
.maya-sidebar-name { font-size: 22px; margin: 0 0 4px; font-weight: 700; }
.maya-sidebar-position { color: #4b5563; margin: 0 0 4px; font-size: 14px; }
.maya-sidebar-department { color: #6b7280; margin: 0 0 12px; font-size: 13px; }
.maya-sidebar-groups { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.maya-sidebar-contact, .maya-sidebar-social { text-align: left; margin-top: 16px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.maya-sidebar-contact h3, .maya-sidebar-social h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; margin: 0 0 10px; }
.maya-sidebar-contact a { display: block; color: #374151; text-decoration: none; font-size: 14px; padding: 4px 0; }
.maya-sidebar-contact a:hover { color: #6366f1; }
.maya-sidebar-main { padding: 8px 0; }
.maya-sidebar-bio { color: #374151; line-height: 1.75; font-size: 16px; }
@media (max-width: 768px) { .maya-single-sidebar { grid-template-columns: 1fr; } .maya-sidebar-aside { position: static; } }