/* rihobeer-brewery-map-discovery.css — 単一拠点近接探索 UI
 * issue 20260612-009 / epic 20260612-010 Phase 2
 * モバイルファースト (CLAUDE.md 優先: モバイル > パフォーマンス > SEO)
 */

.rihobeer-bmd {
  margin: 1.5em 0;
}

/* ---- コントロール ---- */
.rihobeer-bmd-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.rihobeer-bmd-geo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font-size: .95em;
  font-weight: 600;
  color: #fff;
  background: #c8772e;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.3;
}
.rihobeer-bmd-geo:hover { background: #b3681f; }
.rihobeer-bmd-geo:disabled { opacity: .6; cursor: default; }

.rihobeer-bmd-preset {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  font-size: .95em;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
}

.rihobeer-bmd-filters {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  border: 0;
  margin: 0;
  padding: 2px 0 0;
}
.rihobeer-bmd-filters label {
  font-size: .85em;
  color: #444;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  cursor: pointer;
}
.rihobeer-bmd-awards-toggle { font-weight: 600; }

.rihobeer-bmd-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: .78em;
  color: #888;
}

/* WordPress 標準 (Cocoon) の screen-reader-text を踏襲 */
.rihobeer-bmd .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* ---- 地図 ---- */
.rihobeer-bmd-map {
  width: 100%;
  height: var(--rihobeer-bmd-h, 520px);
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background: #eef3f5;
}

/* 起点アイコン (divIcon) */
.rihobeer-bmd-origin-icon {
  font-size: 30px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
  cursor: grab;
}

/* ---- 結果リスト ---- */
.rihobeer-bmd-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.rihobeer-bmd-empty {
  padding: 14px;
  font-size: .9em;
  color: #777;
  text-align: center;
  background: #f7f7f7;
  border-radius: 8px;
}

.rihobeer-bmd-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.rihobeer-bmd-item:hover {
  background: #fff8ef;
}
/* キーボードフォーカスは視認できるリングを残す (a11y) */
.rihobeer-bmd-item:focus {
  background: #fff8ef;
  outline: 2px solid #c8772e;
  outline-offset: -2px;
}

.rihobeer-bmd-rank {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8em;
  font-weight: 700;
  color: #fff;
  background: #c8772e;
  border-radius: 50%;
}

.rihobeer-bmd-thumb {
  flex: 0 0 auto;
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 6px;
  background: #ddd;
}

.rihobeer-bmd-itembody {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rihobeer-bmd-name {
  font-weight: 600;
  font-size: .95em;
  line-height: 1.35;
}

.rihobeer-bmd-meta {
  font-size: .8em;
  color: #666;
}
.rihobeer-bmd-dist {
  font-weight: 700;
  color: #c8772e;
}

/* ---- 受賞バッジ (medal/year のみ・category 非表示) ---- */
.rihobeer-bmd-badge {
  display: inline-block;
  font-size: .8em;
  background: #fffbea;
  border: 1px solid #e6d27a;
  border-radius: 4px;
  padding: 1px 6px;
  margin-top: 2px;
  white-space: nowrap;
}
.rihobeer-bmd-badge-yr { color: #999; font-size: .9em; }

.rihobeer-bmd-link {
  font-size: .82em;
  font-weight: 600;
  margin-top: 2px;
}

/* ---- popup ---- */
.rihobeer-bmd-pop-thumb {
  width: 100%;
  max-width: 220px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  margin-bottom: 6px;
}
.rihobeer-bmd-pop-name { display: block; font-size: 1em; line-height: 1.4; }
.rihobeer-bmd-pop-sub { display: block; font-size: .8em; color: #666; margin: 2px 0; }
.rihobeer-bmd-pop-dist { display: block; font-size: .82em; font-weight: 700; color: #c8772e; margin: 2px 0; }
.rihobeer-bmd-pop-badge { display: block; margin: 4px 0; }
.rihobeer-bmd-pop-link { display: inline-block; font-size: .85em; font-weight: 600; margin-top: 4px; }

/* ---- デスクトップ: 地図 + リスト 2 カラム (map左・list右をスクロール) ---- */
@media screen and (min-width: 900px) {
  .rihobeer-bmd-body-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 16px;
    align-items: start;
  }
  .rihobeer-bmd-body-grid .rihobeer-bmd-list {
    margin-top: 0;
    max-height: 520px;
    overflow-y: auto;
  }
}

/* ---- モバイル: 地図高さ上限 (geo-foundation P1-2 同形・CSS変数経由で media 有効) ---- */
@media screen and (max-width: 480px) {
  .rihobeer-bmd-map {
    height: min(var(--rihobeer-bmd-h, 520px), 60vh);
  }
  .rihobeer-bmd-thumb { width: 52px; height: 52px; }
}