/* ==========================================================================
   Smile Channel — Responsive Overrides (v2.2.0)
   ==========================================================================
   This stylesheet contains all mobile and tablet layout fixes for the 8
   Elementor widgets (Hero, Episodes, Events, Directory, Pricing, Host, FAQ,
   CTA) plus shared theme sections. It's loaded AFTER main.css so every rule
   here wins without needing !important in most cases.

   Standardised breakpoints (match Elementor's defaults where possible):
     - Desktop:        ≥1025px   (default styles in main.css)
     - Tablet:         1024px    (tablet landscape / small desktop)
     - Tablet-portrait: 900px    (iPad portrait, larger phones landscape)
     - Mobile:         767px     (most phones)
     - Small mobile:   480px     (older / compact phones)

   Widgets use heavy inline styles, so most rules here target the widget's
   section ID (#tsc-hero, #tsc-events, etc) and override with child
   selectors that have specificity high enough to beat inline `style=""`
   for layout properties, or use `!important` sparingly where inline styles
   set a property we need to change.
   ========================================================================== */

/* ==========================================================================
   TYPOGRAPHY — fluid heading sizes via clamp()
   ==========================================================================
   All widget headings use inline font-size (e.g. style="font-size:48px").
   We override these with clamp() so they scale fluidly between mobile and
   desktop without ever feeling cramped or oversized. The inline value
   becomes the desktop target.
   ========================================================================== */
@media (max-width: 1024px) {
	/* Widget H2 headings (Episodes, Events, Directory, Pricing, Host, FAQ, CTA) */
	#tsc-episodes .tsc-section-head h2,
	#tsc-events .tsc-section-head h2,
	#tsc-speakers .tsc-section-head h2,
	#tsc-pricing h2,
	#tsc-host h2, #tsc-about h2,
	#tsc-faq h2,
	#tsc-cta h2 {
		font-size: clamp(28px, 5vw, 48px) !important;
		line-height: 1.15 !important;
	}

	/* Hero H1 — larger scale */
	#tsc-hero h1,
	.tsc-hero--redesign h1,
	.tsc-hero h1 {
		font-size: clamp(36px, 7vw, 72px) !important;
		line-height: 1.05 !important;
	}

	/* Hero subtitle */
	.tsc-hero--redesign p,
	#tsc-hero .tsc-hero__sub {
		font-size: clamp(14px, 1.6vw, 18px) !important;
		line-height: 1.6 !important;
	}
}

/* ==========================================================================
   SECTION PADDING — scale down large hardcoded paddings
   ==========================================================================
   Widgets set padding:90px or similar via inline style. On mobile this
   eats most of the screen before content appears. Scale down progressively.
   ========================================================================== */
