/* ==========================================================================
   THE SMILE CHANNEL — CINEMATIC PLATFORM THEME (LIGHT MODE)
   Main Stylesheet
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS — LIGHT PALETTE
   ========================================================================== */
:root {
	/* Color — Base surfaces (warm whites & creams) */
	--tsc-white:        #FFFFFF;
	--tsc-cream:        #FAF8F3;
	--tsc-cream-2:      #F4F1E8;
	--tsc-cream-3:      #ECE8DC;
	--tsc-line:         #E5E0D2;
	--tsc-line-soft:    rgba(60, 50, 30, 0.08);

	/* Color — Text */
	--tsc-text:         #1A1814;
	--tsc-text-2:       #3D3830;
	--tsc-text-mute:    #6B6558;
	--tsc-text-dim:     #9A9384;

	/* Color — Gold accent */
	--tsc-gold:         #B8862A;
	--tsc-gold-soft:    #D4A24C;
	--tsc-gold-deep:    #8B6420;
	--tsc-gold-pale:    #F5EAD0;
	--tsc-glow:         rgba(184, 134, 42, 0.18);

	/* Color — States */
	--tsc-glass:        rgba(255, 255, 255, 0.7);
	--tsc-success:      #2D7A4F;
	--tsc-live:         #DC2626;

	/* Typography */
	--font-display:     'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-ui:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--text-hero:        clamp(3rem, 6vw, 5.5rem);
	--text-h1:          clamp(2.25rem, 4vw, 3.5rem);
	--text-h2:          clamp(1.625rem, 2.5vw, 2.25rem);
	--text-h3:          1.375rem;
	--text-h4:          1.125rem;
	--text-body:        1.0625rem;
	--text-small:       0.875rem;
	--text-micro:       0.75rem;

	/* Spacing — 8px base */
	--space-1:          0.25rem;
	--space-2:          0.5rem;
	--space-3:          0.75rem;
	--space-4:          1rem;
	--space-5:          1.5rem;
	--space-6:          2rem;
	--space-7:          3rem;
	--space-8:          4rem;
	--space-9:          6rem;
	--space-10:         8rem;

	--section-py:       clamp(4rem, 8vw, 8rem);

	/* Layout */
	--container-max:    1440px;
	--container-read:   1280px;
	--container-text:   720px;
	--container-px:     clamp(1rem, 4vw, 2.5rem);

	/* Radius */
	--radius-sm:        6px;
	--radius:           12px;
	--radius-lg:        20px;
	--radius-pill:      999px;

	/* Motion */
	--ease:             cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast:         200ms;
	--dur:              400ms;
	--dur-slow:         700ms;

	/* Shadows — soft, warm, elevation-based */
	--shadow-sm:        0 2px 8px rgba(60, 50, 30, 0.06);
	--shadow:           0 12px 32px -12px rgba(60, 50, 30, 0.15);
	--shadow-lg:        0 24px 64px -24px rgba(60, 50, 30, 0.22);
	--shadow-glow:      0 0 0 1px rgba(184, 134, 42, 0.35), 0 16px 40px -16px rgba(184, 134, 42, 0.25);
}

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.smile-channel-theme {
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-body);
	line-height: 1.6;
	color: var(--tsc-text);
	background: var(--tsc-cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'cv11', 'ss01', 'ss03';
	overflow-x: hidden;
	padding-top: 80px; /* offset for fixed header */
}

@media (max-width: 900px) {
	body.smile-channel-theme { padding-top: 70px; }
}

/* Elementor Canvas template has no theme header — kill the offset */
body.smile-channel-theme.tsc-elementor-canvas,
body.smile-channel-theme.elementor-template-canvas {
	padding-top: 0;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }

a { color: var(--tsc-gold); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--tsc-gold-deep); }

