/**
 * Bunny Reactions — Ranking Widgets CSS
 * Version: 0.4.0
 *
 * Covers three layouts: horizontal | compact | list
 * All selectors scoped under .br-ranking to avoid theme conflicts.
 * Uses CSS custom properties for easy theming — override on .br-ranking.
 *
 * @package BunnyReactions
 */

/* ── Design tokens ───────────────────────────────────────────────────────── */

.br-ranking {
	--br-rk-gap:          12px;
	--br-rk-radius:       10px;
	--br-rk-radius-sm:    6px;
	--br-rk-thumb-w:      80px;   /* horizontal layout thumbnail width */
	--br-rk-thumb-h:      80px;   /* horizontal layout thumbnail height */
	--br-rk-compact-w:    56px;
	--br-rk-compact-h:    56px;
	--br-rk-accent:       #6c47ff;
	--br-rk-accent-light: #ede9ff;
	--br-rk-text:         #1a1a2e;
	--br-rk-muted:        #6b7280;
	--br-rk-border:       #e5e7eb;
	--br-rk-bg:           #ffffff;
	--br-rk-bg-hover:     #f9f8ff;
	--br-rk-shadow:       0 2px 10px rgba(108,71,255,0.07);
	--br-rk-speed:        0.16s;

	font-family: inherit;
	color: var(--br-rk-text);
}

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

.br-ranking__title {
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--br-rk-muted);
	margin: 0 0 10px;
}

/* ── List reset ──────────────────────────────────────────────────────────── */

.br-ranking__list {
	list-style:  none;
	margin:      0;
	padding:     0;
	display:     flex;
	flex-direction: column;
	gap:         var(--br-rk-gap);
}

/* ── Item base ───────────────────────────────────────────────────────────── */

.br-ranking__item {
	display:     flex;
	align-items: stretch;
	background:  var(--br-rk-bg);
	border:      1px solid var(--br-rk-border);
	border-radius: var(--br-rk-radius);
	overflow:    hidden;
	transition:  box-shadow var(--br-rk-speed) ease,
	             transform  var(--br-rk-speed) ease;
}

.br-ranking__item:hover {
	box-shadow: var(--br-rk-shadow);
	transform:  translateY(-1px);
}

/* ── Thumbnail ───────────────────────────────────────────────────────────── */

.br-ranking__thumb {
	display:        block;
	flex-shrink:    0;
	width:          var(--br-rk-thumb-w);
	overflow:       hidden;
	background:     var(--br-rk-accent-light);
	text-decoration: none;
}

.br-ranking__thumb img {
	display:     block;
	width:       100%;
	height:      100%;
	object-fit:  cover;
	transition:  transform 0.3s ease;
}

.br-ranking__item:hover .br-ranking__thumb img {
	transform: scale(1.04);
}

.br-ranking__thumb--empty {
	min-height: var(--br-rk-thumb-h);
}

/* ── Body ────────────────────────────────────────────────────────────────── */

.br-ranking__body {
	display:        flex;
	flex-direction: column;
	justify-content: center;
	padding:        10px 14px;
	min-width:      0; /* allow text-overflow to work */
	flex:           1;
}

/* ── Post title link ─────────────────────────────────────────────────────── */

