/* PHASE C — touch-first Selected Content rails. Desktop keeps its existing drag composition. */
@media (min-width: 360px) and (max-width: 1279px) {
  body[data-page="case-study"] .content-browser-viewport {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory !important;
    touch-action: pan-x pan-y !important;
  }

  body[data-page="case-study"] .content-browser-viewport[data-content-viewport] {
    scrollbar-width: none;
  }

  body[data-page="case-study"] .content-browser-viewport[data-content-viewport]::-webkit-scrollbar {
    display: none;
  }

  body[data-page="case-study"] .gallery-grid[data-content-track] > [data-content-item] {
    scroll-snap-align: center !important;
    scroll-snap-stop: always;
  }
}

/* PHASE C2 — restore the existing Case01/02 header media slots on mobile.
   Keep one readable heading hierarchy while retaining the production slot. */
@media (min-width: 360px) and (max-width: 768px) {
  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .gallery-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(112px, 32vw, 148px);
    grid-template-areas:
      "info media"
      "description description";
    column-gap: clamp(12px, 4vw, 18px);
    align-items: start;
    min-height: 0;
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .content-hero-line {
    display: block !important;
    grid-area: media;
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .content-hero-word {
    display: none;
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .content-hero-media,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .content-hero-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 9px solid var(--case-ink);
    background:
      radial-gradient(circle at 58% 62%, rgba(39, 15, 13, .92) 0 16%, transparent 17%),
      radial-gradient(ellipse at 58% 76%, rgba(30, 15, 14, .94) 0 26%, transparent 27%),
      linear-gradient(142deg, #9b3226 0%, #e34328 54%, #75251f 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 226, 193, .16);
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .content-hero-media::before,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .content-hero-media::before {
    position: absolute;
    inset: 11% 12% 0 43%;
    content: "";
    background: linear-gradient(180deg, rgba(32, 15, 13, .98), rgba(32, 15, 13, .58));
    border-radius: 47% 47% 12% 12%;
    opacity: .85;
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .content-hero-media::after,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .content-hero-media::after {
    position: absolute;
    top: 19%;
    left: 58%;
    width: 15%;
    aspect-ratio: 1;
    content: "";
    border-radius: 50%;
    background: #241310;
    box-shadow: 0 0 0 7px rgba(222, 61, 38, .42);
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .content-intro-title {
    grid-area: info;
    min-width: 0;
    gap: clamp(3px, 1vw, 6px);
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .content-intro-title > h2 {
    font-size: clamp(42px, 12.8vw, 50px);
    line-height: .92;
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .gallery-intro > p {
    grid-area: description;
    max-width: none;
    margin: clamp(10px, 3vw, 14px) 0 0;
    text-align: left;
    font-size: clamp(14px, 4.2vw, 17px);
    line-height: 1.18;
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .main-gallery .content-hero-rule {
    margin-top: 12px;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .gallery-intro {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-inline: var(--case-gutter);
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .case2-content-title,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .case2-title-word,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .case2-content-title-aux,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .gallery-intro > p,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .gallery-intro > p strong {
    color: var(--case-paper);
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .case2-content-title .content-hero-media {
    flex-basis: clamp(112px, 32vw, 148px);
    width: clamp(112px, 32vw, 148px);
    border-color: var(--case-accent);
    background: var(--case-accent-soft);
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .main-gallery .content-hero-rule {
    margin-top: 12px;
  }
}

/* PHASE C2 — keep the four Project Detail entry points compact on mobile. */
@media (min-width: 360px) and (max-width: 767px) {
  body[data-page="case-study"] .project-detail-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(12px, 4vw, 20px);
    row-gap: clamp(8px, 3vw, 14px);
    width: 100%;
    min-width: 0;
  }

  body[data-page="case-study"] .project-detail-tabs a {
    min-width: 0;
    min-height: clamp(56px, 15vw, 72px);
    padding: 10px clamp(8px, 2.5vw, 14px);
    justify-content: center;
  }

  body[data-page="case-study"] .project-detail-tabs a > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  body[data-page="case-study"] .project-detail-tabs a > small {
    max-width: 100%;
    white-space: normal;
    line-height: 1.1;
  }
}

/* CASE02 — enlarge the existing account homepage evidence without changing
   the source media, its ratio, or the surrounding Project Detail structure. */
@media (min-width: 360px) and (max-width: 767px) {
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .project-detail-media {
    gap: clamp(6px, 2vw, 10px);
    margin-top: clamp(20px, 5vw, 24px);
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .account-preview-stack {
    width: min(290px, 80vw);
    max-width: 100%;
  }
}

/* Final mobile cascade: the route case styles load before this responsive sheet. */
@media (min-width: 360px) and (max-width: 767px) {
  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .case-opening-meta,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-meta {
    display: none;
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .case-opening-meta-mobile,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-meta-mobile {
    display: grid;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .project-detail-media {
    gap: clamp(8px, 1.5vw, 12px);
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .account-preview-stack {
    width: min(250px, 32vw);
    max-width: 100%;
    height: 238px;
  }
}