/*
 * Catalog page-flip slider (single-pt_catalog.php's pager), driven by
 * Swiper.js (enqueued in functions.php alongside catalog-slider.js).
 * Replaces the old plain flexbox image strip — same data source
 * (get_attached_media() attachments), just a proper carousel with
 * fullscreen zoom for reading small flyer text.
 */

.pt-catalog-slider {
	width: 100%;
	max-width: 750px;
	margin: 0 0 1.5rem;
	background: #fff;
	border-radius: var( --pt-radius-card );
	box-shadow: var( --pt-shadow-card );
	position: relative;
	overflow: hidden;
	contain: layout;
}

@media ( max-width: 767px ) {
	.pt-catalog-slider {
		border-radius: 8px;
	}
}

.pt-catalog-swiper {
	width: 100%;
}

.pt-catalog-swiper .swiper-slide {
	height: auto !important;
	background: var( --pt-color-bg-soft );
}

.pt-catalog-slide-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	cursor: zoom-in;
}

.pt-catalog-slider-expand {
	/* button reset — was a <div>, now a real <button> for keyboard/screen
	   reader access */
	border: none;
	font: inherit;
	appearance: none;
	position: absolute;
	top: 15px;
	right: 15px;
	width: 44px;
	height: 44px;
	background: rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	cursor: pointer;
	box-shadow: var( --pt-shadow-card );
	transition: transform 0.2s, background 0.2s;
	color: var( --pt-color-text );
}

.pt-catalog-slider-expand:hover {
	transform: scale( 1.05 );
	background: #fff;
}

.pt-catalog-slider-nav {
	background: rgba( 255, 255, 255, 0.9 );
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	box-shadow: var( --pt-shadow-card );
	color: var( --pt-color-text ) !important;
	transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.2s, box-shadow 0.2s !important;
}

.pt-catalog-slider-nav:hover {
	background: #fff;
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.15 );
}

.pt-catalog-slider-nav:after {
	font-size: 18px !important;
	font-weight: bold;
}

.pt-catalog-slider-nav.is-hidden {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.pt-catalog-slider-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	background: var( --pt-color-bg-soft );
	border-top: 1px solid var( --pt-color-border );
}

.pt-catalog-slider-counter {
	font-weight: 600;
	color: var( --pt-color-text );
	background: #fff;
	padding: 4px 12px;
	border-radius: var( --pt-radius-pill );
	font-size: 0.85rem;
	box-shadow: 0 2px 5px rgba( 0, 0, 0, 0.05 );
}

.pt-catalog-slider-pagination .swiper-pagination {
	position: relative !important;
	text-align: left;
}

