/**
 * MRC-B5760 product overrides
 * Shared layout: boxpc-common.css
 * Assets: images/ipc/product/mrc-b5760/
 *
 * PC 设计稿 MRC-B5760网页端.psd；功能屏底图不含主标题/描述，HTML 叠字。
 */

/* Hero 3840×1970 slice → title y0=270≈13.71%, tagline y0=474≈24.06% */
.boxpc-page .boxpc-hero__content h1 {
  top: 13.71%;
  width: min(92%, 1400px);
  font-size: clamp(32px, 3.65vw, 70px);
  color: #ffffff;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: #ffffff;
  filter: none;
  text-shadow: none;
}

.boxpc-page .boxpc-hero__tagline {
  top: 24.06%;
  width: min(92%, 1100px);
  font-size: clamp(18px, 1.82vw, 35px);
  /* PSD GradientOverlay: #ffa347 → #ef8519 (angle -90, reversed) */
  color: #ef8519;
  background: linear-gradient(180deg, #ffa347 0%, #ef8519 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: none;
  text-shadow: none;
}

/* Screen title tops from PSD (relative to each section height) */
.boxpc-page .boxpc-screen--camera {
  --screen-title-top: 10.2%;
  /* match sliced bg edge so sub-pixel gaps don't flash white */
  background: #d6e8f6;
  overflow-x: clip;
}

.boxpc-page .boxpc-screen--camera .boxpc-screen__bg {
  width: 100%;
  max-width: none;
  vertical-align: top;
}

.boxpc-page .boxpc-screen--ethernet {
  --screen-title-top: 10%;
  background: #061428;
}

.boxpc-page .boxpc-screen--usb {
  --screen-title-top: 10%;
  background: #f3f6fb;
}

.boxpc-page .boxpc-screen--display {
  --screen-title-top: 8.9%;
  background: #061428;
}

.boxpc-page .boxpc-screen--can {
  --screen-title-top: 10.8%;
  --screen-title-desc-gap: clamp(10px, 1.15vw, 16px);
  background: #f5f8fc;
}

.boxpc-page .boxpc-screen--m2 {
  --screen-title-top: 11.4%;
  background: #061428;
}

.boxpc-page .boxpc-screen--wireless {
  --screen-title-top: 9.6%;
  background: #e8eef8;
}

.boxpc-page .boxpc-screen--tests {
  --screen-title-top: 10.7%;
  --screen-certs-top: 33.8%;
}

.boxpc-page .boxpc-screen--ros {
  --screen-title-top: 10.6%;
  background: #eef3f8;
}

.boxpc-page .boxpc-screen--dark .boxpc-screen__desc {
  color: #adcdd1;
}

/* PSD: ethernet desc is white, not cyan like display/m2/tests */
.boxpc-page .boxpc-screen--ethernet.boxpc-screen--dark .boxpc-screen__desc {
  color: #ffffff;
}

.boxpc-page .boxpc-screen--m2 .boxpc-screen__desc {
  color: #adcdd1;
}

.boxpc-page .boxpc-screen--light .boxpc-screen__title-accent {
  color: #ef8519;
}

.boxpc-page .boxpc-screen--dark .boxpc-screen__title-accent {
  color: #f08519;
}

@media (min-width: 1024px) {
  .boxpc-page .boxpc-screen__head .boxpc-screen__title {
    font-size: clamp(24px, 2.95vw, 60px);
    white-space: normal;
    max-width: min(92%, 1200px);
    margin-inline: auto;
    line-height: 1.15;
    overflow-wrap: anywhere;
  }

  .boxpc-page .boxpc-screen__head .boxpc-screen__desc {
    font-size: var(--section-subtitle-size);
    white-space: normal;
    width: fit-content;
    max-width: min(92%, 1200px);
    margin-inline: auto;
    line-height: 1.55;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

/* Scenarios: PSD is 3×2 (6 cards), not the shared 4-col MIC grid */
.boxpc-page .boxpc-screen--scenarios .boxpc-scenario-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Spec: reuse MIC compact 3-col pattern */
.boxpc-page .boxpc-spec--mic {
  padding: clamp(36px, 4vw, 64px) 16px clamp(40px, 4.5vw, 72px);
}

.boxpc-page .boxpc-spec--mic .boxpc-spec__head {
  margin: 0 0 clamp(28px, 3vw, 40px);
}

.boxpc-page .boxpc-spec--mic .boxpc-spec__tables {
  grid-template-columns: 1fr;
  max-width: min(92%, 1280px);
  margin-inline: auto;
}

/* Spec: 2-column single-product table */
.boxpc-page .boxpc-spec--mic .boxpc-spec-table {
  table-layout: fixed;
  font-size: clamp(12px, 0.88vw, 15px);
  line-height: 1.35;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table thead th,
.boxpc-page .boxpc-spec--mic .boxpc-spec-table tbody th,
.boxpc-page .boxpc-spec--mic .boxpc-spec-table tbody td {
  text-align: center;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table tbody th {
  width: 28%;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table tbody td {
  width: 72%;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table tbody th,
.boxpc-page .boxpc-spec--mic .boxpc-spec-table tbody td {
  padding: 6px 12px;
  line-height: 1.35;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col {
  table-layout: fixed;
  font-size: clamp(12px, 0.88vw, 15px);
  line-height: 1.35;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col col.spec-col-name {
  width: 22%;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col col.spec-col-cfg {
  width: 34%;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col col.spec-col-note {
  width: 44%;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col thead th,
.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col tbody th,
.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col tbody td {
  text-align: center;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col tbody th,
.boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col tbody td {
  padding: 6px 12px;
  line-height: 1.35;
}

.boxpc-page .boxpc-spec--mic .boxpc-spec__actions {
  gap: clamp(16px, 2.4vw, 40px);
  flex-wrap: wrap;
  margin-top: clamp(20px, 2.4vw, 36px);
}

@media (min-width: 769px) and (max-width: 1023px) {
  /* Tablet: keep PC hero copy in title band */
  .boxpc-page .boxpc-hero__content h1 {
    top: 12.5% !important;
    font-size: clamp(20px, 4.6vw, 28px);
  }

  .boxpc-page .boxpc-hero__tagline {
    top: 22.5% !important;
    font-size: clamp(13px, 3.1vw, 17px);
    line-height: 1.18;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--camera .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--ethernet .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--usb .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--display .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--m2 .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--wireless .boxpc-screen__head {
    top: 7.5%;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--can .boxpc-screen__head {
    top: 6.5%;
  }
}

@media (max-width: 1023px) {
  /*
   * Hero: PC slice for now (手机稿未到)；top % matches 3840×1970 artboard.
   * PSD: h1 y0=13.71% | tagline y0=24.06%.
   */
  .boxpc-page .boxpc-hero {
    position: relative;
    background: #061428;
    line-height: 0;
    display: grid;
  }

  .boxpc-page .boxpc-hero > picture,
  .boxpc-page .boxpc-hero > .boxpc-hero__content {
    grid-area: 1 / 1;
  }

  .boxpc-page .boxpc-hero > picture {
    display: block;
    width: 100%;
  }

  .boxpc-page .boxpc-hero > picture > .boxpc-hero__bg {
    display: block;
    width: 100%;
    height: auto;
  }

  .boxpc-page .boxpc-hero > .boxpc-hero__content {
    position: relative;
    inset: auto;
    z-index: 2;
    width: 100%;
    align-self: start;
    aspect-ratio: 2560 / 1313;
    padding: 0 16px;
    box-sizing: border-box;
    pointer-events: none;
    line-height: normal;
  }

  .boxpc-page .boxpc-hero__content h1 {
    position: absolute !important;
    left: 50%;
    top: 13.71% !important;
    transform: translateX(-50%);
    width: var(--boxpc-overlay-head-w);
    margin: 0 !important;
    font-size: clamp(22px, 6.2vw, 34px);
    line-height: 1.12;
    letter-spacing: 0.01em;
    white-space: normal;
    text-align: center;
    color: #ffffff;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: #ffffff;
    filter: none;
    text-shadow: none;
  }

  .boxpc-page .boxpc-hero__tagline {
    position: absolute !important;
    left: 50%;
    top: 24.06% !important;
    transform: translateX(-50%);
    width: min(88%, var(--boxpc-overlay-head-w));
    margin: 0 !important;
    font-size: clamp(14px, 4vw, 20px);
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    color: #ef8519;
    background: linear-gradient(180deg, #ffa347 0%, #ef8519 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
    text-shadow: none;
  }

  /*
   * ≤1023px feature screens: overlay on PC art until mobile PSD arrives.
   * Beat boxpc-common stacked defaults (higher specificity + critical props).
   */
  .boxpc-page .boxpc-screen.boxpc-screen--camera,
  .boxpc-page .boxpc-screen.boxpc-screen--ethernet,
  .boxpc-page .boxpc-screen.boxpc-screen--usb,
  .boxpc-page .boxpc-screen.boxpc-screen--display,
  .boxpc-page .boxpc-screen.boxpc-screen--can,
  .boxpc-page .boxpc-screen.boxpc-screen--m2,
  .boxpc-page .boxpc-screen.boxpc-screen--wireless {
    display: block !important;
    position: relative;
    flex-direction: unset !important;
    min-height: 0;
    padding: 0 !important;
    overflow: hidden;
    line-height: 0;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--camera > picture,
  .boxpc-page .boxpc-screen.boxpc-screen--ethernet > picture,
  .boxpc-page .boxpc-screen.boxpc-screen--usb > picture,
  .boxpc-page .boxpc-screen.boxpc-screen--display > picture,
  .boxpc-page .boxpc-screen.boxpc-screen--can > picture,
  .boxpc-page .boxpc-screen.boxpc-screen--m2 > picture,
  .boxpc-page .boxpc-screen.boxpc-screen--wireless > picture {
    position: relative !important;
    inset: auto !important;
    order: unset !important;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--camera > picture > .boxpc-screen__bg,
  .boxpc-page .boxpc-screen.boxpc-screen--ethernet > picture > .boxpc-screen__bg,
  .boxpc-page .boxpc-screen.boxpc-screen--usb > picture > .boxpc-screen__bg,
  .boxpc-page .boxpc-screen.boxpc-screen--display > picture > .boxpc-screen__bg,
  .boxpc-page .boxpc-screen.boxpc-screen--can > picture > .boxpc-screen__bg,
  .boxpc-page .boxpc-screen.boxpc-screen--m2 > picture > .boxpc-screen__bg,
  .boxpc-page .boxpc-screen.boxpc-screen--wireless > picture > .boxpc-screen__bg {
    display: block;
    width: 100%;
    height: auto;
    object-fit: unset;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--camera > .boxpc-screen__content,
  .boxpc-page .boxpc-screen.boxpc-screen--ethernet > .boxpc-screen__content,
  .boxpc-page .boxpc-screen.boxpc-screen--usb > .boxpc-screen__content,
  .boxpc-page .boxpc-screen.boxpc-screen--display > .boxpc-screen__content,
  .boxpc-page .boxpc-screen.boxpc-screen--can > .boxpc-screen__content,
  .boxpc-page .boxpc-screen.boxpc-screen--m2 > .boxpc-screen__content,
  .boxpc-page .boxpc-screen.boxpc-screen--wireless > .boxpc-screen__content {
    position: absolute !important;
    inset: 0 !important;
    order: unset !important;
    z-index: 1;
    display: block !important;
    width: 100%;
    padding: 0 !important;
    box-sizing: border-box;
    line-height: normal;
    background: transparent;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--camera .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--ethernet .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--usb .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--display .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--can .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--m2 .boxpc-screen__head,
  .boxpc-page .boxpc-screen.boxpc-screen--wireless .boxpc-screen__head {
    position: absolute !important;
    left: 50%;
    transform: translateX(-50%);
    width: var(--boxpc-overlay-head-w);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* PSD title y0%; wider head so long camera desc wraps fully */
  .boxpc-page .boxpc-screen.boxpc-screen--camera .boxpc-screen__head {
    top: 9.3%;
    width: var(--boxpc-overlay-head-w-wide);
  }

  .boxpc-page .boxpc-screen.boxpc-screen--ethernet .boxpc-screen__head {
    top: 9.8%;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--usb .boxpc-screen__head {
    top: 9.7%;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--display .boxpc-screen__head {
    top: 9.8%;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--can .boxpc-screen__head {
    /* PSD: desc y1≈23.7%, icon row cy≈37% — keep ~13% breathing room below copy */
    top: 8%;
    width: var(--boxpc-overlay-head-w-narrow);
  }

  .boxpc-page .boxpc-screen.boxpc-screen--m2 .boxpc-screen__head {
    top: 9.1%;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--wireless .boxpc-screen__head {
    top: 11.7%;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--camera .boxpc-screen__title,
  .boxpc-page .boxpc-screen.boxpc-screen--ethernet .boxpc-screen__title,
  .boxpc-page .boxpc-screen.boxpc-screen--usb .boxpc-screen__title,
  .boxpc-page .boxpc-screen.boxpc-screen--display .boxpc-screen__title,
  .boxpc-page .boxpc-screen.boxpc-screen--m2 .boxpc-screen__title,
  .boxpc-page .boxpc-screen.boxpc-screen--wireless .boxpc-screen__title {
    position: static;
    transform: none;
    width: 100%;
    /* PSD title→desc gap ≈5% artboard (~70px@1080 → ~6.5vw) */
    margin: 0 0 clamp(20px, 6.5vw, 32px);
    font-size: clamp(22px, 5.8vw, 32px);
    line-height: 1.25;
    white-space: normal;
    letter-spacing: 0.01em;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--usb .boxpc-screen__title,
  .boxpc-page .boxpc-screen.boxpc-screen--m2 .boxpc-screen__title {
    margin-bottom: clamp(16px, 5vw, 24px);
  }

  .boxpc-page .boxpc-screen.boxpc-screen--can .boxpc-screen__title {
    position: static;
    transform: none;
    width: 100%;
    margin: 0 0 clamp(8px, 2.5vw, 14px);
    font-size: clamp(21px, 5.6vw, 30px);
    line-height: 1.2;
    white-space: normal;
    letter-spacing: 0.01em;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--can .boxpc-screen__desc {
    position: static;
    transform: none;
    width: 100%;
    max-width: 88%;
    margin: 0;
    font-size: clamp(12px, 3.25vw, 15px);
    line-height: 1.48;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .boxpc-page .boxpc-screen.boxpc-screen--camera .boxpc-screen__desc,
  .boxpc-page .boxpc-screen.boxpc-screen--ethernet .boxpc-screen__desc,
  .boxpc-page .boxpc-screen.boxpc-screen--usb .boxpc-screen__desc,
  .boxpc-page .boxpc-screen.boxpc-screen--display .boxpc-screen__desc,
  .boxpc-page .boxpc-screen.boxpc-screen--m2 .boxpc-screen__desc,
  .boxpc-page .boxpc-screen.boxpc-screen--wireless .boxpc-screen__desc {
    position: static;
    transform: none;
    width: 100%;
    max-width: 96%;
    margin: 0;
    font-size: clamp(13px, 3.5vw, 16px);
    line-height: 1.55;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  .boxpc-page .boxpc-screen--scenarios {
    padding: clamp(36px, 8vw, 48px) 16px clamp(40px, 9vw, 52px);
  }

  .boxpc-page .boxpc-screen--scenarios .boxpc-screen__title {
    font-size: clamp(22px, 5.8vw, 32px);
    letter-spacing: 0.01em;
    margin: 0 0 clamp(14px, 4vw, 22px);
  }

  .boxpc-page .boxpc-screen--scenarios .boxpc-screen__desc {
    max-width: 100%;
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.55;
  }

  .boxpc-page .boxpc-screen--scenarios .boxpc-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
    margin-top: clamp(20px, 5vw, 28px);
  }

  .boxpc-page .boxpc-spec--mic .boxpc-spec__head {
    margin: 0 0 32px;
  }

  .boxpc-page .boxpc-spec--mic .boxpc-spec__tables {
    max-width: 100%;
    width: 100%;
  }

  .boxpc-page .boxpc-spec--mic .boxpc-spec-table {
    width: 100%;
    min-width: 0;
  }

  .boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col {
    width: max(100%, 640px);
    min-width: 640px;
  }

  .boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col thead th,
  .boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col tbody th,
  .boxpc-page .boxpc-spec--mic .boxpc-spec-table--3col tbody td {
    padding: 10px 12px;
  }
}