/**
 * Homepage Stories Section — "סטוריז".
 *
 * Figma (1325px content, RTL):
 *   Header:  red dot + title (Black 32px) + underline — items-end, gap 15px
 *   Slider:  drag-only horizontal scroll, no arrows / no scrollbar.
 *            Track bleeds off the LEFT viewport edge (inline-end in RTL).
 *   Card:    155×238, radius 14, padding 16, bg image + dark gradient,
 *            white Bold 14/18 title + translucent duration pill at bottom.
 *
 * @package Hamechadesh
 */

/* ==========================================================================
   Section wrapper
   ========================================================================== */

.hm-stories {
	margin-top: var(--hm-space-section);
	content-visibility: auto;
	contain-intrinsic-size: auto 320px;
}

/* ==========================================================================
   Header — red dot + title + line  (mirrors .hm-catposts__header)
   Figma: flex row, gap 15px, items-end
   ========================================================================== */

.hm-stories__header {
	max-width: var(--hm-container-width);
	margin-inline: auto;
	display: flex;
	align-items: flex-end;
	gap: 15px;
	margin-bottom: 15px;
}

/* Red dot — first in DOM = rightmost in RTL */
.hm-stories__dot {
	flex-shrink: 0;
	align-self: center;
}

/* Title — Black 32px */
.hm-stories__title {
	font-family: var(--hm-font-primary);
	font-size: 32px;
	font-weight: 900;
	line-height: 1;
	color: var(--hm-color-primary);
	white-space: nowrap;
	flex-shrink: 0;
}

/* Underline — stretches to the left edge of the container */
.hm-stories__line {
	flex: 1;
	min-width: 0;
	border-bottom: 0.6px solid var(--hm-color-primary);
	opacity: 0.25;
	margin-bottom: 4px;
}

/* ==========================================================================
   Slider — drag-only, no arrows, no scrollbar
   Constrained to the page content width (1350px, centered). The track scrolls
   inside this box, so the last card is clipped exactly at the container's left
   edge — never bleeding past the page content width.
   ========================================================================== */

.hm-stories__slider {
	max-width: var(--hm-container-width);
	margin-inline: auto;
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* old Edge */
}

.hm-stories__slider::-webkit-scrollbar {
	display: none;               /* Chrome / Safari */
}

.hm-stories__slider.is-dragging {
	cursor: grabbing;
	user-select: none;
}

.hm-stories__track {
	display: flex;
	gap: 15px;
	width: max-content;
}

/* ==========================================================================
   Card — 155×238, image + gradient, title + duration pill
   ========================================================================== */

.hm-stories__card {
	position: relative;
	flex-shrink: 0;
	width: 165px;
	height: 270px;
	padding: 16px;
	border-radius: 14px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: flex-end;   /* content sits at the bottom */
	text-decoration: none;
	background-color: var(--hm-color-primary);
}

/* Background image */
.hm-stories__card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
	z-index: 0;
	-webkit-user-drag: none;
	user-select: none;
}

.hm-stories__card-img--placeholder {
	background-color: rgba(33, 33, 33, 0.12);
}

/* Hover-play video — created on demand by stories.js, sits over the poster
   (below the gradient + text). */
.hm-stories__card-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
	z-index: 0;
}

/* Dark gradient overlay — Figma: transparent at 49.028% → #212121 */
.hm-stories__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: linear-gradient(to bottom, rgba(33, 33, 33, 0) 49.028%, #212121 100%);
	z-index: 1;
	pointer-events: none;
}

/* Title — white Bold 14/18, right-aligned */
.hm-stories__card-title {
	position: relative;
	z-index: 2;
	width: 100%;
	font-family: var(--hm-font-primary);
	font-size: 14px;
	font-weight: 700;
	line-height: 18px;
	color: #ffffff;
	text-align: right;
	word-break: break-word;
}

/* Duration pill — translucent, rounded */
.hm-stories__card-duration {
	position: relative;
	z-index: 2;
	margin-top: 8px;
	display: inline-flex;
	align-items: center;
	padding: 0px 12px;
	border-radius: 100px;
	background-color: rgba(255, 255, 255, 0.12);
	font-family: var(--hm-font-primary);
	font-size: 14px;
	font-weight: 300;
	line-height: 21px;
	color: #ffffff;
	white-space: nowrap;
}

/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 767px) {
	.hm-stories__header {
		padding-inline: 10px;
	}

	/* 10px inset on both ends so neither the first nor the last card sits
	   flush against the screen edge (inline-end = left in RTL). */
	.hm-stories__slider {
		padding-inline: 10px;
	}
}