/* ==========================================================
   POST ARTICLE RAIL

   Article shortcode rail styling.
   Keeps rails inside the article content width
   without affecting category or homepage rails.
   ========================================================== */


/* ============================
   SECTION
   ============================ */

.betty-content .betty-post-article-rail {
	width: 100%;
	max-width: 100%;
	margin: var(--space-800) 0;
}


/* ============================
   RAIL SHELL
   ============================ */

.betty-content .betty-post-article-rail .betty-content-rail-shell {
	width: 100%;
	max-width: 100%;

	position: static;
	left: auto;
	right: auto;

	margin-left: 0;
	margin-right: 0;

	padding-left: 0;
	padding-right: 0;

	box-sizing: border-box;
}


/* ============================
   RAIL HEADING
   ============================ */

.betty-content .betty-post-article-rail .betty-additional-rail-section__heading {
	width: 100%;
	max-width: none;

	margin: 0 0 var(--space-600);
	padding: 0;
}


/* ============================
   RAIL LAYOUT
   ============================ */

.betty-content .betty-post-article-rail .betty-content-rail {
	--rail-content-width: 100%;
	--rail-arrow-space: 32px;

	position: relative;
	display: block;

	width: 100%;
	max-width: 100%;

	margin-left: 0;
	margin-right: 0;
}


/* Viewport uses full article width */

.betty-content .betty-post-article-rail .betty-content-rail__viewport {
	display: block;

	width: 100%;
	max-width: 100%;
	min-width: 0;

	flex: none;

	box-sizing: border-box;

	padding-left: 0;
	padding-right: 0;

	scroll-padding-left: 0;
}


/* ============================
   RAIL TRACK

   Small internal buffer prevents
   card content from touching the
   scroll viewport clipping edge.
   ============================ */

.betty-content .betty-post-article-rail .betty-content-rail__track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;

	align-items: stretch;

	gap: var(--betty-gap);

	width: max-content;

	padding-left: 4px;
	padding-right: 4px;

	box-sizing: content-box;
}


/* ============================
   CARD CONTAINER

   Do not clip card text.
   Rounded corners belong on images.
   ============================ */

.betty-content .betty-post-article-rail .betty-content-rail__card {
	border-radius: 0;
	overflow: visible;

	height: auto;
}


/* Keep images rounded and clipped */

.betty-content .betty-post-article-rail .news-img-wrap {
	border-radius: var(--space-200);
	overflow: hidden;
}


/* ============================
   DESKTOP ARROWS
   ============================ */

.betty-content .betty-post-article-rail .betty-content-rail__arrow {
	position: absolute;

	top: 50%;
	z-index: 5;

	flex: none;

	width: var(--rail-arrow-space);
	height: var(--rail-arrow-space);
}


/* Previous arrow */

.betty-content .betty-post-article-rail .betty-content-rail__arrow--prev {
	left: -40px;

	transform:
		translateY(-50%)
		rotate(180deg) !important;
}


/* Next arrow */

.betty-content .betty-post-article-rail .betty-content-rail__arrow--next {
	right: -40px;

	transform:
		translateY(-50%) !important;
}


/* Hidden arrow state */

.betty-content .betty-post-article-rail .betty-content-rail__arrow[hidden] {
	display: inline-flex !important;
	visibility: hidden;
	pointer-events: none;
}


/* ============================
   ARTICLE TYPOGRAPHY OVERRIDES

   Prevent regular article styles
   from affecting rail cards.
   ============================ */

.betty-content .betty-post-article-rail a {
	text-decoration: none;
}


/* Card title */

.betty-content .betty-post-article-rail .news-title {
	margin: 0 !important;
	padding: 0 !important;

	font: var(--heading-sm);

	background: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;

	-webkit-text-fill-color: currentColor;

	color: var(--text-onDark-primary);
}


/* Title link */

.betty-content .betty-post-article-rail .news-title-link {
	color: var(--text-onDark-primary);
	text-decoration: none;
}


.betty-content .betty-post-article-rail .news-title-link:hover {
	color: var(--accent);
	text-decoration: none;
}


/* Pills */

.betty-content .betty-post-article-rail .betty-pill,
.betty-content .betty-post-article-rail .news-pill {
	margin: 0 !important;

	padding-top: 2px;
	padding-bottom: 2px;

	text-decoration: none;
}


/* ============================
   CARD CONTENT SPACING

   A single flex gap controls:
   pill -> title -> description -> date

   No sibling margins or extra padding.
   ============================ */

.betty-content .betty-post-article-rail .news-info {
	display: flex !important;
	flex-direction: column;
	align-items: flex-start;

	gap: var(--space-300) !important;

	height: auto;
	min-width: 0;
}


/* Remove inherited child margins */

.betty-content .betty-post-article-rail .news-info > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;

	max-width: 100%;
}


/* Description */

.betty-content .betty-post-article-rail .news-blurb {
	margin: 0 !important;

	padding-top: 0 !important;
	padding-bottom: 0 !important;

	font: var(--body-sm);
	line-height: 1.4;
}


/* Date / metadata */

.betty-content .betty-post-article-rail .news-meta {
	margin: 0 !important;

	padding-top: 0 !important;
	padding-bottom: 0 !important;

	font: var(--caption);
	line-height: 1.4;

	color: var(--text-onDark-secondary);
}


/* ============================
   MOBILE
   ============================ */