@media (max-width: 1024px) {
	#tsc-hero,
	#tsc-episodes,
	#tsc-events,
	#tsc-speakers,
	#tsc-pricing,
	#tsc-host, #tsc-about,
	#tsc-faq,
	#tsc-cta,
	.tsc-hero--redesign {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

@media (max-width: 767px) {
	#tsc-hero,
	#tsc-episodes,
	#tsc-events,
	#tsc-speakers,
	#tsc-pricing,
	#tsc-host, #tsc-about,
	#tsc-faq,
	#tsc-cta,
	.tsc-hero--redesign {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Hero gets taller min-height compensation since nothing is side-by-side */
	.tsc-hero--redesign {
		min-height: auto !important;
		padding-top: 80px !important;
		padding-bottom: 60px !important;
	}
}

/* ==========================================================================
   HERO — single-column layout, buttons stack, stats wrap
   ==========================================================================
   Desktop first: the widget sets min-height:100vh inline, which creates big
   empty gaps above and below content when the content is naturally shorter
   than the viewport. Override to a sensible min-height so the section
   breathes without wasting half the fold on whitespace.
   ========================================================================== */
@media (min-width: 1025px) {
	.tsc-hero--redesign {
		min-height: auto !important;
		padding-top: 100px !important;
		padding-bottom: 80px !important;
	}

	/* Tighten the gap between stats row and the card grid above */
	.tsc-hero--redesign__ctas,
	.tsc-hero--redesign [style*="margin-bottom:4rem"] {
		margin-bottom: 2.5rem !important;
	}

	/* Reduce the empty space between the buttons row and the stats row */
	.tsc-hero--redesign [style*="padding-top:2rem"][style*="border-top"] {
		padding-top: 1.5rem !important;
	}
}

@media (max-width: 1100px) {
	.tsc-hero--redesign__inner {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}

	/* Featured guests cards side on mobile → still 2-col grid but tighter */
	.tsc-hero--redesign__right {
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	/* Hero CTAs stack and go full-width for big thumb targets */
	.tsc-hero--redesign__ctas,
	.tsc-hero--redesign .tsc-hero__ctas,
	.tsc-hero--redesign [style*="display:flex"][style*="gap:14px"] {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
	}
	.tsc-hero--redesign__ctas a,
	.tsc-hero--redesign .tsc-hero__ctas a {
		width: 100% !important;
		justify-content: center !important;
		text-align: center;
	}

	/* Hero stats — wrap to 2 per row instead of 3 inline */
	.tsc-hero--redesign [style*="display:flex"][style*="gap:3rem"],
	.tsc-hero--redesign__stats {
		gap: 20px 24px !important;
		flex-wrap: wrap !important;
	}
	.tsc-hero--redesign__stats > div {
		flex: 0 0 calc(50% - 12px);
	}

	/* Hero stat numbers — scale down */
	.tsc-hero--redesign [style*="font-size:2.2rem"] {
		font-size: 1.7rem !important;
	}

	/* Featured guest cards — keep 2-col but shrink thumbnail height */
	.smile-hero-cards-grid {
		gap: 8px !important;
	}
	.smile-hero-cards-grid [style*="height:130px"] {
		height: 110px !important;
	}
	.smile-hero-cards-grid [style*="padding:12px 14px"] {
		padding: 10px 12px !important;
	}
	.smile-hero-cards-grid [style*="font-size:12px"] {
		font-size: 11px !important;
	}
}

/* Hero featured guests — hide if space is tight on tiny screens to prioritise CTA */
@media (max-width: 480px) {
	.smile-hero-cards-grid [style*="font-size:10px"] {
		font-size: 9px !important;
	}
}

/* ==========================================================================
   EPISODES / SECTION HEADS — reflow heading + "View all" link
   ========================================================================== */
@media (max-width: 767px) {
	#tsc-episodes .tsc-section-head,
	#tsc-speakers .tsc-section-head {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 16px !important;
		margin-bottom: 32px !important;
	}

	.tsc-section-head .view-all {
		font-size: 13px !important;
	}
}

/* ==========================================================================
   EVENTS — main card + past events stack vertically on tablet & mobile
   ==========================================================================
   Default: .tsc-events-redesign { grid-template-columns: 1fr 360px }
   That sidebar gets squeezed on tablets. Stack below 1024px.
   ========================================================================== */
@media (max-width: 1024px) {
	.tsc-events-redesign {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}
}

@media (max-width: 767px) {
	/* Event main card image height reduce */
	#tsc-events [style*="height:230px"] {
		height: 180px !important;
	}

	/* Event main card title — scale */
	#tsc-events [style*="font-size:3rem"] {
		font-size: 1.8rem !important;
	}

	/* Event inner h3 */
	#tsc-events h3[style*="font-size:1.5rem"] {
		font-size: 1.2rem !important;
	}

	/* Event CTAs stack */
	#tsc-events [style*="display:flex"][style*="gap:12px"] {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	#tsc-events [style*="display:flex"][style*="gap:12px"] > a {
		text-align: center;
		justify-content: center;
		width: 100%;
	}

	/* Event main inner padding reduce */
	#tsc-events [style*="padding:26px 28px"] {
		padding: 20px 18px !important;
	}

	/* Past-event cards — tighten */
	#tsc-events [style*="padding:20px 22px"] {
		padding: 16px 18px !important;
	}
	#tsc-events [style*="font-size:1.2rem"] {
		font-size: 1.05rem !important;
	}
}

/* ==========================================================================
   DIRECTORY / SPEAKERS — grid already reflows via .tsc-grid rules, but
   tighten inner spacing on mobile.
   ========================================================================== */
@media (max-width: 767px) {
	#tsc-speakers .tsc-section-head {
		margin-bottom: 24px !important;
	}

	/* SCGE plugin grid — force 2 columns on mobile for visual breathing room */
	#tsc-speakers .has-scge .scge-grid,
	#tsc-speakers .scge-guests-grid,
	#tsc-speakers .tsc-grid--4,
	#tsc-speakers .tsc-grid--3 {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 12px !important;
	}
}

@media (max-width: 480px) {
	/* Very narrow screens — single column */
	#tsc-speakers .has-scge .scge-grid,
	#tsc-speakers .scge-guests-grid,
	#tsc-speakers .tsc-grid--4,
	#tsc-speakers .tsc-grid--3 {
		grid-template-columns: 1fr !important;
	}
}

