/* WS4 — officer profile + directory. Built on loanatik.css / ws6.css tokens & classes. */

/* directory cards reuse .off / .off-grid / .ph / .role / .nmls / .apply from loanatik.css */
.off-photo-link{display:block}
.off .body h3{margin:0}
.off .body h3 a{color:var(--ink);text-decoration:none}
.off .body h3 a:hover{color:var(--lime-700)}
:root[data-theme="dark"] .off .body h3 a:hover{color:var(--lime)}

/* ---------- single profile ---------- */
.officer-profile{padding-block:clamp(1.6rem,4vw,2.6rem) clamp(3rem,6vw,5rem)}
.officer-profile .crumbs{font-size:.82rem;color:var(--muted);margin-bottom:1.4rem}
.officer-profile .crumbs a{color:var(--muted)}
.officer-profile .crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.officer-profile .crumbs .sep{opacity:.5;margin:0 .25rem}

.op-layout{display:grid;grid-template-columns:340px 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}

.op-card{position:sticky;top:96px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg,20px);
  box-shadow:var(--shadow-md);padding:1.5rem;text-align:center}
.op-photo{position:relative;width:100%;aspect-ratio:1/1;border-radius:16px;overflow:hidden;margin-bottom:1.15rem;
  background:linear-gradient(150deg,#243a61,var(--navy));display:grid;place-items:center}
.op-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.op-photo .op-mono{font-size:3rem;font-weight:800;color:rgba(255,255,255,.9)}
.op-photo .op-dot{position:absolute;bottom:14px;right:14px;width:16px;height:14px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 4px var(--card)}
.op-name{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.op-role{color:var(--muted);font-weight:600;margin-top:.25rem}
.op-nmls{font-size:.82rem;color:var(--muted);margin-top:.5rem;font-variant-numeric:tabular-nums}
.op-apply{display:flex;width:100%;margin-top:1.15rem}
.op-call{font-size:.85rem;color:var(--muted);margin-top:.7rem}
.op-call a{color:var(--ink);font-weight:700}
:root[data-theme="dark"] .op-call a{color:#fff}
.op-socials{display:flex;justify-content:center;gap:.6rem;margin-top:1.1rem}
.op-socials a{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;
  color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.op-socials a:hover{color:var(--navy);border-color:color-mix(in srgb,var(--lime) 55%,var(--line));background:color-mix(in srgb,var(--lime) 12%,transparent)}
:root[data-theme="dark"] .op-socials a:hover{color:var(--lime)}
.op-socials svg{width:18px;height:18px}

.op-body{min-width:0}
.op-body .prose h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin-bottom:.6rem}
.op-body .prose p{margin:0 0 1rem;color:var(--ink)}
.op-body .prose a{color:var(--lime-700)}
:root[data-theme="dark"] .op-body .prose a{color:var(--lime)}

.op-cta{margin-top:1.8rem;background:radial-gradient(120% 130% at 88% 10%,#22355a,var(--navy));color:#fff;border-radius:var(--radius,14px);padding:1.6rem}
.op-cta h3{font-size:1.25rem;font-weight:800}
.op-cta p{color:#c6d3e6;margin:.4rem 0 1.1rem}
.op-cta-row{display:flex;flex-wrap:wrap;gap:.7rem}
.op-cta .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.op-cta .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}
.op-back{display:inline-block;margin-top:1.4rem;font-weight:700;color:var(--muted)}
.op-back:hover{color:var(--ink)}
:root[data-theme="dark"] .op-back:hover{color:#fff}

@media (max-width:820px){
  .op-layout{grid-template-columns:1fr}
  .op-card{position:static;max-width:420px;margin-inline:auto}
}