/*
 * phc-team-drawer.css — homepage team card drawer (mechanism + layout).
 * Reveal/hover for the cards lives in the section's xpro_custom_css and is
 * untouched. This file owns: the "Learn More" CTA, hiding the inline detail
 * block on the front end, and the fixed slide-in drawer chrome + body layout.
 */

/* Whole card is the click target */
.phc-team-card { cursor: pointer; }

/* Learn More CTA row.
   The arrow is rendered as a CSS pseudo-element so editing the widget text
   in Elementor (paste, retype, reword) can't accidentally strip it. The
   underlying widget can hold just the words "Learn More" — the arrow is
   painted by ::after with #9b8764 via CSS mask. Any leftover inline <svg>
   in older copies is hidden to prevent a double arrow. */
.phc-team-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    color: #fff;
}
.phc-team-card-cta svg { display: none !important; }
/* Zero out the default Elementor <p> margins so the arrow stays inline. */
.phc-team-card-cta p,
.phc-team-card-cta .elementor-widget-container > * { margin: 0 !important; }
.phc-team-card-cta::after {
    content: "";
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    background-color: #9b8764;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The editable per-card detail block is hidden on the live card; JS clones it */
.phc-team-card-detail { display: none; }

/* ── Backdrop ─────────────────────────────────────────────── */
.phc-team-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.phc-team-drawer-backdrop.is-open { opacity: 1; }
.phc-team-drawer-backdrop[hidden] { display: none; }

/* ── Panel ────────────────────────────────────────────────── */
.phc-team-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;   /* fallback for browsers without dvh */
    height: 100dvh;  /* match the VISIBLE viewport — plain 100vh on mobile
                        extends behind the browser address/nav bars, pushing the
                        body's scroll bottom (and the last bio lines) off-screen */
    width: 620px;
    max-width: 100vw;
    background: #fff;
    z-index: 10000;
    /* The panel itself no longer scrolls — it's a fixed frame with the close
       button pinned in its top padding band. Only .phc-team-drawer-body scrolls
       (see below), so the X stays visible on long bios. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 64px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.phc-team-drawer.is-open { transform: translateX(0); }
.phc-team-drawer[hidden] { display: none; }

/* Close button. Pinned in the panel's top padding band; the panel itself never
   scrolls (only .phc-team-drawer-body does) so the X stays put on long bios.
   A white circular backing keeps it legible whether it sits over the portrait
   photo or over white space. */
.phc-team-drawer-close {
    position: absolute;
    top: 24px;
    right: 24px;
    /* width/height/padding/radius forced over the kit's global <button> style
       (padding:16px 40px; border-radius:0) which otherwise makes this an 80x40
       square instead of a 40px circle */
    width: 40px !important;
    height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #1e1e1e !important;
    -webkit-appearance: none;
    appearance: none;
    line-height: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    cursor: pointer;
    z-index: 1;
    transition: background 0.2s ease, color 0.2s ease;
}
.phc-team-drawer-close:hover { background: #fff !important; color: #000 !important; }
.phc-team-drawer-close svg { width: 22px; height: 22px; display: block; }

/* Body layout. The cloned Elementor widgets sit OUTSIDE the .elementor-43
   page wrapper, so their scoped per-widget CSS no longer matches. We restyle
   the drawer explicitly here to match Figma (node 61:6158) and strip the
   default Elementor widget margins that otherwise blow the gaps wide open. */
.phc-team-drawer-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* The only scroll container in the drawer. flex:1 + min-height:0 lets it
       take the remaining height inside the fixed panel and scroll internally,
       leaving the absolutely-positioned close button pinned above it. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.phc-team-drawer-body .elementor-element,
.phc-team-drawer-body .elementor-widget,
.phc-team-drawer-body .elementor-widget:not(:last-child),
.phc-team-drawer-body .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}

/* Portrait — render as a square frame, image full-width with auto height
   then aspect-ratio: 1 + object-fit cover for a clean square crop (Figma 61:6158). */
.phc-team-drawer-body .phc-team-detail-img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center top;
    border-radius: 8px;
    display: block;
}

/* Name — Cormorant Garamond Bold 42 */
.phc-team-drawer-body .phc-team-detail-name,
.phc-team-drawer-body .phc-team-detail-name .elementor-heading-title {
    font-family: "Cormorant Garamond", Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 42px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.3px !important;
    color: #1e1e1e !important;
    margin: 0 !important;
}

/* Role — Inter SemiBold 16, lion, 3px tracking */
.phc-team-drawer-body .phc-team-detail-role,
.phc-team-drawer-body .phc-team-detail-role .elementor-heading-title {
    font-family: "Inter", sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    letter-spacing: 3px !important;
    color: #9b8764 !important;
    margin: 0 !important;
}

/* Bio — Inter Light 16/26, subtext grey */
.phc-team-drawer-body .phc-team-detail-bio,
.phc-team-drawer-body .phc-team-detail-bio p {
    font-family: "Inter", sans-serif !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    line-height: 26px !important;
    color: #5e6778 !important;
}
.phc-team-drawer-body .phc-team-detail-bio p { margin: 0 0 16px 0 !important; }
.phc-team-drawer-body .phc-team-detail-bio p:last-child { margin-bottom: 0 !important; }

/* Group the name+role tightly; give the bio a touch more separation (Figma) */
.phc-team-drawer-body .phc-team-detail-role { margin-top: -8px !important; }
.phc-team-drawer-body .phc-team-detail-bio { margin-top: 8px !important; }

/* Lock background scroll while open */
body.phc-team-drawer-locked { overflow: hidden; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .phc-team-drawer { width: 520px; padding: 48px; }
    .phc-team-drawer-body .phc-team-detail-name,
    .phc-team-drawer-body .phc-team-detail-name .elementor-heading-title { font-size: 36px !important; }
}
@media (max-width: 767px) {
    .phc-team-drawer {
        width: 100%;
        padding: 16px;
        /* clear the device home indicator so the last bio line is reachable */
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .phc-team-drawer-body .phc-team-detail-name,
    .phc-team-drawer-body .phc-team-detail-name .elementor-heading-title { font-size: 32px !important; }
    /* keep the close button in the safe-tap corner inside the 16px padding band */
    .phc-team-drawer-close { top: 16px; right: 16px; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .phc-team-drawer,
    .phc-team-drawer-backdrop { transition: none; }
}