/* ============================================================
   Peek by Soren — peek-modal.css
   Scoped to .peek-* — will not conflict with Cornerstone/ACF.
   ============================================================ */

:root {
	--peek-accent:          #2563eb;
	--peek-bg:              #ffffff;
	--peek-overlay-bg:      rgba(0, 0, 0, 0.55);
	--peek-panel-width:     420px;
	--peek-radius:          12px;
	--peek-shadow:          0 8px 40px rgba(0, 0, 0, 0.22);
	--peek-font:            inherit;
	--peek-transition:      0.28s cubic-bezier(0.4, 0, 0.2, 1);
	--peek-text:            #1a1a1a;
	--peek-text-muted:      #6b7280;
	--peek-border:          #e5e7eb;
	--peek-image-radius:    6px;
	/* Button style — overridden per-element via inline style from the shortcode */
	--peek-btn-bg:          var(--peek-accent);
	--peek-btn-color:       #ffffff;
	--peek-btn-radius:      6px;
}

/* ── Trigger button ─────────────────────────────────────────── */

.peek-trigger {
	display:          inline-flex;
	align-items:      center;
	gap:              6px;
	padding:          8px 18px;
	background:       var(--peek-btn-bg);
	color:            var(--peek-btn-color);
	font-family:      var(--peek-font);
	font-size:        0.875rem;
	font-weight:      600;
	line-height:      1;
	border:           none;
	border-radius:    var(--peek-btn-radius);
	cursor:           pointer;
	transition:       opacity var(--peek-transition), transform 0.12s ease;
	text-decoration:  none;
}

.peek-trigger:hover {
	opacity: 0.88;
}

.peek-trigger:active {
	transform: scale(0.97);
}

.peek-trigger[aria-busy="true"] {
	opacity: 0.65;
	cursor:  wait;
}

/* ── Overlay backdrop ───────────────────────────────────────── */

.peek-overlay {
	position:   fixed;
	inset:      0;
	z-index:    99990;
	display:    flex;
	background: var(--peek-overlay-bg);
	opacity:    0;
	transition: opacity var(--peek-transition);
}

.peek-overlay--right {
	justify-content: flex-end;
	align-items:     stretch;
}

.peek-overlay--center {
	justify-content: center;
	align-items:     center;
}

.peek-overlay--visible {
	opacity: 1;
}

/* ── Panel ──────────────────────────────────────────────────── */

.peek-panel {
	position:         relative;
	background:       var(--peek-bg);
	font-family:      var(--peek-font);
	color:            var(--peek-text);
	display:          flex;
	flex-direction:   column;
	overflow-y:       auto;
	-webkit-overflow-scrolling: touch;
	transition:       transform var(--peek-transition);
	box-shadow:       var(--peek-shadow);
}

/* Right slide-in */
.peek-overlay--right .peek-panel {
	width:         var(--peek-panel-width);
	max-width:     100vw;
	height:        100%;
	align-self:    stretch;
	border-radius: var(--peek-radius) 0 0 var(--peek-radius);
	transform:     translateX(100%);
}

.peek-overlay--right .peek-panel--visible {
	transform: translateX(0);
}

/* Centered overlay */
.peek-overlay--center .peek-panel {
	width:         var(--peek-panel-width);
	max-width:     calc(100vw - 32px);
	max-height:    90vh;
	border-radius: var(--peek-radius);
	transform:     translateY(20px) scale(0.97);
	opacity:       0;
	transition:    transform var(--peek-transition), opacity var(--peek-transition);
}

.peek-overlay--center .peek-panel--visible {
	transform: translateY(0) scale(1);
	opacity:   1;
}

/* ── Close button ───────────────────────────────────────────── */

.peek-close {
	position:         absolute;
	top:              14px;
	right:            14px;
	z-index:          1;
	display:          flex;
	align-items:      center;
	justify-content:  center;
	width:            36px;
	height:           36px;
	background:       rgba(255,255,255,0.85);
	backdrop-filter:  blur(4px);
	border:           1px solid var(--peek-border);
	border-radius:    50%;
	cursor:           pointer;
	color:            var(--peek-text);
	transition:       background 0.15s ease, color 0.15s ease;
	flex-shrink:      0;
}

