/** Trending: the established mobile card layout at every viewport width. */

#javo-home-trending {
	min-width: 0;
}

.javo-trending,
.javo-trending-block {
	display: grid;
	gap: 1rem;
}

.javo-trending {
	gap: 2rem;
}

.javo-trending-title {
	margin: 0;
}

.javo-trending-episodes {
	display: grid;
	gap: 0.75rem;
	max-height: 32rem;
	overflow-y: auto;
	overscroll-behavior-y: auto;
	padding-inline-end: 0.25rem;
}

.javo-trending .javo-trending-card {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem;
	min-width: 0;
	padding: 0.75rem;
	box-sizing: border-box;
}

.javo-trending .javo-trending-card-inner {
	display: contents;
}

.javo-trending-artwork,
.javo-trending-artwork img,
.javo-trending-artwork-placeholder {
	display: block;
	width: 4.5rem;
	height: 4.5rem;
	border-radius: 0.375rem;
}

.javo-trending-artwork {
	overflow: hidden;
	background: none;
}

.javo-trending-artwork img {
	object-fit: cover;
}

.javo-trending-card-content {
	min-width: 0;
}

.javo-trending-episode-title,
.javo-trending-channel-name {
	margin: 0;
}

.javo-trending-episode-title {
	overflow-wrap: anywhere;
}

.javo-trending-channel-name {
	margin-top: 0.25rem;
	color: #B3E7FF;
}

.javo-trending-card-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.javo-trending-duration {
	white-space: nowrap;
}

/* =========================================================
   Main Section
========================================================= */
#javo-home-trending {

    width:100%;

    margin:16px 0;

    padding:0 10px;

    box-sizing:border-box;

    direction:rtl;

    overflow:hidden;

}

/* Blocks */

.javo-trending,
.javo-trending-block {

	display:block;

	gap:0;

}

/* Remove Glass Container */

.javo-trending-block {

	background:transparent;

	border:0;

	padding:0;

	border-radius:0;

	margin-bottom:24px;

}

/* =========================================================
   Section Header
========================================================= */

.javo-trending-header {

    display:flex;

    flex-direction:row;

    align-items:flex-start;

    justify-content:space-between;

    width:100%;

    min-height:32px;

    margin-bottom:12px;

    padding:0 8px;

    box-sizing:border-box;

    border-inline-start:0;

}
/* Title */

.javo-trending-title {

    margin:0;

    color:#ffffff;

    font-size:18px;

    font-weight:800;

    line-height:1.45;

    max-width:75%;

    display:-webkit-box;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    overflow:hidden;

    text-overflow:ellipsis;
	

}
/* =========================================================
   Episodes Horizontal Rail — Mobile Native Scroll
========================================================= */

#javo-home-trending .javo-trending-episodes {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;

	width: 100%;
	min-width: 0;
	max-height: none;

	margin: 0;
    padding:4px 6px 8px;

	gap:6px;
	direction: rtl;

	overflow-x: auto;
	overflow-y: hidden;

	/*
	 * Important:
	 * Horizontal rail must not capture vertical page scrolling.
	 */
	overscroll-behavior-x: auto;
	overscroll-behavior-y: auto;

	/*
	 * Keep native browser touch handling.
	 */
	touch-action: manipulation;

	/*
	 * No snapping on mobile.
	 * This prevents the carousel from feeling sticky while
	 * the user is vertically scrolling the Home page.
	 */
	scroll-snap-type: none;

	box-sizing: border-box;

	/*
	 * Hide the scrollbar on touch devices.
	 */
	scrollbar-width: none;

	-webkit-overflow-scrolling: touch;
}

#javo-home-trending .javo-trending-episodes::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

#javo-home-trending .javo-trending-card {
	scroll-snap-align: none;
}

/* =========================================================
   Card
========================================================= */

.javo-trending .javo-trending-card {
  position:relative;

    display:block;

    flex:0 0 145px;

    width:145px;

    height:175px;

    min-width:145px;

    max-width:145px;
    overflow:visible;

	padding:0;

	margin:0;

	background:transparent;

	border:0;

	border-radius:22px;

	box-shadow:none;

	scroll-snap-align:none;

}

/* Inner */

.javo-trending .javo-trending-card-inner {

	display:flex;

	flex-direction:column;

	width:100%;

	height:100%;

}

/* =========================================================
   Artwork
========================================================= */

.javo-trending .javo-trending-artwork,

.javo-trending .javo-trending-artwork img,

.javo-trending .javo-trending-artwork-placeholder {

	 width:110px;

    height:110px;

    border-radius:16px;
}

.javo-trending .javo-trending-artwork {

	 flex:0 0 110px;

    width:110px;

    height:110px;

	margin:0 auto;

	overflow:hidden;

}

