/*--------------------------------------------------------------
# TikTok Slider — Site-wide band (above the footer) with the official TikTok embed
# No Figma node (new section): built from base.css design tokens, matching
# the shared .section-header pattern. embed.js renders the account's latest
# videos in a horizontal, auto-updating carousel.
--------------------------------------------------------------*/

.tiktok-slider {
	padding-block: var(--section-gap);
}

/* Header — reuses shared .section-header (orange bottom border) */
.tiktok-slider__header {
	margin-bottom: var(--card-gap);
}

.tiktok-slider__title {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0;
	color: var(--color-text-light);
}

.tiktok-slider__icon {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--color-primary-text);
}

.tiktok-slider__link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	white-space: nowrap;
}

/* Embed wrapper — centers the official embed (max 780px) and reserves
   height to avoid layout shift (CLS) while embed.js swaps the blockquote
   for its iframe. */
.tiktok-slider__embed {
	max-width: 48.75rem; /* 780px — TikTok creator embed max width */
	min-height: 30rem;   /* reserve space to prevent CLS before iframe loads */
	margin-inline: auto;
}

/* Pre-render placeholder (briefly visible before embed.js runs).
   embed.js replaces this blockquote with the TikTok iframe. */
.tiktok-slider__blockquote {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 30rem;
	margin: 0;
	padding: var(--inner-padding);
	background-color: var(--color-surface-card);
	border: 1px solid var(--color-border-accent);
	border-radius: var(--radius-lg);
}

.tiktok-slider__blockquote a {
	color: var(--color-primary-text);
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
}

@media screen and (max-width: 768px) {
	.tiktok-slider__embed,
	.tiktok-slider__blockquote {
		min-height: 26rem;
	}
}