@media (max-width: 678px) {

	/* ============================
	   SECTION SPACING
	   ============================ */

	.betty-content .betty-post-article-rail {
		width: 100%;
		max-width: 100%;

		margin-top: var(--space-800);
		margin-bottom: var(--space-800);
	}


	/* ============================
	   SHELL

	   Keep inside article.
	   Disable shared 100vw breakout.
	   ============================ */

	.betty-content .betty-post-article-rail .betty-content-rail-shell {
		width: 100%;
		max-width: 100%;

		position: static;

		left: auto;
		right: auto;

		margin-left: 0;
		margin-right: 0;

		padding-left: 0;
		padding-right: 0;
	}


	/* ============================
	   HEADING
	   ============================ */

	.betty-content .betty-post-article-rail .betty-additional-rail-section__heading {
		width: 100%;
		max-width: none;

		margin: 0 0 var(--space-600);
		padding: 0;

		text-align: left;
	}


	/* ============================
	   RAIL
	   ============================ */

	.betty-content .betty-post-article-rail .betty-content-rail {
		display: block;

		position: relative;

		width: 100%;
		max-width: 100%;
	}


	/* Hide arrows on mobile */

	.betty-content .betty-post-article-rail .betty-content-rail__arrow {
		display: none !important;
	}


	/* ============================
	   MOBILE VIEWPORT

	   Horizontal scrolling remains
	   inside article boundaries.
	   ============================ */

	.betty-content .betty-post-article-rail .betty-content-rail__viewport {
		display: block;

		width: 100%;
		max-width: 100%;

		box-sizing: border-box;

		overflow-x: auto;
		overflow-y: hidden;

		-webkit-overflow-scrolling: touch;

		scroll-snap-type: x proximity;
		scroll-padding-left: 0;

		padding-left: 0;
		padding-right: 0;
		padding-bottom: var(--space-300);

		overscroll-behavior-x: contain;
		overscroll-behavior-y: auto;

		touch-action: auto;

		scrollbar-width: none;

		/* Relative to article rail width */
		--rail-card-width: 82cqw;
	}


	.betty-content .betty-post-article-rail .betty-content-rail__viewport::-webkit-scrollbar {
		display: none;
	}


	/* ============================
	   TRACK
	   ============================ */

	.betty-content .betty-post-article-rail .betty-content-rail__track {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;

		align-items: stretch;

		gap: var(--betty-gap);

		width: max-content !important;

		padding-left: 4px;
		padding-right: 4px;

		box-sizing: content-box;
	}


	/* ============================
	   MOBILE CARDS

	   Remove card-level clipping.
	   Preserve horizontal scrolling.
	   ============================ */

	.betty-content .betty-post-article-rail .betty-content-rail__card {
		flex: 0 0 var(--rail-card-width) !important;

		width: var(--rail-card-width) !important;
		min-width: var(--rail-card-width) !important;
		max-width: var(--rail-card-width) !important;

		border-radius: 0;
		overflow: visible;

		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}


	/* ============================
	   CARD CONTENT

	   More room after the image.
	   Equal vertical gaps between
	   pill, title, description and date.
	   ============================ */

	.betty-content .betty-post-article-rail .news-info {
		display: flex !important;
		flex-direction: column;
		align-items: flex-start;

		gap: var(--space-300) !important;

		height: auto;
		min-width: 0;

		padding-top: var(--space-400);
		padding-bottom: 0;
	}


	/* Zero child margins.
	   Flex gap controls all spacing. */

	.betty-content .betty-post-article-rail .news-info > * {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}


	/* ============================
	   PILL
	   ============================ */

	.betty-content .betty-post-article-rail .betty-pill,
	.betty-content .betty-post-article-rail .news-pill {
		display: inline-flex;
		align-items: center;

		margin: 0 !important;
	}


	/* ============================
	   TITLE
	   ============================ */

	.betty-content .betty-post-article-rail .news-title {
		margin: 0 !important;
		padding: 0 !important;

		font: var(--heading-sm);
		line-height: 1.35;
	}


	/* ============================
	   DESCRIPTION
	   ============================ */

	.betty-content .betty-post-article-rail .news-blurb {
		margin: 0 !important;
		padding: 0 !important;

		font: var(--body-sm);
		line-height: 1.5;
	}


	/* ============================
	   DATE
	   ============================ */

	.betty-content .betty-post-article-rail .news-meta {
		margin: 0 !important;
		padding: 0 !important;

		font: var(--caption);
		line-height: 1.4;

		color: var(--text-onDark-secondary);
	}


	/* ============================
	   IMAGE LINK
	   ============================ */

	.betty-content .betty-post-article-rail .news-card-image-link {
		display: block;

		width: 100%;
	}


	/* ============================
	   IMAGE WRAPPER

	   Only the image has rounded corners.
	   ============================ */

	.betty-content .betty-post-article-rail .news-img-wrap {
		display: block;

		width: 100%;
		max-width: 100%;

		aspect-ratio: 21 / 9;

		overflow: hidden;

		border-radius: var(--space-200);
	}


	/* ============================
	   IMAGE
	   ============================ */

	.betty-content .betty-post-article-rail .news-img-wrap img,
	.betty-content .betty-post-article-rail .news-card__media,
	.betty-content .betty-post-article-rail .news-card-image-link img {
		display: block;

		width: 100% !important;
		max-width: 100% !important;
		height: 100% !important;

		object-fit: cover !important;

		flex: none !important;
	}

}