/* ============================================================
   HIMBODIED PAN - look of the multi-photo grid shot (hb-pan.js, single-gridshot.php)
   Minimal on purpose, like the sitewide lightbox: bare thin arrows, soft shadow, gold on hover.
   Sections: page frame, viewer, Related and comments (the same look as under a photoset, photoset.css).
   ============================================================ */

/* ---------- page frame: one centred column. The site header is hidden here; a small "Gallery" link (as on a photoset) replaces it ---------- */
body.hb-pan-page #masthead { display: none; }
body.hb-pan-page.single #content { padding-top: 0; }   /* the theme leaves room there (body:not(.page-id-1008) #content) for the floating header */
.ast-container > .hb-photo-page.hb-photo-page--pan, .hb-photo-page.hb-photo-page--pan { max-width: 720px; padding: 72px 16px 56px; }
.hb-pan-back { position: fixed; z-index: 20; top: 18px; left: 16px; font: 700 12px/1 Lato, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-eyebrow, #bdbdbd); text-decoration: none; transition: color .3s ease; }
body.admin-bar .hb-pan-back { top: 50px; }
@media (max-width: 782px) { body.admin-bar .hb-pan-back { top: 64px; } }
.hb-pan-back:hover, .hb-pan-back:focus-visible { color: var(--hb-gold, #bf9b30); }

/* ---------- viewer ---------- */
.hb-pan { width: 100%; margin: 0 auto; }
.hb-pan__frame { position: relative; width: min(100%, max(320px, calc(100vh - 150px))); aspect-ratio: 1 / 1; margin: 0 auto; overflow: hidden; background: #050505; cursor: grab; user-select: none; -webkit-user-select: none; outline: none; }
.hb-pan.is-live .hb-pan__frame { touch-action: none; }
.hb-pan__frame:focus-visible { box-shadow: 0 0 0 2px #0b0b0b, 0 0 0 3px #f5f5f5; }
.hb-pan__frame.is-moving { cursor: grabbing; }
.hb-pan__world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; will-change: transform; }
.hb-pan__cell { position: absolute; width: calc(100% + 1px); height: calc(100% + 1px); }
.hb-pan__cell img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; max-height: none; }

.hb-pan__hints { position: absolute; inset: 0; pointer-events: none; transition: opacity .2s; }
.hb-pan__frame.is-moving .hb-pan__hints { opacity: 0; }
.hb-pan__hint { position: absolute; pointer-events: auto; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #fff; cursor: pointer; opacity: .7; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .8)); transition: color .15s, opacity .15s; animation: hb-pan-nudge 2s ease-in-out infinite; }
.hb-pan__hint[hidden] { display: none; }
.hb-pan__hint svg { width: 22px; height: 22px; transform: rotate(var(--rot)); display: block; }
.hb-pan__hint:hover, .hb-pan__hint:focus-visible { opacity: 1; color: #d4af37; background: none; }
.hb-pan__hint:focus-visible { outline: 1px solid rgba(255, 255, 255, .85); outline-offset: -6px; }
.hb-pan__hint[data-d="N"] { top: 4px; left: 50%; margin-left: -22px; }
.hb-pan__hint[data-d="S"] { bottom: 4px; left: 50%; margin-left: -22px; }
.hb-pan__hint[data-d="W"] { left: 4px; top: 50%; margin-top: -22px; }
.hb-pan__hint[data-d="E"] { right: 4px; top: 50%; margin-top: -22px; }
.hb-pan__hint[data-d="NW"] { top: 4px; left: 4px; }
.hb-pan__hint[data-d="NE"] { top: 4px; right: 4px; }
.hb-pan__hint[data-d="SW"] { bottom: 4px; left: 4px; }
.hb-pan__hint[data-d="SE"] { bottom: 4px; right: 4px; }
@keyframes hb-pan-nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(calc(var(--dx) * 3px), calc(var(--dy) * 3px)); } }

.hb-pan__map { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; justify-content: end; width: min(100%, max(320px, calc(100vh - 150px))); margin: 10px auto 0; opacity: .6; }   /* under the photo's right corner; hb-pan.js sets the columns to the part of the board in use */
.hb-pan__map i { display: block; width: 6px; height: 6px; border: 1px solid #444; }
.hb-pan__map i.f { border-color: #555; background: #555; }
.hb-pan__map i.cur { border-color: #bdbdbd; background: #bdbdbd; }
.hb-pan__map:empty { display: none; }
.hb-pan noscript img { display: block; width: 100%; height: auto; margin: 0 0 15px; }

@media (prefers-reduced-motion: reduce) { .hb-pan__hint { animation: none; } .hb-pan__hints { transition: none; } }

/* ---------- Related and comments (copied from photoset.css so both kinds of page look alike) ---------- */
.hb-pan-related, .hb-pan-comments { margin-top: 48px; padding-top: 15px; border-top: 1px solid rgba(255, 255, 255, .14); text-align: left; }
.hb-pan-related h3, .hb-pan-comments h3 { margin: 0 0 15px; font: 700 12px/1 Lato, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--hb-eyebrow, #bdbdbd); }
.hb-pan-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.hb-pan-related__item { display: block; color: var(--hb-muted, #a0a0a0); text-decoration: none; transition: color .3s ease; }
.hb-pan-related__item:hover { color: #fff; }
.hb-pan-related__thumb { display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 6px; background: #111; }
.hb-pan-related__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.hb-pan-related__item:hover img { transform: scale(1.03); }
.hb-pan-related__title { display: block; font: 400 14px/1.3 Lato, sans-serif; }

.hb-pan-comments, .hb-pan-comments a { color: var(--hb-body, #c4c4c4); }
.hb-pan-comments .comments-title { display: none; }
.hb-pan-comments ol, .hb-pan-comments ul { list-style: none; margin: 0; padding: 0; }
.hb-pan-comments .ast-comment { padding: 10px 0; border: 0; }
.hb-pan-comments .ast-comment-time, .hb-pan-comments .ast-comment-time * { font-size: 14px; color: var(--hb-note, #a0a0a0); }
.hb-pan-comments .comment-respond { margin-top: 20px; }
.hb-pan-comments label { font-size: 14px; color: var(--hb-note, #a0a0a0); }
.hb-pan-comments input[type="text"], .hb-pan-comments input[type="email"], .hb-pan-comments input[type="url"], .hb-pan-comments textarea { width: 100%; background: transparent; color: #eee; border: 1px solid var(--hb-field, rgba(255, 255, 255, .22)); border-radius: 0; }
.hb-pan-comments .comment-form .submit, .hb-pan-comments input[type="submit"], .hb-pan-comments button[type="submit"] { background: transparent !important; color: #fff !important; border: 1px solid #fff !important; border-radius: 0 !important; font: 700 12px/1 Lato, sans-serif !important; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .3s ease, border-color .3s ease; }
.hb-pan-comments .comment-form .submit:hover, .hb-pan-comments input[type="submit"]:hover, .hb-pan-comments button[type="submit"]:hover { color: var(--hb-gold, #bf9b30) !important; border-color: var(--hb-gold, #bf9b30) !important; }