.aol-x-post-carousel-widget .x-heading {
	font: 700 var(--font-3-5xl)/var(--lh-head) inherit;
	color: rgb(var(--pm-black));
	margin: 0 0 8px;
}
.aol-x-post-carousel-widget .x-subheading {
	margin: 0;
	text-align: left;
	color: rgba(var(--pm-grey));
	font-size: var(--font-3-5xl);
	line-height: var(--font-3-5xl);
}

.aol-x-post-carousel-widget .carousel-main {
	position: relative;
}
/* arrow hover-scale (0.8 -> 1) is handled globally by horizontal-scroll.css's
   .solution:hover rule - .carousel-main carries the literal .solution class
   now, so nothing custom is needed here */

/* horizontal-scroll.css gives #left-btn/#right-btn a drop shadow by default -
   scoped override here instead of editing that shared file, since other
   widgets also depend on it */
.aol-x-post-carousel-widget #left-btn,
.aol-x-post-carousel-widget #right-btn {
	box-shadow: none;
}

/* layout, overflow, and scrollbar-hiding for .carousel-items now come from
   the site's own utility classes on the element (grid grid-flow-col gap-5,
   overflow-x-scroll, scrollbar-hide, padding-card-solution, fluid-last) -
   nothing custom is added here to avoid fighting their cascade layer, since
   Tailwind's utilities always win a tie against a plain author-stylesheet
   rule of equal specificity regardless of load order */
.aol-x-post-carousel-widget .carousel-items {
	scroll-behavior: smooth;
	/* longhand on purpose, not the padding shorthand - this must not touch
	   padding-left, which .padding-card-solution sets to calc(50vw - 50%)
	   for the viewport-edge breakout */
	padding-top: 4px;
	padding-bottom: 12px;
}

/* soften the cut-off edge of a partially-visible card so it reads as "more
   to scroll" instead of a broken/clipped card - same pattern as
   Logo_Carousel_Widget's .logo-carousel::before/::after */

/* mobile scroll-snap for .carousel-items is already provided globally by
   horizontal-scroll.css (@media max-width:767px) - not duplicated here */

/* fixed-width carousel item; zoom lives here (not on the embed itself) so the
   whole card - wrapper + content - shrinks as one unit with no leftover gap.
   .carousel-items uses grid-auto-flow:column with no explicit auto-columns
   size, so each column track just sizes itself to this width. */
.aol-x-post-carousel-widget .x-card-item {
	width: 360px;
	/* zoom: 0.85; */
	/* also carries the plain .carousel-item class so the legacy
	   horizontalScroll.js can measure per-card scroll distance - that class
	   has its own unrelated bare styling (input.css:518, display:flex +
	   centered content) from an older carousel pattern, reset here since
	   this selector's specificity wins regardless of stylesheet order */
	display: block;
}
@media (max-width: 600px) {
	/* grid-auto-columns:100% did not reliably size the implicit column
	   tracks on all real devices, despite checking out on paper - switching
	   display to flex here instead, where flex-basis/width against a
	   definite parent width is unambiguous and far more predictable across
	   browsers than CSS Grid's implicit auto-track sizing. */
	.aol-x-post-carousel-widget .carousel-items {
		display: flex !important;
	}
	.aol-x-post-carousel-widget .x-card-item {
		flex: 0 0 100% !important;
		width: 100% !important;
	}
}


/* grid mode: a flex row (not CSS Grid's fixed 1fr tracks), so an incomplete
   last row centers via justify-content instead of sitting left-aligned.
   width bakes in both the column/gap math and the 1/0.70 zoom compensation
   as a single precomputed multiplier - avoids chained division in calc(),
   using only "-" and "*" for the widest possible browser support */
.aol-x-post-carousel-widget .x-grid-item {
	/* zoom: 0.70; */
}
.aol-x-post-carousel-widget .x-grid.x-grid-cols-2 > .x-grid-item {
	/* 1 gap (20px) between 2 columns; 1 / (2 * 0.70) = 0.714286 */
	width: calc((100% - 40px) / 2);
}
.aol-x-post-carousel-widget .x-grid.x-grid-cols-3 > .x-grid-item {
	/* 2 gaps (40px) between 3 columns; 1 / (3 * 0.70) = 0.476190 */
	width: calc((100% - 60px) / 3);
}
@media (max-width: 900px) {
	.aol-x-post-carousel-widget .x-grid.x-grid-cols-3 > .x-grid-item {
		width: calc((100% - 60px) / 3);
	}
}
@media (max-width: 600px) {
	.aol-x-post-carousel-widget .x-grid > .x-grid-item {
		/* 1 / 0.70 = 1.428571 */
		width: 100% !important;
	}
}

/* override X's default ~550px embed width so it fills the card */
.aol-x-post-carousel-widget .twitter-tweet,
.aol-x-post-carousel-widget .twitter-tweet-rendered {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
}
.aol-x-post-carousel-widget .twitter-tweet-rendered iframe {
	width: 100% !important;
}

/* shimmer placeholder while widgets.js loads and swaps the raw blockquote
   for the rendered iframe (which gets the extra .twitter-tweet-rendered
   class) - applies wherever a tweet sits (carousel card, 2-col grid item,
   3-col grid item) since it targets .twitter-tweet generically, not scoped
   to any one layout's card wrapper */
.aol-x-post-carousel-widget .twitter-tweet:not(.twitter-tweet-rendered) {
	position: relative;
	color: transparent;
	height: 300px;
	/* defensive reset: <blockquote> has a browser-default margin (commonly
	   1em 40px) that would otherwise inset the shimmer from the card edges
	   even with width:100% set above */
	margin: 0;
	overflow: hidden;
	border-radius: 12px;
	background-color: rgba(var(--pm-grey), .18);
	background-image: linear-gradient(90deg, rgba(var(--pm-grey), .18) 25%, rgba(var(--pm-grey), .35) 37%, rgba(var(--pm-grey), .18) 63%);
	background-size: 400% 100%;
	animation: aol-x-post-shimmer 1.4s ease infinite;
}
.aol-x-post-carousel-widget .twitter-tweet:not(.twitter-tweet-rendered) * {
	color: transparent !important;
}
@keyframes aol-x-post-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
.aol-x-post-carousel-widget .twitter-tweet-rendered {
	animation: aol-x-post-fade-in .25s ease;
}
@keyframes aol-x-post-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (max-width: 767px) {
	.aol-x-post-carousel-items > .x-card-item {
		scroll-snap-align: center !important;
	}
}