/* Explore: the place window (opens from the list or a map pin).
   Same look as the rest of the site: no boxed cells, soft rounded panel, pills, hairlines.
   Desktop: photo left, details right. Tablet: narrower photo. Phone: sheet from the bottom, photo on top. */

#root .modal-overlay {
  background: rgba(22, 14, 4, .58) !important;
  backdrop-filter: blur(8px) saturate(1.1);
}

#root .modal-panel {
  width: min(940px, 100%) !important;
  grid-template-columns: 340px 1fr !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #fffdf8 !important;
  box-shadow: 0 40px 90px -24px rgba(30, 18, 2, .55), 0 2px 0 rgba(255, 255, 255, .6) inset !important;
  overflow: hidden !important;
}
#root .modal-accent { display: none !important; }

/* Photo side */
#root .modal-img-col { border-radius: 0; }
#root .modal-img-col img { transform: scale(1.02); }
#root .modal-cat-stamp {
  border: 0 !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  background: rgba(16, 10, 2, .38) !important;
  backdrop-filter: blur(6px);
  color: #fff3dc !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
}
#root .modal-img-identity { padding-bottom: 6px; }
#root .modal-img-deity-line { display: none !important; }
#root .modal-img-name { line-height: 1.2 !important; }

/* Details side */
/* Details side: editorial, no icons. Owner 2026-11-07: "remove icons, professional, proper font sizes". */
#root .modal-content { padding: 34px 36px 32px !important; gap: 0; }
#root .modal-content svg { display: none !important; }        /* every small icon: pin, sun, tag, clock, book, arrow, send */
#root .modal-close svg { display: block !important; }          /* except the close cross */
#root .modal-om { display: none !important; }
#root .modal-hd { align-items: flex-start !important; gap: 16px !important; }
#root .modal-hd-district {
  font-size: 22px !important; line-height: 1.3 !important; font-weight: 600 !important;
  color: #3a2808 !important; letter-spacing: 0 !important;
}
#root .modal-hd-loc { margin-top: 4px !important; font-size: 14px !important; color: #8a7454 !important; letter-spacing: 0 !important; }

#root .modal-close {
  flex: none; width: 36px !important; height: 36px !important;
  border: 0 !important; border-radius: 50% !important;
  background: transparent !important; color: #8a7454 !important;
  display: grid !important; place-items: center !important;
  transition: background .2s ease, color .2s ease;
}
#root .modal-close:hover { background: rgba(184, 132, 47, .1) !important; color: #4a3208 !important; }

#root .modal-rule { height: 1px !important; border: 0 !important; margin: 22px 0 0 !important; background: rgba(120, 90, 40, .14) !important; }

/* Location and season are already in the header and the "best time" line: not shown twice. */
#root .modal-meta-grid { display: none !important; }

/* Facts: small label above plain text, rows divided by hairlines */
#root .modal-tags-hd,
#root .modal-season-lbl {
  display: block !important;
  margin: 0 0 6px !important;
  font-family: inherit !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: #9a8160 !important;
}
#root .modal-tags-hd { padding-top: 18px !important; order: 2; }
#root .modal-tags {
  display: block !important; order: 3;
  margin: 0 0 18px !important; padding-bottom: 18px !important;
  border-bottom: 1px solid rgba(120, 90, 40, .14) !important;
  font-size: 15.5px !important; line-height: 1.6 !important; color: #3d2c10 !important;
}
#root .modal-tag {
  display: inline !important; border: 0 !important; border-radius: 0 !important;
  padding: 0 !important; background: none !important;
  font-size: inherit !important; color: inherit !important; letter-spacing: 0 !important; text-transform: none !important;
}
#root .modal-tag:not(:last-child)::after { content: "·"; margin: 0 10px; color: #c2a874; }

#root .modal-season {
  order: 1;
  border: 0 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 18px 0 !important; margin: 0 !important;
  border-bottom: 1px solid rgba(120, 90, 40, .14) !important;
}
#root .modal-season-val { font-size: 15.5px !important; line-height: 1.5 !important; color: #3d2c10 !important; font-weight: 500 !important; }