::selection { background: var(--tsc-gold); color: var(--tsc-white); }

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--tsc-cream); }
::-webkit-scrollbar-thumb {
	background: var(--tsc-cream-3);
	border-radius: 6px;
	border: 3px solid var(--tsc-cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--tsc-gold-soft); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 var(--space-4);
	color: var(--tsc-text-2);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p { margin: 0 0 var(--space-4); }

.text-hero {
	font-family: var(--font-display);
	font-size: var(--text-hero);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 500;
}

.text-eyebrow {
	font-family: var(--font-ui);
	font-size: var(--text-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--tsc-gold);
	margin-bottom: var(--space-4);
	display: inline-block;
}

.text-mute { color: var(--tsc-text-mute); }
.text-italic { font-style: italic; }

.gradient-text {
	background: linear-gradient(135deg, var(--tsc-gold-deep) 0%, var(--tsc-gold) 50%, var(--tsc-gold-soft) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */
.tsc-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-px);
}

.tsc-container--read { max-width: var(--container-read); }
.tsc-container--text { max-width: var(--container-text); }

.tsc-section { padding-block: var(--section-py); position: relative; }
.tsc-section--alt { background: var(--tsc-cream-2); }

.tsc-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-5);
	margin-bottom: var(--space-7);
	flex-wrap: wrap;
}

.tsc-section-head h2 { margin: 0; }

.tsc-section-head .view-all {
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 500;
	color: var(--tsc-text-mute);
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}

.tsc-section-head .view-all:hover { color: var(--tsc-gold); gap: var(--space-3); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */
.tsc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.95rem 1.75rem;
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: all var(--dur) var(--ease);
	text-decoration: none;
	white-space: nowrap;
	background: transparent;
	color: var(--tsc-text);
	line-height: 1;
}

.tsc-btn--primary {
	background: var(--tsc-text);
	color: var(--tsc-cream);
	border-color: var(--tsc-text);
}

.tsc-btn--primary:hover {
	background: var(--tsc-gold);
	border-color: var(--tsc-gold);
	color: var(--tsc-white);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(184, 134, 42, 0.5);
}

.tsc-btn--gold {
	background: var(--tsc-gold);
	color: var(--tsc-white);
	border-color: var(--tsc-gold);
}

.tsc-btn--gold:hover {
	background: var(--tsc-gold-deep);
	border-color: var(--tsc-gold-deep);
	color: var(--tsc-white);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -12px rgba(184, 134, 42, 0.6);
}

.tsc-btn--ghost {
	background: transparent;
	color: var(--tsc-text);
	border-color: var(--tsc-line);
}

.tsc-btn--ghost:hover {
	background: var(--tsc-cream-2);
	border-color: var(--tsc-gold);
	color: var(--tsc-gold-deep);
	transform: translateY(-2px);
}

.tsc-btn--lg { padding: 1.15rem 2.25rem; font-size: 1rem; }
.tsc-btn--sm { padding: 0.65rem 1.25rem; font-size: var(--text-micro); }

.tsc-btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.tsc-btn:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   6. HEADER — solid white, sticky, balanced
   ========================================================================== */
.tsc-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: #FFFFFF;
	border-bottom: 1px solid var(--tsc-line);
	box-shadow: 0 1px 0 rgba(60, 50, 30, 0.04);
	transition: box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
}

/* Slightly stronger shadow + tighter padding once scrolled */
.tsc-header--scrolled {
	box-shadow: 0 6px 24px -12px rgba(60, 50, 30, 0.18);
}

.tsc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	min-height: 80px;
	padding-block: var(--space-3);
	transition: min-height var(--dur) var(--ease);
}

.tsc-header--scrolled .tsc-header__inner {
	min-height: 64px;
}

/* Logo column — fixed to the left */
.tsc-logo {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--tsc-text);
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	flex-shrink: 0;
	line-height: 1;
	text-decoration: none;
}

.tsc-logo:hover { color: var(--tsc-text); }
.tsc-logo .accent { color: var(--tsc-gold); }

/* WordPress custom logo (image) — constrained so it never overflows the header */
.tsc-logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
}

.tsc-logo .custom-logo {
	display: block;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: max-height var(--dur) var(--ease);
}

.tsc-header--scrolled .tsc-logo .custom-logo {
	max-height: 44px;
}

/* ==========================================================================
   6.1 HOMEPAGE TRANSPARENT HEADER
   On the front page only, header starts transparent over the dark hero,
   then transitions to solid white on scroll past the hero.
   ========================================================================== */
body.tsc-home-transparent {
	padding-top: 0; /* hero handles its own top spacing */
}

