/* ==========================================================================
   Morphe Responsive Breakpoints
   Desktop-first: 1200px → 1024px → 767px → 480px
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet Landscape (max-width: 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	:root {
		--morphe-text-4xl: 2.75rem;
		--morphe-text-3xl: 2rem;
	}

	.morphe-grid--5 {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Hero heading scales down */
	.e-con.morphe-hero-section .elementor-widget-heading .elementor-heading-title {
		font-size: 3.5rem !important;
	}

}

/* --------------------------------------------------------------------------
   Tablet (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* Sticky mobile CTA — visible on tablet/mobile only */
	.morphe-sticky-cta {
		display: block;
	}

	:root {
		--morphe-text-4xl: 2.5rem;
		--morphe-text-3xl: 1.875rem;
		--morphe-text-2xl: 1.5rem;
		--morphe-space-4xl: 5rem;
		--morphe-space-3xl: 4rem;
	}

	/* Header */
	.morphe-header__nav {
		display: none;
	}

	/* When nav is open, expand the header into a full-screen overlay.
	   backdrop-filter creates a containing block that breaks position:fixed
	   on children, so we disable it and stretch the header itself. */
	.morphe-header.nav-open {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0;
		background-color: var(--morphe-charcoal);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-bottom: none;
		z-index: 10000;
	}

	.morphe-header__nav.is-open {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--morphe-charcoal);
		justify-content: center;
		align-items: center;
		gap: var(--morphe-space-xl);
		z-index: 10000;
	}

	.morphe-header__nav.is-open li {
		list-style: none;
		text-align: center;
	}

	.morphe-header__nav.is-open a {
		font-size: var(--morphe-text-xl);
		color: var(--morphe-text-primary);
	}

	.morphe-nav-toggle {
		display: block;
		z-index: 10001;
	}

	/* Elementor nav menu mobile */
	.elementor-widget-nav-menu .elementor-menu-toggle {
		color: var(--morphe-text-primary);
	}

	/* Reduce stats row gap from 60px */
	.e-con.morphe-stats-row,
	.e-con.morphe-stats-row > .e-con-inner {
		gap: 30px !important;
	}

	/* Grids */
	.morphe-grid--3,
	.morphe-grid--4,
	.morphe-grid--5 {
		grid-template-columns: repeat(2, 1fr);
	}

	.morphe-steps {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Elementor grid classes: reduce columns at tablet */
	.e-con.morphe-col-5,
	.e-con.morphe-col-4 {
		flex: 0 0 calc(50% - 12px) !important;
		max-width: calc(50% - 12px) !important;
	}

	.e-con.morphe-col-3 {
		flex: 0 0 calc(50% - 12px) !important;
		max-width: calc(50% - 12px) !important;
	}

	/* Stats row: wrap to 2x2 on tablet */
	.e-con.morphe-stats-row,
	.e-con.morphe-stats-row > .e-con-inner {
		flex-wrap: wrap !important;
		gap: 30px !important;
	}

	.e-con.morphe-stats-row > .e-con,
	.e-con.morphe-stats-row > .e-con-inner > .e-con {
		min-width: 100px !important;
		max-width: 180px !important;
	}

	/* Footer columns stack to 2 */
	.e-con.morphe-footer-row {
		gap: 24px !important;
	}

	.e-con.morphe-footer-wide {
		flex: 1 1 100% !important;
	}

	/* Two-column */
	.morphe-two-col {
		grid-template-columns: 1fr;
		gap: var(--morphe-space-xl);
	}

	.morphe-two-col img {
		margin: 0 auto;
	}

	/* Footer */
	.morphe-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* --------------------------------------------------------------------------
   Mobile (max-width: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	:root {
		--morphe-text-4xl: 2rem;
		--morphe-text-3xl: 1.625rem;
		--morphe-text-2xl: 1.375rem;
		--morphe-text-base: 1rem;
		--morphe-gutter: 1.25rem;
		--morphe-space-4xl: 4rem;
		--morphe-space-3xl: 3rem;
		--morphe-space-2xl: 2.5rem;
	}

	/* ── Header mobile fixes ─────────────────────────────────────── */

	/* Always solid header on mobile so content doesn't show through */
	.elementor-location-header {
		background-color: rgba(10, 10, 10, 0.97) !important;
		backdrop-filter: blur(12px) !important;
		-webkit-backdrop-filter: blur(12px) !important;
	}

	/* Kill Elementor's generated header padding (16px / 30px is too big) */
	.elementor-2488 .elementor-element.elementor-element-d4c5770 {
		--padding-top: 8px !important;
		--padding-bottom: 8px !important;
		--padding-left: 6px !important;
		--padding-right: 12px !important;
	}

	/* Hide logo text on mobile, keep only the icon */
	.morphe-logo-text,
	.elementor-element.elementor-element-717e8ad,
	.elementor-2488 .elementor-element.elementor-element-717e8ad {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		overflow: hidden !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: hidden !important;
	}

	/* Reorder header: [hamburger] [logo] [CTA].
	   DOM: d4c5770 (flex row) > fb97e86 (logo) + f635348 (hamburger + CTA).
	   Use display:contents to flatten both child containers so all
	   grandchildren (logo-icon, hamburger, CTA) become direct flex items
	   in the header row — then reorder with CSS order. */

	.e-con.morphe-header-row {
		padding: 8px 12px 8px 6px !important;
		gap: 8px !important;
		align-items: center !important;
	}

	/* Flatten both child containers */
	.elementor-2488 .elementor-element.elementor-element-fb97e86,
	.elementor-2488 .elementor-element.elementor-element-f635348 {
		display: contents !important;
	}

	/* Hamburger toggle: left — strip all internal spacing */
	.elementor-2488 .elementor-element.elementor-element-f3e12f4 {
		order: 0 !important;
		flex: 1 1 0% !important;
		display: flex !important;
		justify-content: flex-start !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.elementor-2488 .elementor-element.elementor-element-f3e12f4 .elementor-menu-toggle {
		padding: 0 !important;
		margin: 0 -6px 0 -6px !important;
	}

	/* Nuclear option: strip ALL widget padding inside the header on mobile */
	.elementor-2488 .elementor-widget {
		padding: 0 !important;
	}

	/* Logo icon: center */
	.elementor-2488 .elementor-element.elementor-element-020a260 {
		order: 1 !important;
		flex: 1 1 0% !important;
		display: flex !important;
		justify-content: center !important;
	}

	/* CTA button: right */
	.elementor-2488 .elementor-element.elementor-element-e7dfa7d {
		order: 2 !important;
		flex: 1 1 0% !important;
		display: flex !important;
		justify-content: flex-end !important;
	}

	/* Smaller CTA button in header */
	.e-con.morphe-header-row .elementor-widget-button .elementor-button {
		padding: 8px 16px !important;
		font-size: 0.8rem !important;
	}

	/* Hero (legacy class) */
	.morphe-hero {
		min-height: auto;
		padding-top: calc(var(--morphe-space-4xl) + 60px);
		padding-bottom: var(--morphe-space-3xl);
	}

	.morphe-hero__sub {
		font-size: var(--morphe-text-base);
	}

	/* Hero heading mobile — ensure it sits above the ::before gradient */
	.e-con.morphe-hero-section .elementor-widget-heading {
		position: relative;
		z-index: 2;
	}

	.e-con.morphe-hero-section .elementor-widget-heading .elementor-heading-title {
		font-size: 2.25rem !important;
	}

	/* All hero widgets need z-index above the ::before pseudo-element */
	.e-con.morphe-hero-section > .elementor-widget {
		position: relative;
		z-index: 2;
	}

	/* Stats row: stack on mobile */
	.e-con.morphe-stats-row,
	.e-con.morphe-stats-row > .e-con-inner {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		gap: 24px 40px !important;
		padding: 30px 16px !important;
	}

	.e-con.morphe-stats-row > .e-con,
	.e-con.morphe-stats-row > .e-con-inner > .e-con {
		min-width: 80px !important;
		flex: 0 1 calc(50% - 20px) !important;
	}

	/* Rows stack on mobile */
	.e-con.morphe-row,
	.e-con.morphe-row > .e-con-inner {
		flex-direction: column !important;
	}

	/* SRS bar hides on mobile */
	.morphe-srs-bar {
		display: none !important;
	}

	/* Grids go single column */
	.morphe-grid--2,
	.morphe-grid--3,
	.morphe-grid--4,
	.morphe-grid--5 {
		grid-template-columns: 1fr;
	}

	.morphe-steps {
		grid-template-columns: 1fr;
	}

	/* Elementor grid classes: single column on mobile */
	.e-con.morphe-col-2,
	.e-con.morphe-col-3,
	.e-con.morphe-col-4,
	.e-con.morphe-col-5 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	/* Footer bottom bar stacks */
	.e-con.morphe-footer-bottom {
		flex-direction: column !important;
		gap: 8px !important;
		text-align: center !important;
	}

	.e-con.morphe-footer-narrow {
		flex: 1 1 100% !important;
	}

	/* Cards */
	.morphe-card {
		padding: var(--morphe-space-md);
	}

	.morphe-tier {
		padding: var(--morphe-space-lg);
	}

	/* Footer */
	.morphe-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--morphe-space-xl);
	}

	.morphe-footer__bottom {
		flex-direction: column;
		gap: var(--morphe-space-xs);
		text-align: center;
	}

	/* Page hero */
	.morphe-page-hero {
		padding-top: calc(var(--morphe-space-3xl) + 60px);
		padding-bottom: var(--morphe-space-xl);
	}

	/* Metrics */
	.morphe-metric__value {
		font-size: var(--morphe-text-2xl);
	}

	/* Reduce morphe-row gap on mobile */
	.e-con.morphe-row,
	.e-con.morphe-row > .e-con-inner {
		gap: 16px !important;
	}

	/* ── Page-length reduction ───────────────────────────────────── */

	/* Cap top-level Elementor section padding on mobile.
	   The :not(.e-con .e-con) selector uses CSS4 complex selectors inside
	   :not() which fails in older mobile browsers (Safari < 15.4, older
	   Chrome WebViews). Instead, we apply modest padding to ALL .e-con
	   sections, then reset nested containers back to zero/auto. */

	/* Step 1: Apply tight padding to every container */
	.e-con[data-element_type="container"] {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		padding-left: var(--morphe-gutter) !important;
		padding-right: var(--morphe-gutter) !important;
	}

	/* Step 2: Reset nested containers (children of .e-con) back to no
	   extra padding. This simple child combinator works everywhere. */
	.e-con .e-con {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Step 3: Cards get their own tight internal padding */
	.e-con.morphe-card {
		padding: 20px 16px !important;
	}

	/* Step 4: Stats row keeps its own padding */
	.e-con.morphe-stats-row {
		padding: 30px 16px !important;
	}

	/* Step 5: Header row — padding already set above in header section */

	/* Step 6: Hero section — MUST come after generic container rule.
	   Source order wins when specificity + !important are equal. */
	.elementor-element.elementor-element-1e11f15 {
		min-height: auto !important;
		overflow: visible !important;
		padding-top: 90px !important;
		padding-bottom: 2rem !important;
		padding-left: var(--morphe-gutter) !important;
		padding-right: var(--morphe-gutter) !important;
	}

	/* Collapse all spacer widgets on mobile — saves ~650px.
	   Use max-height + overflow to ensure no spacer can exceed 4px. */
	.elementor-widget-spacer {
		height: 4px !important;
		max-height: 4px !important;
		min-height: 0 !important;
		overflow: hidden !important;
	}

	.elementor-widget-spacer .elementor-spacer,
	.elementor-widget-spacer .elementor-spacer-inner {
		height: 4px !important;
		max-height: 4px !important;
	}

	/* Hide spacers entirely in the hero (already defined above too) */
	.e-con.morphe-hero-section .elementor-widget-spacer {
		display: none !important;
	}

	/* ── Podcast page mobile ─────────────────────────────────────── */
	.page-id-2449 .elementor-section {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		padding-left: var(--morphe-gutter) !important;
		padding-right: var(--morphe-gutter) !important;
	}

	/* Hero section needs extra top for header */
	.page-id-2449 .elementor-element-49ccebad {
		padding-top: 80px !important;
	}

	/* Podcast hero columns stack */
	.page-id-2449 .elementor-row {
		flex-direction: column !important;
	}

	.page-id-2449 .elementor-column {
		width: 100% !important;
	}

	/* Podcast headings scale */
	.page-id-2449 .elementor-widget-heading .elementor-heading-title {
		font-size: 1.75rem !important;
		line-height: 1.3 !important;
	}

	/* Podcast founder inner section stacks */
	.page-id-2449 .elementor-inner-section .elementor-row {
		flex-direction: column !important;
	}

	.page-id-2449 .elementor-inner-section .elementor-column {
		width: 100% !important;
	}

	/* Podcast founder image centers */
	.page-id-2449 .elementor-element-302082fe {
		text-align: center !important;
		margin-bottom: 24px !important;
	}

	.page-id-2449 .elementor-element-302082fe img {
		max-width: 200px !important;
		margin: 0 auto !important;
	}

	/* Podcast button full width on mobile */
	.page-id-2449 .elementor-button {
		display: block !important;
		text-align: center !important;
	}

	/* ── Card hover: disable on touch ────────────────────────────── */
	.e-con.morphe-card {
		transform: none !important;
		padding: 20px 16px !important;
	}

	/* ── Install path cards ──────────────────────────────────────── */
	.morphe-install-path .elementor-widget-heading .elementor-heading-title {
		font-size: 1rem !important;
	}
}

/* --------------------------------------------------------------------------
   Small Mobile (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	:root {
		--morphe-text-4xl: 1.75rem;
		--morphe-text-3xl: 1.5rem;
		--morphe-text-2xl: 1.25rem;
		--morphe-gutter: 1rem;
		--morphe-space-4xl: 3rem;
		--morphe-space-3xl: 2rem;
	}

	/* Even tighter section padding on small screens */
	.e-con[data-element_type="container"] {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	/* Nested containers still zero */
	.e-con .e-con {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Cards keep their padding */
	.e-con.morphe-card {
		padding: 16px 14px !important;
	}

	/* Hero section MUST come after the generic container rule above */
	.elementor-element.elementor-element-1e11f15 {
		padding-top: 120px !important;
		padding-bottom: 1.5rem !important;
	}

	.e-con.morphe-hero-section .elementor-widget-heading .elementor-heading-title {
		font-size: 1.875rem !important;
	}

	.morphe-btn {
		width: 100%;
		text-align: center;
	}

	.morphe-header__logo img {
		height: 26px;
	}

	/* Elementor buttons full width */
	.elementor-button-wrapper {
		width: 100%;
	}

	.elementor-button-wrapper .elementor-button {
		width: 100%;
		text-align: center !important;
		justify-content: center !important;
	}

	/* Podcast headings smaller on small screens */
	.page-id-2449 .elementor-widget-heading .elementor-heading-title {
		font-size: 1.5rem !important;
	}

	/* Tighter section padding */
	.page-id-2449 .elementor-section {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}

	.page-id-2449 .elementor-element-49ccebad {
		padding-top: 70px !important;
	}

	/* Stats row tighter */
	.e-con.morphe-stats-row,
	.e-con.morphe-stats-row > .e-con-inner {
		gap: 16px 24px !important;
		padding: 20px 12px !important;
	}
}

/* --------------------------------------------------------------------------
   Touch Device: disable hover effects that stick on tap
   -------------------------------------------------------------------------- */
@media (hover: none) {
	.e-con.morphe-card:hover {
		transform: none !important;
		box-shadow: none !important;
	}

	.morphe-card:hover {
		border-color: var(--morphe-border) !important;
	}
}