/* ==========================================================================
   PRICING — 4-column plan grid reflows 4→2→1, subtitle paragraph tightens
   ==========================================================================
   The SCGE pricing shortcode renders its own grid. Force reflow at key
   breakpoints to avoid cramped 4-col cards on tablet.
   ========================================================================== */
@media (max-width: 1024px) {
	#tsc-pricing .scge-pricing,
	#tsc-pricing .scge-pricing-grid,
	#tsc-pricing [class*="pricing-grid"] {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 16px !important;
	}

	#tsc-pricing [style*="margin:0 auto 4rem"] {
		margin: 0 auto 2.5rem !important;
	}
}

@media (max-width: 767px) {
	#tsc-pricing .scge-pricing,
	#tsc-pricing .scge-pricing-grid,
	#tsc-pricing [class*="pricing-grid"] {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	#tsc-pricing [style*="margin:0 auto 4rem"] {
		margin: 0 auto 2rem !important;
	}
}

/* ==========================================================================
   HOST — 2-column layout stacks, portrait image caps height
   ========================================================================== */
@media (max-width: 1100px) {
	.tsc-host-redesign,
	#tsc-host [style*="grid-template-columns"][style*="400px"], #tsc-about [style*="grid-template-columns"][style*="400px"] {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
}

@media (max-width: 767px) {
	/* Cap the host portrait height so it doesn't push content down */
	#tsc-host img, #tsc-about img {
		max-height: 420px;
		width: 100%;
		object-fit: cover;
	}

	/* Host CTAs stack */
	#tsc-host [style*="display:flex"][style*="gap:12px"], #tsc-about [style*="display:flex"][style*="gap:12px"],
	#tsc-host [style*="display:flex"][style*="gap:14px"], #tsc-about [style*="display:flex"][style*="gap:14px"] {
		flex-direction: column !important;
		align-items: stretch !important;
	}
	#tsc-host [style*="display:flex"][style*="gap:12px"] > a, #tsc-about [style*="display:flex"][style*="gap:12px"] > a,
	#tsc-host [style*="display:flex"][style*="gap:14px"] > a, #tsc-about [style*="display:flex"][style*="gap:14px"] > a {
		justify-content: center;
		text-align: center;
		width: 100%;
	}
}

/* ==========================================================================
   FAQ — accordion spacing + question text size on mobile
   ========================================================================== */
@media (max-width: 767px) {
	#tsc-faq {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	#tsc-faq details,
	#tsc-faq .tsc-faq__item {
		padding: 18px 16px !important;
	}

	#tsc-faq summary,
	#tsc-faq .tsc-faq__q,
	#tsc-faq details > summary {
		font-size: 15px !important;
		line-height: 1.4 !important;
		padding-right: 28px !important;
	}

	#tsc-faq [style*="font-size:1.5rem"] {
		font-size: 1.15rem !important;
	}

	#tsc-faq p,
	#tsc-faq .tsc-faq__a {
		font-size: 14px !important;
		line-height: 1.65 !important;
	}
}

/* ==========================================================================
   CTA — final call-to-action section, buttons stack, heading scales
   ========================================================================== */
@media (max-width: 767px) {
	.tsc-final-cta--redesign__btns,
	#tsc-cta [style*="display:flex"][style*="gap:12px"],
	#tsc-cta [style*="display:flex"][style*="gap:14px"] {
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
	}

	.tsc-final-cta--redesign__btns a,
	#tsc-cta a.tsc-btn,
	#tsc-cta [style*="display:flex"] a {
		width: 100% !important;
		max-width: 320px;
		justify-content: center;
		text-align: center;
	}

	#tsc-cta [style*="font-size:4rem"],
	#tsc-cta [style*="font-size:3rem"] {
		font-size: 2rem !important;
	}
}

/* ==========================================================================
   SHARED — text readability on mobile
   ==========================================================================
   Long body paragraphs with max-width set inline (e.g. max-width:580px)
   should drop the max-width on mobile so text fills the column.
   ========================================================================== */
@media (max-width: 767px) {
	.tsc-hero--redesign p[style*="max-width:500px"],
	#tsc-events p[style*="max-width:540px"],
	#tsc-pricing p[style*="max-width:620px"] {
		max-width: 100% !important;
	}

	/* Section eyebrow text smaller on mobile */
	.text-eyebrow {
		font-size: 11px !important;
		letter-spacing: 0.12em !important;
	}

	/* View-all link in section heads */
	.view-all {
		font-size: 13px !important;
	}

	/* Generic: container horizontal padding on mobile */
	.tsc-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* ==========================================================================
   BUTTON TARGETS — ensure minimum 44×44 tap target on all buttons
   ==========================================================================
   Apple HIG and WCAG require 44px minimum. Many widget buttons use
   padding:14px 28px which equals ~46px height — good. But smaller
   utility buttons need a floor.
   ========================================================================== */
