/* [hpc_top_stories_slider] - personalized homepage "top 3 stories" slider.
   Runs on the same Swiper.js build Elementor's own Loop Carousel uses (see
   hpc-top-stories-slider.php's file header for why), styled to match the
   look of the carousel it replaces: full-bleed image, a translucent bottom
   info panel holding a colored category pill + date, and a serif title
   overlaid on the photo itself. Values below were measured directly off
   the live homepage carousel, not approximated. Swiper's own CSS (enqueued
   as a dependency - see hpc_register_top_stories_slider_assets()) supplies
   the base .swiper/.swiper-wrapper/.swiper-slide layout mechanics; this
   file only adds the visual styling on top. */

.hpc-top-stories {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.hpc-top-stories-swiper {
	width: 100%;
	background-color: #ffffff;
}

/* Simple fade-in once the AJAX fetch actually populates a slide, rather
   than the carousel just popping into existence. */
.hpc-top-stories-slide {
	position: relative;
	overflow: hidden;
	animation: hpc-top-stories-fade-in 0.25s ease;
}

@keyframes hpc-top-stories-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.hpc-top-stories-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.hpc-top-stories-slide a.hpc-top-stories-slide-link {
	position: absolute;
	inset: 0;
	display: block;
}

/* Bottom info panel - translucent white, no blur, no rounded corners,
   matching the existing carousel exactly. */
.hpc-top-stories-info {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.7);
	padding: 15px 15px 20px;
	pointer-events: none; /* the whole slide is one link (see .hpc-top-stories-slide-link) */
}

.hpc-top-stories-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}

.hpc-top-stories-category {
	display: inline-block;
	background: #823d16;
	color: #ffffff;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1.3;
}

.hpc-top-stories-date {
	color: #004a82;
	font-family: Inter, sans-serif;
	font-size: 14px;
	font-weight: 600;
}

.hpc-top-stories-title {
	margin: 0;
	font-family: "Libre Baskerville", Georgia, serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 1.18;
	color: #000000;
}

/* Nav arrows - plain SVG chevrons (see hpc_top_stories_chevron_svg() in
   PHP) on a small dark translucent circle for contrast against any photo,
   vertically centered over the image. Hidden entirely until the JS
   confirms there's more than one story to page through. */
/* Specificity note: the theme/Elementor Kit ships a global button rule
   (class + type selector, e.g. ".elementor-kit-7 button") that otherwise
   beats a plain ".hpc-top-stories-arrow" selector and was overriding the
   background, border-radius, padding, and border below - same pattern
   already worked around elsewhere in this theme (see
   hpc-my-account-subscription.css). Scoping under the #hpc-top-stories id
   plus !important on the previously-clobbered properties settles it for
   good regardless of load order. Also: this site hides raw inline <svg>
   elements globally (icon-sprite pattern) via a width:0/height:0 rule, so
   the chevron icon needs its own explicit !important size here too. */
#hpc-top-stories .hpc-top-stories-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35) !important;
	color: rgba(255, 255, 255, 0.9) !important;
	border: none !important;
	border-radius: 50% !important;
	cursor: pointer;
	padding: 0 !important;
	transition: background 0.15s ease;
	z-index: 1;
}

#hpc-top-stories .hpc-top-stories-arrow svg {
	width: 20px !important;
	height: 20px !important;
	display: block !important;
}

#hpc-top-stories .hpc-top-stories-arrow:hover {
	background: rgba(0, 0, 0, 0.55) !important;
}

.hpc-top-stories-arrow--prev {
	left: 10px;
}

.hpc-top-stories-arrow--next {
	right: 10px;
}

/* Pagination dots - these are Swiper's own auto-generated bullets
   (pagination: { clickable: true } in the JS), styled to match the
   sizing/color/opacity measured directly off the existing homepage
   carousel's pagination (a custom Elementor style scoped to that one
   widget, not Swiper's own plain defaults - hence overriding it here).
   Same #hpc-top-stories id-scoping as the arrows above, since this theme's
   global button/element styles have already proven they'll clobber
   unscoped rules, and !important guards against Swiper's own base
   .swiper-pagination-bullet rule (which this is deliberately overriding). */
#hpc-top-stories .swiper-pagination {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 5px !important;
	z-index: 3;
	text-align: right;
}

#hpc-top-stories .swiper-pagination-bullet {
	width: 22px;
	height: 8px;
	margin: 0 6px;
	border: none !important;
	border-radius: 4px !important;
	background: rgba(0, 0, 0, 0.2) !important;
	opacity: 1 !important;
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}

#hpc-top-stories .swiper-pagination-bullet-active {
	width: 8px;
	background: rgba(0, 0, 0, 1) !important;
}

@media (max-width: 767px) {
	.hpc-top-stories-title {
		font-size: 22px;
	}

	.hpc-top-stories-info {
		padding: 12px 12px 16px;
		position: static;
	}
}