/* TatSeek Quickview v2.1 (2026-09-29) — see js/tatseek-quickview.js */
html.tqv-lock, html.tqv-lock body { overflow: hidden !important; }
.tqv { position: fixed; inset: 0; z-index: 1300; display: none; --tqv-w: min(560px, 92vw); --tqv-h: min(86vh, 780px); --tqv-info: 340px; }
.tqv.is-open { display: block; }
.tqv-backdrop { position: absolute; inset: 0; background: rgba(12, 12, 12, .9); opacity: 0; transition: opacity .2s ease; }
.tqv.is-visible .tqv-backdrop { opacity: 1; }
.tqv-track { position: absolute; inset: 0; overflow: hidden; touch-action: pan-y; }
.tqv-track.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* Panel (tablet default: photo on top, info below) */
.tqv-panel {
	position: absolute; left: 50%; top: 50%; width: var(--tqv-w); max-height: calc(100vh - 40px);
	overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
	background: #fff; border-radius: 12px; box-shadow: 0 12px 48px rgba(0, 0, 0, .45);
	transition: transform .3s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; will-change: transform; opacity: 0;
}
.tqv.is-visible .tqv-panel { opacity: 1; }
.tqv.is-visible .tqv-panel.is-side { opacity: .42; cursor: pointer; overflow: hidden; background: transparent; box-shadow: none; }
.tqv-panel.is-side .tqv-info { display: none; }
.tqv-panel.is-side:hover { opacity: .6; }
.tqv.no-anim .tqv-panel, .tqv-track.is-dragging .tqv-panel, .tqv-reduced .tqv-panel { transition: none; }
.tqv.is-swiping .tqv-panel { overflow: hidden; }

/* Stage: fixed frame by photo shape (vertical 1.318 / square / horizontal),
   blurred cover background fills any letterbox, sharp image on top. */
