/* বগুড়ার মানচিত্র — আমার গল্প পাতা। হোমপেজের মানচিত্রের মেজাজেই, সাইটের চেনা রঙে। */

.bogura-map { background: linear-gradient(180deg, var(--paper), #eef3e8); max-width: none; }
.bogura-map > .section-head { max-width: 1280px; margin-left: auto; margin-right: auto; }

.bmap-wrap {
  max-width: 1280px; margin: auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}

.bmap-stage { position: relative; }
.bmap { width: 100%; height: auto; display: block; overflow: visible; }

.bmap-upazila {
  fill: rgba(62, 124, 79, .07); stroke: rgba(23, 62, 46, .32); stroke-width: .8;
  transition: fill .3s, opacity .6s;
}
.bmap-upazila:not(.is-lit):hover { fill: rgba(62, 124, 79, .16); }
.bmap-upazila.is-lit {
  fill: var(--gold); stroke: #b77c0c; cursor: pointer;
  animation: bmap-lit 2.6s ease-in-out infinite;
}
.bmap-upazila.is-lit:focus-visible { outline: none; stroke: var(--forest); stroke-width: 2.2; }
@keyframes bmap-lit { 50% { fill: #f2b43f; } }

.lvl-1 .bmap-upazila:not(.is-lit), .lvl-2 .bmap-upazila:not(.is-lit) { opacity: .35; }
.lvl-2 .bmap-upazila.is-lit { fill: rgba(233, 162, 26, .22); animation: none; }

.bmap-outline { fill: none; stroke: rgba(23, 62, 46, .55); stroke-width: 1.1; pointer-events: none; }

.bmap-label {
  fill: var(--forest); font-family: var(--font); font-weight: 600;
  paint-order: stroke; stroke: var(--paper); stroke-linejoin: round;
  pointer-events: none; transition: opacity .5s;
}

.bmap-pin { cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .6s; }
.lvl-1 .bmap-pin, .lvl-2 .bmap-pin { opacity: 1; pointer-events: auto; }
.bmap-pin .ring { fill: none; stroke: var(--gold); stroke-width: .18; animation: bmap-ring 2.4s ease-out infinite; }
.bmap-pin .core { fill: var(--gold); stroke: #fff; stroke-width: .12; }
.bmap-pin:focus-visible .core { stroke: var(--forest); stroke-width: .3; }
@keyframes bmap-ring { 0% { r: .5; opacity: 1; } 100% { r: 1.6; opacity: 0; } }

/* ধাপের ক্রাম্ব */
.bmap-crumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.bmap-crumbs button {
  padding: 7px 14px; border-radius: 99px; border: 1px solid var(--line);
  background: var(--white); color: var(--muted); font-size: 12.5px; cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.bmap-crumbs button:hover:not(:disabled) { border-color: var(--field); color: var(--forest); }
.bmap-crumbs button.is-active { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.bmap-crumbs button:disabled { opacity: .45; cursor: not-allowed; }

/* পাশের প্যানেল */
.bmap-panel {
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 16px; background: var(--white);
}
.bmap-panel p { margin: 0 0 12px; font-size: 16px; line-height: 1.9; color: #51594d; }
.bmap-panel p:last-of-type { margin-bottom: 0; }
.bmap-panel strong { color: var(--forest); }
.bmap-panel h3 { font-size: clamp(24px, 2.4vw, 32px); margin: 0 0 10px; }
.bmap-hint { font-size: 13px !important; color: var(--field) !important; }
.bmap-panel .button { margin-top: 10px; }
.bmap-panel .editorial-link { margin-top: 6px; }

@media (max-width: 900px) {
  .bmap-wrap { grid-template-columns: 1fr; gap: 24px; }
  .bmap-label { font-weight: 700; }
}
@media (max-width: 600px) {
  .bmap-crumbs button { padding: 6px 11px; font-size: 11.5px; }
  .bmap-panel p { font-size: 15px; }
  .bmap-panel .button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bmap-upazila.is-lit, .bmap-pin .ring { animation: none; }
}