/* =========================================================
   Content
========================================================= */

.javo-trending .javo-trending-card-content {

    width:100%;

    padding:0 4px;

    margin-top:8px;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    box-sizing:border-box;

}

.javo-trending .javo-trending-channel-name {

    width:100%;

    margin:0;

    text-align:center;

    font-size:10.5px;

    line-height:1.5;

    overflow:hidden;

    white-space:nowrap;

    text-overflow:ellipsis;
	visibility: hidden;

}

.javo-trending .javo-trending-episode-title {

    margin-top:3px;

    width:100%;

    max-height:3.1em;

    padding:0 4px;

    box-sizing:border-box;

    font-size:12px;

    line-height:1.55;

    display:-webkit-box;

    overflow:hidden;

    text-overflow:ellipsis;

    -webkit-box-orient:vertical;

    -webkit-line-clamp:2;

    text-align:center;

    direction:rtl;
	color: #ffffff;
    justify-content:center;

}

/* =========================================================
   Duration Badge - Top Left Of Cover
========================================================= */
.javo-trending .javo-trending-duration {
	
    position:absolute;

    top:7px;

    left:calc((100% - 110px) / 2 + 5px);

    z-index:5;

    padding:3px 7px;

    color:#0f172a;

    font-size:8px;

    font-weight:600;

    line-height:1.3;

    font-variant-numeric:tabular-nums;

    white-space:nowrap;

    background:rgba(248,248,248,.75);

    border:1px solid rgba(255,255,255,.8);

    border-radius:999px;

    box-sizing:border-box;
	visibility: hidden;
}
/* =========================================================
   Play Button
========================================================= */

.javo-trending .javo-episode-play-trigger {

	position:absolute;

	top:86px;

right:calc((100% - 110px)/2 - 6px);

	width:38px;

	height:38px;

	min-width:38px;

	min-height:38px;

	box-shadow:0 5px 14px rgba(30,58,138,.3);

}

/* SVG */

.javo-trending .javo-episode-play-trigger .javo-svg-asset {

	width:12px;

	height:12px;

}

.javo-trending .javo-episode-play-trigger .javo-svg-check {

	width:15px;

	height:15px;

}

/* Remove Hover */

/* =========================================================
   Small Mobile
========================================================= */

@media(max-width:360px){

.javo-trending .javo-trending-card {

	flex-basis:150px;

	width:150px;

	min-width:150px;

	height:175px;

}

.javo-trending .javo-trending-artwork,

.javo-trending .javo-trending-artwork img,

.javo-trending .javo-trending-artwork-placeholder {

    width:100px;
height:100px;

}

.javo-trending .javo-episode-play-trigger {

	top:82px;

	right:calc((100% - 108px)/2 - 8px);

}

.javo-trending-title {

	font-size:16px;

}

}
/* Shared collection links, local covers and full-page container only. */
.javo-trending-more {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding: 3px 0;
	color: #ffffff;
	font-size: 12px;
	line-height: 1.6;
	text-decoration: none;
}
.javo-trending-more:hover { text-decoration: underline; }
.javo-trending a:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}
.javo-trending .javo-trending-artwork {
	box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
.javo-trending-artwork-placeholder { background: rgba(179, 231, 255, .12); }
.javo-trending-podcast-item { flex: 0 0 145px; min-width: 0; }
.javo-trending .javo-trending-podcast-card { color: inherit; text-decoration: none; }
.javo-trending .javo-trending-podcast-card .javo-trending-card-content {
	padding-top: 15.75px; /* Preserve the episode card's existing channel-name space. */
}
.javo-trending .javo-trending-card { transition: none; }
.javo-trending-collection-title {
	margin: 0 8px 8px;
	color: #B3E7FF;
	font-size: 12px;
	font-weight: 500;
}
.javo-trending-page {
	width: 100%;
	max-width: 1040px;
	margin: 24px auto;
	padding: 0 10px;
	box-sizing: border-box;
	min-width: 0;
}
.javo-trending-page > h1 { visibility: hidden; color: #fff; font-size: 24px; margin: 0 8px 24px; }
.javo-trending-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(145px, 100%), 145px));
	justify-content: space-around;
	gap: 18px 6px;
	min-width: 0;
	padding: 4px 0 8px;
	direction: rtl;
}
/* Keep even unusually narrow viewports within the grid shell. */
.javo-trending-grid .javo-trending-card {
	width: 100%; min-width: 0; max-width: 145px;
}
/* The shared Episode stylesheet sets these on mobile; retain them on desktop too. */
.javo-trending .javo-episode-play-trigger { font-size: .84rem; font-weight: 700; }