/**
 * "Recommended" section (the .featured-stories block above the footer).
 * Scoped to .featured-stories only — the shared mags_posted_on() markup this
 * touches is also used elsewhere (single post header, other widgets), so every
 * rule here is prefixed to avoid bleeding into those.
 */

.featured-stories .post-boxed .entry-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.featured-stories .post-boxed .entry-meta .date {
	margin-bottom: 0;
}

.featured-stories .post-boxed .entry-meta .date a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 11px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #1e5087, #3a86e0 );
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.featured-stories .post-boxed .entry-meta .date a::before {
	content: "\1F4C5";
	font-size: 10px;
	line-height: 1;
}

.featured-stories .post-boxed .entry-meta .date a:hover,
.featured-stories .post-boxed .entry-meta .date a:focus-visible {
	color: #ffffff;
	text-decoration: none;
	transform: translateY( -1px );
	box-shadow: 0 4px 10px rgba( 30, 80, 135, 0.35 );
}

/* Author byline hidden per request — also kill the dangling "/" separator
   the parent theme inserts after every .entry-meta child except the last
   (with by-author gone, .date is no longer :last-child in the DOM). */
.featured-stories .post-boxed .entry-meta .by-author {
	display: none;
}

.featured-stories .post-boxed .entry-meta .date::after {
	content: none;
}

/* ---------------------------------------------------------------------
 * Card shell polish
 * ------------------------------------------------------------------- */

.featured-stories .post-boxed {
	position: relative;
	border-radius: 10px;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.25 );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.featured-stories .post-boxed:hover {
	transform: translateY( -4px );
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.35 );
}

.featured-stories .post-boxed .post-img-wrap {
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

.featured-stories .post-boxed .entry-title {
	font-size: 16px;
	line-height: 1.35;
}

/* ---------------------------------------------------------------------
 * Category/tag chips — glassy over the thumbnail instead of solid white boxes
 * ------------------------------------------------------------------- */

.featured-stories .post-boxed .post-img-wrap .entry-meta .cat-links a {
	background-color: rgba( 8, 20, 40, 0.55 );
	backdrop-filter: blur( 4px );
	-webkit-backdrop-filter: blur( 4px );
	color: #ffffff;
	border: 1px solid rgba( 255, 255, 255, 0.25 );
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
}

.featured-stories .post-boxed .post-img-wrap .entry-meta .cat-links a:hover {
	background-color: rgba( 30, 80, 135, 0.75 );
	color: #ffffff;
}

/* ---------------------------------------------------------------------
 * "Latest" card — sparkling highlight on the most recent post
 * ------------------------------------------------------------------- */

.featured-stories .post-boxed.cricket-latest-card {
	box-shadow: 0 0 0 2px #ffb020, 0 8px 24px rgba( 255, 140, 60, 0.4 );
	animation: cricket-latest-glow 2.4s ease-in-out infinite;
}

.featured-stories .post-boxed.cricket-latest-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 0 0 2px #ffb020, 0 12px 30px rgba( 255, 140, 60, 0.5 );
}

.featured-stories .post-boxed.cricket-latest-card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient( 100deg, transparent 30%, rgba( 255, 255, 255, 0.55 ) 46%, rgba( 255, 255, 255, 0.1 ) 52%, transparent 65% );
	background-size: 250% 100%;
	animation: cricket-card-sparkle 3.4s ease-in-out infinite;
}

