/* Bonzi overrides for the scoped reel-cards social-proof section.
 * Loaded AFTER reel-cards.css so these win the cascade.
 *
 * The raw captured section is a self-contained dark Webflow block
 * (#121212 panels, grayscale accents, green "active" pills) whose motion
 * + hover effects were driven by Webflow IX2 / Swiper JS we deliberately
 * don't ship. On the Bonzi /new page that left it (a) sitting on its own
 * slightly-off dark panel instead of the page surface, (b) without the
 * page's vertical hairline rails, and (c) inert on hover. This file
 * retones it to the page palette (near-black surface, white@20% hairlines,
 * brand amber #fbbf24) and adds CSS-only hover affordances so it feels
 * native to the rest of the page.
 */

/* ── Section surface + side rails ─────────────────────────────────────
   Drop the section's own dark fill so the page's near-black shows
   through, and add the vertical "border-x" rails the surrounding
   sections use. */
.reel-clone .reel_section {
	background-color: transparent;
	color: inherit;
}
.reel-clone .container-large {
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}
/* The rails sit on `.container-large`, but its children (heading, the
   framed showcase, the card grid) had no inner horizontal padding, so
   they ran flush into the rails. Inset the content so nothing touches the
   side lines — mirrors the gutter the clone sections keep. */
.reel-clone .padding-section-large {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	/* Tighten the vertical rhythm — the original 7.5rem (reel-cards.css) left
	   a loose ~120px band above/below the mosaic that stacked with the
	   neighbouring carousel/pricing padding into a cavernous gap. 4rem keeps
	   premium breathing room without the dead space. */
	padding-top: 4rem;
	padding-bottom: 4rem;
}
@media (max-width: 767px) {
	.reel-clone .padding-section-large {
		padding-left: 1.25rem;
		padding-right: 1.25rem;
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}
}

/* ── Heading + subtitle ───────────────────────────────────────────────
   Amber accent on the serif "the best marketers" run, matching the
   page's other accented headings. */
.reel-clone .font-redaction {
	color: #fbbf24;
}

/* ── Tab panel (the framed showcase) ──────────────────────────────────
   The inner `.tpl-masonry-wrap` is now the single framed box around the
   videos (its own border + surface + shadow). Strip this OUTER container's
   frame entirely so it's just a transparent passthrough wrapper — no
   double box. Also drop the fixed 39rem height + overflow:hidden so the
   inner box isn't clipped and sizes to its own content. */
.reel-clone .reelcard_tab-container {
	background-color: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
	height: auto;
	overflow: visible;
}

/* Brighten the brand divider line under each tab name. */
.reel-clone .reelcard_line {
	height: 1px;
	background-image: linear-gradient(
		268deg,
		rgba(251, 191, 36, 0),
		rgba(251, 191, 36, 0.55) 50%,
		rgba(251, 191, 36, 0)
	);
}
.reel-clone .reelcard_name {
	opacity: 0.55;
}

/* ── Creative cards ───────────────────────────────────────────────────
   The cards were static. Give each its own hover: lift, amber-tinted
   border glow, and a brighter inner gradient — so the grid feels alive
   without the original JS. */
.reel-clone .reelcard_cards {
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}
.reel-clone .reelcard_cards:hover {
	transform: translateY(-6px);
	z-index: 3;
}
.reel-clone .reelcard_cards-gradient {
	transition:
		background-image 0.35s ease,
		box-shadow 0.35s ease;
}
.reel-clone .reelcard_cards:hover .reelcard_cards-gradient {
	background-image: linear-gradient(
		rgba(251, 191, 36, 0.5),
		rgba(251, 191, 36, 0.12)
	);
	box-shadow: 0 18px 50px -20px rgba(251, 191, 36, 0.35);
}
.reel-clone .reelcard_cards-inside {
	transition: background-color 0.35s ease;
}
.reel-clone .reelcard_cards:hover .reelcard_cards-inside {
	background-color: #171717;
}
/* Cover image inside each card zooms slightly on hover. */
.reel-clone .reelcard_cards-inside-img-wrap {
	overflow: hidden;
}
.reel-clone .reelcard_cards-inside-img-wrap img {
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reel-clone .reelcard_cards:hover .reelcard_cards-inside-img-wrap img {
	transform: scale(1.05);
}

/* ── "Active" pills → brand amber (was the original green) ────────────── */
.reel-clone .reelcard_cards-active-tag,
.reel-clone .reelcard_cards-bottom-item-tag {
	color: #fbbf24;
	background-color: rgba(251, 191, 36, 0.1);
}
.reel-clone .reelcard_cards-active-circle {
	background-color: #fbbf24;
	box-shadow: 0 0 6px rgba(251, 191, 36, 0.8);
}

/* ── Testimonial brand chips (top row) ────────────────────────────────
   Match the card surface, and add a hover lift + amber border. */
.reel-clone .testi_item {
	transition:
		transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.35s ease;
}
.reel-clone .swiper-slide.is-slider-testi:hover .testi_item {
	transform: translateY(-4px);
	background-color: rgba(255, 255, 255, 0.04);
}
.reel-clone .swiper-slide.is-slider-testi:hover .testi_item-border-gradient {
	opacity: 1;
	background-image: linear-gradient(
		170deg,
		rgba(251, 191, 36, 0.1) 39%,
		rgba(251, 191, 36, 0.3)
	);
}

/* ── Edge fade gradients → page surface ───────────────────────────────
   The left/right fades were keyed to the capture's #121212. Re-point them to a
   transparent-to-page fade so they blend on the near-black page. */
.reel-clone .reelcard_gradient {
	background-image: linear-gradient(
		90deg,
		rgba(10, 10, 10, 0.9) 20%,
		rgba(10, 10, 10, 0)
	);
}
.reel-clone .reelcard_gradient.is-right {
	background-image: linear-gradient(
		270deg,
		rgba(10, 10, 10, 0.9) 20%,
		rgba(10, 10, 10, 0)
	);
}