/* Yateer Family Members — front-end LIST styles (responsive) */
.yfm-wrap{
  --yfm-cream:#FBF4EA; --yfm-paper:#FFFDF9;
  --yfm-maroon:#8F3350; --yfm-maroon-deep:#6F2540;
  --yfm-gold:#C08A34; --yfm-gold-soft:#E6C77E;
  --yfm-ink:#3B2A2E; --yfm-ink-soft:#6E5A57; --yfm-line:#D9B98A;
  padding:0; box-sizing:border-box; font-family:sans-serif;
}
.yfm-wrap *{box-sizing:border-box;}
.yfm-inner{max-width:760px; margin:0 auto; padding:0 24px;}

.yfm-empty{
  text-align:center; padding:40px 20px; color:var(--yfm-ink-soft); font-size:.9rem;
  border:1px dashed var(--yfm-line); border-radius:14px;
}

.yfm-tree-list{ padding:20px 0; }

/* ---------- indented, connected list ---------- */
.yfm-tree, .yfm-tree ul{
  list-style:none; margin:0; padding:0; display:block; width:100%;
}
.yfm-tree ul{ padding-top:0; margin:14px 0 0 8px; }

.yfm-tree li{
  position:relative; padding:0 0 0 28px; margin:16px 0 0;
  border-left:2px solid var(--yfm-line);
}
.yfm-tree-root{ margin:0; }
.yfm-tree-root > li{ border-left:none; padding-left:0; margin-top:0; }
.yfm-tree-root > li > ul{ margin-left:8px; }

/* small connector dot on each non-root card */
.yfm-tree ul:not(.yfm-tree-root) > li::before{
  content:""; position:absolute; left:-7px; top:20px;
  width:12px; height:12px; border-radius:50%;
  background:var(--yfm-paper); border:2px solid var(--yfm-gold-soft);
}

/* ---------- card (horizontal: photo left, details right) ---------- */
.yfm-card{
  display:flex; align-items:center; gap:14px; text-align:left;
  width:100%; max-width:460px;
  background:var(--yfm-paper); border:1px solid var(--yfm-line, #E7D8C2);
  border-radius:14px; padding:14px 16px;
  box-shadow:0 8px 18px -14px rgba(111,37,64,.35);
  transition:transform .18s ease, box-shadow .18s ease;
}
.yfm-card:hover{ transform:translateX(3px); box-shadow:0 12px 24px -14px rgba(111,37,64,.4); }

.yfm-photo{
  width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0;
  border:2px solid var(--yfm-gold-soft);
}
.yfm-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.yfm-photo-fallback{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:#F3E6D3; color:var(--yfm-maroon);
}
.yfm-photo-fallback svg{ width:22px; height:22px; }

/* clickable photo affordance */
.yfm-lb-trigger{ cursor:pointer; transition:transform .18s ease, filter .18s ease; }
.yfm-lb-trigger:hover, .yfm-lb-trigger:focus-visible{ transform:scale(1.08); filter:brightness(.94); }
.yfm-lb-trigger:focus-visible{ outline:2px solid var(--yfm-gold); outline-offset:2px; }

/* ---------- lightbox overlay ---------- */
.yfm-lightbox{
  position:fixed; inset:0; z-index:99999; background:rgba(20,12,14,.92);
  display:none; align-items:center; justify-content:center; padding:40px;
}
.yfm-lightbox.open{ display:flex; }
.yfm-lb-figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:14px; max-width:min(90vw,720px); }
.yfm-lb-img{
  max-width:100%; max-height:75vh; border-radius:12px; object-fit:contain;
  box-shadow:0 30px 70px rgba(0,0,0,.5); background:#111;
}
.yfm-lb-caption{
  color:#fff; font-family:Georgia,'Times New Roman',serif; font-size:1rem; text-align:center;
}
.yfm-lb-close, .yfm-lb-prev, .yfm-lb-next{
  position:absolute; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.3); color:#fff;
  border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; line-height:1; transition:background .2s ease;
}
.yfm-lb-close:hover, .yfm-lb-prev:hover, .yfm-lb-next:hover{ background:rgba(255,255,255,.28); }
.yfm-lb-close{ top:22px; right:22px; width:40px; height:40px; font-size:1.4rem; }
.yfm-lb-prev, .yfm-lb-next{ top:50%; width:46px; height:46px; transform:translateY(-50%); }
.yfm-lb-prev{ left:16px; }
.yfm-lb-next{ right:16px; }
.yfm-lb-prev[hidden], .yfm-lb-next[hidden]{ display:none; }
@media (max-width:640px){
  .yfm-lb-prev, .yfm-lb-next{ width:36px; height:36px; }
  .yfm-lb-close{ width:32px; height:32px; top:14px; right:14px; }
}

.yfm-body{ min-width:0; flex:1; }
.yfm-name{
  font-family:Georgia,'Times New Roman',serif; font-size:.95rem; margin:0 0 4px; color:var(--yfm-maroon-deep);
  line-height:1.25; word-break:break-word;
}
.yfm-relation{
  display:inline-block; font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--yfm-maroon); background:#F3E6D3; border-radius:999px; padding:3px 10px; margin-bottom:5px;
}
.yfm-location{
  display:flex; align-items:center; gap:4px;
  font-size:.72rem; color:var(--yfm-ink-soft); margin:0 0 6px;
}
.yfm-location svg{ flex-shrink:0; }

.yfm-social{ display:flex; align-items:center; gap:6px; margin-top:4px; flex-wrap:wrap; }
.yfm-social-link{
  width:24px; height:24px; border-radius:50%; background:#F3E6D3; color:var(--yfm-maroon);
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, color .2s ease, transform .2s ease;
}
.yfm-social-link svg{ width:11px; height:11px; }
.yfm-social-link:hover{ background:var(--yfm-maroon); color:#fff; transform:translateY(-2px); }

/* =======================================================
   RESPONSIVE — indentation & card size taper down together
   ======================================================= */
@media (max-width:640px){
  .yfm-inner{ padding:0 16px; }
  .yfm-tree li{ padding-left:22px; margin-top:14px; }
  .yfm-tree ul{ margin-left:4px; }
  .yfm-tree-root > li > ul{ margin-left:4px; }
  .yfm-card{ padding:12px 14px; gap:12px; }
  .yfm-photo{ width:48px; height:48px; }
  .yfm-name{ font-size:.88rem; }
}

@media (max-width:400px){
  .yfm-inner{ padding:0 12px; }
  .yfm-tree li{ padding-left:18px; }
  .yfm-card{ padding:10px 12px; gap:10px; }
  .yfm-photo{ width:42px; height:42px; }
  .yfm-relation{ font-size:.58rem; padding:2px 8px; }
  .yfm-location{ font-size:.68rem; }
}