/**
 * Tablet breakpoint band (769px–1023px)
 * Client UAT: ~820px width causes element overlap.
 * Desktop layout starts at 1024; mobile packing only applied ≤768,
 * so this mid band previously kept cramped desktop side-by-side rules.
 */

/* Did-you-know appearance: headline first, then video + copy + button together.
   Zero nth-child stagger so the second beat lands as one group. */
.dyk-title-seq.fadein-ele,
.dyk-title-seq.fadein-ele.scrolled,
.dyk-seq.fadein-ele,
.dyk-seq.fadein-ele.scrolled {
  transition-delay: 0s !important;
}

/* -------------------------------------------------------------------------- */
/* Branded: did-you-know — stack cleanly; hide decorative balls               */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  #did-you-know {
    padding-top: 5em !important;
    padding-bottom: 2em !important;
  }

  .did-you-know-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    gap: 1.5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .did-you-know-container .did-you-know-content {
    width: 88% !important;
    max-width: 640px;
    margin: 0 auto !important;
    text-align: center;
    padding-left: 0;
    flex: none !important;
  }

  .did-you-know-container .did-you-know-video {
    width: 88% !important;
    max-width: 640px;
    margin: 0 auto;
    flex: none !important;
    --chart-image-width: 100%;
  }

  .did-you-know-title__img {
    width: 100% !important;
    max-width: 100% !important;
    left: auto !important;
    transform: none !important;
  }

  /* Balls are desktop ornaments; at tablet they sit on top of chart/copy */
  .did-you-know-ball .did-you-know-ball-1,
  .did-you-know-ball .did-you-know-ball-2 {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Branded: key visual — keep title clear of hero art                         */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .key-visual {
    --kv-title-top: 12vh;
    --kv-ball-container-width: 42vw;
    --kv-ball-container-min-width: 220px;
    --kv-ball-container-transfrom: translate(-8vw, -10%);
  }

  .key-visual-title,
  .friso-home-tagline-container.key-visual-title {
    width: min(70vw, 28rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
  }

  .key-visual-title__img {
    max-height: 10vh;
    width: auto;
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------- */
/* Branded: IgG / girl-zoom — pull absolute balls off body copy               */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  :root {
    --igg-text-left-ball-right: 85%;
    --igg-text-left-ball-bottom: 110%;
    --igg-text-left-ball-width: 28%;
    --igg-ball-1-width: 28%;
    --igg-ball-1-top: -180%;
  }

  .igg-bottom-ball {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Branded: SMART IMMU — reduce absolute crowding at tablet width             */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .friso-section-container.smart .smart-immu-container .smart-immu-content {
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .smart-immu-content-title h3 {
    font-size: clamp(4rem, 12vw, 7rem);
  }

  .smart-immu .y-ball {
    transform: scale(0.9);
    transform-origin: center center;
  }

  .friso-section-container.smart .gallery-container-ele .txt-normal {
    max-width: 42%;
  }
}

/* -------------------------------------------------------------------------- */
/* Branded: 兩大關鍵 / farm overlays — keep step copy off the pin video       */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  .farm-animation-overlay .friso-section-container-inner-wider {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .patented-technology-step-num-1 {
    width: 8vw;
    right: calc(100% + 12px);
  }
}

/* -------------------------------------------------------------------------- */
/* Unbranded education — use MOBILE layout through tablet (769–1023)          */
/* Desktop min-width:769 rules otherwise keep side-by-side / absolute crop.   */
/* -------------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1023px) {
  /* Same CSS vars as max-width:768 mobile block in revamp.css */
  .unbranded {
    --wrapperDirection: column-reverse;
    --wrapperItemTxtAlign: center;
    --wrapperPaddingH: 2rem;
    --did-you-know-wrapper-item-canvas-scale: scale(1);
    --unbranded-txt-large-font-size: 1.6rem;
    --soa-content-width: 0 0 100%;
    --soa-img-img-width: 60vw;
    --soa-img-flex: 0 0 100%;
    --soa-img-width: 100%;
    --soa-wrapper-ai: center;
    --soa-content-pt: 0;
    --avp-item-width: 100%;
    --avp-wrapper-gap: 1rem;
    --ib-video-width: 70%;
    --ib-txt-overlay-top: -10%;
    --ib-txt-overlay-right: 55%;
    --ib-txt-overlay-z: 20;
    --ib-kv-ball-l-w: 30vw;
    --ib-kv-ball-l-r: calc(100% - 20vw);
    --ib-kv-ball-r-w: 25vw;
    --ib-kv-ball-r-r: calc(100% - 16vw);
    --ib-kv-ball-tb: -50%;
    --ib-kv-ball-r-b: -25%;
    --ib-kv-ball-o: 0.5;
    --y-shape-1-txt-right: 68%;
    --y-shape-right-txt-left: 82%;
    --y-shape-1-txt-top: 35%;
    --y-shape-2-txt-btm: 82%;
    --y-shape-3-txt-top: 56%;
    --y-shape-bg-w: 160vw;
    --y-shape-1-dl-transform: skew(-20deg) translateX(-5px);
    --y-shape-1-dl-border-w: 1px 0 0 1px;
    --y-shape-2-3-dl-transform: skew(-20deg) translateX(-5px);
    --y-shape-txt-translate-y: 0%;
    --preserve-img-width: 100%;
    --preserve-content-pt: 0;
    --three-points-inner-display: none;
    --three-points-steps-h: auto;
    --three-points-txt-max-h: none;
    --three-points-wrapper-gap: 2rem;
  }

  /* Prefer mobile copy / titles (belt + suspenders; bundle already ≤1023) */
  .unbranded .desktop-only,
  .unbranded .desktop-br br {
    display: none !important;
  }
  .unbranded .mobile-only,
  .unbranded .mobile-br br {
    display: block !important;
  }

  /* Keep section content inside the viewport */
  .unbranded,
  .unbranded .friso-section-container,
  .unbranded .friso-section-container-inner-full,
  .unbranded .friso-section-container-inner-wider {
    max-width: 100% !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .unbranded .txt-normal,
  .unbranded .txt-body,
  .unbranded p,
  .unbranded .soa-seq,
  .unbranded .avp-content,
  .unbranded .y-shape-seq,
  .unbranded .bioactive-seq,
  .unbranded .preserve-seq {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .unbranded .did-you-know-wrapper {
    flex-direction: column !important;
    gap: 1.5rem;
    margin-top: 6vh !important;
  }

  .unbranded .did-you-know-wrapper-item-canvas {
    order: 2;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    transform: none !important;
  }

  .unbranded .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) {
    display: contents;
  }

  .unbranded .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) > div:nth-child(1) {
    order: 1;
  }

  .unbranded .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) > div:nth-child(2) {
    order: 3;
  }

  .unbranded .did-you-know-wrapper-item:not(.did-you-know-wrapper-item-canvas) > div:nth-child(3) {
    order: 4;
  }

  .unbranded .did-you-know-title__img,
  .unbranded .did-you-know-title__img--single-line,
  .unbranded .did-you-know-title__img--igG-benefits,
  .unbranded .did-you-know-title__img--bioactive,
  .unbranded .did-you-know-title__img--preserve,
  .unbranded .did-you-know-title__img--subtitle {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    left: auto !important;
    transform: none !important;
  }

  /* Cancel desktop-only treatments that start at 769px */
  .unbranded .source-of-antibodies-wrapper-item-img img {
    transform: none !important;
  }

  .unbranded .antibody-vulnerable-period-video {
    transform: none !important;
  }

  .unbranded .antibody-vulnerable-period-wrapper,
  .unbranded .source-of-antibodies-wrapper,
  .unbranded .preserve-wrapper {
    flex-direction: column-reverse !important;
    align-items: center !important;
  }

  .unbranded .antibody-vulnerable-period-wrapper-item,
  .unbranded .source-of-antibodies-wrapper-item-content,
  .unbranded .preserve-wrapper-item-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: var(--wrapperPaddingH);
    padding-right: var(--wrapperPaddingH);
    box-sizing: border-box;
  }

  .unbranded .y-shape {
    margin-top: 2rem !important;
    border-bottom: 0 !important;
    overflow: hidden;
    padding-bottom: 0;
  }

  .unbranded .y-shape.scrolled {
    border-bottom-color: transparent !important;
  }

  .unbranded .y-shape-txt {
    transform: translateY(0) translateX(0) !important;
    width: 100%;
    max-width: 100%;
    padding-left: var(--wrapperPaddingH);
    padding-right: var(--wrapperPaddingH);
    box-sizing: border-box;
  }

  .unbranded .y-shape-bg-wrapper-bg {
    left: 50% !important;
    max-width: 145vw !important;
    transform: translateX(-50%) !important;
  }

  .unbranded .y-shape::after {
    background-position: center 300px;
    background-size: 150vw auto;
  }

  .unbranded .igG-benefits-kv-ball-left,
  .unbranded .igG-benefits-kv-ball-right {
    opacity: var(--ib-kv-ball-o, 0.5);
  }

  .unbranded .three-points-title-desktop {
    display: none !important;
  }

  .unbranded .three-points-title-mobile {
    display: block !important;
  }

  /*
   * Video 1/2/3: fill the pin. Portrait Layout mp4s match tablet/phone
   * viewports → cover. CTA sits on a bottom gradient (not a video gap).
   */
  .unbranded .three-points-pin {
    background: #120b03;
  }

  .unbranded .three-points-video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center;
    background: #120b03;
  }

  .unbranded .three-points-title-mobile {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
    top: 8vh !important;
  }

  .unbranded .three-points-title-mobile.fadein-ele,
  .unbranded .three-points-title-mobile.fadein-ele.scrolled {
    transform: none !important;
  }

  .unbranded .three-points-title-mobile img {
    display: block;
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;
    margin: 0 auto;
  }

  .unbranded .three-points-cta {
    bottom: max(10px, 1.25vh) !important;
    z-index: 5;
  }

  .unbranded .three-points-cta .friso-rect-button {
    width: 155px;
  }

  /* Layout videos include step copy — hide old webp overlays */
  .unbranded .three-points-step-img,
  .unbranded .three-points-step-img.mobile-only {
    display: none !important;
  }

  .unbranded .preserve-wrapper-item-img {
    width: 100%;
  }

  .unbranded .preserve-wrapper-item-img img {
    width: var(--preserve-img-width) !important;
    max-width: 100%;
  }

  .unbranded .bioactive-wrapper,
  .unbranded .gallery-container {
    max-width: 100%;
    box-sizing: border-box;
  }
}


