/* home-search.css — site-wide photo search launched from a home-page pill
   (Sage 2026-06-29). The pill sits lower-left, stacked just above the
   "Site Tips, Helps & FAQs" launcher (which is at bottom:20px). Opens a modal
   that searches captions, tagged names, and photo content across whole media
   sections (Don & Lawana, O-8 Families, Reunion History) at once. */

/* ── Launcher pill ───────────────────────────────────────────────────── */
.photo-search-launcher{
  position:fixed; left:20px; bottom:66px; z-index:60;
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14px; letter-spacing:.02em;
  padding:9px 16px; border-radius:999px; cursor:pointer;
  background:var(--color-parchment-100,#fbf6ea); color:var(--accent-forest,#2f4a2c);
  border:1.5px solid var(--accent-forest,#2f4a2c);
  line-height:1; white-space:nowrap;
  box-shadow:0 2px 8px rgba(30,19,10,.22); transition:.18s ease;
}
.photo-search-launcher__icon{ font-size:15px; }
.photo-search-launcher:hover,.photo-search-launcher:focus-visible{
  background:var(--accent-forest,#2f4a2c); color:var(--color-parchment-100,#fbf6ea);
  transform:translateY(-1px); box-shadow:0 4px 14px rgba(30,19,10,.30); outline:none;
}
.photo-search-launcher__short{ display:none; }

@media (max-width:640px){
  .photo-search-launcher{ left:14px; bottom:56px; font-size:13px; padding:8px 13px; }
  .photo-search-launcher__full{ display:none; }
  .photo-search-launcher__short{ display:inline; }
}

/* ── Modal ───────────────────────────────────────────────────────────── */
.ps-modal{
  position:fixed; inset:0; z-index:120; display:none;
  align-items:flex-start; justify-content:center;
  background:rgba(26,18,9,.55); backdrop-filter:blur(2px);
  padding:48px 16px 16px;
}
.ps-modal.open{ display:flex; }
.ps-card{
  background:var(--color-parchment-100,#fbf6ea); color:#2a2418;
  width:min(880px,100%); max-height:calc(100vh - 64px);
  border-radius:16px; box-shadow:0 18px 48px rgba(20,12,4,.42);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid #d8cdb2;
}
.ps-head{ padding:18px 22px 10px; }
.ps-titlerow{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ps-title{ font-family:var(--font-display,"Playfair Display",Georgia,serif);
  font-size:22px; font-weight:700; color:var(--accent-forest,#2f4a2c); margin:0; }
.ps-close{ border:none; background:transparent; font-size:26px; line-height:1;
  color:#8a8473; cursor:pointer; padding:2px 6px; border-radius:8px; }
.ps-close:hover{ color:#2a2418; background:rgba(0,0,0,.05); }
.ps-sub{ font-size:13px; color:#6b6457; margin:2px 0 0; }

.ps-box{ position:relative; margin:14px 0 10px; }
.ps-in{ width:100%; box-sizing:border-box; padding:12px 38px 12px 40px;
  border:1px solid #cfc6b1; border-radius:26px;
  font:16px/1.3 "Lora",Georgia,serif; color:#2a2418; background:#fff; }
.ps-in:focus{ outline:none; border-color:var(--accent-forest,#3c5a3a);
  box-shadow:0 0 0 3px rgba(60,90,58,.16); }
.ps-ico{ position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-size:16px; opacity:.5; pointer-events:none; }
.ps-spin{ position:absolute; right:16px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--accent-forest,#3c5a3a); font-style:italic; display:none; }

.ps-chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ps-chips-label{ font-size:12px; color:#6b6457; margin-right:2px; }
.ps-chip{ border:1px solid #cfc6b1; background:#fff; color:#5b5443;
  font:600 13px/1 var(--font-body,system-ui); padding:7px 13px; border-radius:999px;
  cursor:pointer; transition:.15s ease; }
.ps-chip[aria-pressed="true"]{
  background:var(--accent-forest,#2f4a2c); border-color:var(--accent-forest,#2f4a2c);
  color:var(--color-parchment-100,#fbf6ea); }
.ps-chip:focus-visible{ outline:2px solid var(--accent-forest,#2f4a2c); outline-offset:2px; }

/* ── Results ─────────────────────────────────────────────────────────── */
.ps-status{ padding:6px 22px 0; font-size:13px; color:#6b6457; font-style:italic; }
.ps-results{ padding:12px 22px 22px; overflow-y:auto;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.ps-result{ position:relative; display:block; border-radius:10px; overflow:hidden;
  background:#e9e2d0; text-decoration:none; color:#fff; aspect-ratio:1/1;
  box-shadow:0 1px 4px rgba(20,12,4,.18); transition:.15s ease; }
.ps-result:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(20,12,4,.30); }
.ps-result img{ width:100%; height:100%; object-fit:cover; display:block; }
.ps-result__meta{ position:absolute; left:0; right:0; bottom:0;
  padding:18px 8px 7px; font:500 11px/1.25 var(--font-body,system-ui);
  background:linear-gradient(to top,rgba(20,12,4,.82),rgba(20,12,4,0)); }
.ps-result__label{ display:block; font-weight:700; font-size:11px; opacity:.92; }
.ps-result__cap{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-result__badge{ position:absolute; top:6px; right:6px; font-size:14px;
  background:rgba(20,12,4,.6); border-radius:6px; padding:1px 4px; }
.ps-empty{ grid-column:1/-1; text-align:center; color:#6b6457; padding:28px 8px;
  font-style:italic; }