/* 360° walk-through viewer (web/pages/pano/viewer.templ, static/js/pano.js).
   Kolam & Kovil dark surface: karungal-night page, malli text, kungumam info
   markers, manjal walk-to markers, zari focus. Plain CSS (no Tailwind build). */

html.pano-html, .pano-body { height: 100%; margin: 0; background: #171412; color: #F3EBDD; }
.pano-body { font-family: Inter, "Noto Sans Tamil", system-ui, sans-serif; overscroll-behavior: none; }
html[lang="ta"] .pano-body { font-family: "Noto Sans Tamil", Inter, system-ui, sans-serif; }
.pano-app { position: fixed; inset: 0; display: flex; flex-direction: column; }
.pano-app [hidden] { display: none !important; }

/* Header (hidden with ?embed=1) */
.pano-header { position: relative; display: flex; align-items: center; gap: .75rem; height: 52px; padding: 0 .75rem;
  padding-top: env(safe-area-inset-top); background: #171412; border-bottom: 3px solid transparent;
  border-image: repeating-linear-gradient(90deg, #B3261E 0 14px, #FFFDF6 14px 28px) 3; z-index: 10; flex-shrink: 0; }
.pano-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: #F3EBDD; }
.pano-back:hover, .pano-back:focus-visible { background: #3A332C; }
.pano-back svg { width: 22px; height: 22px; fill: currentColor; }
.pano-brand { display: inline-flex; align-items: center; gap: .4rem; color: #F2C14E; text-decoration: none; font-size: 1.15rem; }
.pano-all { color: #E4D8C4; font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.pano-all:hover { color: #fff; text-decoration: underline; }
.pano-header-spacer { flex: 1; }
@media (max-width: 480px) { .pano-brand .kv-brand { display: none; } }

/* Stage */
.pano-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #171412; }
.pano-canvas { position: absolute; inset: 0; outline: none; }
.pano-canvas:focus-visible { box-shadow: inset 0 0 0 3px #E3C565; }
.pano-canvas .pnlm-container, .pnlm-container { background: #171412; }
.pnlm-load-box, .pnlm-orientation-button { display: none !important; }
.pnlm-controls-container { left: auto !important; right: 12px; top: 12px !important; }
.pnlm-controls { background-color: rgba(255, 253, 246, .92); border-color: rgba(0, 0, 0, .3); }

.pano-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, #2B2622 0, #171412 70%); transition: opacity .3s; }
.pano-loading .kv-kolam-loader svg { width: 5rem; height: 5rem; }
.pano-loading .kv-kolam-loader-label { color: #D3C4AC; font-size: .9rem; }

.pano-fallback { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; background: #171412; }
.pano-fallback-msg { padding: 5.5rem 1rem .75rem; max-width: 40rem; }
.pano-fallback-title { font-weight: 700; color: #F2C14E; margin: 0 0 .25rem; }
.pano-fallback-msg p { margin: 0; font-size: .9rem; color: #D3C4AC; }
.pano-fallback-strip { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; }
.pano-fallback-strip img { height: 100%; max-height: 70vh; width: auto; display: block; }

/* Title card */
.pano-card { position: absolute; top: 12px; left: 12px; z-index: 3; max-width: 22rem; padding: .75rem 1rem .85rem;
  border-radius: 14px; background: rgba(23, 20, 18, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(243, 235, 221, .12); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
.pano-kicker { margin: 0; display: flex; align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; color: #E3C565; }
.pano-badge { display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: #B3261E; color: #fff; font-weight: 700; }
.pano-title { margin: .3rem 0 0; font-size: 1.15rem; line-height: 1.3; font-weight: 700; color: #FFFDF6; }
html[lang="ta"] .pano-title { font-family: Arima, "Noto Sans Tamil", sans-serif; }
.pano-desc { margin: .35rem 0 0; font-size: .85rem; line-height: 1.45; color: #D3C4AC;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pano-story { display: inline-block; margin-top: .45rem; font-size: .8rem; font-weight: 600; color: #FF8A7D; text-decoration: none; }
.pano-story:hover { text-decoration: underline; }
.pano-preview-badge { margin: .35rem 0 0; display: inline-block; font-size: .7rem; font-weight: 700; color: #3B2A14; background: #E0A526; padding: .1rem .5rem; border-radius: 6px; }

/* Toolbar: previous / next / motion */
.pano-toolbar { position: absolute; right: 12px; bottom: 44px; z-index: 3; display: flex; gap: .4rem; }
.pano-tool { min-width: 40px; height: 40px; padding: 0 .6rem; border-radius: 999px; border: 1px solid rgba(243, 235, 221, .25);
  background: rgba(23, 20, 18, .8); color: #FFFDF6; font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
.pano-tool:hover, .pano-tool:focus-visible { background: #B3261E; outline: none; }
.pano-tool[aria-pressed="true"] { background: #0F6B5C; }
.pano-tool svg { width: 18px; height: 18px; fill: currentColor; }
.pano-tool-wide { font-size: .8rem; font-weight: 600; }

/* Points of interest */
.pano-pois { position: absolute; right: 12px; top: 128px; z-index: 3; width: 17rem; max-height: calc(100% - 200px); overflow: auto;
  border-radius: 14px; background: rgba(23, 20, 18, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(243, 235, 221, .12); padding: .5rem; }
.pano-pois-title { margin: .1rem .35rem .35rem; font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #E3C565; }
.pano-poi-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.pano-poi { width: 100%; display: flex; align-items: flex-start; gap: .5rem; text-align: left; padding: .4rem .45rem; border-radius: 10px;
  border: 0; background: transparent; color: #F3EBDD; font: inherit; font-size: .8rem; line-height: 1.35; cursor: pointer; }
.pano-poi:hover, .pano-poi:focus-visible { background: #3A332C; outline: none; }
.pano-poi-num { flex-shrink: 0; width: 1.35rem; height: 1.35rem; border-radius: 999px; background: #B3261E; color: #fff; font-size: .7rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; }
.pano-poi-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Hotspot markers (Pannellum positions .pnlm-hotspot-base) */
.pano-hs { width: 34px; height: 34px; cursor: pointer; }
.pano-hs-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px;
  font: 700 16px/1 Georgia, serif; border: 2px solid #FFFDF6; box-shadow: 0 0 0 4px rgba(0, 0, 0, .25), 0 4px 12px rgba(0, 0, 0, .45);
  transition: transform .15s; }
.pano-hs-info .pano-hs-icon { background: #B3261E; color: #fff; font-style: italic; }
.pano-hs-link .pano-hs-icon { background: #E0A526; color: #2A1A05; font-family: system-ui, sans-serif; }
.pano-hs:hover .pano-hs-icon, .pano-hs:focus-visible .pano-hs-icon, .pano-hs-active .pano-hs-icon { transform: scale(1.18); }
.pano-hs:focus-visible { outline: none; }
.pano-hs:focus-visible .pano-hs-icon { box-shadow: 0 0 0 4px #E3C565; }
.pano-hs-label { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); width: max-content; max-width: 14rem;
  padding: .35rem .6rem; border-radius: 8px; background: rgba(23, 20, 18, .92); color: #FFFDF6; font: 500 12px/1.35 Inter, "Noto Sans Tamil", sans-serif;
  text-align: center; pointer-events: none; opacity: 0; transition: opacity .15s; }
.pano-hs:hover .pano-hs-label, .pano-hs:focus-visible .pano-hs-label { opacity: 1; }
.pano-hs-link .pano-hs-label { opacity: 1; background: rgba(23, 20, 18, .8); }

/* Hotspot text panel */
.pano-info { position: absolute; z-index: 6; left: 50%; bottom: 56px; transform: translateX(-50%); width: min(32rem, calc(100% - 24px));
  box-sizing: border-box; padding: .85rem 2.4rem .9rem 1rem; border-radius: 14px; background: #FFFDF6; color: #3A3633;
  border-left: 5px solid #B3261E; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.pano-info p { margin: 0; font-size: .92rem; line-height: 1.5; }
.pano-info-close { position: absolute; top: .35rem; right: .45rem; width: 30px; height: 30px; border: 0; border-radius: 999px;
  background: transparent; color: #5E5650; font-size: 1.3rem; cursor: pointer; }
.pano-info-close:hover, .pano-info-close:focus-visible { background: #E8DCC8; outline: none; }

/* Credit (always visible) */
.pano-credit { position: absolute; left: 8px; bottom: 8px; z-index: 3; margin: 0; max-width: calc(100% - 16px); box-sizing: border-box;
  padding: .2rem .55rem; border-radius: 6px; background: rgba(0, 0, 0, .62); color: #F3EBDD; font-size: 11px; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pano-credit a { color: #FFFDF6; text-decoration: underline; text-underline-offset: 2px; }
.pano-credit a:hover { color: #F2C14E; }
.pano-credit-label { color: #D3C4AC; }

/* Walk-through strip */
.pano-scenes { flex-shrink: 0; display: flex; gap: .5rem; overflow-x: auto; padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom));
  background: #171412; border-top: 1px solid #2B2622; scrollbar-width: thin; }
.pano-scene { flex: 0 0 auto; width: 132px; text-decoration: none; color: #D3C4AC; border-radius: 10px; padding: 3px; }
.pano-scene img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; background: #2B2622; }
.pano-scene span { display: block; margin-top: .25rem; font-size: .72rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pano-scene[aria-current="true"] { background: #E0A526; color: #2A1A05; }
.pano-scene:hover, .pano-scene:focus-visible { color: #FFFDF6; outline: 2px solid #E3C565; outline-offset: 1px; }

/* Phones */
@media (max-width: 640px) {
  .pano-card { top: 8px; left: 8px; right: 64px; max-width: none; padding: .55rem .75rem .65rem; }
  .pano-title { font-size: 1rem; }
  .pano-desc { -webkit-line-clamp: 2; font-size: .78rem; }
  .pano-pois { top: auto; bottom: 92px; left: 8px; right: 8px; width: auto; max-height: 26vh; padding: .35rem; }
  .pano-pois-title { display: none; }
  .pano-poi-list { grid-auto-flow: column; grid-auto-columns: minmax(11rem, 70%); overflow-x: auto; }
  .pano-toolbar { right: 8px; bottom: 40px; }
  .pano-info { bottom: 92px; }
  .pano-scene { width: 104px; }
  .pnlm-controls-container { right: 8px; top: 8px !important; }
}