/* ==========================================================================
   BtB Taxonomy Carousel
   Horizontal rail of taxonomy cards (Issues / Topics) in two display styles:
   - Visual cards: poster-tile artwork cards using btb_topic_cover_image.
   - Slim buttons: a simple swipeable row of nectar-button pills.
   Also reused by the Similar Topics section on single BtB pages.
   ========================================================================== */

/*
 * Full-bleed rail, matching the Post Loop carousels: the element breaks out
 * of the page container to the full viewport width and --btb-tax-inset
 * re-aligns the header and first card with the standard BtB container while
 * the rail continues past the screen edges.
 *
 * Instances inside narrow columns opt out automatically for the Most Viewed
 * sidebar, or manually by adding "btb-no-bleed" in Extra Class Name.
 */
.pca-btb-tax-carousel {
	--btb-tax-accent: var(--btb-accent, var(--pca-pink-1, #ff00ff));
	--btb-tax-accent-contrast: var(--nectar-extra-color-2, #151026);
	--btb-tax-card-width: 320px;
	--btb-tax-gap: var(--btb-card-gap, 20px);
	--btb-tax-inset: var(--btb-rail-inset, calc(max((100vw - 1800px) / 2, 0px) + 80px));
	position: relative;
	left: 50%;
	width: 100vw;
	max-width: none;
	margin-left: -50vw;
}

.btb-main-most-viewed .pca-btb-tax-carousel,
.pca-btb-tax-carousel.btb-no-bleed {
	--btb-tax-inset: 0px;
	left: auto;
	width: 100%;
	margin-left: 0;
}

.pca-btb-tax-carousel *,
.pca-btb-tax-carousel *::before,
.pca-btb-tax-carousel *::after {
	box-sizing: border-box;
}

.pca-btb-tax-carousel__heading-wrap {margin-bottom: 0;}
.pca-btb-tax-carousel__heading-wrap:empty {display: none;}
.btb-main-most-viewed .pca-btb-tax-carousel {margin-bottom: 0px !important;}
.full-width-content .pca-btb-tax-carousel--slim {
    padding: 0px 25px;
}

/* --------------------------------------------------------------------------
   Header row: WYSIWYG heading left, arrows right — matches the Post Loop.
   -------------------------------------------------------------------------- */
.pca-btb-tax-carousel__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
	padding-inline: var(--btb-tax-inset);
}

.pca-btb-tax-carousel__heading-wrap {
	min-width: 0;
}

/* Heading typography lives centrally in btb.css under .btb-section-heading */
.pca-btb-tax-carousel__heading {
	min-width: 0;
}

.pca-btb-tax-carousel__intro {
	max-width: 640px;
	margin: 12px 0 0 !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--btb-muted, rgba(255, 255, 255, .72));
}

/* --------------------------------------------------------------------------
   Rail
   -------------------------------------------------------------------------- */
.pca-btb-tax-carousel__viewport {
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--btb-tax-inset);
	overscroll-behavior-inline: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	outline: none;
	padding-block: 0px;
}

.pca-btb-tax-carousel__viewport::-webkit-scrollbar {
	display: none;
}

.pca-btb-tax-carousel__viewport.is-dragging {
	scroll-snap-type: none;
	cursor: grabbing;
}

.pca-btb-tax-carousel__viewport:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: 8px;
}

.pca-btb-tax-carousel__track {
	display: flex;
	gap: var(--btb-tax-gap);
	width: max-content;
	/* On the track (not the scroller) so the trailing gutter always renders. */
	padding-inline: var(--btb-tax-inset);
}

/* --------------------------------------------------------------------------
   Visual cards: poster-tile style with term artwork.
   -------------------------------------------------------------------------- */
.pca-btb-tax-carousel__card {
	position: relative;
	display: block;
	flex: 0 0 var(--btb-tax-card-width);
	max-width: 80vw;
	aspect-ratio: 3 / 4.25;
	overflow: hidden;
	border-radius: var(--btb-border-radius);
	background: var(--btb-lighter, #2D2646);
	scroll-snap-align: start;
	transform: translateY(0);
	transition: transform .35s ease, box-shadow .35s ease;
}

.pca-btb-tax-carousel__card:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.pca-btb-tax-carousel__media {
	position: absolute;
	inset: 0;
	display: block;
}

.pca-btb-tax-carousel__image {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform .5s ease;
}

.pca-btb-tax-carousel__card:hover .pca-btb-tax-carousel__image,
.pca-btb-tax-carousel__card:focus-visible .pca-btb-tax-carousel__image {
	transform: scale(1.05);
}

/* Dark lower gradient keeps the title and CTA readable over any artwork. */
.pca-btb-tax-carousel__gradient {
	position: absolute;
	inset: 0;
	display: block;
	background: linear-gradient(0deg, rgba(13, 8, 27, .95) 0%, rgba(13, 8, 27, .55) 30%, rgba(13, 8, 27, .05) 60%, transparent 100%);
}

.pca-btb-tax-carousel__content {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 22px;
}

.pca-btb-tax-carousel__name {
	width: 100%;
	color: #fff;
	font-family: 'owners-narrow', sans-serif;
	font-size: 30px;
	font-weight: 800;
	line-height: .95;
	letter-spacing: -.01em;
	text-align: center;
	text-transform: uppercase;
}

/* White pill CTA, matching the supplied poster-tile design. */
.pca-btb-tax-carousel__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 8px;
	padding: 13px;
	border-radius: 7.5px;
	background: #fff;
	color: var(--pca-navy, #1F1933);
	font-family: 'owners-narrow', sans-serif;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	text-align: center;
	text-transform: uppercase;
	transition: filter .25s ease;
}

.pca-btb-tax-carousel__card:hover .pca-btb-tax-carousel__cta,
.pca-btb-tax-carousel__card:focus-visible .pca-btb-tax-carousel__cta {
	filter: brightness(.92);
}

/* --------------------------------------------------------------------------
   Slim buttons: nectar-button pills in a swipeable row.
   -------------------------------------------------------------------------- */
.pca-btb-tax-carousel--slim .pca-btb-tax-carousel__track {
	gap: 12px;
}

html body div#ajax-content-wrap .pca-btb-tax-carousel__pill {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	background: var(--btb-lighter, #2D2646);
	color: #fff;
	white-space: nowrap;
	scroll-snap-align: start;
	transition: background-color .25s ease, transform .25s ease;
	margin: 0px !important;
	padding: 10px 20px 9px 20px !important;
}