body.tsc-home-transparent .tsc-header {
	background: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
}

/* Light text on transparent header */
body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-logo {
	color: #FFFFFF;
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-logo .accent {
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav__menu a {
	color: #FFFFFF;
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav__menu a:hover {
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-nav__menu a::after {
	background: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-btn--ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.4);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--tsc-gold-soft);
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-header:not(.tsc-header--scrolled) .tsc-mobile-toggle {
	color: #FFFFFF;
}

/* Once user scrolls past hero, switch to solid white header */
body.tsc-home-transparent .tsc-header.tsc-header--scrolled {
	background: #FFFFFF;
	border-bottom-color: var(--tsc-line);
	box-shadow: 0 6px 24px -12px rgba(60, 50, 30, 0.18);
}

/* Dark hero styling — overrides the light hero on transparent-home pages */
body.tsc-home-transparent .tsc-hero {
	min-height: 100vh;
	background: #0A0A0B;
	padding-top: 120px; /* room for the transparent header */
}

body.tsc-home-transparent .tsc-hero__bg::before {
	background:
		radial-gradient(ellipse at 30% 40%, rgba(212, 162, 76, 0.18) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 60%, rgba(139, 100, 32, 0.12) 0%, transparent 50%),
		linear-gradient(180deg, #0A0A0B 0%, #06060A 100%);
}

body.tsc-home-transparent .tsc-hero__bg::after {
	background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 10, 11, 0.95) 100%);
}

body.tsc-home-transparent .tsc-hero__title {
	color: #FFFFFF;
}

body.tsc-home-transparent .tsc-hero__title em {
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-hero__sub {
	color: rgba(255, 255, 255, 0.72);
}

body.tsc-home-transparent .tsc-hero .text-eyebrow {
	color: var(--tsc-gold-soft);
}

body.tsc-home-transparent .tsc-hero__scroll {
	color: rgba(255, 255, 255, 0.5);
}

/* Hero CTAs on dark hero */
body.tsc-home-transparent .tsc-hero .tsc-btn--primary {
	background: var(--tsc-gold);
	border-color: var(--tsc-gold);
	color: #FFFFFF;
}

body.tsc-home-transparent .tsc-hero .tsc-btn--primary:hover {
	background: var(--tsc-gold-soft);
	border-color: var(--tsc-gold-soft);
	color: #0A0A0B;
}

body.tsc-home-transparent .tsc-hero .tsc-btn--ghost {
	color: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.4);
}

body.tsc-home-transparent .tsc-hero .tsc-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--tsc-gold-soft);
	color: var(--tsc-gold-soft);
}

.tsc-nav { display: flex; align-items: center; gap: var(--space-6); }

.tsc-nav__menu {
	display: flex;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

.tsc-nav__menu a {
	color: var(--tsc-text);
	font-family: var(--font-ui);
	font-size: var(--text-small);
	font-weight: 500;
	letter-spacing: 0.02em;
	position: relative;
	padding: var(--space-2) 0;
}

.tsc-nav__menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--tsc-gold);
	transition: width var(--dur) var(--ease);
}

.tsc-nav__menu a:hover { color: var(--tsc-gold-deep); }

.tsc-nav__menu a:hover::after,
.tsc-nav__menu .current-menu-item > a::after { width: 100%; }

.tsc-mobile-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--tsc-text);
	cursor: pointer;
	padding: var(--space-2);
}

@media (max-width: 900px) {
	.tsc-nav__menu { display: none; }
	.tsc-mobile-toggle { display: block; }
	.tsc-nav__menu.is-open {
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		background: var(--tsc-white);
		padding: var(--space-5);
		border-top: 1px solid var(--tsc-line);
		box-shadow: var(--shadow);
	}
}

/* ==========================================================================
   7. HERO
   ========================================================================== */
.tsc-hero {
	position: relative;
	min-height: calc(100vh - 80px);
	display: flex;
	align-items: center;
	overflow: hidden;
	padding-top: var(--space-8);
	padding-bottom: var(--space-8);
}

.tsc-hero__bg { position: absolute; inset: 0; z-index: 0; }

