/* ── Store finder: shared cross-breakpoint styles ────────────────────────
   The primary entry page (see store-finder.js and
   docs/UI_REDESIGN_2026-09.md Phase 5/6). Breakpoint-specific layout
   (padding, headline font-size, collage column-count) lives in
   desktop.css/mobile.css; this file holds everything that looks the same
   everywhere. */

#store-finder {
  background: var(--paper-finder);
}

#store-finder-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  text-transform: uppercase;
}

/* The entry point into the browse-designs page (see main.js). Flows
   right after the blurb on both breakpoints (2026-09-22 — mobile used to
   pin this top-right near the home/lang icons instead, but that read as
   inconsistent once desktop moved it below the blurb) — the per-
   breakpoint margin-top lives in mobile.css/desktop.css; only the visual
   styling is shared here. */
#store-finder-search-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-family);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink);
  cursor: pointer;
}

/* Big stacked display headline — a deliberate bilingual wordmark, broken
   across lines (see docs/UI_REDESIGN_2026-09.md). */
#store-finder-headline {
  font-family: var(--font-display);
  font-weight: 900;
  color: var(--ink);
  line-height: 1.05;
  margin-top: 24px;
}
#store-finder-headline span {
  display: block;
  padding-top: 8px;
}

#store-finder-blurb {
  max-width: 400px;
  margin-top: 24px;
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.7;
}

/* ── Photo collage ────────────────────────────────────────────────────── */
/* Desktop scatters photos with hand-placed positions (see desktop.css) to
   match the reference layout's organic, staggered composition; mobile
   keeps a plain 2-column grid (see mobile.css) — true freeform scatter
   doesn't work at phone width. This shared rule is just the top spacing
   from the blurb above; everything else is breakpoint-specific. */
#store-finder-collage { margin-top: 36px; }

.store-finder-photo-btn {
  position: relative; /* anchors .store-finder-city-tag; also what makes
    the z-index bump below take effect */
  display: block;
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
}

/* Hover-zoom — gated on real hover/pointer capability (not just viewport
   width) so a touch device never gets stuck showing the zoomed state
   after a tap, which has no matching "move the pointer away" gesture to
   undo it. transform-origin is the bottom edge, not center, so a photo
   grows upward/sideways into open space instead of downward into its own
   caption text. z-index only lifts on hover (not permanently) so a
   scattered layout's later, closer neighbors don't otherwise cover an
   earlier item that isn't being hovered. */
@media (hover: hover) and (pointer: fine) {
  .store-finder-photo-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    transform-origin: center bottom;
  }
  .store-finder-photo-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 32px rgba(20, 18, 15, 0.22);
    z-index: 5;
  }
}

/* One consistent portrait ratio for every photo (a normal post-like
   rectangle, not a square) — was varied per nth-child position before,
   which read as an unintentional mix of squares/rectangles rather than a
   deliberate "scattered" layout. */
.store-finder-photo,
.store-finder-photo-empty {
  width: 100%;
  aspect-ratio: 4 / 5;
}

.store-finder-photo {
  display: block;
  object-fit: cover;
}

.store-finder-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rule);
  color: var(--ink-muted);
  font-size: 9px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  text-align: center;
}

/* Which city a store's in — the one thing a map would otherwise be for,
   answered directly instead: with 5 of 6 stores clustered in Taipei, a map
   couldn't tell them apart from each other anyway (see
   docs/UI_REDESIGN_2026-09.md). Data-driven (stores_config.json's
   city/city_zh), not hardcoded. */
.store-finder-city-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.store-finder-caption {
  margin-top: 10px;
  font-size: 10.5px;
  font-style: italic;
  color: var(--ink-muted);
}