/* =========================================================================
   responsive.css — final responsive sweep covering all device sizes
   (320px → ultrawide). Loaded LAST so it overrides earlier declarations
   on the components that need to collapse / stack on narrow screens.
   ========================================================================= */

/* ---------------------------------------------------------------------
   GLOBAL — never let anything punch out of the viewport.
   --------------------------------------------------------------------- */
html, body { overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }
iframe          { max-width: 100%; }

/* Long URLs / unbreakable strings inside copy must wrap. */
.sf-hero__subtitle, .sf-section-header__subtitle, .sf-cta__copy,
.sf-feature-box__desc, .sf-step__desc, .sf-program-card__features,
.sf-blood-section__title, .sf-review-card__text, .sf-legal-content {
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------
   MOBILE MENU DRAWER — markup ships from header.php; this completes
   the layout. The .is-open state is toggled by app.js wireHeader().
   --------------------------------------------------------------------- */
.sf-mobile-menu__panel { overflow-y: auto; }
.sf-mobile-menu__header .sf-header__logo-image {
	height: 28px;
	width: auto;
}
.sf-mobile-menu__close { font-size: 1.5rem; }
.sf-mobile-menu__cta {
	margin-top: auto;
	padding: 1rem 1.25rem 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 768px) {
	.sf-mobile-menu { display: none !important; }
}

/* ---------------------------------------------------------------------
   HEADER — < 768px
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-header__actions .sf-btn { display: none; }
	.sf-header__inner           { padding-block: 0.75rem; }
	.sf-header__logo-image      { height: 32px; width: auto; }
}

/* ---------------------------------------------------------------------
   HEADER — 768px–1023px (tablet): tighten nav so 6 links + CTA fit
   --------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023.98px) {
	.sf-header__nav             { gap: 1.25rem; }
	.sf-header__nav a           { font-size: 0.8125rem; }
	.sf-header__actions         { gap: 0.5rem; }
	.sf-header__actions .sf-btn { padding: 0.55rem 0.9rem; font-size: 0.8125rem; }
	.sf-header__logo-image      { max-height: 2.25rem; }
}

/* ---------------------------------------------------------------------
   HERO — stack to one column on phones
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-hero {
		grid-template-columns: 1fr !important;
		gap: clamp(2rem, 6vw, 3rem);
		text-align: left;
	}
	.sf-hero__content       { max-width: 100%; }
	.sf-hero--centered .sf-hero__content { text-align: center; }
	.sf-hero__title         { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; }
	.sf-hero__subtitle      { font-size: clamp(0.95rem, 3.4vw, 1.125rem); }
	.sf-hero__actions       { flex-wrap: wrap; }
	.sf-hero__actions > .sf-btn { flex: 1 1 auto; min-width: 0; }
	.sf-hero__image         { max-width: 100%; margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   SECTION HEADERS / FEATURE GRIDS / STEPS — < 768px
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-section                    { padding-block: clamp(2.5rem, 7vw, 4rem); }
	.sf-section-header__title      { font-size: clamp(1.5rem, 6vw, 2rem); }
	.sf-feature-grid,
	.sf-feature-grid--3,
	.sf-feature-grid--2x2 {
		grid-template-columns: 1fr !important;
		gap: 1rem;
	}
	.sf-grid-2, .sf-grid-3, .sf-grid-4 {
		grid-template-columns: 1fr !important;
		gap: 1rem;
	}
	.sf-steps__line  { display: none; }
	.sf-steps__grid  { grid-template-columns: 1fr !important; gap: 1.25rem; }
	.sf-steps .sf-step { text-align: center; }
}

/* ---------------------------------------------------------------------
   PROGRAMS — collapse two-up to one-up on tablet & below
   --------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.sf-programs.sf-grid-2 { grid-template-columns: 1fr !important; }
	.sf-program-card       { width: 100%; }
}

/* ---------------------------------------------------------------------
   SLIDERS — touch-friendly card width + tighter fade masks
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-slider        { --sf-slider-slide-min: clamp(260px, 88vw, 340px); }
	.sf-slider--wide  { --sf-slider-slide-min: clamp(280px, 90vw, 380px); }
	.sf-slider__viewport::before,
	.sf-slider__viewport::after { width: 1.5rem; }
	.sf-slider__controls { flex-wrap: wrap; gap: 1rem; }
}

/* ---------------------------------------------------------------------
   TRANSFORMATION CARDS — keep the 50/50 grid readable on phones
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
	.sf-transform-card__images { height: 12rem; }
	.sf-transform-card__body   { padding: 1rem; }
	.sf-transform-card__name   { font-size: 1rem; }
	.sf-transform-card__delta  { font-size: 0.8rem; flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   BLOOD-REPORT CARDS — single column on phones
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-blood-grid           { grid-template-columns: 1fr !important; gap: 1rem; }
	.sf-blood-section__title { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------
   REVIEWS — image grid + quote cards on phones
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-review-grid          { grid-template-columns: 1fr !important; gap: 1rem; }
	.sf-review-shot__frame   { min-height: 0; }
	.sf-review-card          { padding: 1.25rem; }
	.sf-review-card__headline{ font-size: 1.05rem; }
	.sf-review-card__text    { font-size: 0.95rem; line-height: 1.55; }
}

/* ---------------------------------------------------------------------
   FORMS — consultation, calculator, etc.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-form__grid                 { grid-template-columns: 1fr !important; gap: 1rem; }
	.sf-form                       { padding: 1.25rem; }
	.sf-form input,
	.sf-form select,
	.sf-form textarea              { width: 100%; max-width: 100%; }
	.sf-form button[type="submit"] { width: 100%; }
	.sf-calc__grid                 { grid-template-columns: 1fr !important; gap: 1rem; }
	.sf-calc                       { padding: 1.25rem; }
}

/* ---------------------------------------------------------------------
   ABOUT — stats bar, story two-up
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-stats__grid  { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem; }
	.sf-timeline__item { padding-left: 1.5rem; }
	.sf-timeline__year { font-size: 0.8rem; }
}
@media (max-width: 380px) {
	.sf-stats__grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 1023.98px) {
	.sf-about-grid                  { grid-template-columns: 1fr !important; gap: 2rem; }
	.sf-about-grid .sf-hero__image  { max-width: 480px; margin-inline: auto; }
}

/* ---------------------------------------------------------------------
   COACHING — yes/no qualifier columns
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-qualifier-grid { grid-template-columns: 1fr !important; gap: 1rem; }
}

/* ---------------------------------------------------------------------
   EBOOK + BOOK LANDING
   --------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.sf-ebook-hero__grid       { grid-template-columns: 1fr !important; gap: 2rem; text-align: left; }
	.sf-ebook-copy-card        { grid-template-columns: 1fr !important; }
	.sf-ebook-photo-grid       { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; }
	.sf-ebook-pricing-card     { grid-template-columns: 1fr !important; }
	.sf-book-landing-hero__grid{ grid-template-columns: 1fr !important; gap: 2rem; }
}
@media (max-width: 767.98px) {
	.sf-ebook-hero__title       { font-size: clamp(1.75rem, 7vw, 2.25rem); }
	.sf-ebook-section           { padding-block: clamp(2rem, 6vw, 3.5rem); }
	.sf-ebook-preview-arrow     { display: none; }
	.sf-book-landing-slider__arrow { width: 2.25rem; height: 2.25rem; }
}

/* ---------------------------------------------------------------------
   RESOURCES HERO PILL — keep within the photo on tiny screens
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
	.sf-hero__image-wrapper [style*="position: absolute"][style*="bottom: 1.5rem"] {
		inset: auto 0.75rem 0.75rem !important;
		padding: 0.75rem !important;
		gap: 0.625rem !important;
	}
}

/* ---------------------------------------------------------------------
   LIGHTBOX — single column, scrollable on small viewports
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-lightbox__panel  { padding: 1rem; }
	.sf-lightbox__images { grid-template-columns: 1fr !important; gap: 0.75rem; }
	.sf-lightbox__image img { max-height: 50vh; }
	.sf-lightbox--single .sf-lightbox__image img { max-height: 65vh; }
	.sf-lightbox__name   { font-size: 1.05rem; }
	.sf-lightbox__close  { top: 0.75rem; right: 0.75rem; }
}

/* ---------------------------------------------------------------------
   FOOTER — stack the columns on phones
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
		text-align: left;
	}
	.sf-footer__links {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}
	.sf-footer__social { gap: 1rem; }
}

/* ---------------------------------------------------------------------
   LEGAL PAGES
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-legal-content        { padding-inline: 0; }
	.sf-legal-content h2     { font-size: 1.25rem; }
	.sf-legal-card           { padding: 1.25rem; }
	.sf-legal-title          { font-size: clamp(2rem, 8vw, 2.75rem); }
}

/* ---------------------------------------------------------------------
   FAQ — tighter padding
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-accordion summary       { padding: 1rem 1.25rem; }
	.sf-accordion summary h3    { font-size: 0.95rem; }
	.sf-accordion__body         { padding: 0 1.25rem 1rem; font-size: 0.9rem; }
}

/* ---------------------------------------------------------------------
   CTA SECTIONS / TOOLS / CATEGORIES
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
	.sf-cta                    { padding: 2rem 1.25rem; }
	.sf-cta__title             { font-size: clamp(1.5rem, 6vw, 2rem); }
	.sf-cta__actions           { flex-wrap: wrap; gap: 0.75rem; }
	.sf-cta__actions > .sf-btn { flex: 1 1 auto; }
	.sf-category-card          { padding: 1.25rem; }
}

/* ---------------------------------------------------------------------
   CONTAINER — match viewport gutters on tiny screens
   --------------------------------------------------------------------- */
@media (max-width: 480px) {
	.sf-container { padding-inline: 1rem; }
}