/**
 * News Flashes sidebar component styles (מבזקים).
 *
 * Desktop: vertical scroll list (Figma node 259-11744).
 * Mobile:  horizontal carousel with arrows (Figma node 546-15095).
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Container
   ========================================================================== */

.hm-flashes {
	display: flex;
	flex-direction: column;
	border-radius: var(--hm-radius-xl);
	overflow: clip;
	background-color: var(--hm-color-bg-alt);
	height: 500px;
}

/* ==========================================================================
   Desktop Header — red banner with title + dot
   ========================================================================== */

.hm-flashes__header {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	background-color: var(--hm-color-accent);
	padding-block: 4px;
}

.hm-flashes__title-wrap {
	position: relative;
	display: inline-flex;
	align-items: flex-end;
}

.hm-flashes__title {
	font-family: var(--hm-font-primary);
	font-weight: 900;
	font-size: 32px;
	line-height: 1;
	color: var(--hm-color-primary);
	white-space: nowrap;
	text-box-trim: both;
	text-box-edge: cap alphabetic;
}

/* Dot — same positioning as .hm-navbar__breaking-dot in header.css */
.hm-flashes__title-dot {
	position: absolute;
	top: 2px;
	inset-inline-start: -6px;
	pointer-events: none;
}

/* ==========================================================================
   Mobile Title Row — standalone, no banner (hidden on desktop)
   ========================================================================== */

.hm-flashes__title-row {
	display: none;
}

/* ==========================================================================
   Scrollable Body
   ========================================================================== */

.hm-flashes__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding-inline: 14px;
	padding-block-end: 16px;

	/* Custom scrollbar — thin, dark thumb on light track */
	scrollbar-width: thin;
	scrollbar-color: var(--hm-color-primary) #ececec;
}

/* WebKit scrollbar fallback — explicit thumb/track ensures visibility */
.hm-flashes__body::-webkit-scrollbar {
	width: 6px;
}

.hm-flashes__body::-webkit-scrollbar-track {
	background: #ececec;
	border-radius: 3px;
}

.hm-flashes__body::-webkit-scrollbar-thumb {
	background-color: var(--hm-color-primary);
	border-radius: 3px;
}

/* ==========================================================================
   Item List
   ========================================================================== */

.hm-flashes__list {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-block-start: 14px;
}

/* ==========================================================================
   Single Item Card
   ========================================================================== */

.hm-flashes__item {
	background-color: var(--hm-color-bg-alt);
	border: 0.5px solid rgba(33, 33, 33, 0.25);
	border-radius: 10px;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

/* ---------- Item Header (dot + time + share) ---------- */

.hm-flashes__item-header {
	display: flex;
	align-items: center;
	gap: 5px;
}

.hm-flashes__item-dot {
	flex-shrink: 0;
}

.hm-flashes__item-time {
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 10px;
	line-height: 18px;
	color: var(--hm-color-accent);
	white-space: nowrap;
}

/* Share button — pushed to the left (flex-end in RTL) via margin-inline-start: auto */
.hm-flashes__item-share {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 12px;
	margin-inline-start: auto;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--hm-color-primary);
	transition: opacity var(--hm-transition-fast);
}

.hm-flashes__item-share:hover {
	opacity: 0.6;
}

.hm-flashes__item-share svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------- Item Title ---------- */

.hm-flashes__item-title {
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 14px;
	line-height: 21px;
	color: #191730;
	text-decoration: none;
	text-align: start;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	transition: color var(--hm-transition-fast);
}

.hm-flashes__item-title:hover {
	color: var(--hm-color-accent);
}

/* ==========================================================================
   Loading / Infinite Scroll (desktop only)
   ========================================================================== */

.hm-flashes__sentinel {
	height: 1px;
	flex-shrink: 0;
}

.hm-flashes__loader {
	display: flex;
	justify-content: center;
	padding: 14px 0;
}

.hm-flashes__loader[hidden] {
	display: none;
}

.hm-flashes__spinner {
	width: 24px;
	height: 24px;
	border: 2px solid #ececec;
	border-top-color: var(--hm-color-accent);
	border-radius: 50%;
	animation: hm-flashes-spin 0.6s linear infinite;
}

@keyframes hm-flashes-spin {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Carousel Navigation Arrows (hidden on desktop)
   ========================================================================== */

.hm-flashes__nav {
	display: none;
}

.hm-flashes__nav-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	line-height: 0;
	transition: opacity var(--hm-transition-fast);
}

.hm-flashes__nav-btn:hover {
	opacity: 0.8;
}

/* "next" arrow points left (<) in RTL — flip the > SVG */
.hm-flashes__nav-btn[data-dir="next"] svg {
	transform: scaleX(-1);
}

/* ==========================================================================
   Share "Copied" Tooltip
   ========================================================================== */

.hm-flashes__copied {
	position: absolute;
	inset-inline-end: 0;
	top: -24px;
	font-family: var(--hm-font-primary);
	font-weight: 300;
	font-size: 11px;
	line-height: 1;
	color: var(--hm-color-bg-alt);
	background-color: var(--hm-color-primary);
	padding: 4px 8px;
	border-radius: var(--hm-radius-sm);
	white-space: nowrap;
	pointer-events: none;
	animation: hm-copied-fade 1.5s ease forwards;
}

@keyframes hm-copied-fade {
	0%, 70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* ==========================================================================
   Responsive — Mobile / Tablet (< 1350px): Horizontal Carousel
   ========================================================================== */

@media (max-width: 1349px) {

	/* Container: transparent bg, no radius, no fixed height */
	.hm-flashes {
		background-color: transparent;
		border-radius: 0;
		overflow: visible;
		height: auto;
		gap: 11px;
		padding-block: 40px;
	}

	/* Hide desktop red header */
	.hm-flashes__header {
		display: none;
	}

	/* Show mobile title row — right-aligned in RTL */
	.hm-flashes__title-row {
		display: flex;
		align-items: center;
		gap: 5px;
		align-self: flex-start; /* right in RTL */
	}

	/* Mobile dot: inline, not absolute */
	.hm-flashes__title-dot--mobile {
		position: static;
	}

	/* Body: horizontal scroll, hidden scrollbar */
	.hm-flashes__body {
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0;
		flex: none;
		min-height: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		max-width: 100%;

		/* Hide scrollbar */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.hm-flashes__body::-webkit-scrollbar {
		display: none;
	}

	/* List: horizontal row — max-content forces it wider than container so scrolling works */
	.hm-flashes__list {
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 15px;
		padding-block-start: 0;
		width: max-content;
	}

	/* Cards: fixed dimensions for carousel */
	.hm-flashes__item {
		flex-shrink: 0;
		width: 290px;
		min-width: 290px;
		height: 134px;
		scroll-snap-align: start;
	}

	/* Title fills remaining card height */
	.hm-flashes__item-title {
		flex: 1;
		min-height: 0;
		font-size: 16px;
	}

	/* Hide infinite scroll elements on mobile */
	.hm-flashes__sentinel,
	.hm-flashes__loader {
		display: none;
	}

	/* Show carousel navigation arrows */
	.hm-flashes__nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}
}

/* Tablet height override no longer needed (carousel is auto-height) */

/* ==========================================================================
   Responsive — Desktop (1350px+)
   ========================================================================== */

@media (min-width: 1350px) {
	.hm-flashes {
		height: auto;
		flex: 3 1 734px;
		min-height: 300px;
	}
}