/* "Find your photos" landing box (src/partials/find.html, assets/js/find.js - Tony 2026-10-28).
   A full-screen box over the hero on arrival: the photo finder (left) and the way into the website
   (right). Built on the site tokens, so it follows the theme (ICE today). The finder's own look
   (.ff ...) ships with the gallery bundle (gallery src/find-ice.css). */
html.fg-open, html.fg-open body { overflow: hidden; }

.fg { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(10px, 3vw, 36px); }
.fg[hidden] { display: none; }
.fg-backdrop { position: absolute; inset: 0; background: rgba(6, 22, 44, .42); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  opacity: 0; transition: opacity .25s var(--ease); }
.fg-panel { position: relative; width: min(1120px, 100%); max-height: calc(100dvh - 2 * clamp(10px, 3vw, 36px)); overflow: auto; overscroll-behavior: contain;
  background: var(--bg, #f4f9fe); border: 1px solid var(--line-2); border-radius: var(--radius-lg, 26px); box-shadow: var(--shadow-2, 0 30px 80px -30px rgba(0, 0, 0, .5));
  padding: clamp(14px, 2.4vw, 26px); opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .25s var(--ease), transform .3s var(--ease); }
.fg.in .fg-backdrop { opacity: 1; }
.fg.in .fg-panel { opacity: 1; transform: none; }
html.reduced .fg-panel, html.reduced .fg-backdrop { transition: none; }

.fg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 clamp(10px, 2vw, 18px); }
.fg-brand { pointer-events: none; }
.fg-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: var(--frost, #fff);
  color: var(--ink); cursor: pointer; transition: transform .2s var(--ease), border-color .2s; }
.fg-x:hover { transform: rotate(90deg); border-color: var(--cyan); }
.fg-x .ico { width: 18px; height: 18px; }

.fg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(12px, 2vw, 22px); align-items: stretch; }
.fg-find { min-width: 0; padding: clamp(6px, 1.6vw, 18px) clamp(4px, 1.4vw, 16px); }
.fg-eyebrow { display: flex; justify-content: center; margin: 0 0 12px; }
.fg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fg-app { min-height: 200px; }
.fg-fallback { text-align: center; padding: 20px 8px; }
.fg-h { font-size: clamp(28px, 4.4vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 8px; color: var(--ink); }
.fg-p { color: var(--ink-2); line-height: 1.55; margin: 0 0 18px; }

.fg-code { max-width: 560px; margin: 4px auto 0; text-align: center; }
.fg-code label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.fg-code-row { display: flex; gap: 8px; }
.fg-code input { flex: 1; min-width: 0; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--frost, #fff); color: var(--ink); font: 16px var(--sans); }
.fg-code input:focus { outline: 2px solid var(--ice, var(--cyan)); outline-offset: 1px; border-color: transparent; }
.fg-code button { padding: 0 22px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--frost, #fff); color: var(--cyan); font: 700 16px var(--sans); cursor: pointer; }
.fg-code button:hover { border-color: var(--cyan); }

.fg-explore { position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius, 18px); background: #0a1f36; color: #fff; display: flex; align-items: flex-end; min-height: 420px; }
.fg-explore-bg, .fg-explore-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fg-explore::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 22, 44, .05) 20%, rgba(6, 22, 44, .78) 72%, rgba(6, 22, 44, .9)); }
.fg-explore-in { position: relative; z-index: 1; padding: clamp(18px, 2.6vw, 30px); }
.fg-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .85; margin: 0 0 10px; }
.fg-big { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.02; margin: 0 0 12px; }
.fg-big .grad { background: linear-gradient(100deg, #7fdcff, #43bdf6 48%, #b5c8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fg-explore .fg-p { color: rgba(255, 255, 255, .88); font-size: 15px; }
.fg-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.fg .fg-explore .btn-glass, [data-theme="ice"] .fg .fg-explore .btn-glass { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .14); box-shadow: none; }
.fg .fg-explore .btn-glass:hover, [data-theme="ice"] .fg .fg-explore .btn-glass:hover { background: rgba(255, 255, 255, .24); }

/* the website's nav: "Find my photos" next to Book */
.nav-find { white-space: nowrap; }
@media (max-width: 1024px) {   /* base.css hides the extra nav buttons here; the photo lookup stays on every screen */
  .nav .nav-right .btn.nav-find { display: inline-flex; --h: 44px; padding: 0 16px; }
}
@media (max-width: 460px) {   /* phones: no room for both - Book lives in the menu ("Book your event") */
  .nav .nav-right .nav-cta { display: none; }
  .nav .nav-right .btn.nav-find { padding: 0 14px; font-size: 13px; }
}

@media (max-width: 900px) {
  .fg { padding: 0; place-items: stretch; }
  .fg-panel { max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; }
  .fg-grid { grid-template-columns: 1fr; }
  .fg-explore { min-height: 0; align-items: stretch; }
  .fg-explore-in { padding: 18px; }
  .fg-big { font-size: 28px; }
  .fg-explore .fg-p { display: none; }
  .fg-ctas .btn { flex: 1 1 auto; justify-content: center; }
}