/*
 * PHASE B — range-based Opening / Hero / Meta containment.
 *
 * The rules below are width-driven. There are no device or user-agent
 * branches, and the 1280px+ desktop composition is intentionally untouched.
 */

body[data-page="case-study"] .case-opening-meta-mobile {
  display: none;
}

body[data-page="home"] .hero-mobile-meta {
  display: none;
}

/* Mobile: one shared flow for 360–430px and 431–767px. */
@media (min-width: 360px) and (max-width: 767px) {
  body[data-page="home"] .hero-rail {
    top: clamp(43%, calc(47% - 2vw), 47%);
    right: clamp(14px, 4.6vw, 24px);
    gap: clamp(6px, 1.6vw, 10px);
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .case-title-box,
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-title-box {
    height: auto;
    min-height: 0;
    padding-bottom: clamp(12px, 3.6vw, 22px);
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .case-opening-meta {
    display: none;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-meta {
    display: none;
  }

  body[data-page="case-study"] .case-opening-meta-mobile {
    display: flex;
    flex-direction: column;
    gap: clamp(5px, 1.6vw, 8px);
    margin: 0 var(--case-gutter);
    padding-top: clamp(7px, 2vw, 10px);
    border-top: 1px solid var(--case-line);
    color: var(--case-ink);
    font: 700 clamp(9px, 2.55vw, 12px)/1.2 var(--font-body-cn, Arial, sans-serif);
    letter-spacing: clamp(-.04em, -.02em, -.01em);
  }

  body[data-page="case-study"] .case-opening-meta-mobile > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
    overflow: visible;
  }

  body[data-page="case-study"] .case-opening-meta-mobile dt,
  body[data-page="case-study"] .case-opening-meta-mobile dd {
    min-width: 0;
    margin: 0;
  }

  body[data-page="case-study"] .case-opening-meta-mobile dt {
    flex: 0 0 auto;
    font-weight: 800;
  }

  body[data-page="case-study"] .case-opening-meta-mobile > div > span {
    flex: 0 0 auto;
  }

  body[data-page="case-study"] .case-opening-meta-mobile dd {
    flex: 0 1 auto;
    font-weight: 700;
    white-space: nowrap;
  }
}

/* Mobile range edge: keep the rail fluid within 360–430px rather than
   introducing a device-width patch. The shared 360–767px flow remains the
   source of truth for the Case01 / Case02 Meta. */
@media (min-width: 360px) and (max-width: 430px) {
  body[data-page="home"] .hero-rail,
  body[data-page="home"] .hero-media-wrap .hero-meta {
    display: none;
  }

  body[data-page="home"] .hero-mobile-meta {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    margin-top: clamp(176px, calc(294px - 27vw), 198px);
    gap: clamp(3px, .9vw, 5px);
    color: var(--blue);
    font-family: var(--font-body-cn, Arial, sans-serif);
    font-size: clamp(9px, 2.3vw, 11px);
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.1;
    text-align: right;
    white-space: nowrap;
  }

  body[data-page="home"] .hero-mobile-meta > span {
    display: block;
  }

  body[data-page="home"] .hero-rail {
    top: clamp(43%, calc(47% - 2vw), 47%);
    right: clamp(14px, 4.6vw, 24px);
  }
}

/* Large mobile / small tablet keeps the same mobile structure, with a little
   more breathing room supplied by the fluid values above. */
@media (min-width: 431px) and (max-width: 767px) {
  body[data-page="home"] .hero-rail {
    right: clamp(16px, 3.8vw, 28px);
  }
}

/* 360–430px: the mobile Meta becomes a compact Editorial Project Meta Band.
   It stays three rows, keeps the existing route accent, and avoids the pill
   treatment used by the desktop metadata. */
@media (min-width: 360px) and (max-width: 430px) {
  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .case-opening-meta-mobile {
    --case-meta-band-accent: var(--blue, #497bff);
    --case-meta-band-line: rgba(73, 123, 255, .32);
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-meta-mobile {
    --case-meta-band-accent: var(--case-accent, var(--bg-peach));
    --case-meta-band-line: rgba(255, 189, 128, .48);
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .case-opening {
    min-height: 0;
  }

  body[data-page="case-study"][data-case-study="fucai-beigaofeng"] .case-opening-inner {
    padding-bottom: clamp(16px, 4vw, 24px);
  }

  body[data-page="case-study"] .case-opening-meta-mobile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-inline: var(--case-gutter);
    padding-block: clamp(2px, .8vw, 4px);
    border-block: 1px solid var(--case-meta-band-line, var(--case-line));
    color: var(--case-ink);
    font-size: clamp(8.5px, 2.35vw, 10.5px);
    line-height: 1.2;
    letter-spacing: -.015em;
  }

  body[data-page="case-study"] .case-opening-meta-mobile > div {
    display: grid;
    grid-template-columns: clamp(18px, 5vw, 24px) max-content minmax(0, 1fr);
    column-gap: clamp(5px, 1.6vw, 9px);
    align-items: baseline;
    min-width: 0;
    min-height: clamp(27px, 7.2vw, 32px);
    padding-block: clamp(5px, 1.2vw, 7px);
    border-bottom: 1px solid var(--case-meta-band-line, var(--case-line));
    white-space: nowrap;
  }

  body[data-page="case-study"] .case-opening-meta-mobile > div:last-child {
    border-bottom: 0;
  }

  body[data-page="case-study"] .case-opening-meta-mobile .case-meta-index {
    color: var(--case-meta-band-accent, var(--case-accent));
    font: 700 .72em/1 ManropeLocal, Arial, sans-serif;
    letter-spacing: .12em;
  }

  body[data-page="case-study"] .case-opening-meta-mobile .case-meta-category {
    min-width: 0;
    margin: 0;
    color: var(--case-ink);
    font-size: .82em;
    font-weight: 800;
    white-space: nowrap;
  }

  body[data-page="case-study"] .case-opening-meta-mobile .case-meta-separator {
    display: none;
  }

  body[data-page="case-study"] .case-opening-meta-mobile .case-meta-value {
    min-width: 0;
    margin: 0;
    color: var(--case-ink);
    font-size: 1em;
    font-weight: 700;
    white-space: nowrap;
  }
}

/* Tablet portrait: keep Case02 metadata in a contained two-column flow. */
@media (min-width: 768px) and (max-width: 1024px) {
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "services role"
      "company company";
    align-items: start;
    column-gap: clamp(14px, 2.4vw, 24px);
    row-gap: clamp(10px, 1.8vw, 18px);
    min-height: 0;
    overflow: visible;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-services {
    grid-area: services;
    min-width: 0;
    align-items: flex-start;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-company {
    grid-area: company;
    min-width: 0;
    justify-self: start;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-role {
    grid-area: role;
    min-width: 0;
    align-items: flex-start;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-company > span {
    white-space: normal;
  }
}

/* Tablet landscape / small desktop: restore the editorial three-part Case02
   alignment without carrying desktop absolute offsets into the range. */
@media (min-width: 1025px) and (max-width: 1279px) {
  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-meta {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(min(180px, 20vw), .55fr) minmax(0, 1fr);
    grid-template-areas: "services company role";
    align-items: start;
    gap: clamp(14px, 1.7vw, 24px);
    min-height: 0;
    overflow: visible;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-services {
    grid-area: services;
    align-items: flex-start;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-company {
    grid-area: company;
    min-width: 0;
    justify-self: center;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-role {
    grid-area: role;
    align-items: flex-start;
  }

  body[data-page="case-study"][data-case-study="zhao-xiaoming"] .case-opening-company > span {
    white-space: normal;
  }
}

/* Case03 has enough width from tablet portrait upward to read the title as a
   single line. Intrinsic sizing and clamp() keep the title fluid through the
   entire 768–1279px range; desktop 1280px+ remains on its frozen stylesheet. */
@media (min-width: 768px) and (max-width: 1279px) {
  body[data-page="case-study"][data-case-study="multi-brand-content"] .case-title-box {
    height: auto;
    min-height: clamp(260px, 28vw, 340px);
    grid-template-columns: 1fr;
    row-gap: clamp(12px, 1.8vw, 22px);
    padding-block: clamp(16px, 2.4vw, 28px);
  }

  body[data-page="case-study"][data-case-study="multi-brand-content"] .case-title-box h1 {
    width: 100%;
    align-items: baseline;
    flex-direction: row !important;
    font-size: clamp(56px, 8.8vw, 104px);
    line-height: .92;
    letter-spacing: clamp(-.06em, -.025em, 0);
    white-space: nowrap;
  }

  body[data-page="case-study"][data-case-study="multi-brand-content"] .case-title-box h1 span {
    display: inline !important;
    white-space: nowrap;
  }
}