/*
 * ReCar staff cards (resources/views/partials/staff-card.blade.php)
 * ------------------------------------------------------------------
 * The same card and modal styles as the staff widget dealer sites embed
 * from Gearbox (ShiftMain public/js/employees/shift-employees.js), lifted
 * out of the widget so the /staff page looks like the injected directory.
 * Two differences: the font is the site's own (inherited instead of the
 * widget's system stack) and the card width is the widget's 260px minimum, which
 * keeps every contact row readable (phone numbers never truncate).
 *
 * Everything is prefixed .sse- and nested under .sse-root (or .sse-modal)
 * so theme rules like ".content h4" or "a { text-decoration }" lose on
 * specificity. The accent colour comes from --sse-accent / --sse-accent-rgb
 * set inline on .sse-root per store (dealerships.branding_colour).
 */
.sse-root{display:block;box-sizing:border-box;width:100%;font-size:16px;line-height:1.45;color:#1f2937;--sse-accent:#1a5276;--sse-accent-rgb:26,82,118;}
.sse-root *,.sse-root *::before,.sse-root *::after{box-sizing:border-box;font-family:inherit;}

/* Cards */
.sse-root .sse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;}
.sse-root .sse-card{display:flex;flex-direction:column;margin:0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 6px 24px rgba(15,23,42,.06);overflow:hidden;}
.sse-root .sse-photo{position:relative;width:100%;aspect-ratio:1/1;background:#e5e7eb;overflow:hidden;}
.sse-root .sse-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;display:block;margin:0;border:0;border-radius:0;box-shadow:none;}
.sse-root .sse-initials{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:56px;font-weight:700;color:var(--sse-accent);background:rgba(var(--sse-accent-rgb),.10);}