@media (max-width: 767px) {
	.tsc-btn,
	.tsc-btn--sm,
	.tsc-nav__cta,
	a.tsc-btn {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

/* ==========================================================================
   FORMS & INPUTS — prevent iOS zoom on focus
   ==========================================================================
   iOS Safari zooms the viewport when a text input has font-size <16px.
   Bump all inputs to 16px on mobile.
   ========================================================================== */
@media (max-width: 767px) {
	input[type="text"],
	input[type="email"],
	input[type="url"],
	input[type="tel"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	textarea,
	select {
		font-size: 16px !important;
	}
}

/* ==========================================================================
   ELEMENTOR CONTAINER SAFETY (v2.0.2 worked, but extra belt-and-braces
   for mobile inside Elementor Containers — prevent overflow)
   ========================================================================== */
@media (max-width: 767px) {
	.e-con {
		overflow-x: hidden;
	}
}

/* ==========================================================================
   REDUCED MOTION respect — keep all our transitions polite
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==========================================================================
   v2.3.3 — HOST SECTION DESKTOP OPTIMIZATION
   ==========================================================================
   Side-by-side layout preserved, but centred with equal left/right margins
   and a tighter, more editorial visual scale.

   Changes at ≥1025px (desktop):
   - Outer grid constrained to max-width 1000px and centered with auto margins
     so equal whitespace sits on both sides regardless of viewport
   - Photo column shrinks from 400px → 340px
   - Column gap reduces from 5rem → 3.5rem
   - Type scale tightens across quote, name, bio, stats for editorial feel
   - Decorative gold offset border refined from 18px to 12px offset
   - Photo wrapper corners softened from 20px to 14px
   - Align-items switches from `center` to `start` so the photo top aligns
     with the eyebrow, creating a cleaner visual rhythm

   Targets BOTH `#tsc-host` (in case ID is overridden) AND `#tsc-about`
   (the actual rendered ID in the widget).
   ========================================================================== */
@media (min-width: 1025px) {
	/* Centre the whole host block with equal margins. Override the inline
	   grid-template-columns:400px 1fr with a tighter spec. */
	#tsc-host .tsc-host-redesign,
	#tsc-about .tsc-host-redesign,
	#tsc-host [style*="grid-template-columns:400px 1fr"],
	#tsc-about [style*="grid-template-columns:400px 1fr"] {
		max-width: 1000px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		grid-template-columns: 340px 1fr !important;
		gap: 3.5rem !important;
		align-items: start !important;
	}

	/* Photo wrapper — tighter corners (14px) */
	#tsc-host .tsc-host-redesign > div:first-child > div:first-child,
	#tsc-about .tsc-host-redesign > div:first-child > div:first-child,
	#tsc-host [style*="aspect-ratio:3/4"],
	#tsc-about [style*="aspect-ratio:3/4"] {
		border-radius: 14px !important;
	}

	/* Decorative gold offset border — tighter (12px instead of 18px) */
	#tsc-host .tsc-host-redesign > div:first-child > div:last-child,
	#tsc-about .tsc-host-redesign > div:first-child > div:last-child,
	#tsc-host [style*="border:1px solid rgba(184,134,42,0.25)"],
	#tsc-about [style*="border:1px solid rgba(184,134,42,0.25)"] {
		top: 12px !important;
		left: 12px !important;
		right: -12px !important;
		bottom: -12px !important;
		border-radius: 14px !important;
	}

	/* Eyebrow — slightly smaller for editorial feel */
	#tsc-host .text-eyebrow,
	#tsc-about .text-eyebrow {
		font-size: 11px !important;
		letter-spacing: 0.16em !important;
	}

	/* Pullquote — tighter, more refined serif */
	#tsc-host blockquote,
	#tsc-about blockquote {
		font-size: clamp(18px, 1.4vw, 22px) !important;
		line-height: 1.55 !important;
		margin: 0.75rem 0 1.75rem !important;
		padding-left: 1.75rem !important;
	}

	/* Decorative opening quote mark — scale down from 5rem to 3.5rem */
	#tsc-host blockquote > span:first-child,
	#tsc-about blockquote > span:first-child,
	#tsc-host blockquote [style*="font-size:5rem"],
	#tsc-about blockquote [style*="font-size:5rem"] {
		font-size: 3.5rem !important;
		top: -6px !important;
	}

	/* Host name — from 1.8rem down to 1.4rem */
	#tsc-host [style*="font-size:1.8rem"],
	#tsc-about [style*="font-size:1.8rem"] {
		font-size: 1.4rem !important;
		margin-bottom: 3px !important;
	}

	/* Host role/eyebrow second line */
	#tsc-host [style*="letter-spacing:.12em"],
	#tsc-about [style*="letter-spacing:.12em"] {
		font-size: 10px !important;
		margin-bottom: 1.25rem !important;
	}

	/* Bio paragraph — slightly smaller, tighter line-height */
	#tsc-host [style*="font-size:15px"][style*="line-height:1.8"],
	#tsc-about [style*="font-size:15px"][style*="line-height:1.8"] {
		font-size: 14.5px !important;
		line-height: 1.75 !important;
		margin-bottom: 1.75rem !important;
	}

	/* Stats row — tighter gap (2.25rem), smaller numbers */
	#tsc-host [style*="display:flex"][style*="gap:3rem"],
	#tsc-about [style*="display:flex"][style*="gap:3rem"] {
		gap: 2.25rem !important;
	}

	#tsc-host [style*="display:flex"][style*="gap:3rem"] [style*="font-size:2rem"],
	#tsc-about [style*="display:flex"][style*="gap:3rem"] [style*="font-size:2rem"] {
		font-size: 1.65rem !important;
	}
}