.cricket-latest-card__ribbon {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	background: linear-gradient( 90deg, #ffb020, #ff6b6b );
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	box-shadow: 0 2px 8px rgba( 255, 140, 60, 0.5 );
}

.cricket-latest-card__ribbon::before {
	content: "\26A1";
	font-size: 10px;
}

@keyframes cricket-latest-glow {
	0%, 100% { box-shadow: 0 0 0 2px #ffb020, 0 8px 24px rgba( 255, 140, 60, 0.35 ); }
	50% { box-shadow: 0 0 0 2px #ffe066, 0 8px 30px rgba( 255, 176, 32, 0.6 ); }
}

@keyframes cricket-card-sparkle {
	0%, 55% { background-position: 150% 0; }
	100% { background-position: -50% 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.featured-stories .post-boxed.cricket-latest-card,
	.featured-stories .post-boxed.cricket-latest-card::after {
		animation: none !important;
	}
}

/* ---------------------------------------------------------------------
 * Auto-sliding carousel polish (owl-carousel is already wired up by the
 * theme once mags_footer_featured_posts_carousel is on — see wp_options).
 * ------------------------------------------------------------------- */

.featured-stories .owl-carousel .owl-nav button.owl-prev,
.featured-stories .owl-carousel .owl-nav button.owl-next {
	background: linear-gradient( 135deg, #1e5087, #3a86e0 );
	color: #ffffff;
	border-radius: 50%;
	width: 42px;
	height: 42px;
	box-shadow: 0 3px 10px rgba( 10, 25, 50, 0.45 );
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.featured-stories .owl-carousel .owl-nav button.owl-prev:before,
.featured-stories .owl-carousel .owl-nav button.owl-next:before {
	color: #ffffff;
	line-height: 42px;
}

.featured-stories .owl-carousel .owl-nav button.owl-prev:hover,
.featured-stories .owl-carousel .owl-nav button.owl-next:hover,
.featured-stories .owl-carousel .owl-nav button.owl-prev:focus-visible,
.featured-stories .owl-carousel .owl-nav button.owl-next:focus-visible {
	background: linear-gradient( 135deg, #ffb020, #ff6b6b );
	transform: translateY( -50% ) scale( 1.08 );
	box-shadow: 0 6px 16px rgba( 255, 140, 60, 0.45 );
}

.featured-stories .owl-carousel .post-boxed {
	height: 100%;
}

/* ---------------------------------------------------------------------
 * Background — the exact same storm as the homepage hero (same base
 * gradient, same rain texture, same bolt shapes/colors), rendered as a
 * second local instance via psp_recommended_storm_bg() (functions.php),
 * first child of this <section>, instead of relying on the hero's own
 * fixed/viewport layer to happen to show through here. A shared fixed
 * layer IS visible behind this section too, but its flashes are timed for
 * a glance at the hero and aren't reliably visible on scroll — a local copy
 * (.cricket-storm--local below) guarantees the same effect actually reads
 * here. Off the homepage this markup isn't rendered at all, and the section
 * falls back to the same static dark navy the storm starts from.
 * ------------------------------------------------------------------- */

.featured-stories {
	position: relative;
	overflow: hidden;
}

.featured-stories .section-background {
	background-image: none !important;
	background-color: #0a1830;
	position: relative;
	z-index: 1;
}

body.home .featured-stories .section-background {
	background-color: transparent;
}

/* The parent theme's own dark scrim (.section-bg-overlay::before, up to 65%
   black) would otherwise sit on top of the storm and mute it almost to
   invisibility — the hero has no such scrim. Drop it on the homepage; cards
   are light-background and don't depend on it for contrast. */
body.home .featured-stories .section-bg-overlay::before {
	display: none;
}

body.home .featured-stories {
	background-color: transparent;
}

/* Combined selector (not just .cricket-storm--local) so this reliably beats
   .cricket-storm's own position:fixed regardless of stylesheet load order. */
.cricket-storm.cricket-storm--local {
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* ---------------------------------------------------------------------
 * "RECOMMENDED" heading — same rainbow treatment as the header (the
 * cricket-nav-rainbow keyframe is defined once, in cricket-header.css,
 * which is enqueued site-wide, so it's reused here rather than redeclared).
 * ------------------------------------------------------------------- */

.featured-stories .stories-title {
	position: relative;
	z-index: 1;
	background-image: linear-gradient( 90deg, #ff6b6b, #ffb020, #ffe066, #6ee7a8, #4fd1c5, #6c8cff, #c77dff, #ff6b6b );
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.6 ), 0 0 18px rgba( 0, 0, 0, 0.35 );
	animation: cricket-nav-rainbow 7s linear infinite;
}

@media ( prefers-reduced-motion: reduce ) {
	.featured-stories .stories-title {
		animation: none !important;
	}
}