/**
 * Nahnu Video, frontend styles.
 * Default: the embed is a plain iframe, no cover, no hover state, no
 * play icon of our own. Bunny's own player supplies all of that
 * natively. The one opt-in exception (Settings → Hover Preview) is a
 * thumbnail + silent preview clip + play button card, styled below,
 * the real iframe only replaces this on click (see hover-preview.js),
 * never layered on top of a live one.
 */

/* ===== Grid layout ===== */
.nahnu-video-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(var(--nahnu-cols, 3), 1fr);
}

/* Column counts come from inline custom properties set per-instance by
   Nahnu_Video_Render::render_grid() (--nahnu-cols, --nahnu-cols-tablet,
   --nahnu-cols-mobile), set once per shortcode/block, resolved from
   that instance's own attributes or the site-wide Settings defaults.
   The media queries below just pick which custom property is active
   at each breakpoint. */
@media (max-width: 782px) {
	.nahnu-video-grid { grid-template-columns: repeat(var(--nahnu-cols-tablet, var(--nahnu-cols, 3)), 1fr); }
}
@media (max-width: 480px) {
	.nahnu-video-grid { grid-template-columns: repeat(var(--nahnu-cols-mobile, var(--nahnu-cols-tablet, 1)), 1fr); }
}

.nahnu-video-grid-item { display: flex; flex-direction: column; }
.nahnu-video-caption {
	margin-top: 8px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: inherit;
}

.nahnu-video-empty,
.nahnu-video-not-found {
	color: #646970;
	font-size: 13px;
	font-style: italic;
}

/* ===== The embed itself: a small border-radius touch only, the box
   sizing (padding-top aspect ratio) and iframe fill are inline styles
   in the markup, matching the reference player exactly, so there's
   nothing to duplicate or conflict with here. ===== */
.nahnu-video-wrap {
	border-radius: 6px;
}

/* ===== Hover preview (opt-in, Settings → Hover Preview, off by
   default). Same technique as the reference plugin's own video-hero
   cards: a thumbnail image and a preview <video> both fill the box
   and crossfade via opacity, a centered play button sits on top, and
   none of these three elements is ever an iframe, the real iframe
   only exists after hover-preview.js swaps it in on click. ===== */
.nahnu-video-hover-cover,
.nahnu-video-hover-preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nahnu-video-hover-preview {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}
.nahnu-video-wrap.has-hover-preview:hover .nahnu-video-hover-preview {
	opacity: 1;
}
.nahnu-video-hover-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(14, 13, 18, 0.55);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
}
.nahnu-video-wrap.has-hover-preview:hover .nahnu-video-hover-play {
	transform: translate(-50%, -50%) scale(1.08);
	background: rgba(14, 13, 18, 0.7);
}

/* ===== Overlays: label + note, small corner badges that sit above
   the iframe without interfering with it ===== */
.nahnu-video-label {
	position: absolute;
	z-index: 2;
	background: #4a7c3f;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 3px 9px;
	border-radius: 3px;
	pointer-events: none;
}
.nahnu-video-label.pos-top-left { top: 8px; left: 8px; }
.nahnu-video-label.pos-top-right { top: 8px; right: 8px; }

.nahnu-video-note {
	position: absolute;
	z-index: 2;
	max-width: 78%;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
	font-size: 12px;
	line-height: 1.4;
	padding: 5px 10px;
	border-radius: 4px;
	pointer-events: none;
}
.nahnu-video-note.pos-top-left { top: 8px; left: 8px; }
.nahnu-video-note.pos-top-right { top: 8px; right: 8px; }
.nahnu-video-note.pos-bottom-left { bottom: 8px; left: 8px; }
.nahnu-video-note.pos-bottom-right { bottom: 8px; right: 8px; }
.nahnu-video-note.pos-bottom-banner {
	bottom: 0;
	left: 0;
	right: 0;
	max-width: none;
	border-radius: 0;
	text-align: center;
}

/* If both a label and a note are pinned to the same corner, stack the
   note below the label instead of overlapping it. */
.nahnu-video-wrap:has(.nahnu-video-label.pos-top-right) .nahnu-video-note.pos-top-right { top: 34px; }
.nahnu-video-wrap:has(.nahnu-video-label.pos-top-left) .nahnu-video-note.pos-top-left { top: 34px; }

/* ===== Playlist: one live main player, plus a click-to-switch
   thumbnail grid below it. The grid items are always plain <img>
   thumbnails, never their own iframe, only one live embed exists for
   the whole component at a time (see playlist.js), same principle as
   the click-to-load hover-preview cards above. ===== */
.nahnu-video-playlist { width: 100%; }

.nahnu-playlist-now-playing {
	margin-top: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.nahnu-playlist-grid {
	display: grid;
	gap: 12px;
	margin-top: 16px;
	grid-template-columns: repeat(var(--nahnu-cols, 3), 1fr);
}
@media (max-width: 782px) {
	.nahnu-playlist-grid { grid-template-columns: repeat(var(--nahnu-cols-tablet, var(--nahnu-cols, 3)), 1fr); }
}
@media (max-width: 480px) {
	.nahnu-playlist-grid { grid-template-columns: repeat(var(--nahnu-cols-mobile, var(--nahnu-cols-tablet, 1)), 1fr); }
}

.nahnu-playlist-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0;
	border: none;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.nahnu-playlist-item .nahnu-video-wrap {
	border-radius: 6px;
	overflow: hidden;
	background: #14131a;
	outline: 2px solid transparent;
	outline-offset: 2px;
	transition: outline-color 0.15s ease;
}
.nahnu-playlist-item:hover .nahnu-video-wrap {
	outline-color: #c3c4c7;
}
.nahnu-playlist-item.is-active .nahnu-video-wrap {
	outline-color: var(--nahnu-accent, #4a7c3f);
}
.nahnu-playlist-thumb {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.nahnu-playlist-duration {
	position: absolute;
	bottom: 6px;
	right: 6px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-size: 11px;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 3px;
}
.nahnu-playlist-item-title {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}
.nahnu-playlist-item.is-active .nahnu-playlist-item-title {
	color: var(--nahnu-accent, #4a7c3f);
}