/* Home «نصائح البيت» rail ([yns_blog_rail], includes/blog.php). Card look: assets/blog.css. Only transform / opacity animate.
   Desktop (RTL): heading block on the right with its own padding; the cards always sit entirely after it. Going
   forward, the read card slides toward the heading and disappears (it never rests under or beside the text); the next
   card peeks at the left edge — after redseaglobal.com «Our News». Phones: heading on top, native swipe with snap. */
.yns-rail {
	--bl-blue: var(--yn-primary, #0258A2);
	--bl-ink: var(--yn-heading, #1E293B);
	--bl-text: var(--yn-text, #334155);
	--bl-muted: var(--yn-muted, #69727D);
	--bl-soft: color-mix(in srgb, var(--bl-blue) 6%, #FFFFFC);
	--rail-static: clamp(320px, 32%, 420px);
	--rail-pad: clamp(24px, 3vw, 48px);       /* space around the heading block's text */
	--rail-col-gap: clamp(32px, 4vw, 64px);
	--rail-gap: clamp(16px, 1.8vw, 24px);
	--rail-card: clamp(290px, 24vw, 360px);
	--rail-ease: cubic-bezier(.22, 1, .36, 1);
	position: relative;
	display: grid;
	grid-template-columns: var(--rail-static) minmax(0, 1fr);
	column-gap: var(--rail-col-gap);
	align-items: stretch;
	max-width: 1240px;
	margin: 0 auto;
	direction: rtl;
}

/* ---------- Heading block ---------- */
.yns-rail__static {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: 8px var(--rail-pad);
	background: var(--yns-rail-bg, #FFFFFC);
}
/* Soft edge so cards fade as they slide under the heading. */
.yns-rail__static::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--rail-col-gap) * -1);
	width: var(--rail-col-gap);
	background: linear-gradient(to left, var(--yns-rail-bg, #FFFFFC), rgba(255, 255, 252, 0));
	pointer-events: none;
}
.yns-rail__eyebrow { margin: 0; padding: 0; color: var(--yn-orange, #FF7515); font-size: .95rem; font-weight: 800; letter-spacing: .02em; }
html body .yns-rail__title { margin: 0; padding: 0; color: var(--bl-ink); font-size: var(--gvid-yn-fs-h2, clamp(1.75rem, 3vw, 2.75rem)); font-weight: 800; line-height: 1.2; letter-spacing: -.03em; }
.yns-rail .yns-nowrap { white-space: nowrap; }
.yns-rail__text { margin: 0; padding: 0; max-width: 32ch; color: var(--bl-text); font-size: var(--gvid-yn-fs-body, 1.05rem); line-height: 1.75; }

.yns-rail__controls { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.yns-rail__btn {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1.6px solid var(--bl-blue);
	border-radius: 999px;
	background: transparent;
	color: var(--bl-blue);
	cursor: pointer;
	transition: background-color .25s, color .25s, opacity .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.yns-rail__btn svg { width: 1.25rem; height: 1.25rem; }
.yns-rail__btn--next svg { transform: scaleX(-1); } /* RTL: «next» points left */
.yns-rail__btn:hover:not(:disabled) { background: var(--bl-blue); color: #FFFFFC; }
.yns-rail__btn--prev:hover:not(:disabled) { transform: translateX(3px); }
.yns-rail__btn--next:hover:not(:disabled) { transform: translateX(-3px); }
.yns-rail__btn:active:not(:disabled) { opacity: .85; }
.yns-rail__btn:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 2px; }
.yns-rail__btn:disabled { opacity: .3; cursor: default; }
.yns-rail__all {
	margin-inline-start: 8px;
	color: var(--bl-blue);
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 4px;
	transition: color .2s;
}
.yns-rail__all:hover { color: var(--yn-orange, #FF7515); text-decoration: none; }
.yns-rail__all:focus-visible { outline: 2px solid var(--bl-blue); outline-offset: 3px; border-radius: 4px; }
.yns-rail__progress { width: min(220px, 100%); height: 3px; margin-top: 18px; border-radius: 3px; background: color-mix(in srgb, var(--bl-blue) 14%, transparent); overflow: hidden; }
.yns-rail__progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--bl-blue); transform-origin: right center; transform: scaleX(var(--rail-progress, .25)); transition: transform .6s var(--rail-ease); }

/* ---------- Cards ---------- */
.yns-rail__viewport { position: relative; z-index: 1; min-width: 0; outline: none; }
.yns-rail__viewport:focus-visible { outline: 3px solid var(--yn-yellow, #FDDC00); outline-offset: 6px; border-radius: 24px; }
.yns-rail__track { display: flex; gap: var(--rail-gap); padding-block: 10px 18px; }
.yns-rail__slide { flex: 0 0 var(--rail-card); display: flex; }
.yns-rail__slide .yns-blog__card { display: flex; width: 100%; }
.yns-rail__slide .yns-blog__card-link { width: 100%; }

@media (min-width: 981px) {
	.yns-rail__viewport { overflow: visible; }
	.yns-rail__track { will-change: transform; transition: transform .6s var(--rail-ease); }
	.yns-rail.is-dragging .yns-rail__track { transition: none; cursor: grabbing; }
	.yns-rail.is-dragging .yns-blog__card-link { pointer-events: none; }
	.yns-rail__slide { transition: opacity .5s var(--rail-ease), transform .6s var(--rail-ease); }
	/* Read cards leave completely: they fade out while sliding toward the heading, so the heading always stands alone. */
	.yns-rail__slide { transition: opacity .35s ease, transform .6s var(--rail-ease); }
	.yns-rail__slide.is-past { opacity: 0; transform: scale(.96); pointer-events: none; }
	.yns-rail__slide.is-next { opacity: .9; }
}

/* ---------- Tablet + phones: heading on top, native swipe ---------- */
@media (max-width: 980px) {
	.yns-rail { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
	.yns-rail__static { padding: 0; text-align: right; }
	.yns-rail__static::after { display: none; }
	.yns-rail__controls { margin-top: 6px; }
	.yns-rail__btn, .yns-rail__progress { display: none; }
	.yns-rail__all { margin-inline-start: 0; }
	.yns-rail__viewport {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-inline: calc(var(--rail-edge, 20px) * -1);
		padding-inline: var(--rail-edge, 20px);
		scroll-padding-inline: var(--rail-edge, 20px);
	}
	.yns-rail__viewport::-webkit-scrollbar { display: none; }
	.yns-rail__slide { flex-basis: min(78vw, 340px); scroll-snap-align: start; }
}

@media (prefers-reduced-motion: reduce) {
	.yns-rail__track, .yns-rail__slide, .yns-rail__progress span, .yns-rail__btn { transition: none; }
}