/*
 * ENITA homepage Hero responsive stability.
 *
 * Keep the global exploration entry on one shared anchor across carousel
 * chapters, and let portrait tablets use the vertical artwork composition.
 * Landscape tablets intentionally retain the desktop composition.
 */

@media (max-width: 760px) {
  .hero-home-concept-carousel .hero-home-message__inner,
  html.is-home-page.is-home-hero-first .hero-home-message__inner,
  html.is-home-page.is-home-hero-science .hero-home-message__inner,
  .hero-home-concept-carousel:has(.home-hero-slide[data-slide-id="pure-science"].is-active) .hero-home-message__inner {
    top: auto;
    right: auto;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 50%;
    width: calc(100% - 36px);
    justify-items: center;
    transform: translateX(-50%);
  }
}

@media (max-width: 760px) and (max-height: 720px) {
  .hero-home-concept-carousel .hero-home-message__inner,
  html.is-home-page.is-home-hero-first .hero-home-message__inner,
  html.is-home-page.is-home-hero-science .hero-home-message__inner,
  .hero-home-concept-carousel:has(.home-hero-slide[data-slide-id="pure-science"].is-active) .hero-home-message__inner {
    bottom: calc(clamp(40px, 7.6svh, 52px) + env(safe-area-inset-bottom));
  }

  .hero-home-concept-carousel .hero-home-message__positioning,
  html.is-home-page.is-home-hero-first .hero-home-message__positioning,
  html.is-home-page.is-home-hero-science .hero-home-message__positioning {
    display: none;
  }
}

/* Portrait iPads and similarly sized tablets use the vertical plates with a
   roomier version of the handset editorial layout. */
@media (min-width: 600px) and (max-width: 1200px) and (orientation: portrait) {
  .hero-home-concept-carousel .home-hero-slide[data-slide-id="skinimalism"] > picture > img {
    object-position: center 30%;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="pure-science"] > picture > img {
    object-position: center 50%;
  }

  .hero-home-concept-carousel .home-hero-slide[data-slide-id="less-is-more"] > picture > img {
    object-position: center center;
  }

  .home-hero-fixed-copy__identity {
    top: clamp(136px, 13.7svh, 168px);
    right: clamp(32px, 4.5vw, 44px);
    left: clamp(32px, 4.5vw, 44px);
    width: auto;
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-fixed-copy__title-cn {
    width: clamp(300px, 43vw, 382px) !important;
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-fixed-copy__wordmark {
    width: clamp(360px, 52vw, 460px) !important;
    margin-top: clamp(17px, 2.1vw, 22px);
  }

  .home-hero-fixed-copy__identity .home-hero-fixed-copy__rule {
    width: clamp(104px, 14vw, 132px);
    margin-top: 20px;
  }

  .home-hero-fixed-copy__statement {
    top: auto;
    right: clamp(34px, 5vw, 50px);
    bottom: calc(clamp(200px, 20.8svh, 250px) + env(safe-area-inset-bottom));
    left: auto;
    width: clamp(236px, 34vw, 300px);
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-fixed-copy__statement-cn {
    width: 88% !important;
    margin-left: auto;
  }

  .home-hero-fixed-copy__statement-rule {
    width: 96px;
    margin: 17px 0 0 auto;
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-fixed-copy__statement-en {
    width: 100% !important;
    margin-top: 11px;
  }

  .home-hero-fixed-copy__science-group {
    top: clamp(188px, 22svh, 260px);
    right: clamp(32px, 4.5vw, 44px);
    left: clamp(36px, 5vw, 50px);
    width: auto;
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-fixed-copy__science-kicker {
    width: clamp(252px, 36vw, 320px) !important;
  }

  .home-hero-fixed-copy__science-group .home-hero-fixed-copy__title-cn {
    width: clamp(272px, 39vw, 344px) !important;
    margin-top: 28px;
  }

  .home-hero-fixed-copy__science-group .home-hero-fixed-copy__rule {
    width: 104px;
    margin-top: 22px;
  }

  .hero-home-concept-carousel .home-hero-slide .home-hero-fixed-copy__science-statement {
    width: clamp(210px, 30vw, 260px) !important;
    margin-top: 16px;
  }

  .home-hero-less-is-more-copy__lockup {
    top: clamp(142px, 14.5svh, 176px);
    left: clamp(36px, 5vw, 50px);
    width: min(54vw, 430px);
  }

  .hero-home-concept-carousel .hero-home-message__inner {
    bottom: calc(clamp(60px, 6.4svh, 76px) + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-home-concept-carousel .home-hero-slide {
    transition: none;
  }
}