/* Studio page. Loaded after pmd.css, which owns the tokens, bar, chips and placeholder. */

.st{padding:22px 20px 0}

/* Photo left, facts right. The mockup stacks them because it is drawing a 400px panel; on a
   1200px page stacking would push the address below the fold for no reason. */
.st-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
.st-media .pmd-ph{border:1px solid var(--line-soft)}

.st-info h1{font-size:clamp(26px,3.4vw,38px);margin:0 0 6px}
.st-where{margin:0 0 14px;color:var(--dim);font-size:15px}
.st-styles{margin:0 0 18px}
.st-desc{margin:0 0 22px;color:var(--dim);font-size:14.5px;line-height:1.65;max-width:62ch}

/* ---------- contact rows ---------- */
.st-contact{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:1px}
.st-contact li{
  display:flex;align-items:flex-start;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line-soft);font-size:14px;color:var(--ink);
}
.st-contact li:first-child{border-top:1px solid var(--line-soft)}
.st-ico{flex:0 0 17px;color:var(--faint);margin-top:2px;display:block}
.st-contact a{color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.st-contact a:hover{color:var(--pmd-red)}

.st-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.st-actions .pmd-btn{flex:1 1 auto;min-width:150px}

/* The honest replacement for the invented stats row: only facts this row actually carries. */
.st-meta{
  margin:0;padding-top:14px;border-top:1px solid var(--line-soft);
  color:var(--faint);font-size:12.5px;letter-spacing:.01em;
}

/* ---------- map ---------- */
.st-map-wrap{margin-top:44px}
.st-map{
  height:320px;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line-soft);background:var(--surface);
}
/* Same lift as the big map, for the same reason: CARTO dark renders land and water at nearly
   the same black, and a single pin on a void tells you nothing about where it is. */
.st-map .leaflet-tile-pane{filter:brightness(1.32)}
.st-map .leaflet-container{background:#0c0e11}
.st-pin span{
  display:block;width:14px;height:14px;border-radius:50%;
  background:var(--pmd-red);border:2px solid #0e0e12;
  box-shadow:0 0 0 3px rgba(237,28,36,.28);
}
.st-map-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

@media(max-width:860px){
  .st-top{grid-template-columns:1fr;gap:22px}
  .st-map{height:240px}
  .st-actions .pmd-btn{flex:1 1 100%}
}