/* ==========================================================================
   Behind the Photo block — frontend styles
   ========================================================================== */

.pscott-btp {
	position: relative; /* Anchor for the absolutely-positioned tab */
	display: block;
	margin: 0 0 1.5em;
	width: fit-content;
	max-width: 100%;
	overflow: hidden; /* Clip behind-panel content that exceeds the photo dimensions */
}

/* theme's .fj-body-inner > figure rule (specificity 0,1,1) beats .pscott-btp
   (0,1,0) and forces width:100%. Match its specificity so our rule wins.
   display:block overrides parent theme's .alignleft { display:inline } —
   inline elements don't create containing blocks, breaking position:absolute
   children in Safari (which follows spec; Chrome allows it non-conformantly). */
.fj-body-inner > figure.pscott-btp {
	width: fit-content;
	display: block;
}

/* Alignment — text wraps around the floated block */
.pscott-btp.alignleft {
	float: left;
	margin: 0 1.5em 1em 0;
}

.pscott-btp.alignright {
	float: right;
	margin: 0 0 1em 1.5em;
}

.pscott-btp.aligncenter {
	margin-left: auto;
	margin-right: auto;
}

/* Photo panel must stay in normal flow even when hidden so it continues to
   drive the figure's dimensions. visibility:hidden keeps it in layout without
   showing it. */
.pscott-btp__panel[data-pscott-btp-panel="photo"][hidden] {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

/* Behind panel is position:absolute so display:none is layout-safe — it never
   drives the figure size regardless. display:none is required here (not just
   visibility:hidden) because iOS Safari composites <video> elements on a
   separate GPU layer that ignores visibility:hidden from a parent, causing the
   video to render visibly over the toggle button even while "hidden". */
.pscott-btp__panel[data-pscott-btp-panel="behind"][hidden] {
	display: none;
}

/* "Behind" panel is always absolutely positioned so it never drives the figure
   size — the photo panel in normal flow is the sole source of truth for width
   and height. The panel overlays the photo at exactly the same position. */
.pscott-btp__panel[data-pscott-btp-panel="behind"] {
	position: absolute;
	inset: 0; /* geometric stretch — works correctly in Safari fit-content containers */
	overflow: hidden; /* clip video/caption that extends below the photo's height */
}

/* Video fills the full width of the overlay panel, overriding any inline width
   WordPress may inject on the element. */
.pscott-btp__panel[data-pscott-btp-panel="behind"] video {
	width: 100% !important;
	height: auto;
}

.pscott-btp__panel img,
.pscott-btp__panel video {
	display: block;
	max-width: 100%;
	height: auto;
}

.pscott-btp__caption {
	/* Match the regular image block caption — same values as
	   .fj-body-inner > figure figcaption in style.css:1033 */
	margin: 0 auto 0;
	padding: 0 24px;
	text-align: center;
	font-size: 0.875rem;
	font-style: italic;
	color: #888;
	line-height: 1.5;
}

.pscott-btp__toggle {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Tab sits flush with the top-right corner of the image.
	   No top or right border — those edges are at the image boundary.
	   Left + bottom border + bottom-left radius give the tab its shape. */
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	border-right: none;
	border-radius: 0 0 0 5px;
	padding: 7px 13px 7px 11px;
	font-family: inherit;
	font-size: 0.78em;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #555;
	cursor: pointer;
	line-height: 1;
	transition: background 0.15s ease, color 0.15s ease;
}

.pscott-btp__toggle:hover {
	background: #f4f4f4;
	color: #222;
}

/* Override kirki.min.css `figure svg { width: 100%; height: 100%; }` which
   stretches this SVG icon to fill the full button width. */
.pscott-btp__toggle svg {
	width: 13px !important;
	height: 13px !important;
	max-width: 13px !important;
	flex-shrink: 0;
}

/* Attention pulse — plays 3 times when the button scrolls into view, then stops.
   Triggered by JS adding .pscott-btp--pulse to the figure via IntersectionObserver.
   Skipped entirely for users who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	@keyframes pscott-btp-nudge {
		0%, 100% { transform: scale(1);    box-shadow: none; }
		50%      { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
	}

	.pscott-btp--pulse .pscott-btp__toggle {
		animation: pscott-btp-nudge 0.65s ease-in-out 0.3s 3;
	}
}


/* ==========================================================================
   Behind the Photo block — editor styles
   ========================================================================== */

/* Empty state shown before any images are selected */
.pscott-btp-editor {
	border: 1px dashed rgba( 0, 0, 0, 0.2 );
	border-radius: 2px;
	padding: 16px;
}

.pscott-btp-editor__note {
	font-size: 12px;
	color: #757575;
	font-style: italic;
	margin: 0;
	text-align: center;
}

/* Sidebar panel labels and action buttons */
.pscott-btp-editor__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #757575;
	margin: 0 0 8px;
}

.pscott-btp-editor__actions {
	display: flex;
	gap: 8px;
}

/* Placeholder shown in the block area when one slot has no image yet */
.pscott-btp-editor__placeholder {
	padding: 24px;
	background: #f0f0f0;
	color: #757575;
	font-size: 12px;
	text-align: center;
}