/* The v2 place pages (resources/views/Map/placepage.htm and the photo and comment pages). */

.placex { padding-top: 12px; padding-bottom: 24px; }
.placex-hero { position: relative; border-radius: var(--r-xl); overflow: hidden; min-height: clamp(300px, 34vw, 460px); display: flex; color: #fff; background: var(--c-primary-dark); }
.placex-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.placex-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(8 20 14 / .78) 0%, rgb(8 20 14 / .2) 55%, rgb(8 20 14 / 0) 80%); }
.placex-hero.no-photo::after { display: none; }
.placex-hero.is-compact, .placex-hero.no-photo { min-height: 0; }
.placex-hero-body { position: relative; z-index: 1; width: 100%; padding: clamp(22px, 4vw, 44px); display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.placex-hero-text { display: flex; flex-direction: column; gap: 12px; }
.placex-hero h1 { font: 600 clamp(32px, 4.4vw, 56px)/1.08 var(--font-serif); color: #fff; }
.placex-hero p { font-size: 17px; color: rgb(255 255 255 / .9); }
.placex-chip { background: rgb(0 0 0 / .35); border-color: rgb(255 255 255 / .5); color: #fff; }
a.placex-chip:hover { color: #fff; border-color: #fff; }
.placex-back { color: rgb(255 255 255 / .9); display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.placex-back:hover { color: #fff; }
.placex-editor { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

.placex-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; margin-top: 24px; align-items: start; }
.placex-main .section { padding-top: clamp(32px, 4vw, 48px); }
.placex-main .section .h2 { margin-bottom: 14px; }
.placex-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.placex-stats .card { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.placex-stats b { font-size: 19px; font-weight: 700; }
.placex-stats span { font-size: 13px; color: var(--c-text-2); display: inline-flex; align-items: center; gap: 4px; }
.placex-coords { cursor: pointer; font: inherit; color: var(--c-text); }
.placex-coords:hover { border-color: var(--c-primary); }
.placex-text { font-family: var(--font-serif); font-size: 18px; line-height: 1.65; }
.grid.placex-routes { --cols: 2; --gap: 12px; }
.placex-routes .list-row { padding: 12px; }
.placex-routes img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; }
.placex-routes b { display: block; }

.placex-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--header-h) + 16px); }
.placex-mapcard { overflow: hidden; }
.placex-map { position: relative; height: 240px; }
.placex-canvas { position: absolute; inset: 0; background: var(--c-surface-2); }
.placex-mapbtns { padding: 14px; flex-wrap: nowrap; }
.placex-mapbtns .btn-primary { flex-grow: 1; justify-content: center; }
.placex-box .h3 { font: 700 17px/1.3 var(--font-ui); margin-bottom: 10px; }
.placex-towns { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.placex-towns li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--c-outline); font-size: 15px; }
.placex-towns li:first-child { border-top: 0; }
.placex-towns li span a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; }
.placex-box .list-row { padding: 8px 0; }
.placex-box .list-row b { display: block; font-size: 14px; }
.placex-ad { padding: 0; }

@media (max-width: 1100px) {
  .placex-grid { grid-template-columns: 1fr; }
  .placex-side { position: static; }
}
@media (max-width: 700px) {
  .placex-hero { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .grid.placex-routes { --cols: 1; }
  .placex-actions { width: 100%; }
  .placex-actions .btn { flex-grow: 1; justify-content: center; }
}
@media (max-width: 560px) {
  .placex-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .placex-stats .card { padding: 14px; }
  .placex-stats b { font-size: 16px; }
}

/* ---- editing a place (Map/editplace.htm) ---- */
.editx-map { height: 380px; }
.editx-tools { margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.rte { border: 1px solid var(--c-outline-strong); border-radius: var(--r-m); background: var(--c-surface); overflow: hidden; }
.rte:focus-within { border-color: var(--c-primary); box-shadow: var(--focus); }
.rte-bar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--c-outline); background: var(--c-surface-2); }
.rte-bar button { width: 34px; height: 32px; border: 0; border-radius: 8px; background: none; color: var(--c-text); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rte-bar button:hover { background: var(--c-surface); }
.rte-area { min-height: 180px; max-height: 480px; overflow-y: auto; padding: 12px 14px; outline: none; }