/* -------------------------------------------------------------------------- */
/* Unbranded UAT visual fixes                                                 */
/* -------------------------------------------------------------------------- */

/* Gallery: remove excess gap under bioactive photo block (deck: remove space) */
.unbranded .bioactive .bioactive-wrapper {
  margin-bottom: 0;
}
.unbranded .bioactive .gallery-container {
  margin-top: 1rem;
  margin-bottom: 0;
}
.unbranded .bioactive .gallery-caption-container {
  margin-top: 0.5rem;
  padding-top: 0;
}
.unbranded .bioactive .gallery-caption-ele {
  margin-top: 0;
  padding-top: 0.25rem;
}
.unbranded .bioactive .video-over-content {
  padding-bottom: 0.75rem;
}

/* Video 1 dullness: replaced with client Layout_01 Desktop/Mobile exports
   (2026-09-06). Temporary CSS brightness lift removed. */

/* Brand ®: no extra gap before following text */
.sup-brand {
  margin-right: 0 !important;
}


/* -------------------------------------------------------------------------- */
/* Three-points video 1/2/3 — fill the screen                                 */
/* Portrait Layout files ≈ phone/tall viewports → cover (no letterbox).       */
/* Ultra-wide short screens keep contain so side 圖字 isn’t clipped.          */
/* CTA overlays a bottom fade instead of shrinking the video box.             */
/* -------------------------------------------------------------------------- */
.unbranded .three-points-pin {
  background: #120b03;
}