html body .pca-btb-tax-carousel__pill:hover,
html body .pca-btb-tax-carousel__pill:focus-visible {
	background: var(--btb-tax-accent);
	color: var(--btb-tax-accent-contrast);
	transform: translateY(-2px);
}

html body .pca-btb-tax-carousel__pill:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

.pca-btb-tax-carousel__pill-name {
	line-height: 1;
}

/* NEW badge on the newest issue. */
.pca-btb-tax-carousel__new-badge {
	background: var(--btb-accent);
	color: var(--pca-navy, #1F1933);
	padding: 5px 9px 4px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 1;
	margin-right: -5px;
}

html body .pca-btb-tax-carousel__pill:hover .pca-btb-tax-carousel__new-badge,
html body .pca-btb-tax-carousel__pill:focus-visible .pca-btb-tax-carousel__new-badge {
	background: var(--pca-navy, #1F1933);
	color: #fff;
}

/* Card-mode badge sits over the artwork, top-right. */
.pca-btb-tax-carousel__new-badge--card {
}

/* --------------------------------------------------------------------------
   Arrows: always visible, disabled until there is somewhere to scroll.
   Same white circle UI as every other BtB carousel.
   -------------------------------------------------------------------------- */
.pca-btb-tax-carousel__arrows {
	display: flex;
	gap: var(--btb-arrow-gap, 10px);
	justify-content: flex-end;
	margin-left: auto;
	flex: 0 0 auto;
}

html body .pca-btb-tax-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--btb-arrow-size, 44px);
	height: var(--btb-arrow-size, 44px);
	padding: 0;
	border: 0;
	border-radius: 999px !important;
	background: var(--btb-arrow-bg, #fff);
	color: var(--btb-arrow-color, #111);
	cursor: pointer;
	transition: transform .2s ease, opacity .2s ease;
}

html body .pca-btb-tax-carousel__arrow:hover:not(:disabled),
html body .pca-btb-tax-carousel__arrow:focus-visible {
	transform: scale(1.05);
}

html body .pca-btb-tax-carousel__arrow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

html body .pca-btb-tax-carousel__arrow:disabled {
	opacity: .3;
	cursor: default;
}

/* --------------------------------------------------------------------------
   Related sections (single BtB pages)
   -------------------------------------------------------------------------- */
.btb-related-content__title,
.btb-similar-topics__title {
	margin-bottom: 25px !important;
	text-align: center;
}

.pca-btb-tax-carousel-editor-notice {
	padding: 18px 20px;
	border: 1px dashed #8c8f94;
	background: #fff;
	color: #1d2327;
}

@media (max-width: 690px) {
	.pca-btb-tax-carousel {
		--btb-tax-card-width: 290px;
		--btb-tax-gap: 14px;
		--btb-tax-inset: var(--btb-rail-inset-mobile, 20px);
	}

	.pca-btb-tax-carousel.btb-no-bleed {
		--btb-tax-inset: 0px;
	}
.pca-btb-tax-carousel--slim {
    padding: 0px 0px;
}
	
	.full-width-content .pca-btb-tax-carousel__viewport {padding: 10px 20px;}
.pca-btb-tax-carousel--slim .pca-btb-tax-carousel__track {padding:0px;gap: 10px;}
html body div#ajax-content-wrap .pca-btb-tax-carousel__pill {
    padding: 10px 15px 10px 15px !important;
    gap: 10px;
}

.pca-btb-tax-carousel__new-badge {
    font-size: 11px;
    padding: 3px 5px 2px;
    border-radius: 3px;
}
	/*
	 * The Most Viewed rail keeps its gutter on mobile: btb.css already
	 * breaks its .mob-only wrapper out to 100vw, so the inset provides the
	 * 20px lead-in that the old manual padding rule used to.
	 */
	.btb-main-most-viewed .pca-btb-tax-carousel {
		--btb-tax-inset: var(--btb-rail-inset-mobile, 20px);
	}

	.pca-btb-tax-carousel__name {
		font-size: 24px;
	}
}

@media (max-width: 479px) {
	.pca-btb-tax-carousel {
		--btb-tax-card-width: 270px;
	}
	
	.full-width-content .pca-btb-tax-carousel__viewport {padding: 10px 15px;}
	.pca-btb-tax-carousel__content {
    padding: 15px;
}
}

@media (prefers-reduced-motion: reduce) {
	.pca-btb-tax-carousel__card,
	.pca-btb-tax-carousel__image,
	.pca-btb-tax-carousel__cta,
	html body .pca-btb-tax-carousel__pill {
		transition: none;
	}
}