/* assets/css/places.css — Temple & Dharamshala directory (/places/) */

.jpl-wrap { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.jpl-eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700; color: var(--jain-gold, #b8860b); margin: 0 0 .3rem; }
.jpl-head h1 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.jpl-lede { color: #555; max-width: 60rem; margin: 0 0 1.25rem; }
.jpl-muted { color: #777; }
.small { font-size: .82rem; }

/* toolbar */
.jpl-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-bottom: 1.25rem; }
.jpl-search { position: relative; flex: 1 1 16rem; }
.jpl-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #999; }
.jpl-search input { width: 100%; padding: .55rem .75rem .55rem 2.1rem; border: 1px solid #ddd; border-radius: .5rem; font-size: .95rem; }
.jpl-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.jpl-chip { border: 1px solid #ddd; background: #fff; border-radius: 2rem; padding: .35rem .85rem; font-size: .82rem; cursor: pointer; color: #444; }
.jpl-chip span { color: #999; margin-left: .25rem; }
.jpl-chip.is-on { background: #2a2a2a; color: #fff; border-color: #2a2a2a; }
.jpl-chip.is-on span { color: #ccc; }
.jpl-selects { display: flex; gap: .5rem; }
.jpl-selects select { border: 1px solid #ddd; border-radius: .5rem; padding: .5rem .6rem; font-size: .85rem; background: #fff; }

.jpl-empty { text-align: center; color: #888; padding: 2rem 0; }
.jpl-pager { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin: 1.75rem 0; }
.jpl-pager a { color: #b8860b; font-weight: 600; text-decoration: none; }
.jpl-pager a:hover { text-decoration: underline; }

/* grid of cards */
.jpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.jpl-card { display: block; background: #fff; border: 1px solid #e8e4da; border-radius: .75rem; padding: 1rem 1.1rem; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.jpl-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.jpl-card-type { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #b8860b; font-weight: 700; }
.jpl-card h2 { font-size: 1.05rem; margin: .3rem 0 .35rem; color: #222; }
.jpl-card-loc, .jpl-card-sect, .jpl-card-phone { font-size: .85rem; margin: .15rem 0; color: #555; }
.jpl-card-phone { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }

.jpl-badge { display: inline-block; font-size: .68rem; font-weight: 700; padding: .1rem .5rem; border-radius: 1rem; }
.jpl-badge-ok { background: #e6f4ea; color: #1e7d34; }
.jpl-badge-warn { background: #fdecea; color: #b3261e; }
.jpl-strike { text-decoration: line-through; color: #999; }

.jpl-section.jpl-cta { margin-top: 2rem; padding: 1.25rem; background: #faf7f0; border-radius: .75rem; text-align: center; }

/* ── detail page ── */
.jpl-hero {
  background: linear-gradient(135deg, #fbf6ea 0%, #f3ece0 100%);
  border-radius: .8rem; padding: 1.15rem 1.4rem; margin-bottom: 1.1rem;
}
.jpl-hero h1 { margin: .15rem 0 .4rem; font-size: clamp(1.4rem, 2.8vw, 2rem); color: #2a2a2a; }
.jpl-hero-loc { margin: 0; color: #6b5c3f; font-size: .92rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.jpl-hero-note { margin: .5rem 0 0; font-size: .82rem; color: #8a7a52; display: flex; align-items: flex-start; gap: .4rem; }
.jpl-rating { color: #b8860b; font-weight: 700; margin-left: .5rem; }

.jpl-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .jpl-detail-grid { grid-template-columns: 1fr; } }

.jpl-card { background: #fff; border: 1px solid #e8e4da; border-radius: .8rem; padding: 1rem 1.15rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.03); }
.jpl-card-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.jpl-card-head i { color: #b8860b; font-size: 1rem; }
.jpl-card-head h2 { margin: 0; font-size: 1rem; }

/* contact card */
.jpl-phone-number { margin: 0 0 .3rem; }
.jpl-phone-number a { font-size: 1.5rem; font-weight: 700; color: #2a2a2a; text-decoration: none; }
.jpl-phone-number a:hover { color: #b8860b; }
.jpl-phone-status { margin: 0 0 .6rem; min-height: 1.2rem; }
.jpl-phone-ask { font-size: .85rem; color: #666; margin: 0 0 .5rem; font-weight: 600; }
.jpl-phone-btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.jpl-vbtn-big {
  display: inline-flex; align-items: center; gap: .45rem; border-radius: 2rem; padding: .55rem 1.1rem;
  font-size: .88rem; font-weight: 700; cursor: pointer; border: 1.5px solid transparent; transition: transform .1s, box-shadow .15s;
}
.jpl-vbtn-big:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.jpl-vbtn-big:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }
.jpl-vbtn-yes { background: #e9f7ee; color: #1e7d34; border-color: #bfe8cd; }
.jpl-vbtn-yes:hover { background: #dcf3e4; }
.jpl-vbtn-no { background: #fdecea; color: #b3261e; border-color: #f5c6c0; }
.jpl-vbtn-no:hover { background: #fbdfdc; }
.jpl-phone-form { margin-top: .75rem; padding-top: .75rem; border-top: 1px dashed #eadfc4; }
.jpl-phone-form-row { display: flex; gap: .5rem; margin-top: .4rem; }
.jpl-phone-form-row input { flex: 1; border: 1px solid #ddd; border-radius: .4rem; padding: .5rem .7rem; }
#jplPhoneThanks { margin: .5rem 0 0; }

.jpl-contact-list { list-style: none; margin: .75rem 0 0; padding: .75rem 0 0; border-top: 1px solid #f0ece0; display: flex; flex-direction: column; gap: .5rem; font-size: .88rem; }
.jpl-contact-list:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.jpl-contact-list li { display: flex; align-items: flex-start; gap: .6rem; }
.jpl-contact-list i { color: #b8860b; width: 1.1rem; text-align: center; margin-top: .15rem; }

/* map card */
.jpl-address { margin: 0 0 .2rem; font-size: .92rem; }
.jpl-map-embed { margin: .7rem 0; border-radius: .55rem; overflow: hidden; border: 1px solid #e8e4da; }
.jpl-map-embed iframe { width: 100%; height: 13rem; border: 0; display: block; }
.jpl-btn-outline { background: #fff; color: #b8860b; border: 1.5px solid #b8860b; }
.jpl-btn-outline:hover { background: #fbf3e0; }

.jpl-notes { margin: 0 0 1rem; padding: .9rem 1.1rem; border-radius: .6rem; background: #f7f6f2; }
.jpl-notes h2 { font-size: .95rem; margin: 0 0 .5rem; }
.jpl-notes ul { margin: 0; padding-left: 1.2rem; }
.jpl-notes li { margin-bottom: .4rem; font-size: .9rem; color: #444; }
.jpl-notes-caution { background: #fdf3e7; border: 1px solid #f0d9b5; }
.jpl-notes-caution h2 { color: #925a00; }

/* right-side community panel — deliberately more visually assertive than the
   left column's plain white cards, so it reads as "join in here", not as an
   afterthought bolted onto the page. */
.jpl-side { position: sticky; top: 5rem; }
.jpl-side-inner {
  background: #fff; border: 1px solid #e8e4da; border-top: 3px solid #b8860b; border-radius: 0 0 .85rem .85rem;
  padding: 1.1rem 1.15rem; max-height: calc(100vh - 6.5rem); overflow-y: auto;
}
.jpl-side h2 { font-size: 1rem; margin: 0 0 .75rem; display: flex; align-items: center; gap: .5rem; }
.jpl-side h2 i { color: #b8860b; }
.jpl-count-pill { background: #f3ece0; color: #925a00; font-size: .78rem; font-weight: 700; padding: .1rem .55rem; border-radius: 1rem; }

/* comment cards */
.jpl-comments { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.jpl-comment { border: 1px solid #edeadf; background: #fdfcfa; border-radius: .65rem; padding: .7rem .8rem; position: relative; }
.jpl-comment.is-top { border-color: #e3c775; background: #fffaf0; }
.jpl-top-badge {
  position: absolute; top: -.65rem; right: .7rem; background: #b8860b; color: #fff; font-size: .65rem; font-weight: 700;
  padding: .15rem .6rem; border-radius: 1rem; display: inline-flex; align-items: center; gap: .3rem; box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.jpl-comment-top { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.jpl-avatar {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: linear-gradient(135deg, #d4af37, #b8860b);
  color: #fff; font-weight: 700; font-size: .9rem; display: flex; align-items: center; justify-content: center;
}
.jpl-comment-who { display: flex; flex-direction: column; line-height: 1.25; }
.jpl-comment-who strong { font-size: .88rem; color: #2a2a2a; }

/* Any text a browser might auto-link (phone-looking digits) stays plain —
   see the format-detection meta tag in places_detail.php's head. */
.jpl-nolink, .jpl-nolink a { color: #333 !important; text-decoration: none !important; }
.jpl-comment-phone { margin: 0 0 .3rem; font-size: .88rem; color: #444; }
.jpl-comment-phone i { color: #b8860b; }
.jpl-comment-body { margin: 0 0 .5rem; font-size: .9rem; color: #333; line-height: 1.5; }
.jpl-comment-meta { display: flex; align-items: center; gap: .4rem; }
.jpl-comments-empty { list-style: none; text-align: center; color: #999; padding: 1.5rem 0; font-size: .9rem; }
.jpl-comments-empty i { display: block; font-size: 1.4rem; margin-bottom: .4rem; color: #ccc; }

.jpl-votes { display: flex; gap: .5rem; }
.jpl-votes .jpl-vbtn {
  display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; font-size: .78rem; font-weight: 600;
  border-radius: 1.2rem; border: 1px solid #e5e0d2; background: #f7f5ef; color: #6b6b6b; cursor: pointer; transition: background .15s, color .15s;
}
.jpl-votes .jpl-vbtn i { color: #1e7d34; }
.jpl-votes .jpl-vbtn:hover { background: #e9f7ee; color: #1e7d34; border-color: #bfe8cd; }
.jpl-votes .jpl-vbtn-down i { color: #b3261e; }
.jpl-votes .jpl-vbtn-down:hover { background: #fdecea; color: #b3261e; border-color: #f5c6c0; }

/* add-a-note section, below the list — styled as a call-to-action panel of
   its own so it invites a click rather than reading as a plain form. */
.jpl-add-note {
  background: #fbf7ec; border: 1px dashed #e3d3a0; border-radius: .6rem;
  padding: .85rem .9rem; margin-top: .25rem;
}
.jpl-add-note h3 { font-size: .92rem; margin: 0 0 .2rem; display: flex; align-items: center; gap: .4rem; color: #7a5c00; }
.jpl-add-note h3 i { color: #b8860b; }

/* Drawn right after "No, it's wrong" is confirmed — pulls focus to where
   the visitor should now type the actual correction. */
.jpl-add-note.jpl-highlight {
  animation: jplNotePulse 1.3s ease-in-out 2;
  border-color: #b8860b; border-style: solid;
}
@keyframes jplNotePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 134, 11, .35); }
  50% { box-shadow: 0 0 0 .5rem rgba(184, 134, 11, 0); }
}

.jpl-comment-form { display: flex; flex-direction: column; gap: .5rem; margin: .75rem 0 0; }
.jpl-comment-form textarea { border: 1px solid #ddd; border-radius: .5rem; padding: .55rem .7rem; font: inherit; resize: vertical; }
.jpl-comment-name { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.jpl-comment-name input[type=text] { flex: 1; border: 1px solid #ddd; border-radius: .4rem; padding: .4rem .6rem; }
.jpl-comment-mobile-wrap input { width: 100%; margin-top: .4rem; border: 1px solid #ddd; border-radius: .4rem; padding: .4rem .6rem; }
.jpl-hp { position: absolute; left: -9999px; }
.jpl-err { color: #b3261e; font-size: .85rem; margin: 0; }

.jpl-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: #b8860b; color: #fff; border: none; border-radius: .5rem; padding: .55rem 1.1rem; font-weight: 600; cursor: pointer; text-align: center; }
.jpl-btn:hover { background: #9c7009; }
.jpl-btn-sm { padding: .35rem .8rem; font-size: .85rem; }
.w-100 { width: 100%; }