.unbranded .three-points-pin::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7.5rem;
  background: linear-gradient(
    to top,
    rgb(18, 11, 3) 0%,
    rgba(18, 11, 3, 0.72) 40%,
    rgba(18, 11, 3, 0) 100%
  );
  z-index: 3;
  pointer-events: none;
}

.unbranded .three-points-video {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center;
  background: #120b03;
}

.unbranded .three-points-cta {
  bottom: max(12px, 1.5vh) !important;
  z-index: 5;
}

.unbranded .three-points-step-img {
  display: none !important;
}

/* Wide landscape: prefer contain so desktop 16:9 side copy stays on-screen */
@media screen and (min-aspect-ratio: 18/9) {
  .unbranded .three-points-video {
    object-fit: contain !important;
  }
}

/* Below ~1440 wide + tall: use mobile title; video still full-bleed cover */
@media screen and (min-width: 1024px) and (max-width: 1439px) and (max-aspect-ratio: 16/9) {
  .unbranded .three-points-title-desktop {
    display: none !important;
  }
  .unbranded .three-points-title-mobile {
    display: block !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
    padding: 0 1.5rem;
    box-sizing: border-box;
    top: 8vh !important;
  }
  .unbranded .three-points-title-mobile.fadein-ele,
  .unbranded .three-points-title-mobile.fadein-ele.scrolled {
    transform: none !important;
  }
  .unbranded .three-points-title-mobile img {
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 1023px) {
  .unbranded .three-points-cta .friso-rect-button {
    width: 155px;
  }
}

/* Three-points title: PhotoText SVG used 啓 glyph; client wants 啟 (U+555F) */
.three-points-title-text {
  margin: 0;
  padding: 0 1rem;
  color: #c9a666;
  font-family: DFLiHeiHK, "Noto Sans HK", "Noto Sans SC", "Arial", sans-serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 4.2vw, 2rem);
  letter-spacing: 0.35em;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
@media screen and (min-width: 1024px) {
  .three-points-title-text {
    font-size: clamp(1.75rem, 2.4vw, 2.5rem);
    letter-spacing: 0.45em;
  }
}