.br-ranking__post-title {
	display:         block;
	font-size:       0.9rem;
	font-weight:     600;
	line-height:     1.35;
	color:           var(--br-rk-text);
	text-decoration: none;
	overflow:        hidden;
	text-overflow:   ellipsis;
	/* clamp to 2 lines */
	display:         -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.br-ranking__post-title:hover {
	color:           var(--br-rk-accent);
	text-decoration: underline;
}

/* ── Meta line ───────────────────────────────────────────────────────────── */

.br-ranking__meta {
	display:   flex;
	flex-wrap: wrap;
	gap:       6px;
	margin:    5px 0 0;
	padding:   0;
	font-size: 0.72rem;
	color:     var(--br-rk-muted);
}

.br-ranking__meta-item {
	display:       inline-flex;
	align-items:   center;
}

.br-ranking__reactions {
	color:       var(--br-rk-accent);
	font-weight: 600;
}

.br-ranking__rank {
	background:    var(--br-rk-accent-light);
	color:         var(--br-rk-accent);
	font-weight:   700;
	font-size:     0.68rem;
	padding:       1px 6px;
	border-radius: 20px;
}

/* ==========================================================================
   LAYOUT: stacked (default — was 'horizontal' before this release)
   Cards stack vertically, thumb on the left side of each card.
   ========================================================================== */

.br-ranking--stacked .br-ranking__thumb {
	width:      var(--br-rk-thumb-w);
	min-height: var(--br-rk-thumb-h);
}

/* ==========================================================================
   LAYOUT: horizontal — true row-scroll
   Cards sit side-by-side in a scrollable row.
   Fully self-contained: never leaks overflow to the page body.
   Overlay arrows appear on wrapper :hover via pure CSS.
   ========================================================================== */

/*
   CONTAINMENT: the wrapper clips everything, never bleeds into body width.
   min-width:0 on flex/grid children prevents intrinsic-size growth.
*/
.br-ranking--horizontal {
	position:   relative;    /* anchor for overlay arrows */
	width:      100%;
	min-width:  0;
	max-width:  100%;
	overflow:   hidden !important;      /* hard clip — scroll lives only on the inner list */
	box-sizing: border-box;
}

/* The scrollable track */
.br-ranking--horizontal .br-ranking__list {
	display:                     flex;
	flex-direction:              row;        /* horizontal — overrides base column */
	flex-wrap:                   nowrap;
	gap:                         var(--br-rk-gap);
	overflow-x:                  hidden;
	overflow-y:                  visible;
	scroll-snap-type:            x mandatory;
	-webkit-overflow-scrolling:  touch;
	scroll-padding-inline-start: var(--br-rk-gap);
	padding-bottom:              4px;        /* thin gap for scrollbar on desktop */
	width:                       100%;
	min-width:                   0;
	box-sizing:                  border-box;
	/* visually thin scrollbar, functional */
	scrollbar-width:             thin;
	scrollbar-color:             var(--br-rk-border) transparent;
}

.br-ranking--horizontal .br-ranking__list::-webkit-scrollbar       { height: 3px; }
.br-ranking--horizontal .br-ranking__list::-webkit-scrollbar-track  { background: transparent; }
.br-ranking--horizontal .br-ranking__list::-webkit-scrollbar-thumb  { background: var(--br-rk-border); border-radius: 2px; }

/* Each card */
.br-ranking--horizontal .br-ranking__item {
	scroll-snap-align: start;
	flex:              0 0 240px;   /* fixed width, no grow/shrink */
	min-width:         0;           /* prevent content blowing card wider */
	flex-direction:    column;
	min-height:        200px;
}

.br-ranking--horizontal .br-ranking__thumb {
	width:      100%;
	height:     150px;
	min-height: unset;
	flex-shrink: 0;
}

.br-ranking--horizontal .br-ranking__body {
	padding:         12px;
	justify-content: flex-start;
	min-width:       0;   /* so text-overflow works inside a flex child */
}

.br-ranking--horizontal .br-ranking__post-title {
	-webkit-line-clamp: 3;
}

/* ── Overlay arrow zones — pure CSS, no JS for visibility ───────────────── */
/*
   Strategy:
   - .br-rk-nav is always in the DOM (rendered by PHP).
   - Each button is a full-height zone anchored to its edge.
   - Opacity is 0 by default; the :hover on the WRAPPER triggers them.
   - JS still calls scrollBy(); CSS handles all visibility.
*/

.br-rk-nav {
	/* Absolute container anchored to the wrapper — no display:contents */
	position: absolute;
	top:      0;
	bottom:   0;
	left:     0;
	right:    0;
	z-index:  10;
	pointer-events: none; /* container transparent — only buttons catch clicks */
}

.br-rk-nav__btn {
	/* Full-height overlay zone, positioned inside .br-rk-nav */
	position:        absolute;
	top:             0;
	bottom:          0;
	z-index:         1;
	width:           56px;
	border:          none;
	cursor:          pointer;
	-webkit-appearance: none;
	appearance:      none;
	/* Arrow glyph */
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-size:       22px;
	font-weight:     300;
	color:           #fff;
	text-shadow:     0 1px 4px rgba(0,0,0,0.5);
	/* Reveal on wrapper hover */
	opacity:         0;
	pointer-events:  none;
	transition:      opacity 0.22s ease, transform 0.22s ease;
}

/* Prev: left edge with right-to-transparent gradient */
.br-rk-nav__btn--prev {
	left:       0;
	background: linear-gradient(
		to right,
		rgba(15, 10, 30, 0.72) 0%,
		rgba(15, 10, 30, 0.0) 100%
	);
	transform:  translateX(-6px);
}

/* Next: right edge with left-to-transparent gradient */
.br-rk-nav__btn--next {
	right:      0;
	background: linear-gradient(
		to left,
		rgba(15, 10, 30, 0.72) 0%,
		rgba(15, 10, 30, 0.0) 100%
	);
	transform:  translateX(6px);
}

/* Appear on wrapper hover (touch devices get them on tap-focus via :focus-within) */
.br-ranking--horizontal:hover .br-rk-nav__btn--prev,
.br-ranking--horizontal:hover .br-rk-nav__btn--next,
.br-ranking--horizontal:focus-within .br-rk-nav__btn--prev,
.br-ranking--horizontal:focus-within .br-rk-nav__btn--next {
	opacity:        1;
	pointer-events: auto; /* re-enable clicks through the transparent nav container */
	transform:      translateX(0);
}

/* Disabled: JS sets disabled attribute, CSS dims the button */
.br-rk-nav__btn:disabled {
	opacity:        0.15 !important;
	cursor:         default;
	pointer-events: none;
}

/* Dark mode: lighter gradient over dark backgrounds */
@media (prefers-color-scheme: dark) {
	.br-rk-nav__btn--prev {
		background: linear-gradient(
			to right,
			rgba(0, 0, 0, 0.80) 0%,
			rgba(0, 0, 0, 0.0) 100%
		);
	}
	.br-rk-nav__btn--next {
		background: linear-gradient(
			to left,
			rgba(0, 0, 0, 0.80) 0%,
			rgba(0, 0, 0, 0.0) 100%
		);
	}
}

/* ==========================================================================
   LAYOUT: compact
   Smaller thumbnails, tighter padding. Good for narrow sidebars.
   ========================================================================== */

.br-ranking--compact {
	--br-rk-thumb-w:  var(--br-rk-compact-w);
	--br-rk-thumb-h:  var(--br-rk-compact-h);
	--br-rk-gap:      8px;
}

.br-ranking--compact .br-ranking__body {
	padding: 8px 10px;
}

.br-ranking--compact .br-ranking__post-title {
	font-size: 0.82rem;
	-webkit-line-clamp: 2;
}

/* ==========================================================================
   LAYOUT: list
   No thumbnail, text-only, maximum density.
   ========================================================================== */

.br-ranking--list .br-ranking__item {
	border-radius: var(--br-rk-radius-sm);
	border-left:   3px solid var(--br-rk-accent);
}

.br-ranking--list .br-ranking__thumb {
	display: none; /* hide thumb in list mode regardless of show_thumb setting */
}

.br-ranking--list .br-ranking__body {
	padding: 8px 12px;
}

.br-ranking--list .br-ranking__post-title {
	font-size:          0.85rem;
	-webkit-line-clamp: 1; /* single line in list mode */
}

/* ==========================================================================
   Empty state
   ========================================================================== */

.br-ranking--empty {
	padding:       16px;
	border:        1px dashed var(--br-rk-border);
	border-radius: var(--br-rk-radius);
}

.br-ranking__empty-msg {
	font-size: 0.85rem;
	color:     var(--br-rk-muted);
	margin:    4px 0 0;
}

/* ==========================================================================
   Dark mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	.br-ranking {
		--br-rk-text:         #f0f0f0;
		--br-rk-muted:        #9ca3af;
		--br-rk-border:       #2d2d3a;
		--br-rk-bg:           #1c1c2e;
		--br-rk-bg-hover:     #22223a;
		--br-rk-accent-light: rgba(108,71,255,0.15);
		--br-rk-shadow:       0 2px 10px rgba(0,0,0,0.3);
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.br-ranking__item,
	.br-ranking__thumb img {
		transition: none !important;
		animation:  none !important;
	}

	.br-ranking__item:hover { transform: none; }
}

/* ==========================================================================
   Responsive — tighten on small viewports
   ========================================================================== */

@media (max-width: 480px) {
	.br-ranking {
		--br-rk-thumb-w: 64px;
		--br-rk-thumb-h: 64px;
		--br-rk-gap:     8px;
	}

	.br-ranking__body { padding: 8px 10px; }
	.br-ranking__post-title { font-size: 0.85rem; }

	/* Horizontal row-scroll: narrower cards on mobile so partial next card peeks */
	.br-ranking--horizontal .br-ranking__list {
		grid-auto-columns: 200px;
	}

	.br-ranking--horizontal .br-ranking__item {
		width: 200px;
	}

	.br-ranking--horizontal .br-ranking__thumb {
		height: 120px;
	}
}