/**
 * styles/articleSlider.css
 *
 * Restyled to match the reference design (Ovid/AOCA-style "Current Issue
 * Highlights"): one large slide at a time (image left, title/meta/excerpt
 * right), black heading with an underline rule, blue article-title links,
 * grey meta/excerpt text, dot navigation with a blue-ring active state.
 *
 * LAYOUT FIX: earlier versions of this file used a `100vw` "full width
 * breakout" trick (position:relative; width:100vw; left:50%;
 * margin-left:-50vw) plus forcibly hiding `.pkp_structure_sidebar` and
 * forcing `.pkp_structure_main` to 100% width. That combination is why
 * the slider was rendering edge-to-edge and shifted/misaligned under the
 * header on some pages: 100vw doesn't subtract the scrollbar's width, so
 * on any page with a vertical scrollbar it overflows the real viewport
 * and drags the whole block sideways -- exactly the cut-off-heading,
 * collides-with-the-header symptom in the screenshot.
 *
 * All of that is removed now. The slider simply sits inside the theme's
 * normal homepage content column, at the same width as everything else
 * on the page (sidebar included, no longer force-hidden) -- which is what
 * gives you the "half width, sits next to other content" proportions
 * from the reference screenshot, and fixes the overflow/misalignment.
 */

.acs-slider-wrap {
	max-width: 900px;
	margin: 24px 0;
	padding: 0;
	background: transparent;
	overflow: visible;
}

/* ---------- Heading ---------- */
.acs-slider-head {
	display: block;
	margin-bottom: 12px;
}

.acs-slider-badge {
	display: block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #1a1a1a;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid #1a1a1a;
}

.acs-slider-note {
	font-size: 15px;
	color: #4a4a4a;
}

.acs-slider-note a {
	color: #1868a6;
	text-decoration: none;
	font-weight: 600;
}

.acs-slider-note a:hover {
	text-decoration: underline;
}

/* ---------- Slide shell ---------- */
.acs-slider-shell {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 0;
	background: transparent;
}

.acs-slider-viewport {
	overflow: hidden;
	width: 100%;
}

.acs-slider-track {
	display: flex;
	gap: 0;
	transition: transform 0.45s ease;
	will-change: transform;
}

/* One full-width slide at a time (JS's getCardsPerPage() now always
   returns 1 to match -- see js/articleSlider.js). */
.acs-card {
	flex: 0 0 100%;
	background: #ffffff;
	border: none;
	min-height: 0;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 32px;
	padding-top: 24px;
}

/* The gold accent bar doesn't appear in the reference design */
.acs-card-topline {
	display: none;
}

.acs-card-image-link {
	display: block;
	flex: 0 0 340px;
	text-decoration: none;
}

.acs-card-image {
	height: 360px;
	background-color: #f2f2f2;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	border: none;
}

.acs-card-body {
	padding: 0;
	flex: 1;
	min-width: 0;
}

.acs-card-title {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
}

.acs-card-title a {
	color: #1868a6;
	text-decoration: none;
}

.acs-card-title a:hover {
	text-decoration: underline;
}

/* Author line hidden to match the reference design, which shows only a
   date + issue line beneath the title. Delete this rule to bring authors
   back if you'd rather keep them. */
.acs-card-authors {
	display: none;
}

.acs-card-date {
	color: #333333;
	font-size: 15px;
	font-weight: 400;
	margin-bottom: 12px;
}

.acs-card-excerpt {
	color: #4a4a4a;
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- Prev/next arrows: hidden to match the reference design
   (which uses dots only), but left in the DOM/JS so keyboard users and
   the existing JS wiring are unaffected. ---------- */
.acs-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #1a1a1a;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.acs-slider-shell:hover .acs-nav,
.acs-nav:focus-visible {
	opacity: 1;
	pointer-events: auto;
}

.acs-prev { left: -8px; }
.acs-next { right: -8px; }

.acs-nav:hover {
	background: #ffffff;
}

/* ---------- Footer: divider line + dots ---------- */
.acs-slider-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #e2e2e2;
}

.acs-dots {
	display: flex;
	gap: 10px;
	align-items: center;
}

.acs-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: none;
	background: #cfd3d6;
	padding: 0;
	cursor: pointer;
}

.acs-dot.active {
	width: 16px;
	height: 16px;
	background: #ffffff;
	border: 2px solid #1868a6;
	position: relative;
}

.acs-dot.active::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: #1868a6;
}

.acs-see-more {
	color: #1868a6;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.acs-see-more:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.acs-card {
		flex-direction: column;
		gap: 16px;
	}

	.acs-card-image-link {
		flex-basis: auto;
		width: 100%;
	}

	.acs-card-image {
		height: 220px;
	}
}

@media (max-width: 767px) {
	.acs-slider-wrap {
		padding: 0 16px 16px;
	}

	.acs-slider-badge {
		font-size: 22px;
	}

	.acs-card-title {
		font-size: 20px;
	}

	.acs-card-date,
	.acs-card-excerpt,
	.acs-slider-note {
		font-size: 15px;
	}

	.acs-nav {
		display: none;
	}
}