/* ============================================
   MOBILE PAGE — Day-in-the-life scene styles
   ============================================ */

/* === MOBILE HERO === */

.mobile-hero {
  min-height: 80vh;
  min-height: 80svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-height-mobile) + var(--space-16)) 0 var(--space-16);
}

.mobile-hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 600px;
}

.mobile-hero .body-text {
  text-align: center;
  max-width: 460px;
}

/* === SCENES === */

.scene {
  padding: var(--space-20) 0;
  position: relative;
}

.scene:nth-child(even) {
  background: var(--linen);
}

/* Timeline connector */
.scene::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-6);
  width: 1px;
  height: 100%;
  background: var(--frame);
  display: none;
}

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

.scene__time-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--sky-deep);
  background: var(--sky-whisper);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.scene__time-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fog);
}

.scene__context {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--fog);
  margin-bottom: var(--space-6);
  max-width: 480px;
}

.scene .headline {
  margin-bottom: var(--space-4);
}

.scene .body-text {
  margin-bottom: 0;
}

/* === MOBILE CTA === */

.mobile-cta {
  text-align: center;
  background: linear-gradient(180deg, var(--canvas) 0%, var(--linen) 100%);
  padding: var(--space-24) 0;
}

.mobile-cta .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.mobile-cta .body-text {
  text-align: center;
}

.mobile-cta .cta-built-by {
  margin-top: var(--space-10);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fog);
}

.mobile-cta .cta-built-by a {
  color: var(--sky-deep);
}

.mobile-cta .cta-built-by a:hover {
  text-decoration: underline;
}

/* === RESPONSIVE === */

@media (min-width: 768px) {
  .mobile-hero {
    padding-top: calc(var(--nav-height) + var(--space-20));
  }

  .scene {
    padding: var(--space-24) 0;
  }

  /* Show timeline on desktop */
  .scene::before {
    display: block;
    left: calc(50% - 0.5px);
  }

  .scene__context {
    font-size: var(--text-md);
  }
}