/* Actions: a text link, then two plain buttons side by side */
#root .modal-content { display: flex !important; flex-direction: column !important; }
#root .modal-hd { order: 0; }
#root .modal-rule { order: 0; }
#root .modal-actions {
  order: 4; margin-top: auto !important; padding-top: 8px !important;
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important;
}
#root .modal-btn-readmore {
  grid-column: 1 / -1; justify-self: start;
  min-height: 0 !important; height: auto !important; padding: 2px 0 6px !important;
  border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
  color: #8f6410 !important; text-decoration: underline; text-decoration-color: rgba(143, 100, 16, .35);
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
#root .modal-btn-readmore:hover { text-decoration-color: currentColor; }
#root .modal-btn-readmore::after { content: " →"; }
#root .modal-btn-primary,
#root .modal-btn-secondary {
  min-height: 46px !important; height: auto !important; padding: 0 18px !important;
  border-radius: 999px !important; box-shadow: none !important;
  font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: .01em !important; text-transform: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .18s ease, border-color .18s ease;
}
#root .modal-btn-primary { border: 0 !important; background: #a8771f !important; color: #fff !important; }
#root .modal-btn-primary:hover { background: #8f6410 !important; }
#root .modal-btn-secondary { border: 1px solid rgba(120, 90, 40, .28) !important; background: transparent !important; color: #4a3208 !important; }
#root .modal-btn-secondary:hover { border-color: rgba(120, 90, 40, .5) !important; }

/* "Read more" was written in all three languages at once: show the site language only. */
#root .modal-btn-readmore .readmore-sep,
#root .modal-btn-readmore .readmore-np,
#root .modal-btn-readmore .readmore-hi { display: none !important; }
html[lang="np"] #root .modal-btn-readmore .readmore-en,
html[lang="ne"] #root .modal-btn-readmore .readmore-en,
html[lang="hi"] #root .modal-btn-readmore .readmore-en { display: none !important; }
html[lang="np"] #root .modal-btn-readmore .readmore-np,
html[lang="ne"] #root .modal-btn-readmore .readmore-np { display: inline !important; }
html[lang="hi"] #root .modal-btn-readmore .readmore-hi { display: inline !important; }

/* Tablet */
@media (max-width: 980px) {
  #root .modal-panel { grid-template-columns: 280px 1fr !important; border-radius: 24px !important; }
  #root .modal-content { padding: 26px 26px !important; }
}

/* Phone: a sheet from the bottom, photo on top, everything scrolls inside */
@media (max-width: 720px) {
  #root .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
  #root .modal-panel {
    width: 100% !important;
    grid-template-columns: 1fr !important; grid-template-rows: auto auto !important;
    height: auto !important; max-height: 92vh !important; max-height: 92dvh !important;
    border-radius: 26px 26px 0 0 !important;
    overflow-y: auto !important; overscroll-behavior: contain;
    animation: lyr-sheet-in .32s cubic-bezier(.2, .8, .2, 1);
  }
  #root .modal-img-col { height: 240px !important; min-height: 240px; width: 100% !important; }
  #root .modal-img-name { font-size: 24px !important; }
  #root .modal-content { padding: 20px 18px calc(22px + env(safe-area-inset-bottom)) !important; overflow: visible !important; }
  #root .modal-close {
    position: absolute !important; top: 12px; right: 12px; z-index: 20;
    background: rgba(16, 10, 2, .45) !important; color: #fff !important; backdrop-filter: blur(6px);
  }
  #root .modal-hd { padding-right: 0 !important; }
  #root .modal-actions { grid-template-columns: 1fr !important; }
  #root .modal-hd-district { font-size: 20px !important; }
  #root .modal-actions { position: sticky; bottom: 0; padding-top: 10px; background: linear-gradient(180deg, rgba(255, 253, 248, 0), #fffdf8 22%); }
}
@keyframes lyr-sheet-in { from { transform: translateY(48px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { #root .modal-panel { animation: none !important; } }

/* Nepali and Hindi: letter spacing pulls Devanagari conjuncts apart (फर्पिङ showed as फ र्पि ङ),
   so every spaced-out label in the window uses normal spacing and no capitals in these languages. */
html:is([lang="np"], [lang="ne"], [lang="hi"]) #root .modal-panel :is(
  .modal-cat-stamp, .modal-img-deity-text, .modal-img-name, .modal-img-namenp,
  .modal-hd-district, .modal-hd-loc, .modal-tags-hd, .modal-season-lbl, .modal-season-val,
  .modal-tag, .modal-btn-readmore, .modal-btn-primary, .modal-btn-secondary
) {
  letter-spacing: 0 !important;
  text-transform: none !important;
  word-spacing: normal !important;
}
html:is([lang="np"], [lang="ne"], [lang="hi"]) #root .modal-cat-stamp { font-size: 12px !important; font-weight: 600 !important; }
html:is([lang="np"], [lang="ne"], [lang="hi"]) #root :is(.modal-tags-hd, .modal-season-lbl) { font-size: 13px !important; }
html:is([lang="np"], [lang="ne"], [lang="hi"]) #root .ex-grid-title { letter-spacing: 0 !important; }