.peek-close:hover {
	background: var(--peek-accent);
	color:      #fff;
	border-color: var(--peek-accent);
}

/* ── Hero image (full-bleed container above content) ────────── */

.peek-hero {
	width:       100%;
	height:      220px;
	flex-shrink: 0;
	overflow:    hidden;
}

.peek-image {
	display:      block;
	width:        100%;
	height:       100%;
	object-fit:   cover;
	object-position: top center;
}

/* ── Content area ───────────────────────────────────────────── */

.peek-content {
	padding:        24px;
	display:        flex;
	flex-direction: column;
	gap:            16px;
	flex:           1;
}

/* ── Title ──────────────────────────────────────────────────── */

.peek-title {
	margin:      0;
	font-size:   1.25rem;
	font-weight: 700;
	line-height: 1.3;
	color:       var(--peek-text);
}

/* ── Description ────────────────────────────────────────────── */

.peek-desc {
	margin:      0;
	font-size:   0.9375rem;
	line-height: 1.6;
	color:       var(--peek-text-muted);
}

/* ── Extra fields ───────────────────────────────────────────── */

.peek-fields {
	margin:        0;
	padding:       0;
	border-top:    1px solid var(--peek-border);
	border-bottom: 1px solid var(--peek-border);
	display:       flex;
	flex-direction: column;
	gap:           0;
}

.peek-field-row {
	display:        flex;
	gap:            12px;
	padding:        10px 0;
	border-bottom:  1px solid var(--peek-border);
}

.peek-field-row:last-child {
	border-bottom: none;
}

.peek-fields dt {
	font-size:   0.8125rem;
	font-weight: 600;
	color:       var(--peek-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	min-width:   100px;
	flex-shrink: 0;
	padding-top: 1px;
}

.peek-fields dd {
	margin:      0;
	font-size:   0.9375rem;
	line-height: 1.5;
	color:       var(--peek-text);
}

/* ── CTA button ─────────────────────────────────────────────── */

.peek-cta {
	display:         block;
	padding:         12px 20px;
	background:      var(--peek-accent);
	color:           #fff;
	font-size:       0.9375rem;
	font-weight:     600;
	line-height:     1;
	text-align:      center;
	text-decoration: none;
	border-radius:   8px;
	transition:      opacity var(--peek-transition);
	margin-top:      auto;
}

.peek-cta:hover {
	opacity: 0.88;
	color:   #fff;
}

/* ── WordPress admin bar offset ─────────────────────────────── */
/*
   The WP admin bar is position:fixed at z-index:99999, above our overlay
   (99990). We shift the overlay top down so the panel starts beneath it.
   WP adds .admin-bar to <body> whenever the bar is visible.
   Heights: 32px on desktop, 46px at ≤782px, hidden (0) at ≤600px.
*/

body.admin-bar .peek-overlay {
	top: 32px;
}

@media screen and ( max-width: 782px ) {
	body.admin-bar .peek-overlay {
		top: 46px;
	}
}

@media screen and ( max-width: 600px ) {
	/* WP hides the admin bar below 600px — reset overlay to viewport top */
	body.admin-bar .peek-overlay {
		top: 0;
	}
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
	.peek-overlay--right .peek-panel,
	.peek-overlay--center .peek-panel {
		width:         100%;
		max-width:     100%;
		border-radius: var(--peek-radius) var(--peek-radius) 0 0;
	}

	.peek-overlay--right {
		align-items: flex-end;
	}

	.peek-overlay--center {
		align-items: flex-end;
	}

	.peek-overlay--right .peek-panel {
		height:     auto;
		max-height: 92vh;
		transform:  translateY(100%);
	}

	.peek-overlay--right .peek-panel--visible {
		transform: translateY(0);
	}

	.peek-overlay--center .peek-panel {
		max-height: 92vh;
		transform:  translateY(100%);
		opacity:    1;
	}

	.peek-overlay--center .peek-panel--visible {
		transform: translateY(0);
	}

}