.tsc-hero__bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 40%, rgba(212, 162, 76, 0.16) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 60%, rgba(184, 134, 42, 0.10) 0%, transparent 50%),
		linear-gradient(180deg, var(--tsc-cream) 0%, var(--tsc-cream-2) 100%);
}

.tsc-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, transparent 30%, rgba(250, 248, 243, 0.6) 100%);
	pointer-events: none;
}

.tsc-hero__content { position: relative; z-index: 2; max-width: 760px; }

.tsc-hero__title {
	font-size: var(--text-hero);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--space-5);
	font-weight: 500;
	color: var(--tsc-text);
}

.tsc-hero__title em { font-style: italic; color: var(--tsc-gold); }

.tsc-hero__sub {
	font-size: 1.25rem;
	color: var(--tsc-text-mute);
	max-width: 580px;
	margin: 0 0 var(--space-7);
	line-height: 1.6;
}

.tsc-hero__cta { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.tsc-hero__scroll {
	position: absolute;
	bottom: var(--space-7);
	left: 50%;
	transform: translateX(-50%);
	color: var(--tsc-text-dim);
	font-size: var(--text-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	animation: tsc-float 3s ease-in-out infinite;
}

@keyframes tsc-float {
	0%, 100% { transform: translateX(-50%) translateY(0); }
	50%      { transform: translateX(-50%) translateY(8px); }
}

/* ==========================================================================
   8. CARDS
   ========================================================================== */
.tsc-card {
	position: relative;
	background: var(--tsc-white);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	border: 1px solid var(--tsc-line);
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-sm);
}

.tsc-card:hover {
	transform: translateY(-6px) scale(1.02);
	box-shadow:
		0 24px 48px -20px rgba(60, 50, 30, 0.25),
		0 0 0 1px rgba(184, 134, 42, 0.35);
}

.tsc-card__media {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
	background: var(--tsc-cream-3);
}

.tsc-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.tsc-card:hover .tsc-card__media img { transform: scale(1.08); }

.tsc-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(26, 24, 20, 0.85) 100%);
	pointer-events: none;
}

.tsc-card__body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-5);
	z-index: 2;
}

.tsc-card__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 500;
	margin: 0 0 var(--space-1);
	color: var(--tsc-white);
	line-height: 1.2;
}

.tsc-card__meta {
	font-size: var(--text-micro);
	color: rgba(255, 255, 255, 0.78);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.tsc-card__featured {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	background: var(--tsc-gold);
	color: var(--tsc-white);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	z-index: 3;
	box-shadow: 0 4px 12px rgba(184, 134, 42, 0.4);
}

/* Episode card variant — landscape, light body */
.tsc-card--episode .tsc-card__media { aspect-ratio: 16 / 9; }

.tsc-card--episode .tsc-card__body {
	position: static;
	padding: var(--space-5);
	background: var(--tsc-white);
}

.tsc-card--episode .tsc-card__title { color: var(--tsc-text-2); }
.tsc-card--episode .tsc-card__meta { color: var(--tsc-text-mute); }

.tsc-card--episode .tsc-card__media::after {
	background: linear-gradient(180deg, transparent 60%, rgba(26, 24, 20, 0.4) 100%);
}

.tsc-card--episode .tsc-card__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	z-index: 3;
}

.tsc-card--episode:hover .tsc-card__play { opacity: 1; }

.tsc-card__play-icon {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--tsc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tsc-gold);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	transform: scale(0.8);
	transition: transform var(--dur) var(--ease);
}

.tsc-card--episode:hover .tsc-card__play-icon { transform: scale(1); }

.tsc-card__duration {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	color: var(--tsc-text);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-sm);
	font-size: var(--text-micro);
	font-weight: 600;
	z-index: 3;
}

/* ==========================================================================
   9. CAROUSEL / HORIZONTAL ROWS
   ========================================================================== */
.tsc-row {
	position: relative;
	margin-inline: calc(var(--container-px) * -1);
	padding-inline: var(--container-px);
}

.tsc-row__track {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--container-px);
	padding-block: var(--space-3);
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tsc-row__track::-webkit-scrollbar { display: none; }

.tsc-row__track > * { flex: 0 0 280px; scroll-snap-align: start; }
.tsc-row--landscape .tsc-row__track > * { flex: 0 0 360px; }