.tqv-stage { position: relative; overflow: hidden; background: #0d0d0d; width: 100%; height: min(calc(var(--tqv-w) * var(--fr, 1.318)), 58vh); border-radius: 12px 12px 0 0; }
.tqv-panel.is-side .tqv-stage { border-radius: 12px; }
.tqv-stage img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tqv-bg { object-fit: cover; transform: scale(1.2); filter: blur(24px) brightness(.62) saturate(1.1); }
.tqv-low { object-fit: contain; transition: opacity .2s ease; }
.tqv-hq { object-fit: contain; opacity: 0; transition: opacity .2s ease; }
.tqv-stage.hq-ready .tqv-hq { opacity: 1; }
.tqv-panel.is-fill .tqv-low, .tqv-panel.is-fill .tqv-hq { object-fit: cover; }
.tqv-stage.hq-ready .tqv-low { opacity: 0; }

.tqv-info { padding: 16px 18px 20px; color: #111; font-size: 14px; line-height: 1.45; }
.tqv-title { font-size: 19px; line-height: 1.25; font-weight: 700; margin: 0 0 8px; }
.tqv-title a { color: inherit; text-decoration: none; }
.tqv-people { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; }
.tqv-person { display: inline-flex; align-items: center; gap: 7px; color: #111; text-decoration: none; font-weight: 600; font-size: 13px; }
.tqv-person-studio { color: #666; font-weight: 500; }
.tqv-person img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.tqv-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.tqv-chips .tatseek-pin-chip { font-size: 12px; }
.tqv-facts { margin: 0 0 6px; color: #333; font-size: 13px; font-weight: 600; }
.tqv-facts span { margin: 0 7px; color: #bbb; font-weight: 400; }
.tqv-desc { margin: 0 0 12px; color: #666; font-size: 13px; }
.tqv-skel i { display: block; height: 10px; margin: 6px 0; border-radius: 5px; background: linear-gradient(90deg, #eee, #f6f6f6, #eee); background-size: 200% 100%; animation: tqvsh 1.1s linear infinite; }
.tqv-skel i:first-child { width: 55%; } .tqv-skel i:last-child { width: 85%; }
@keyframes tqvsh { to { background-position: -200% 0; } }
.tqv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 12px 0 0; }
.tqv-full { display: inline-block; background: #111; color: #fff !important; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; }
.tqv-full:hover { background: #333; }
.tqv-more { color: #111; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.tqv-related { margin: 16px 0 0; }
.tqv-related-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #888; margin: 0 0 8px; }
.tqv-related-title a { color: #111; text-decoration: none; }
.tqv-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tqv-related-grid a { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: #f0f0f0; }
.tqv-related-grid img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .25s ease; }
.tqv-related-grid.is-ready img { opacity: 1; }

.tqv-btn { position: fixed; z-index: 3; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #111; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.tqv-close { top: 16px; right: 16px; width: 42px; height: 42px; border-radius: 50%; font-size: 26px; line-height: 1; }
.tqv-arrow { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; font-size: 30px; line-height: 1; padding-bottom: 3px; }
.tqv-prev { left: 20px; } .tqv-next { right: 20px; }
.tqv-arrow[hidden] { display: none; }
.tqv-hint { display: none; }

/* Desktop >=1024: photo | info side by side, sized to fit the screen. */
@media (min-width: 1024px) {
	.tqv-panel { display: flex; width: auto; height: var(--tqv-h); max-height: none; overflow: hidden; }
	.tqv-stage { flex: 0 0 auto; height: 100%; width: calc(var(--tqv-h) / var(--fr, 1.318)); max-width: calc(94vw - var(--tqv-info)); border-radius: 12px 0 0 12px; }
	.tqv-info { flex: 0 0 var(--tqv-info); width: var(--tqv-info); height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 24px; box-sizing: border-box; }
	.tqv-title { font-size: 21px; }
	.tqv-related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phones: card view (like tablet) -- 24px side margins, neighbours peek at the edges. */
@media (max-width: 767px) {
	.tqv { --tqv-w: calc(100vw - 48px); }
	.tqv-panel { max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); touch-action: pan-y; }
	.tqv.is-visible .tqv-panel.is-side { opacity: .5; }
	.tqv-stage { height: min(calc(var(--tqv-w) * var(--fr, 1.318)), 56vh); }
	.tqv-arrow { display: none; }
	.tqv-close { top: 12px; right: 12px; width: 38px; height: 38px; }
	.tqv-info { padding: 14px 16px 18px; }
	.tqv-title { font-size: 18px; }
	.tqv-hint { display: flex; position: fixed; left: 50%; bottom: 16px; z-index: 3; transform: translate(-50%, 8px); align-items: center; gap: 8px;
		padding: 6px 14px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: rgba(255, 255, 255, .85); font-size: 12px; letter-spacing: .03em;
		opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
	.tqv-hint span { font-size: 16px; line-height: 1; animation: tqvnudge 1.2s ease-in-out infinite; }
	.tqv-hint span:last-child { animation-direction: reverse; }
	.tqv-hint.is-on { opacity: 1; transform: translate(-50%, 0); }
}
/* Small phones (narrow or short screens): full-screen slides. */
@media (max-width: 359px), (max-width: 767px) and (max-height: 599px) {
	.tqv { --tqv-w: 100vw; }
	.tqv-panel { left: 0; top: 0; width: 100vw; height: 100%; max-height: 100%; border-radius: 0; box-shadow: none; }
	.tqv.is-visible .tqv-panel.is-side { opacity: 1; background: #fff; }
	.tqv-panel.is-side .tqv-info { display: block; }
	.tqv-stage, .tqv-panel.is-side .tqv-stage { height: min(calc(100vw * var(--fr, 1.318)), 72vh); border-radius: 0; }
	.tqv-close { top: 10px; right: 10px; background: rgba(0, 0, 0, .55); color: #fff; }
	.tqv-info { padding: 14px 16px 28px; }
}
@keyframes tqvnudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }