/* Post Gallery Ads — front-end styles */

/* ---------- Thumbnail grid: [post_gallery_ads] ---------- */

.pga-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 12px;
	max-width: 1600px;
	margin: 0 auto;
}

.pga-thumb {
	display: block;
	line-height: 0;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, 0.1);
	transition: opacity 0.15s ease;
}

.pga-thumb:hover {
	opacity: 0.85;
}

.pga-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------- Standalone open-gallery link: [post_gallery_ads_link] ---------- */

.pga-open-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	font-size: 0.95rem;
}

.pga-open-link:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

/* ---------- Floating modal shell (injected by gallery.js) ---------- */

body.pga-modal-open {
	overflow: hidden;
}

.pga-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pga-modal[hidden] {
	display: none;
}

.pga-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
}

.pga-modal-panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(92vw, 900px);
	height: min(88vh, 900px);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.pga-modal-frame {
	flex: 1 1 auto;
	min-height: 0; /* let the iframe shrink inside the flex column instead of overflowing */
	width: 100%;
	border: 0;
}

/* Top exit bar — a fixed-height row above the iframe (not overlapping
   it), so it stays visible regardless of mobile browser chrome and never
   covers gallery content. */
.pga-modal-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 48px;
	padding: 6px 6px 6px 12px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	background: #fff;
}

.pga-modal-title {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	flex: 1 1 auto;
	min-width: 0; /* without this, a flex item won't shrink below its text's natural width, which is what was pushing it under the close button */
	padding: 6px 4px;
	border: 0;
	background: none;
	font-size: 0.9rem;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.pga-modal-title-text {
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.pga-modal-close {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.pga-modal-title:hover {
	background-color: rgba(0, 0, 0, 0.08);
	border-radius: 6px;
}

.pga-modal-close:hover {
	background-color: rgba(0, 0, 0, 0.12);
}

@media (max-width: 640px) {
	.pga-modal-panel {
		width: 100vw;
		height: 100vh;
		/* 100dvh reflects the *currently visible* viewport, so the bar
		   below stays above the browser's own address/tab bar instead of
		   being pushed underneath it. Falls back to 100vh above on
		   browsers that don't support dvh. */
		height: 100dvh;
		border-radius: 0;
	}

	.pga-modal-title {
		font-size: 0.78rem;
	}

	.pga-modal-close {
		width: 32px;
		height: 32px;
		font-size: 1.25rem;
	}
}

/* ---------- Slide viewer (rendered inside the modal iframe) ---------- */

.pga-gallery {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0;
	text-align: center;
	font-family: inherit;
	box-sizing: border-box;
}

.pga-gallery *,
.pga-gallery *::before,
.pga-gallery *::after {
	box-sizing: inherit;
}

.pga-title {
	font-size: 1.35rem;
	line-height: 1.3;
	margin: 0 0 16px;
	font-weight: 600;
}

.pga-image-wrap {
	line-height: 0;
}

.pga-image {
	display: inline-block;
	max-width: 100%;
	width: auto;
	height: auto;
	border-radius: 4px;
}

.pga-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
}

/* Extra separation above the nav row when the slide just shown was the
   in-feed ad — keeps Previous/Next away from the ad, per AdSense's
   accidental-click placement policy. Don't reduce this. */
.pga-nav--after-ad {
	margin-top: 44px;
}

.pga-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 16px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 6px;
	text-decoration: none;
	font-size: 0.95rem;
	color: inherit;
	white-space: nowrap;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.pga-nav-link:hover {
	background-color: rgba(0, 0, 0, 0.05);
}

/* Divider + the second, always-on ad slot below the nav. Carries its own
   top spacing so it stays clear of the Previous/Next links right above
   it — same accidental-click reasoning as .pga-nav--after-ad. */
.pga-static-ad-wrap {
	margin: 26px 0 0;
	padding: 20px 0 150px;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Hard cap so a responsive "auto"-format ad can't render arbitrarily
   tall (this has been observed rendering thousands of px high) — crops
   the creative rather than letting it dictate the page's scroll height.
   !important is necessary here: AdSense's own script sets an inline
   height (e.g. style="height:1591px") directly on the elements it
   creates inside the <ins> tag, which otherwise beats a plain class
   rule regardless of specificity. */
.pga-static-ad-wrap .pga-ad-code,
.pga-static-ad-wrap .pga-ad-code ins.adsbygoogle,
.pga-static-ad-wrap .pga-ad-code ins.adsbygoogle * {
	max-height: 350px !important;
	overflow: hidden !important;
}

.pga-ad-wrap {
	margin: 18px auto 0;
	padding: 26px 14px;
	border: 1px dashed rgba(0, 0, 0, 0.15);
	border-radius: 6px;
}

.pga-ad-label {
	display: block;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.5;
	margin-bottom: 14px;
}

.pga-ad-code {
	width: 100%;
	overflow: hidden;
}

.pga-empty {
	text-align: center;
	opacity: 0.6;
}

@media (max-width: 640px) {
	.pga-title {
		font-size: 1.1rem;
	}

	.pga-nav {
		gap: 8px;
	}

	.pga-nav-link {
		padding: 9px 10px;
		font-size: 0.82rem;
		gap: 3px;
		flex: 1 1 0;
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pga-nav-link,
	.pga-thumb {
		transition: none;
	}
}