/* /landmarks/ gallery. Builds on account.css tokens + pages/guides.css. */

.tpl-filter { max-width: 420px; margin: 0 0 18px; }
.tpl-filter .form-control { background: var(--tpa-card); border-color: var(--tpa-line); color: #fff; }

.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tpl-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.tpl-card[hidden] { display: none; }
.tpl-thumb {
    all: unset; cursor: pointer; display: block; aspect-ratio: 4 / 3; position: relative;
    background: radial-gradient(120% 90% at 50% 20%, #2a3346 0%, #141821 70%);
    border-bottom: 1px solid var(--tpa-line);
}
.tpl-thumb:focus-visible { outline: 2px solid var(--tpa-accent); outline-offset: -2px; }
.tpl-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tpl-thumb-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.6rem; color: rgba(255, 255, 255, 0.15); }
.tpl-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.tpl-body h2 { font-size: 1.02rem; font-weight: 650; margin: 0 0 2px; }
.tpl-where { font-size: 0.82rem; color: rgba(255, 255, 255, 0.6); margin: 0 0 4px; }
.tpl-facts { font-size: 0.78rem; color: rgba(255, 255, 255, 0.5); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.tpl-blurb { font-size: 0.86rem; color: rgba(255, 255, 255, 0.78); margin: 0 0 12px; flex: 1; }
.tpl-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-empty { color: rgba(255, 255, 255, 0.6); margin-top: 12px; }

/* 3D viewer dialog */
.tpl-viewer {
    width: min(1040px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0;
    background: var(--tpa-card); color: #fff; border: 1px solid var(--tpa-line); border-radius: 16px;
}
.tpl-viewer::backdrop { background: rgba(0, 0, 0, 0.7); }
.tpl-v-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--tpa-line); }
.tpl-v-head h2 { font-size: 1.15rem; margin: 0; }
.tpl-v-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
.tpl-v-stage { position: relative; min-height: 440px; background: radial-gradient(120% 90% at 50% 20%, #2a3346 0%, #141821 70%); }
.tpl-v-stage canvas { display: block; width: 100% !important; height: 100% !important; position: absolute; inset: 0; touch-action: none; }
.tpl-v-hint { position: absolute; left: 12px; bottom: 10px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.45); z-index: 1; pointer-events: none; }
.tpl-v-side { padding: 16px 18px; border-left: 1px solid var(--tpa-line); overflow-y: auto; }
.tpl-v-dims { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 0.85rem; margin: 14px 0 16px; }
.tpl-v-dims dt { color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.tpl-v-dims dd { margin: 0; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    .tpl-v-body { grid-template-columns: 1fr; }
    .tpl-v-stage { min-height: 300px; }
    .tpl-v-side { border-left: 0; border-top: 1px solid var(--tpa-line); }
    .tpl-viewer { max-height: calc(100vh - 16px); width: calc(100vw - 16px); overflow-y: auto; }
}

/* filter chips as buttons */
.tpl-filter { max-width: none; }
.tpl-filter .form-control { max-width: 420px; }
button.tpp-chip { cursor: pointer; }
.tpp-chip.active { border-color: var(--tpa-accent); background: rgba(255, 143, 31, 0.15); }
.tpl-body h2 a { color: #fff !important; text-decoration: none !important; }
.tpl-body h2 a:hover { color: var(--tpa-accent) !important; }
a.tpl-thumb { display: block; }

/* landmark page */
.tpl-hero-img {
    all: unset; cursor: pointer; display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden;
    border: 1px solid var(--tpa-line); background: radial-gradient(120% 90% at 50% 20%, #2a3346 0%, #141821 70%);
}
.tpl-hero-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tpl-hero-img:focus-visible { outline: 2px solid var(--tpa-accent); }
.tpl-hero-badge { position: absolute; right: 12px; bottom: 12px; padding: 5px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: rgba(10, 10, 10, 0.75); color: #fff; }
.tpl-grid-sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tpl-mini { text-decoration: none !important; color: #fff !important; }
.tpl-mini .tpl-body { padding: 8px 10px 10px; gap: 2px; }
.tpl-mini strong { font-size: 0.88rem; }
.tpl-mini:hover { border-color: rgba(255, 143, 31, 0.5); }