/* === MOBILE HOMEPAGE — StretchLAB ===
 *
 * Every visual rule lives inside @media (max-width: 1023px).
 * The @keyframes block is global but harmless (only fires when referenced).
 * Desktop is completely untouched.
 */

/* ── Keyframes (global-safe) ─────────────────────── */

@keyframes sl-home-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Default state: mobile components hidden on desktop ── */

.sl-home-ticker   { display: none; }
.sl-hero          { display: none; }
.sl-stats-mobile  { display: none; }

/* ── Mobile rules ────────────────────────────────── */

@media (max-width: 1023px) {

  /* ── Prevent horizontal scroll ─────────────────── */
  html, body {
    overflow-x: hidden;
  }

  /* ── CSS custom properties (mobile only) ───────── */
  :root {
    --sl-header-h: 72px;
    --sl-ticker-h: 0px;
  }

  /* ── Hide desktop hero, stats & ticker — nuclear collapse ──── */
  section.hero,
  .hero {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }
  section.stats,
  .stats {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  /* ── Full-bleed breakout ─────────────────────────── */
  .sl-home-ticker,
  .sl-hero,
  .sl-stats-mobile {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* ── Hero: flush under the fixed header ─────────── */
  /* No margin — hero is 100svh tall and sits at y=0, tucked behind
     the fixed header. The header overlaps the top 72px of the hero,
     which is fine because content is pinned to the bottom. */
  .sl-hero {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── Stats flush against hero ────────────────────── */
  .sl-stats-mobile {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* ── 1. Ticker ─────────────────────────────────── */

  .sl-home-ticker {
    display: none;               /* portrait default */
    position: sticky;
    top: var(--sl-header-h);
    z-index: 30;
    height: 32px;
    overflow: hidden;
    background: var(--bone);
    color: var(--ink);
    border-top: 1px solid rgba(14,14,12,0.2);
    border-bottom: 1px solid rgba(14,14,12,0.2);
    margin: 0;
    padding: 0;
  }
  .sl-home-ticker__track {
    display: flex;
    gap: 0;
    width: max-content;
    height: 100%;
    align-items: center;
    animation: sl-home-ticker 38s linear infinite;
    will-change: transform;
  }
  .sl-home-ticker:hover .sl-home-ticker__track,
  .sl-home-ticker:focus-within .sl-home-ticker__track {
    animation-play-state: paused;
  }
  .sl-home-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
  }
  .sl-home-ticker__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ink);
    opacity: 0.4;
  }

  /* Landscape phones: show ticker */
  @media (orientation: landscape) and (min-width: 700px) {
    :root { --sl-ticker-h: 32px; }
    .sl-home-ticker { display: block; }
  }

  /* ── 2. Hero ───────────────────────────────────── */

  .sl-hero {
    display: block !important;
    position: relative;
    width: 100vw;
    height: 100svh;
    min-height: 480px !important;
    max-height: calc(100vw * 16 / 9);
    overflow: hidden;
    background: var(--ink);
    isolation: isolate;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .sl-hero__poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .sl-hero__video {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease;
  }
  .sl-hero__video.is-loaded {
    opacity: 1;
  }
  .sl-hero__video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
  }
  .sl-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.45) 32%,
      rgba(0,0,0,0.05) 60%,
      rgba(0,0,0,0.30) 100%
    );
  }
  .sl-hero__content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 3;
    padding: 0 22px;
    color: var(--bone);
  }
  .sl-hero__eyebrow {
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 11px;
    color: rgba(241,237,228,0.7);
    margin-bottom: 16px;
  }
  .sl-hero__title {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(48px, 14vw, 72px);
    line-height: 0.92;
    letter-spacing: -0.03em;
  }
  .sl-hero__title > span { display: block; }
  .sl-hero__title-italic {
    padding-left: 14%;
    font-style: italic;
    color: var(--yellow);
  }
  .sl-hero__lede {
    margin: 18px 0 22px;
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.4;
    font-style: italic;
    color: rgba(241,237,228,0.86);
    max-width: 32ch;
    text-wrap: pretty;
  }
  .sl-hero__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
  }

  /* ── 3. Stats scroller ─────────────────────────── */

  .sl-stats-mobile {
    display: block;
    position: relative;
    border-top: 1px solid rgba(14,14,12,0.2);
    border-bottom: 1px solid rgba(14,14,12,0.2);
    background: var(--bone);
  }
  .sl-stats-mobile__scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 8px;
  }
  .sl-stats-mobile__scroller::-webkit-scrollbar { display: none; }
  .sl-stats-mobile__cell {
    flex: 0 0 auto;
    scroll-snap-align: start;
    min-width: 46%;
    padding: 22px 24px;
    border-inline-start: 1px solid rgba(14,14,12,0.2);
  }
  .sl-stats-mobile__cell:first-child { border-inline-start: none; }

  .sl-stats-mobile .stat-n {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
  }
  .sl-stats-mobile .stat-l {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
  }

  .sl-stats-mobile__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(14,14,12,0.2);
    background: var(--bone);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 22px;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(14,14,12,0.06);
    cursor: pointer;
    transition: opacity .15s ease;
    z-index: 2;
  }
  .sl-stats-mobile__arrow--left  { left: 6px; }
  .sl-stats-mobile__arrow--right { right: 6px; }
  .sl-stats-mobile__arrow:disabled { opacity: 0.3; cursor: default; }
  .sl-stats-mobile__arrow:not(:disabled):active { background: var(--yellow); }
  .sl-stats-mobile[data-overflows="false"] .sl-stats-mobile__arrow { display: none; }

  /* ── 4. Footer columns: keep 3-col on mobile ───── */
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px;
  }
  .site-footer__col-title {
    font-size: 10px;
    margin-bottom: 14px;
  }
  .site-footer__col a {
    font-size: 14px;
  }
  .site-footer__col ul li {
    margin-bottom: 6px;
  }
}

/* ── Hero content lift on phones (≤720px) ──────────────
 * The default .sl-hero__content sits at bottom:28px (set in the
 * ≤1023 block above), which puts the CTA right against the bottom
 * of a 100svh hero — and behind the URL bar / browser chrome on
 * iOS Safari. Lift it well clear of the fold on phones only;
 * tablet (721-1023) keeps the original 28px. */
@media (max-width: 720px) {
  .sl-hero__content {
    bottom: clamp(80px, 14vh, 140px);
  }
}