/* Khorasia Aambo - Generations grid and the alphabetical index. */

/* ---------- Generations ---------- */
.gen-strip{display:flex;flex-wrap:wrap;gap:5px;padding:14px 16px;border-bottom:1px solid var(--rule-2)}
.gen-strip button{
  min-width:42px;padding:7px 8px;border:1px solid var(--rule);border-radius:2px;background:var(--paper);
  font-size:12px;font-weight:600;letter-spacing:.03em;color:var(--ink-2);text-align:center;line-height:1.25;
}
.gen-strip button small{display:block;font-size:9px;font-weight:400;color:var(--ink-3);letter-spacing:.04em}
.gen-strip button:hover{border-color:var(--sindoor);color:var(--sindoor)}
.gen-strip button.on{background:var(--sindoor);border-color:var(--sindoor);color:#FBF6EA}
.gen-strip button.on small{color:rgba(255,255,255,.72)}
.fam-list{padding:8px 16px 22px;max-height:min(64vh,760px);overflow:auto}
.fam{border-bottom:1px dashed var(--rule-2);padding:13px 0}
.fam:last-child{border-bottom:0}
.fam-hd{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
.fam-hd b{font-family:var(--serif);font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink)}
.fam-hd i{font-family:var(--serif);font-size:15px;font-style:normal;color:var(--sindoor)}
.kid-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:5px}
.kid{
  text-align:left;padding:8px 10px;border:1px solid var(--rule-2);border-radius:2px;background:var(--paper);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.kid:hover{border-color:var(--sindoor);background:#fff}
.kid.sel{background:var(--ink);border-color:var(--ink)}
.kid.sel .nm-en{color:var(--paper-2)}
.kid.sel .nm-gu{color:#E9C9A4}

/* ---------- Index / results ---------- */
.idx-body{padding:10px 16px 22px;max-height:min(68vh,800px);overflow:auto}
.idx-letter{
  font-family:var(--serif);font-size:20px;font-weight:600;color:var(--sindoor);
  border-bottom:1px solid var(--rule-2);padding:14px 0 5px;margin-bottom:7px;position:sticky;top:0;background:var(--paper-2);
}
.res{
  width:100%;text-align:left;padding:9px 10px;border-bottom:1px solid var(--rule-2);
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.res:hover{background:rgba(178,42,34,.06)}
.res.sel{background:var(--ink)}
.res.sel .nm-en{color:var(--paper-2)}
.res.sel .nm-gu{color:#E9C9A4}
.res .of{font-size:11.5px;color:var(--ink-3);letter-spacing:.03em}
.res .of span{font-family:var(--serif);font-size:13.5px;letter-spacing:0}
.res.sel .of{color:#A9A2B6}
.empty{padding:40px 16px;text-align:center;color:var(--ink-3);font-size:14px}
.empty b{display:block;font-family:var(--serif);font-size:19px;color:var(--ink-2);margin-bottom:6px;font-weight:500}

/* ---- added: family events ---- */
.ev-list{padding:14px 16px 24px;display:flex;flex-direction:column;gap:12px}
.ev-card{
  display:flex;gap:16px;align-items:flex-start;padding:14px;
  border:1px solid var(--rule-2);border-radius:4px;background:var(--paper);
}
.ev-card.soon{border-color:var(--sindoor);background:var(--paper-2)}
.ev-date{
  flex:none;width:62px;text-align:center;padding:8px 4px;border-radius:3px;
  background:var(--sindoor-soft);color:var(--sindoor);
}
.ev-date b{display:block;font-family:var(--serif);font-size:24px;font-weight:600;line-height:1}
.ev-date span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-top:3px}
.ev-date i{display:block;font-style:normal;font-size:10px;color:var(--ink-3);margin-top:2px}
.ev-body{flex:1;min-width:0}
.ev-body h3{margin:0 0 4px;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.ev-alt{color:var(--sindoor);font-weight:400;margin-left:6px}
.ev-meta{margin:0;font-size:12.5px;color:var(--ink-3)}
.ev-link{padding:0;border:0;background:none;font-family:var(--serif);font-size:14px;color:var(--sindoor);cursor:pointer}
.ev-link:hover{text-decoration:underline}
.ev-desc{margin:8px 0 0;font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--ink-2)}
.ev-photo-btn{
  flex:none;width:96px;height:96px;padding:0;border:1px solid var(--rule);border-radius:3px;
  overflow:hidden;background:none;cursor:zoom-in;display:block;line-height:0;
}
.ev-photo-btn:hover{border-color:var(--sindoor)}
.ev-photo{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:620px){
  .ev-card{flex-wrap:wrap}
  .ev-photo-btn{width:100%;height:150px;order:3}
}