/* Tablet (769-1024px) — soften the desktop optimisation slightly. Grid
   stays 2-col from default main.css rules, but add a sensible max-width
   and tighter gap for in-between widths. */
@media (min-width: 769px) and (max-width: 1024px) {
	#tsc-host .tsc-host-redesign,
	#tsc-about .tsc-host-redesign,
	#tsc-host [style*="grid-template-columns:400px 1fr"],
	#tsc-about [style*="grid-template-columns:400px 1fr"] {
		max-width: 860px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		grid-template-columns: 300px 1fr !important;
		gap: 2.5rem !important;
		align-items: start !important;
	}

	#tsc-host blockquote,
	#tsc-about blockquote {
		font-size: 17px !important;
		line-height: 1.55 !important;
	}

	#tsc-host [style*="font-size:1.8rem"],
	#tsc-about [style*="font-size:1.8rem"] {
		font-size: 1.35rem !important;
	}
}

/* ==========================================================================
   v2.3.1 — MOBILE SPOT FIXES
   ==========================================================================
   Issues caught from user-reported mobile screenshot at ~268px wide (a
   particularly narrow viewport). All fixes scoped to ≤767px so desktop
   and tablet are untouched.
   ========================================================================== */

@media (max-width: 767px) {

	/* ── HERO: center the content on mobile for balance, reduce the gap
	   between hero copy (stats) and the featured guests that follow.
	   On mobile the 1-col stack was leaving hero text left-aligned with
	   dead space on the right, and a huge empty band before the cards. */
	.tsc-hero--redesign__inner {
		grid-template-columns: 1fr !important;
		gap: 24px !important; /* was 40px — tighter between text block and cards */
		text-align: center !important;
	}

	.tsc-hero--redesign__left {
		text-align: center !important;
	}

	/* Center the eyebrow, headline, subtitle, buttons, and stats */
	.tsc-hero--redesign__left .text-eyebrow {
		display: block;
	}

	.tsc-hero--redesign__left h1,
	.tsc-hero--redesign__left p {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Subtitle — release the inline max-width:500px so centered text reads
	   naturally at mobile widths */
	.tsc-hero--redesign__left p[style*="max-width:500px"] {
		max-width: 100% !important;
	}

	/* CTAs row — center + stack full width */
	.tsc-hero--redesign__left [style*="display:flex"][style*="gap:14px"] {
		flex-direction: column !important;
		justify-content: center !important;
		align-items: stretch !important;
		margin-bottom: 2rem !important;
	}

	.tsc-hero--redesign__left [style*="display:flex"][style*="gap:14px"] a {
		justify-content: center !important;
		text-align: center;
		width: 100% !important;
	}

	/* Stats row — center alignment, tighter gap on mobile */
	.tsc-hero--redesign__left [style*="display:flex"][style*="gap:3rem"],
	.tsc-hero--redesign__left [style*="padding-top:2rem"][style*="border-top"] {
		justify-content: center !important;
		gap: 32px !important;
		flex-wrap: wrap !important;
		padding-top: 1.5rem !important;
	}

	/* ── HERO FEATURED GUESTS: remove the large top gap that was appearing
	   on mobile, and keep the 2-col card grid (not horizontal scroll) so
	   it looks intentional and mirrors the screenshot. */
	.tsc-hero--redesign__right {
		display: block !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
		width: 100%;
	}

	/* "FEATURED GUESTS" label — center, softer top spacing */
	.tsc-hero--redesign__right > p:first-child {
		text-align: center !important;
		margin: 0 0 12px !important;
	}

	/* Keep 2-col grid on mobile (Featured Guests looked good this way in
	   user's image 3) — override the v2.3.0 horizontal-scroll carousel. */
	.tsc-hero--redesign__right .smile-hero-cards-grid {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 10px !important;
		overflow: visible !important;
		padding-bottom: 0 !important;
	}

	.tsc-hero--redesign__right .smile-hero-cards-grid .tsc-hero-gcard {
		flex: unset !important;
		min-width: 0 !important;
		width: 100%;
	}

	/* When the user sets a custom shortcode the output might be the plugin's
	   own grid — keep it flexible, don't force 2-col there. */
	.tsc-hero--redesign__right .smile-hero-cards-shortcode {
		display: block !important;
		overflow: visible !important;
	}

	/* ── EPISODES: the "Trending Now" horizontal scroller needs a small
	   right-edge peek-indicator so users can tell it scrolls. Also tighten
	   card widths so the first card doesn't get cut awkwardly. */
	#tsc-episodes .tsc-row__track,
	#tsc-episodes .smile-episodes-row,
	#tsc-episodes [class*="row__track"] {
		scroll-padding-left: 16px;
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	#tsc-episodes .tsc-row__track > *,
	#tsc-episodes .smile-episodes-row > * {
		min-width: 260px;
		max-width: 85vw;
	}

	/* ── EVENTS: main card heading scales down, date pill repositions */
	#tsc-events .tsc-events-redesign [style*="font-size:3rem"],
	#tsc-events [style*="font-size:3rem"] {
		font-size: clamp(1.4rem, 6vw, 2rem) !important;
		padding: 0.5rem !important;
	}

	#tsc-events [style*="position:absolute"][style*="top:18px"][style*="left:18px"] {
		top: 12px !important;
		left: 12px !important;
		font-size: 8px !important;
		padding: 5px 12px !important;
	}

	#tsc-events [style*="padding:26px 28px"] {
		padding: 18px 16px !important;
	}

	/* ── PRICING: heading wrapping + card typography */
	#tsc-pricing h2,
	#tsc-pricing .scge-pricing-title {
		word-spacing: -0.02em;
		hyphens: auto;
		-webkit-hyphens: auto;
	}

	#tsc-pricing .scge-pricing-card,
	#tsc-pricing [class*="pricing-card"] {
		padding: 20px 16px !important;
	}

	#tsc-pricing .pp-price,
	#tsc-pricing [class*="price-amount"] {
		font-size: clamp(28px, 8vw, 40px) !important;
	}

	/* ── HOST: clean up the awkward boxed photo appearance on mobile.
	   Desktop has a decorative gold offset border (right:-18px;bottom:-18px)
	   and a cream container — on mobile those create a cramped, disconnected
	   look. Strip the decoration, let the photo breathe naturally, and
	   center everything. */

	/* The outer host layout stacks and centers */
	.tsc-host-redesign,
	#tsc-host [style*="grid-template-columns:400px 1fr"], #tsc-about [style*="grid-template-columns:400px 1fr"] {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
		text-align: center !important;
	}

	/* The photo-container wrapper — strip the cream panel + filter + border.
	   The image already has enough visual weight on its own. */
	#tsc-host .tsc-host-redesign > div:first-child > div:first-child, #tsc-about .tsc-host-redesign > div:first-child > div:first-child,
	#tsc-host [style*="aspect-ratio:3/4"], #tsc-about [style*="aspect-ratio:3/4"] {
		background: transparent !important;
		border: none !important;
		border-radius: 18px !important;
		filter: none !important;
		max-width: 340px !important;
		margin: 0 auto !important;
		aspect-ratio: 3/4 !important;
		box-shadow: 0 20px 50px -20px rgba(20, 18, 15, 0.25) !important;
	}

	/* Kill the decorative gold offset border — it creates that "box around
	   the photo" effect visible in the user's screenshot */
	#tsc-host .tsc-host-redesign > div:first-child > div:last-child, #tsc-about .tsc-host-redesign > div:first-child > div:last-child,
	#tsc-host [style*="border:1px solid rgba(184,134,42,0.25)"], #tsc-about [style*="border:1px solid rgba(184,134,42,0.25)"] {
		display: none !important;
	}

	/* Text column centers */
	#tsc-host .tsc-host-redesign > div:last-child, #tsc-about .tsc-host-redesign > div:last-child {
		text-align: center !important;
	}

	/* Blockquote — remove left padding, center the quote mark */
	#tsc-host blockquote, #tsc-about blockquote {
		padding-left: 0 !important;
		margin: 1rem auto 1.5rem !important;
		max-width: 480px;
		font-size: 18px !important;
		line-height: 1.5 !important;
	}

	/* The big "opening quote" mark was positioned absolute at left:0 — on
	   mobile, with center alignment, move it inline above the quote so it
	   sits cleanly above the text. */
	#tsc-host blockquote > span:first-child, #tsc-about blockquote > span:first-child,
	#tsc-host blockquote [style*="position:absolute"][style*="left:0"], #tsc-about blockquote [style*="position:absolute"][style*="left:0"] {
		position: static !important;
		display: block !important;
		font-size: 2.5rem !important;
		margin: 0 auto 0.25rem !important;
		line-height: 0.8 !important;
	}

	/* Host name ("Dr. Smiley — Ken Rochon") */
	#tsc-host [style*="font-size:1.8rem"], #tsc-about [style*="font-size:1.8rem"] {
		font-size: 1.4rem !important;
		line-height: 1.25 !important;
	}

	/* Host stats row — wrap 3-across, center */
	#tsc-host [style*="display:flex"][style*="gap:3rem"], #tsc-about [style*="display:flex"][style*="gap:3rem"] {
		gap: 20px !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	#tsc-host [style*="display:flex"][style*="gap:3rem"] > *, #tsc-about [style*="display:flex"][style*="gap:3rem"] > * {
		flex: 0 0 auto;
		min-width: 80px;
	}

	/* ── CTA SECTION: "Everything you need to know" fluid heading */
	#tsc-cta h2,
	#tsc-cta [style*="font-size:3rem"],
	#tsc-cta [style*="font-size:2.5rem"] {
		font-size: clamp(24px, 7vw, 36px) !important;
		line-height: 1.15 !important;
		padding: 0 8px;
	}

	.tsc-final-cta--redesign h2,
	.tsc-final-cta--redesign [style*="font-size"] {
		line-height: 1.2 !important;
	}

	/* ── DIRECTORY / SPEAKERS: tighten card typography on 3-col */
	#tsc-speakers .has-scge .scge-guest-card-name,
	#tsc-speakers [class*="guest-card"] [class*="-name"] {
		font-size: 12px !important;
		line-height: 1.25 !important;
	}

	#tsc-speakers .has-scge .scge-guest-card-title,
	#tsc-speakers [class*="guest-card"] [class*="-title"] {
		font-size: 10px !important;
		line-height: 1.3 !important;
	}

	/* ── GLOBAL: prevent any horizontal scroll */
	html, body {
		overflow-x: hidden !important;
	}

	.tsc-container,
	.tsc-hero--redesign .tsc-container,
	#tsc-host .tsc-container, #tsc-about .tsc-container {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
}

