/* ═══════════════════════════════════════════════════════════════
   找照片 /find/ 專屬樣式（pages/find.py、static/js/find.js）
   只用 site.css 的代幣，不重定義；共用元件（.sec / .card / .btn / .lede / .deco）沿用。
   手機優先：375 → 640 → 960 → 1200。橘色只給「找照片」按鈕（.btn-org），其餘一律藍。
   ═══════════════════════════════════════════════════════════════ */
.page-find .sec{ scroll-margin-top:calc(var(--topbar-h) + 12px); }   /* 品牌條是 sticky，錨點別被蓋住 */

/* ── 開場 + 查詢表單 ── */
.find-hero{ overflow:hidden; padding-top:clamp(28px,4.5vw,52px); padding-bottom:clamp(24px,3vw,40px); }
.find-hero .wrap{ position:relative; }
.find-head{ position:relative; z-index:1; max-width:60ch; }
.find-title{ font-size:var(--fs-h1); font-weight:900; letter-spacing:-.02em; line-height:1.2; margin-top:4px; }
.find-title b{ color:var(--blue); font-weight:900; }
.find-lede{ margin-top:14px; color:var(--ink-dim); }

.find-form{ position:relative; z-index:1; margin-top:22px; padding:18px; }
.find-fields{ display:grid; gap:14px; }
.find-field{ display:grid; gap:6px; min-width:0; }
.find-field label{ font-size:var(--fs-small); font-weight:700; color:var(--blue); }
.find-field select,
.find-field input{
  width:100%; min-height:48px; margin:0; padding:10px 14px;
  font:inherit; font-size:16px; line-height:1.4;                 /* 16px：iOS 對焦時不會放大頁面 */
  color:var(--ink); background:var(--card);
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s;
}
.find-field select:focus,
.find-field input:focus{ border-color:var(--blue); }             /* 焦點外框沿用 site.css 的全站 :focus-visible */
.find-field input[type="date"]{ -webkit-appearance:none; appearance:none; }
.find-submit{ width:100%; }
.find-form.is-busy .find-submit{ opacity:.7; pointer-events:none; }
.find-hint{ margin-top:12px; font-size:var(--fs-xs); color:var(--ink-dim); line-height:1.6; }
@media (min-width:640px){
  .find-form{ padding:22px 24px; }
  .find-fields{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; align-items:end; }
  .find-submit{ width:auto; min-width:132px; }
}

/* ── 結果：狀態列（載入中／找到／沒有／錯誤）+ 照片格 ── */
.find-results{ padding-top:clamp(22px,3vw,36px); }
.find-status{ display:flex; align-items:center; gap:10px; min-height:28px; font-size:var(--fs-small); font-weight:700; color:var(--ink-dim); }
.find-status::before{ content:""; flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--sky); }
.find-status[data-state="ok"]{ color:var(--blue); }
.find-status[data-state="ok"]::before{ background:var(--blue); }
.find-status[data-state="error"]{ color:var(--ink); }
.find-status[data-state="error"]::before{ background:var(--blue-ink); }
.find-status[data-state="loading"]::before{
  width:16px; height:16px; background:none;
  border:2.5px solid var(--blue-tint); border-top-color:var(--blue);
  animation:find-spin .8s linear infinite;
}
@keyframes find-spin{ to{ transform:rotate(360deg); } }
/* 沒有照片：做成一塊看得見的空狀態，不只是一行小字 */
.find-status[data-state="empty"]{
  justify-content:center; text-align:center; padding:28px 16px;
  border:1.5px dashed var(--line); border-radius:var(--r); background:var(--page); color:var(--ink-dim);
}
.find-status[data-state="empty"]::before{ display:none; }

.find-grid{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.find-grid[hidden]{ display:none; }                              /* 作者樣式的 display:grid 會蓋掉 UA 的 [hidden]，補回來 */
.find-tile{ margin:0; min-width:0; display:flex; flex-direction:column; background:var(--card); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.find-tile-link{ display:block; position:relative; aspect-ratio:4 / 5; background:var(--blue-tint); overflow:hidden; }
.find-tile-link img{
  display:block; width:100%; height:100%; object-fit:cover;
  object-position:var(--pos,50% 50%);                            /* fy 人臉位置 → 由 find.js 寫在 --pos */
  transition:transform .35s ease;
}
.find-tile-link:hover img{ transform:scale(1.03); }
.find-tile-link:focus-visible{ outline-offset:-4px; }
.find-tile-cap{ padding:10px 12px 12px; display:grid; gap:2px; }
.find-no{ font-size:var(--fs-small); font-weight:900; color:var(--blue); letter-spacing:.02em; }
.find-no.is-missing{ color:var(--ink-dim); font-weight:700; }
.find-meta{ display:flex; flex-wrap:wrap; gap:2px 8px; font-size:var(--fs-xs); color:var(--ink-dim); line-height:1.5; }
.find-meta time{ white-space:nowrap; }
@media (min-width:640px){ .find-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (min-width:960px){ .find-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1200px){ .find-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.find-noscript{ margin-top:12px; font-size:var(--fs-small); color:var(--ink); }

/* ── 說明 + 動作 ── */
.find-notice{ max-width:66ch; }
.find-notice-title{ font-size:var(--fs-h3); font-weight:900; color:var(--blue); }
.find-notice-list{ margin:10px 0 0; padding-left:1.2em; font-size:var(--fs-small); color:var(--ink-dim); line-height:1.8; }
.find-notice-list li{ margin:.35em 0; }
.find-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:20px; }
.find-link{ font-weight:700; }

@media (prefers-reduced-motion:reduce){
  .find-status[data-state="loading"]::before{ animation:none; border-top-color:var(--blue-ink); }
  .find-tile-link img{ transition:none; }
}