.tsc-row::before,
.tsc-row::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	pointer-events: none;
	z-index: 5;
}

.tsc-row::before { left: 0; background: linear-gradient(90deg, var(--tsc-cream) 0%, transparent 100%); }
.tsc-row::after { right: 0; background: linear-gradient(-90deg, var(--tsc-cream) 0%, transparent 100%); }

.tsc-section--alt .tsc-row::before { background: linear-gradient(90deg, var(--tsc-cream-2) 0%, transparent 100%); }
.tsc-section--alt .tsc-row::after { background: linear-gradient(-90deg, var(--tsc-cream-2) 0%, transparent 100%); }

/* ==========================================================================
   10. GRID
   ========================================================================== */
.tsc-grid { display: grid; gap: var(--space-5); }
.tsc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tsc-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.tsc-grid--4 { grid-template-columns: repeat(3, 1fr); }
	.tsc-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
	.tsc-grid--4 { grid-template-columns: repeat(2, 1fr); }
	.tsc-grid--3 { grid-template-columns: 1fr; }
}

.tsc-grid--animate > * { opacity: 0; animation: tsc-fade-up var(--dur-slow) var(--ease) forwards; }

@keyframes tsc-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tsc-grid--animate > *:nth-child(1) { animation-delay: 0ms; }
.tsc-grid--animate > *:nth-child(2) { animation-delay: 60ms; }
.tsc-grid--animate > *:nth-child(3) { animation-delay: 120ms; }
.tsc-grid--animate > *:nth-child(4) { animation-delay: 180ms; }
.tsc-grid--animate > *:nth-child(5) { animation-delay: 240ms; }
.tsc-grid--animate > *:nth-child(6) { animation-delay: 300ms; }
.tsc-grid--animate > *:nth-child(7) { animation-delay: 360ms; }
.tsc-grid--animate > *:nth-child(8) { animation-delay: 420ms; }

/* ==========================================================================
   11. WHY SECTION (FEATURE COLUMNS)
   ========================================================================== */
.tsc-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-7);
}

@media (max-width: 900px) { .tsc-features { grid-template-columns: 1fr; } }

.tsc-feature { text-align: left; }

.tsc-feature__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--tsc-gold-pale);
	border: 1px solid rgba(184, 134, 42, 0.25);
	border-radius: var(--radius);
	color: var(--tsc-gold);
	margin-bottom: var(--space-5);
}

.tsc-feature__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	margin: 0 0 var(--space-3);
	color: var(--tsc-text-2);
}

.tsc-feature__text { color: var(--tsc-text-mute); margin: 0; line-height: 1.7; }

/* ==========================================================================
   12. TESTIMONIALS
   ========================================================================== */
.tsc-testimonials {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: var(--space-7);
	align-items: center;
}

@media (max-width: 900px) { .tsc-testimonials { grid-template-columns: 1fr; } }

.tsc-testimonial-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--tsc-cream-3);
	cursor: pointer;
	border: 1px solid var(--tsc-line);
	box-shadow: var(--shadow);
}

.tsc-testimonial-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dur-slow) var(--ease);
}

.tsc-testimonial-video:hover img { transform: scale(1.04); }

.tsc-testimonial-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsc-testimonial-video__play-icon {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--tsc-white);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--tsc-gold);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
	transition: transform var(--dur) var(--ease);
}

.tsc-testimonial-video:hover .tsc-testimonial-video__play-icon { transform: scale(1.1); }

.tsc-reviews { display: flex; flex-direction: column; gap: var(--space-4); }

.tsc-review {
	background: var(--tsc-white);
	border: 1px solid var(--tsc-line);
	border-radius: var(--radius);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
	transition: all var(--dur) var(--ease);
}

.tsc-review:hover {
	border-color: var(--tsc-gold-soft);
	box-shadow: var(--shadow);
	transform: translateY(-2px);
}

.tsc-review__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.tsc-review__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--tsc-cream-3);
	flex-shrink: 0;
	overflow: hidden;
}

.tsc-review__avatar img { width: 100%; height: 100%; object-fit: cover; }