/* Very narrow phones (≤375px — old iPhone SE, cramped displays) */
@media (max-width: 375px) {

	.tsc-hero--redesign h1,
	#tsc-hero h1 {
		font-size: clamp(30px, 9vw, 42px) !important;
	}

	#tsc-host [style*="display:flex"][style*="gap:3rem"] > *, #tsc-about [style*="display:flex"][style*="gap:3rem"] > * {
		flex: 0 0 calc(50% - 12px);
	}

	#tsc-pricing h2 {
		font-size: clamp(22px, 7vw, 28px) !important;
	}

	#tsc-events [style*="font-size:3rem"] {
		font-size: 1.25rem !important;
	}
}


/* ==========================================================================
   CONTACT WIDGET — mobile responsive
   ==========================================================================
   Stack the 2-col grid on tablet, tighten tab spacing on mobile, ensure
   tap targets stay at 44px minimum.
   ========================================================================== */
@media (max-width: 1024px) {
	#tsc-contact .tsc-contact__grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
}

@media (max-width: 767px) {
	#tsc-contact {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	#tsc-contact .tsc-contact__head {
		margin-bottom: 2rem;
	}

	#tsc-contact .tsc-contact__heading {
		font-size: clamp(24px, 6vw, 36px) !important;
		line-height: 1.15 !important;
	}

	#tsc-contact .tsc-contact__sub {
		font-size: 14px !important;
		line-height: 1.6 !important;
	}

	/* Tabs stack to full width on mobile for easier tapping */
	#tsc-contact .tsc-contact__tabs {
		flex-direction: column;
		align-items: stretch;
		gap: 8px !important;
		margin-bottom: 1.75rem !important;
	}

	#tsc-contact .tsc-contact__tab {
		justify-content: center;
		padding: 14px 20px !important;
		font-size: 13px !important;
		min-height: 44px;
	}

	/* Form card padding tighter on mobile */
	#tsc-contact .tsc-contact__forms {
		padding: 1.25rem !important;
		border-radius: 14px !important;
	}

	/* Side info items tighter */
	#tsc-contact .tsc-contact__info {
		padding: 14px 16px !important;
	}

	/* Form field sizing — 16px font to prevent iOS zoom */
	#tsc-contact .tsc-contact__panel input,
	#tsc-contact .tsc-contact__panel textarea,
	#tsc-contact .tsc-contact__panel select {
		font-size: 16px !important;
		padding: 12px 14px !important;
	}

	/* Native form — stack field grid to 1 column */
	#tsc-contact .tsc-contact__fields {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	/* Footer stacks submit + recaptcha notice */
	#tsc-contact .tsc-contact__footer {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	#tsc-contact .tsc-contact__submit {
		width: 100%;
		justify-content: center;
	}

	#tsc-contact .tsc-contact__recaptcha-note {
		text-align: center;
	}
}

