/**
 * PlayGuitar v3 blog — single-post extras.
 * Conditionally enqueued by inc/enqueue.php on is_single() when present.
 * Scope: in-content building blocks for multi-video "hub" posts
 * (e.g. /easy-guitar-licks/) — inline video facades + tab figures.
 * The hero video facade itself stays in main.css (.hero-video).
 */

/* ── Inline video facade (one per lick) ──────────────────────────────────── */
/* Reset the browser's default <figure> margin (1em 40px) — the 40px side
   indent would misalign the player; the figure wrapper also keeps wpautop
   from wrapping the <button> in a stray <p>. */
.lick-video-wrap { margin: 0 0 var(--space-3, 0.75rem); }
.lick-video {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	margin: 0 0 var(--space-3, 0.75rem);
	border: 0;
	padding: 0;
	display: block;
	overflow: hidden;
	border-radius: var(--radius-md, 10px);
	background: var(--ink-body, #1a1a1a);
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.12));
	cursor: pointer;
}
.lick-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lick-video::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.45) 100%);
	pointer-events: none;
}
.lick-video .lick-video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	transition: transform var(--transition-fast, 150ms ease);
}
.lick-video:hover .lick-video-play { transform: translate(-50%, -50%) scale(1.05); }
.lick-video .lick-video-play svg { width: 28px; height: 28px; fill: var(--ink-body, #1a1a1a); }
.lick-video.is-playing { cursor: default; }
.lick-video.is-playing::after,
.lick-video.is-playing .lick-video-play { display: none; }
.lick-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Tab figure (the printable guitar tab under each lick) ────────────────── */
.lick-tab { margin: 0 0 var(--space-8, 2.5rem); }
.lick-tab img {
	width: 100%;
	height: auto;
	display: block;
	background: #fff;
	border: 1px solid var(--border-subtle, #e6e6e6);
	border-radius: var(--radius-sm, 6px);
	padding: var(--space-2, 0.5rem);
}

/* Two-part tabs (e.g. the descending-major run) sit snug together. */
.lick-tab + .lick-tab { margin-top: calc(-1 * var(--space-6, 1.5rem)); }

/* Bonus-lick audio reference */
.lick-audio { width: 100%; margin: var(--space-2, 0.5rem) 0 var(--space-8, 2.5rem); display: block; }