/* Mobile source of truth: project flow plus the shared bilingual homepage hero and craft stack. */

@media screen and (max-width: 768px) {
  /* Project detail: media must render before copy on every mobile case detail. */
  .project-detail-layout,
  .project-detail .project-detail-layout,
  .project-detail--seeded .project-detail-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }

  .project-detail-layout > .project-media-column,
  .project-detail .project-detail-layout > .project-media-column,
  .project-detail--seeded .project-detail-layout > .project-media-column {
    order: 0 !important;
    width: 100% !important;
  }

  .project-detail-layout > .project-header,
  .project-detail .project-detail-layout > .project-header,
  .project-detail--seeded .project-detail-layout > .project-header {
    order: 1 !important;
    position: static !important;
    top: auto !important;
    margin: 0 !important;
    padding-top: 0 !important;
  }

  /* Homepage hero: the only mobile layout definition for both languages. */
  body.qianyu-homepage .hero {
    min-height: 100svh !important;
    height: 100svh !important;
    width: 100vw !important;
    margin: 0 !important;
    background: #f7f5f0 !important;
    overflow: hidden !important;
  }

  body.qianyu-homepage .zh-hero-background,
  body.qianyu-homepage .zh-hero-background picture {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.qianyu-homepage .zh-hero-background img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  body.qianyu-homepage .zh-hero-layout {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.qianyu-homepage .zh-hero-copy {
    position: absolute !important;
    z-index: 3 !important;
    left: 18px !important;
    top: 104px !important;
    bottom: auto !important;
    width: min(56vw, 235px) !important;
    max-width: none !important;
    padding: 0 !important;
  }

  body.qianyu-homepage .zh-hero-copy > p:nth-child(1) { font-size: 17px !important; letter-spacing: 3px !important; margin: 0 0 2px !important; }
  body.qianyu-homepage .zh-hero-copy > p:nth-child(2) { font-size: 7.5px !important; letter-spacing: 3px !important; margin: 0 0 8px !important; }
  body.qianyu-homepage .zh-hero-title { max-width: 100% !important; margin: 0 0 9px !important; font-size: clamp(19px, 5.2vw, 23px) !important; line-height: 1.42 !important; letter-spacing: 0 !important; white-space: normal !important; }
  body.qianyu-homepage .zh-hero-copy > div:not(.zh-hero-actions) { width: 34px !important; height: 1px !important; margin: 9px 0 !important; }
  body.qianyu-homepage .zh-hero-copy > p:nth-child(5) { font-size: 8px !important; letter-spacing: 2px !important; margin: 0 0 5px !important; }
  body.qianyu-homepage .zh-hero-copy > p:nth-child(6) { font-size: 10px !important; line-height: 1.6 !important; margin: 0 0 3px !important; }
  body.qianyu-homepage .zh-hero-copy > p:nth-child(7) { font-size: 7px !important; line-height: 1.5 !important; letter-spacing: 1.3px !important; margin: 0 0 10px !important; }

  body.qianyu-homepage .zh-hero-actions { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; width: 132px !important; }
  body.qianyu-homepage .zh-hero-actions a { width: 132px !important; min-width: 0 !important; min-height: 31px !important; justify-content: space-between !important; padding: 7px 10px !important; font-size: 8px !important; letter-spacing: .8px !important; white-space: nowrap !important; }

  /* English text wraps naturally to roughly three lines inside the image-safe copy area. */
  body.qianyu-homepage--en .zh-hero-copy { top: 96px !important; width: min(68vw, 278px) !important; }
  body.qianyu-homepage--en .zh-hero-title { max-width: 278px !important; font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: clamp(20px, 5.8vw, 25px) !important; line-height: 1.2 !important; letter-spacing: -.01em !important; text-wrap: balance; }
  body.qianyu-homepage--en .hero-title-desktop-break { display: none; }
  body.qianyu-homepage--en .hero-title-en-text { display: inline; }
  body.qianyu-homepage--en .zh-hero-title-ending { white-space: nowrap; }
  body.qianyu-homepage--en .zh-hero-copy > p:nth-child(5) { font-size: 7px !important; letter-spacing: 1.35px !important; }
  body.qianyu-homepage--en .zh-hero-copy > p:nth-child(6) { max-width: 240px; font-size: 9px !important; line-height: 1.45 !important; }
  body.qianyu-homepage--en .zh-hero-copy > p:nth-child(7) { max-width: 230px; font-size: 6.5px !important; letter-spacing: 1px !important; }

  /* Craft: cards alone are sticky. Their ancestors remain containing-block neutral for Safari. */
  body.qianyu-homepage main,
  body.qianyu-homepage .home-panel-stack,
  body.qianyu-homepage .graf-craft,
  body.qianyu-homepage .graf-craft-grid {
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  body.qianyu-homepage .home-panel-stack { position: relative !important; z-index: auto !important; isolation: auto !important; }
  body.qianyu-homepage .home-panel-stack > .graf-craft { position: relative !important; top: auto !important; bottom: auto !important; z-index: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; }
  body.qianyu-homepage .home-panel-stack > .about-qianyu { position: relative !important; z-index: auto !important; scroll-margin-top: 76px; }
  body.qianyu-homepage .graf-craft-grid { display: block !important; position: relative !important; background: #07111d !important; border-top: 1px solid rgba(197, 164, 117, .14); isolation: isolate !important; }

  body.qianyu-homepage .graf-craft-grid .craft-process {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 148px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(207, 218, 232, .14);
    background: #07111d !important;
    transform: none !important;
    will-change: auto !important;
    box-sizing: border-box !important;
  }

  body.qianyu-homepage .graf-craft-grid .craft-process:nth-child(1) { z-index: 11 !important; }
  body.qianyu-homepage .graf-craft-grid .craft-process:nth-child(2) { z-index: 12 !important; }
  body.qianyu-homepage .graf-craft-grid .craft-process:nth-child(3) { z-index: 13 !important; }
  body.qianyu-homepage .graf-craft-grid .craft-process:nth-child(4) { z-index: 14 !important; }
  body.qianyu-homepage .craft-process-media { width: 100% !important; height: clamp(280px, 43svh, 360px) !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; }
  body.qianyu-homepage .craft-process-media picture,
  body.qianyu-homepage .craft-process-media img { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; }
  body.qianyu-homepage .craft-process-media img { object-fit: cover !important; }
  body.qianyu-homepage .craft-process-copy { height: auto !important; min-height: 205px !important; margin: 0 !important; padding: 20px 20px 24px !important; overflow: visible !important; background: linear-gradient(180deg, rgba(11, 23, 37, .99) 0%, #07111d 100%) !important; box-sizing: border-box !important; }
  body.qianyu-homepage .craft-process-kicker { margin-bottom: 8px !important; }
  body.qianyu-homepage .craft-process-copy h3 { margin-bottom: 10px !important; }
  body.qianyu-homepage .craft-process-copy > p:last-child { display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important; }
}

@media screen and (max-width: 430px) {
  body.qianyu-homepage .zh-hero-copy { left: 16px !important; top: 100px !important; width: 57vw !important; }
  body.qianyu-homepage .zh-hero-title { font-size: clamp(19px, 5.4vw, 22px) !important; }
  body.qianyu-homepage--en .zh-hero-copy { left: 16px !important; width: min(70vw, 258px) !important; }
  body.qianyu-homepage--en .zh-hero-title { max-width: 258px !important; font-size: clamp(19px, 5.7vw, 23px) !important; }
  body.qianyu-homepage .graf-craft-grid .craft-process { top: 138px !important; margin-bottom: 18px !important; }
  body.qianyu-homepage .craft-process-media { height: clamp(270px, 41svh, 330px) !important; }
  body.qianyu-homepage .craft-process-copy { min-height: 200px !important; padding: 18px 18px 22px !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  body.qianyu-homepage .graf-craft-grid .craft-process { scroll-behavior: auto; }
}