/* Fullscreen reading mode */
.pt-catalog-slider.is-fullscreen {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw !important;
	/* 100vh on mobile Safari/Chrome includes the space behind the
	   collapsible address bar, so the overlay ends up taller than what's
	   actually visible (header/close button pushed off-screen). 100dvh
	   tracks the real visible viewport; vh stays first as the fallback for
	   browsers that don't support dvh yet. */
	height: 100vh !important;
	height: 100dvh !important;
	max-width: none !important;
	border-radius: 0 !important;
	background: rgba( 15, 15, 15, 0.98 ) !important;
	z-index: 999999 !important;
	margin: 0 !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Swipe-down-to-close (catalog-slider.js) — dragging applies transform/
   opacity directly as inline styles every touchmove frame, so the CSS
   transition above (meant for the snap-back-or-close animation once the
   finger lifts) needs to be off while a frame-by-frame drag is happening,
   or it fights the drag and lags behind the finger. */
.pt-catalog-slider.is-fullscreen.is-dragging-close {
	transition: none;
}

.pt-catalog-slider.is-fullscreen .pt-catalog-slider-expand,
.pt-catalog-slider.is-fullscreen .pt-catalog-slider-footer {
	display: none;
}

.pt-catalog-slider.is-fullscreen .pt-catalog-swiper {
	height: calc( 100% - 70px ) !important;
	margin-top: 70px;
}

/* .has-thumbs is only present when there's a thumbnail strip to show (2+
   pages — see single-pt_catalog.php) — a single-page flyer has no strip in
   the DOM at all, so reserving space for it unconditionally would leave a
   dead gap at the bottom. */
.pt-catalog-slider.is-fullscreen.has-thumbs .pt-catalog-swiper {
	height: calc( 100% - 70px - 78px ) !important;
}

/* Swiper's autoHeight (used for the in-page card, where each slide's
   height matches its own image) leaves the wrapper's height as an inline
   px value sized for the ~750px-wide card. Entering fullscreen doesn't
   change that value in time for the first paint, which used to show the
   first page squeezed into the old card-sized band instead of centered in
   the full viewport. Fullscreen has its own fixed layout (flex-centered
   slide, no autoHeight involved), so just override the wrapper outright
   instead of racing Swiper's recalculation. */
.pt-catalog-slider.is-fullscreen .swiper-wrapper {
	height: 100% !important;
}

.pt-catalog-slider.is-fullscreen .swiper-slide {
	height: 100% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.pt-catalog-slider.is-fullscreen .pt-catalog-slide-img {
	width: auto !important;
	max-width: 100% !important;
	max-height: calc( 100vh - 70px ) !important;
	max-height: calc( 100dvh - 70px ) !important;
	height: auto !important;
	cursor: grab;
}

.pt-catalog-slider.is-fullscreen.has-thumbs .pt-catalog-slide-img {
	max-height: calc( 100vh - 70px - 78px ) !important;
	max-height: calc( 100dvh - 70px - 78px ) !important;
}

.pt-catalog-slider-fs-header {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	padding: 0 30px;
	box-sizing: border-box;
	z-index: 1000000;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient( to bottom, rgba( 0, 0, 0, 0.8 ) 0%, rgba( 0, 0, 0, 0 ) 100% );
}

.pt-catalog-slider.is-fullscreen .pt-catalog-slider-fs-header {
	display: flex;
}

.pt-catalog-slider-fs-counter {
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	letter-spacing: 1px;
}

.pt-catalog-slider-fs-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.pt-catalog-slider-fs-share,
.pt-catalog-slider-fs-close {
	/* button reset — both were <div>s originally */
	border: none;
	background: none;
	font: inherit;
	appearance: none;
	padding: 0;
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s, color 0.2s;
	display: flex;
	align-items: center;
}

.pt-catalog-slider-fs-close:hover {
	color: var( --pt-color-up );
	transform: rotate( 90deg );
}

.pt-catalog-slider-fs-share:hover {
	color: var( --pt-color-up );
	transform: scale( 1.1 );
}

/* Brief confirmation after copying the share link to the clipboard (no
   Web Share API on that device/browser) — same "flash a state, don't pop a
   toast" pattern as the admin catalog list's own copy-link button. */
.pt-catalog-slider-fs-share.is-copied {
	color: var( --pt-color-up );
}

/*
 * Page thumbnail strip — quick jump to any page while reading, instead of
 * swiping one at a time. Only rendered in the DOM when there are 2+ pages
 * (single-pt_catalog.php), and only actually shown once in fullscreen —
 * the compact in-page card already has dot pagination + a counter, which
 * is enough at that size; thumbnails earn their space once you're actually
 * reading and want to jump ahead. Synced to the main slider via Swiper's
 * thumbs module (catalog-slider.js).
 */
.pt-catalog-thumbs-wrap {
	/* Never display:none — Swiper measures real slide widths at
	   construction time for slidesPerView:'auto', and a hidden (display:none)
	   container reports 0 for all of them, which left the thumbs Swiper
	   instance with zero registered slides even though the markup was
	   there. position:absolute already keeps it out of the compact card's
	   layout, so hiding it via opacity/visibility instead costs nothing and
	   lets Swiper measure it correctly from the start. */
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 78px;
	box-sizing: border-box;
	padding: 12px 20px;
	z-index: 1000000;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.8 ) 0%, rgba( 0, 0, 0, 0 ) 100% );
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.pt-catalog-slider.is-fullscreen .pt-catalog-thumbs-wrap {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.pt-catalog-thumbs {
	width: 100%;
	height: 100%;
}

.pt-catalog-thumb-slide {
	width: 42px !important;
	height: 100% !important;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	opacity: 0.55;
	cursor: pointer;
	border: 2px solid transparent;
	box-sizing: border-box;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.pt-catalog-thumb-slide.swiper-slide-thumb-active {
	opacity: 1;
	border-color: #fff;
}

.pt-catalog-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pt-catalog-thumb-num {
	position: absolute;
	bottom: 2px;
	right: 3px;
	color: #fff;
	font-size: 0.6rem;
	font-weight: 700;
	text-shadow: 0 1px 2px rgba( 0, 0, 0, 0.8 );
}

@media ( max-width: 767px ) {
	.pt-catalog-slider-expand {
		top: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
	}

	.pt-catalog-slider-fs-header {
		padding: 0 15px;
	}

	.pt-catalog-slider-fs-actions {
		gap: 14px;
	}

	.pt-catalog-slider.is-fullscreen .pt-catalog-slide-img {
		width: 100% !important;
		max-height: 85vh !important;
		max-height: 85dvh !important;
	}

	.pt-catalog-slider.is-fullscreen.has-thumbs .pt-catalog-slide-img {
		max-height: calc( 85vh - 78px ) !important;
		max-height: calc( 85dvh - 78px ) !important;
	}

	.pt-catalog-thumbs-wrap {
		padding: 10px 15px;
	}
}