.tsc-review__name {
	font-weight: 600;
	font-size: var(--text-small);
	color: var(--tsc-text);
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.tsc-review__verified { color: var(--tsc-gold); font-size: 0.875rem; }
.tsc-review__title { font-size: var(--text-micro); color: var(--tsc-text-mute); }

.tsc-review__quote {
	font-size: var(--text-small);
	color: var(--tsc-text);
	margin: 0;
	line-height: 1.6;
}

/* ==========================================================================
   13. FINAL CTA SECTION
   ========================================================================== */
.tsc-final-cta {
	position: relative;
	text-align: center;
	padding-block: clamp(6rem, 12vw, 10rem);
	overflow: hidden;
}

.tsc-final-cta::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(212, 162, 76, 0.14) 0%, transparent 60%),
		linear-gradient(180deg, var(--tsc-cream) 0%, var(--tsc-cream-2) 100%);
	z-index: 0;
}

.tsc-final-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin-inline: auto;
}

.tsc-final-cta h2 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin-bottom: var(--space-5);
	color: var(--tsc-text);
}

.tsc-final-cta p {
	font-size: 1.125rem;
	color: var(--tsc-text-mute);
	margin-bottom: var(--space-7);
}

.tsc-final-cta__buttons {
	display: flex;
	gap: var(--space-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* ==========================================================================
   14. FOOTER
   ========================================================================== */
.tsc-footer {
	background: var(--tsc-cream-2);
	border-top: 1px solid var(--tsc-line);
	padding-block: var(--space-9) var(--space-6);
}

.tsc-footer__grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: var(--space-7);
	margin-bottom: var(--space-8);
}

@media (max-width: 900px) { .tsc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .tsc-footer__grid { grid-template-columns: 1fr; } }

.tsc-footer__brand p {
	color: var(--tsc-text-mute);
	max-width: 320px;
	margin-top: var(--space-3);
}

.tsc-footer h4,
.footer-widget-title {
	font-family: var(--font-ui);
	font-size: var(--text-micro);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--tsc-text);
	margin-bottom: var(--space-4);
}

.tsc-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.tsc-footer li a {
	color: var(--tsc-text-mute);
	font-size: var(--text-small);
	transition: color var(--dur-fast) var(--ease);
}

.tsc-footer li a:hover { color: var(--tsc-gold); }

.tsc-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: var(--space-5);
	border-top: 1px solid var(--tsc-line);
	color: var(--tsc-text-dim);
	font-size: var(--text-micro);
	letter-spacing: 0.04em;
	flex-wrap: wrap;
	gap: var(--space-3);
}

/* ==========================================================================
   15. PLUGIN INTEGRATION
   ========================================================================== */
.has-scge .scge-guests-grid,
.has-scge .scge-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-5);
}

@media (max-width: 1024px) {
	.has-scge .scge-guests-grid,
	.has-scge .scge-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
	.has-scge .scge-guests-grid,
	.has-scge .scge-grid { grid-template-columns: repeat(2, 1fr); }
}

.has-smile-events .smile-events-list,
.has-smile-events .smile-events-grid { color: var(--tsc-text); }

/* ==========================================================================
   16. PAGE HEADER / CONTENT
   ========================================================================== */
.tsc-page-header {
	padding-top: var(--space-8);
	padding-bottom: var(--space-7);
	text-align: center;
	background: linear-gradient(180deg, var(--tsc-cream-2) 0%, var(--tsc-cream) 100%);
}

.tsc-page-header h1 { font-size: var(--text-h1); margin-bottom: var(--space-3); }

.tsc-page-header p {
	color: var(--tsc-text-mute);
	font-size: 1.125rem;
	max-width: 580px;
	margin-inline: auto;
}

.tsc-content { max-width: var(--container-text); margin-inline: auto; }

/* ==========================================================================
   17. UTILITIES
   ========================================================================== */
.tsc-text-center { text-align: center; }
.tsc-mt-0 { margin-top: 0; }
.tsc-mb-0 { margin-bottom: 0; }

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   18. RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
	.tsc-hero { min-height: 90vh; }
	.tsc-hero__title { font-size: clamp(2.25rem, 9vw, 3.5rem); }
	.tsc-hero__sub { font-size: 1.0625rem; }
	.tsc-section-head { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}