/**
 * Hero reels module — front styles.
 *
 * Reuses AuraReels story-circle classes; scopes layout to the single hero.
 */

.chavetas-hero-reels-module {
	position: relative;
}

.chavetas-hero-reels-module__player {
	cursor: pointer;
	display: block;
	line-height: 0;
	max-width: 100%;
}

.chavetas-hero-reels-module__player:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Pre-hydration fallback poster (replaced by AuraReels React mount). */
.chavetas-hero-reels-module__fallback .chavetas-hero-reels-module__circle {
	height: 88px;
	width: 88px;
}

.chavetas-hero-reels-module__fallback .cha-bubble-content__icon-shorts {
	aspect-ratio: 1;
	background-clip: padding-box;
	border: 4px solid transparent;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	overflow: hidden;
	position: relative;
}

.chavetas-hero-reels-module__fallback .cha-bubble-content__icon-shorts::before {
	background: linear-gradient(36deg, rgb(255, 201, 0) 13%, rgb(255, 0, 95) 73%, rgb(255, 9, 237) 100%);
	border-radius: 50%;
	bottom: -2px;
	content: "";
	left: -2px;
	position: absolute;
	right: -2px;
	top: -2px;
	z-index: 0;
}

.chavetas-hero-reels-module__fallback .cha-bubble-content__icon-shorts::after {
	background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.2rem;
	content: "";
	height: 100%;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 4;
}

.chavetas-hero-reels-module__fallback .cha-bubble-content__icon-shorts img {
	border: 3px solid #fff;
	border-radius: 50%;
	display: block;
	height: 100%;
	object-fit: cover;
	position: relative;
	width: 100%;
	z-index: 1;
}

@media (min-width: 768px) {
	.chavetas-hero-reels-module__fallback .chavetas-hero-reels-module__circle {
		height: 104px;
		width: 104px;
	}
}

/* After AuraReels hydrates: show only the featured story circle. */
.chavetas-hero-reels-module .shorts-wrapper,
.chavetas-hero-reels-module section {
	margin: 0;
	padding: 0;
}

.chavetas-hero-reels-module .shorts-carousel,
.chavetas-hero-reels-module .shorts-track {
	display: block;
	margin: 0;
	padding: 0 !important;
}

.chavetas-hero-reels-module .shorts-track .short-poster-container {
	display: none !important;
	height: 88px;
	margin: 0;
	width: 88px;
}

.chavetas-hero-reels-module .shorts-track .short-poster-container:nth-child( n ) {
	display: none !important;
}

.chavetas-hero-reels-module[data-featured-index="0"] .shorts-track .short-poster-container:nth-child(1),
.chavetas-hero-reels-module[data-featured-index="1"] .shorts-track .short-poster-container:nth-child(2),
.chavetas-hero-reels-module[data-featured-index="2"] .shorts-track .short-poster-container:nth-child(3),
.chavetas-hero-reels-module[data-featured-index="3"] .shorts-track .short-poster-container:nth-child(4),
.chavetas-hero-reels-module[data-featured-index="4"] .shorts-track .short-poster-container:nth-child(5),
.chavetas-hero-reels-module[data-featured-index="5"] .shorts-track .short-poster-container:nth-child(6),
.chavetas-hero-reels-module[data-featured-index="6"] .shorts-track .short-poster-container:nth-child(7),
.chavetas-hero-reels-module[data-featured-index="7"] .shorts-track .short-poster-container:nth-child(8),
.chavetas-hero-reels-module[data-featured-index="8"] .shorts-track .short-poster-container:nth-child(9),
.chavetas-hero-reels-module[data-featured-index="9"] .shorts-track .short-poster-container:nth-child(10),
.chavetas-hero-reels-module[data-featured-index="10"] .shorts-track .short-poster-container:nth-child(11),
.chavetas-hero-reels-module[data-featured-index="11"] .shorts-track .short-poster-container:nth-child(12),
.chavetas-hero-reels-module[data-featured-index="12"] .shorts-track .short-poster-container:nth-child(13),
.chavetas-hero-reels-module[data-featured-index="13"] .shorts-track .short-poster-container:nth-child(14),
.chavetas-hero-reels-module[data-featured-index="14"] .shorts-track .short-poster-container:nth-child(15) {
	display: flex !important;
}

.chavetas-hero-reels-module[style*="--chavetas-featured-child"] .shorts-track .short-poster-container:nth-child( var( --chavetas-featured-child ) ) {
	display: flex !important;
}

@media (min-width: 768px) {
	.chavetas-hero-reels-module .shorts-track .short-poster-container,
	.chavetas-hero-reels-module__fallback .chavetas-hero-reels-module__circle {
		height: 104px;
		width: 104px;
	}
}

.chavetas-hero-reels-module .shorts-track .cha-bubble-content__icon-shorts img {
	border-width: 2px;
}

/* Hide pre-hydration fallback once AuraReels mounts the carousel. */
.chavetas-hero-reels-module__player:has( .shorts-wrapper ) .chavetas-hero-reels-module__fallback,
.chavetas-hero-reels-module__player:has( .shorts-carousel ) .chavetas-hero-reels-module__fallback {
	display: none;
}
.chavetas-hero-reels-module + div[style*="Powered by"],
.chavetas-hero-reels-area .chavetas-hero-reels-module ~ div[style*="Powered by"] {
	display: none !important;
}