/**
 * Two Lights Private Wealth — Team Modal
 * Light luxury aesthetic: cream white, warm navy, gold accents.
 *
 * Enqueue via functions.php:
 *   wp_enqueue_style( 'tl-team-modal', get_template_directory_uri() . '/tl-team-modal/assets/css/team-modal.css', [], '1.0.0' );
 *   wp_enqueue_style( 'tl-modal-fonts', 'https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&display=swap', [], null );
 */

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes tl-spin      { to { transform: rotate(360deg); } }
@keyframes tl-modal-in  { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes tl-fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes tl-fade-up   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes tl-line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Modal shell ────────────────────────────────────────── */
#tl-team-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
#tl-team-modal.tl-open { display: flex; }

/* ── Overlay ────────────────────────────────────────────── */
#tl-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 40, 0.55);
    backdrop-filter: blur(8px);
    animation: tl-fade-in 0.3s ease both;
    cursor: pointer;
}

/* ── Panel ──────────────────────────────────────────────── */
#tl-modal-panel {
    position: relative;
    width: 100%;
    max-width: 740px;
    margin: auto;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 3px;
    background: #faf8f4;
    box-shadow: 0 0 0 1px rgba(188, 152, 90, 0.2), 0 24px 80px rgba(0, 0, 0, 0.2);
    animation: tl-modal-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
    scrollbar-width: thin;
    scrollbar-color: rgba(188, 152, 90, 0.25) transparent;
}
#tl-modal-panel::-webkit-scrollbar       { width: 4px; }
#tl-modal-panel::-webkit-scrollbar-track { background: transparent; }
#tl-modal-panel::-webkit-scrollbar-thumb { background: rgba(188, 152, 90, 0.25); border-radius: 2px; }

/* ── Close button ───────────────────────────────────────── */
#tl-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 20;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(15, 35, 65, 0.15);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    color: #3a4a5c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
#tl-modal-close:hover {
    background: #fff;
    border-color: rgba(188, 152, 90, 0.5);
    color: #bc985a;
}
#tl-modal-close svg { width: 14px; height: 14px; }

/* ── Hero banner ────────────────────────────────────────── */
#tl-modal-hero {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 2.5rem 3.5rem;
    background: linear-gradient(150deg, #0f2341 0%, #1a3a6b 100%);
}

/* ── Hero row ───────────────────────────────────────────── */
#tl-modal-hero .tl-hero-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    align-items: flex-end;
    position: relative;
    z-index: 1;
}

/* ── Photo frame ────────────────────────────────────────── */
#tl-modal-photo-wrap {
    width: clamp(130px, 28%, 165px);
    flex-shrink: 0;
}
#tl-modal-photo-frame {
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    aspect-ratio: 214 / 299;
    background: #0d1e36;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(188, 152, 90, 0.35);
}
#tl-modal-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
#tl-modal-photo[src=""],
#tl-modal-photo:not([src]) {
    display: none;
}
#tl-modal-avatar {
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #0f2341, #1a3a6b);
    position: absolute;
    inset: 0;
}
#tl-modal-initials {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 3rem;
    font-weight: 500;
    color: rgba(188, 152, 90, 0.6);
    letter-spacing: 0.05em;
}

/* ── Identity block ─────────────────────────────────────── */
#tl-modal-identity {
    flex: 1;
    min-width: 0;
    padding-bottom: 0.25rem;
    animation: tl-fade-up 0.4s ease 0.1s both;
}
#tl-modal-eyebrow {
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(188, 152, 90, 0.7);
    margin-bottom: 0.5rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
}
#tl-modal-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 600;
    color: #f5efe4;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
#tl-modal-rule {
    width: 36px;
    height: 1px;
    background: linear-gradient(90deg, #bc985a, rgba(188, 152, 90, 0.15));
    margin: 0.75rem 0;
    transform-origin: left;
    animation: tl-line-grow 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
#tl-modal-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.9rem;
    font-style: italic;
    letter-spacing: 0.03em;
    color: rgba(245, 239, 228, 0.6);
    margin: 0;
    line-height: 1.5;
}
#tl-modal-certification {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(188, 152, 90, 0.55);
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Contact strip ──────────────────────────────────────── */
#tl-modal-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0 2.5rem;
    margin-top: -1.25rem;
    position: relative;
    z-index: 5;
    animation: tl-fade-up 0.4s ease 0.2s both;
}
#tl-modal-contacts a {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 1.1rem;
    border-radius: 2px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.8rem;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
#tl-modal-contacts a svg { width: 13px; height: 13px; flex-shrink: 0; }

#tl-modal-phone-link { color: #bc985a; }
#tl-modal-phone-link:hover {
    background: #bc985a;
    color: #fff;
    box-shadow: 0 4px 16px rgba(188, 152, 90, 0.3);
}
#tl-modal-email-link { color: #1a3a6b; }
#tl-modal-email-link:hover {
    background: #1a3a6b;
    color: #fff;
    box-shadow: 0 4px 16px rgba(26, 58, 107, 0.25);
}

/* ── Biography body ─────────────────────────────────────── */
#tl-modal-body {
    padding: 1.75rem 2.5rem 2.5rem;
    animation: tl-fade-up 0.4s ease 0.25s both;
}

/* Thin gold rule */
.tl-modal-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(188, 152, 90, 0.25) 30%, rgba(188, 152, 90, 0.25) 70%, transparent);
    margin: 0 0 1.5rem;
}

/* Section label */
.tl-modal-section-label {
    font-size: 0.6rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(188, 152, 90, 0.6);
    font-family: 'Cormorant Garamond', Georgia, serif;
    margin-bottom: 0.85rem;
}

/* Bio prose */
#tl-modal-content-body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.8;
    color: #3a3a3a;
}
#tl-modal-content-body p            { margin-bottom: 1rem; }
#tl-modal-content-body p:last-child { margin-bottom: 0; }
#tl-modal-content-body strong       { color: #1a1a1a; }
#tl-modal-content-body h2,
#tl-modal-content-body h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: #0f2341;
    margin: 1.5rem 0 0.5rem;
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 600;
}

/* Bio images */
#tl-modal-content-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(188, 152, 90, 0.15);
}
#tl-modal-content-body .wp-block-image,
#tl-modal-content-body figure {
    margin: 1.5rem 0;
    text-align: center;
}
#tl-modal-content-body figcaption {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.8rem;
    font-style: italic;
    color: #8a8a8a;
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
}

/* Loading spinner */
#tl-modal-loading {
    display: flex;
    justify-content: center;
    padding: 2rem;
}
.tl-spinner {
    width: 26px;
    height: 26px;
    border: 2px solid rgba(188, 152, 90, 0.2);
    border-top-color: #bc985a;
    border-radius: 50%;
    animation: tl-spin 0.75s linear infinite;
}

/* Error */
#tl-modal-content-error {
    text-align: center;
    color: #999;
    font-style: italic;
    font-size: 0.9rem;
    padding: 1rem 0;
    display: none;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 520px) {
    #tl-modal-hero     { padding: 2rem 1.5rem 3rem; }
    #tl-modal-contacts { padding: 0 1.5rem; }
    #tl-modal-body     { padding: 1.5rem 1.5rem 2rem; }
    #tl-modal-name     { font-size: 1.6rem; }
}