/* "Speaks: PL, RU" with a tooltip per code */
.sse-root .sse-langs{margin:0;padding:8px 16px 0;min-height:24px;font-size:12px;line-height:1.3;color:#6b7280;text-align:right;}
.sse-root .sse-lang{position:relative;display:inline-block;color:#111827;font-weight:600;cursor:help;border-bottom:1px dotted #9ca3af;outline:none;}
/* tooltip: anchored to the code's right edge so it never runs past the card (the row is right-aligned) */
.sse-root .sse-lang::after{content:attr(data-tip);position:absolute;right:0;bottom:calc(100% + 7px);padding:5px 8px;font-size:12px;font-weight:500;line-height:1.2;color:#fff;background:#111827;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;z-index:5;}
.sse-root .sse-lang::before{content:'';position:absolute;right:4px;bottom:calc(100% + 2px);border:5px solid transparent;border-top-color:#111827;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s;z-index:5;}
.sse-root .sse-lang:hover::after,.sse-root .sse-lang:focus::after,.sse-root .sse-lang:hover::before,.sse-root .sse-lang:focus::before{opacity:1;visibility:visible;}
.sse-root .sse-lang:focus-visible{box-shadow:0 0 0 2px rgba(var(--sse-accent-rgb),.3);border-radius:3px;}

/* Name, title */
.sse-root .sse-info{display:flex;flex-direction:column;flex:1;padding:12px 16px 16px;text-align:left;}
.sse-root .sse-name{display:flex;align-items:center;gap:8px;margin:0;padding:0;font-size:18px;font-weight:700;line-height:1.2;color:#111827;}
.sse-root .sse-name span{min-width:0;}
.sse-root a.sse-li,.sse-root a.sse-li:visited{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;border-radius:4px;color:#0a66c2;background:transparent;text-decoration:none;border:0;box-shadow:none;}
.sse-root a.sse-li:hover,.sse-root a.sse-li:focus{color:#004182;background:rgba(10,102,194,.10);text-decoration:none;outline:none;}
.sse-root a.sse-li svg{width:18px;height:18px;display:block;}
.sse-root .sse-title{margin:2px 0 0;padding:0;font-size:14px;line-height:1.3;color:#6b7280;}

/* "Video" pill on the photo */
.sse-root .sse-play,.sse-root button.sse-play{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;width:auto;height:auto;margin:0;padding:7px 11px 7px 8px;font-size:12px;font-weight:700;line-height:1;text-transform:none;letter-spacing:0;color:#fff;background:rgba(17,24,39,.72);border:1px solid rgba(255,255,255,.35);border-radius:999px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);backdrop-filter:blur(2px);}
.sse-root .sse-play:hover,.sse-root .sse-play:focus{color:#fff;background:var(--sse-accent);border-color:var(--sse-accent);outline:none;}
.sse-root .sse-play svg{width:14px;height:14px;flex:none;}

/* Contact rows and the "About {name}" button */
.sse-root .sse-actions{display:flex;flex-direction:column;gap:8px;margin:14px 0 0;padding:0;}
.sse-root .sse-btn,.sse-root a.sse-btn,.sse-root a.sse-btn:visited,.sse-root button.sse-btn{display:flex;align-items:center;gap:8px;width:100%;height:auto;margin:0;padding:8px 12px;font-size:13px;font-weight:600;line-height:1.2;text-transform:none;letter-spacing:0;color:#111827;background:#fff;border:1px solid #d1d5db;border-radius:9px;cursor:pointer;text-decoration:none;text-align:left;box-shadow:none;transition:border-color .15s;}
.sse-root .sse-btn:hover,.sse-root a.sse-btn:hover,.sse-root .sse-btn:focus{border-color:#9ca3af;color:#111827;background:#fff;text-decoration:none;outline:none;}
.sse-root .sse-btn:focus-visible{box-shadow:0 0 0 3px rgba(var(--sse-accent-rgb),.25);}
.sse-root .sse-btn svg{width:14px;height:14px;flex:none;color:var(--sse-accent);}
.sse-root .sse-btn .sse-lbl{color:#6b7280;font-weight:500;flex:none;}
.sse-root .sse-btn .sse-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.sse-root .sse-empty{padding:28px 16px;text-align:center;color:#6b7280;font-size:15px;border:1px dashed #d1d5db;border-radius:12px;}

/* Modal (bio text or intro video): appended to <body>, outside .sse-root */
.sse-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px;font-size:16px;line-height:1.5;color:#1f2937;--sse-accent:#1a5276;--sse-accent-rgb:26,82,118;}
.sse-modal *,.sse-modal *::before,.sse-modal *::after{box-sizing:border-box;font-family:inherit;}
.sse-modal .sse-modal-backdrop{position:absolute;inset:0;background:rgba(17,24,39,.65);}
.sse-modal .sse-modal-card{position:relative;width:100%;max-width:640px;max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.35);padding:22px 24px 24px;}
.sse-modal .sse-modal-close,.sse-modal button.sse-modal-close{position:absolute;top:10px;right:10px;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;background:#f3f4f6;color:#374151;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.sse-modal .sse-modal-close:hover{background:#e5e7eb;color:#111827;}
.sse-modal .sse-modal-head{display:flex;align-items:center;gap:14px;padding-right:40px;margin-bottom:14px;padding-bottom:14px;border-bottom:2px solid var(--sse-accent);}
.sse-modal .sse-modal-avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;background:rgba(var(--sse-accent-rgb),.10);color:var(--sse-accent);font-weight:700;font-size:22px;display:flex;align-items:center;justify-content:center;flex:none;}
.sse-modal .sse-modal-avatar img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center top;display:block;margin:0;border:0;border-radius:0;}
.sse-modal .sse-modal-name{margin:0;font-size:20px;font-weight:700;line-height:1.2;color:#111827;}
.sse-modal .sse-modal-title{margin:2px 0 0;font-size:14px;color:#6b7280;}
.sse-modal .sse-modal-body p{margin:0 0 10px;font-size:15px;color:#374151;}
.sse-modal .sse-modal-body p:last-child{margin-bottom:0;}
.sse-modal .sse-modal-card.is-video{max-width:860px;padding:16px 16px 18px;}
.sse-modal .sse-modal-card.is-video .sse-modal-head{margin-bottom:12px;padding-bottom:10px;}
.sse-modal video{display:block;width:100%;aspect-ratio:16/9;max-height:70vh;background:#000;border-radius:10px;outline:none;}