/* ==========================================================================
   ABOUT PAGE WIDGETS — responsive (v2.6.0)
   ========================================================================== */

@media (max-width: 1024px) {
	/* About Story — stacks sooner than other 2-col widgets */
	.tsc-about-story__grid {
		grid-template-columns: 1fr !important;
		gap: 2.5rem !important;
	}

	.tsc-about-story__grid.is-reverse .tsc-about-story__text {
		order: unset;
	}

	.tsc-about-story__text {
		max-width: 100%;
	}

	.tsc-about-story__media img {
		max-width: 440px;
		margin: 0 auto;
		display: block;
	}

	.tsc-about-story__stats {
		grid-template-columns: repeat(4, 1fr);
		gap: 1.25rem;
	}

	/* Values — 4-col → 2-col on tablet */
	.tsc-values__grid--4 {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 767px) {
	/* About Hero */
	#tsc-about-hero,
	.tsc-about-hero {
		padding-top: 64px !important;
		padding-bottom: 56px !important;
	}

	.tsc-about-hero__inner h1 {
		font-size: clamp(30px, 8vw, 48px) !important;
	}

	.tsc-about-hero__sub {
		font-size: 15px !important;
	}

	/* About Story */
	.tsc-about-story__grid {
		gap: 2rem !important;
		text-align: center;
	}

	.tsc-about-story__text {
		text-align: left;
	}

	.tsc-about-story__media img {
		max-width: 100%;
	}

	.tsc-about-story__stats {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1.5rem !important;
		margin-top: 2.5rem !important;
		padding-top: 2rem !important;
	}

	.tsc-about-story__stat-num {
		font-size: 2rem !important;
	}

	/* Team */
	#tsc-team {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.tsc-team__head {
		margin-bottom: 2rem !important;
	}

	.tsc-team__head h2 {
		font-size: clamp(26px, 7vw, 38px) !important;
	}

	/* Timeline — becomes horizontal scroll on mobile */
	.tsc-timeline__track {
		display: flex !important;
		overflow-x: auto;
		gap: 1.25rem !important;
		padding: 1rem 0 1.5rem !important;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

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

	.tsc-timeline__item {
		flex: 0 0 220px;
		scroll-snap-align: start;
		padding-top: 32px;
	}

	.tsc-timeline__line {
		top: 16px;
	}

	.tsc-timeline__dot {
		top: 10px;
		width: 12px;
		height: 12px;
	}

	.tsc-timeline__year {
		font-size: 1.3rem;
	}

	/* Values — single column on mobile, compact */
	.tsc-values__grid--3,
	.tsc-values__grid--4,
	.tsc-values__grid--2 {
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}

	.tsc-values__card {
		padding: 1.5rem 1.25rem !important;
	}

	.tsc-values__card-title {
		font-size: 1.2rem !important;
	}
}

@media (max-width: 375px) {
	.tsc-about-story__stats {
		grid-template-columns: 1fr !important;
	}
}