/*
 * Hoppo hero responsive correction
 * Keeps the cinematic artwork fully visible on desktop, tablet and mobile.
 */

@media (min-width: 1121px) {
  .hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: clamp(20px, 3vw, 56px);
    min-height: 790px;
    padding-top: 118px;
  }

  .hero-copy {
    padding-bottom: 0;
  }

  .hero-visual {
    width: 100%;
    min-height: 600px;
    margin-right: 0;
  }

  .hero-visual img {
    top: 50%;
    left: 50%;
    width: min(680px, 52vw);
    max-width: 100%;
    translate: -50% -50%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .floating-card-one {
    top: 18%;
    left: 0;
  }

  .floating-card-two {
    right: 0;
    bottom: 18%;
  }
}

@media (min-width: 781px) and (max-width: 1120px) {
  .hero {
    padding-top: 122px;
    padding-bottom: 64px;
  }

  .hero-visual {
    width: min(100%, 820px);
    min-height: 600px;
    margin: 18px auto 0;
  }

  .hero-visual img {
    top: 50%;
    left: 50%;
    width: min(760px, 92vw);
    max-width: 100%;
    translate: -50% -50%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .floating-card-one {
    left: 3%;
  }

  .floating-card-two {
    right: 3%;
  }
}

@media (max-width: 780px) {
  .hero {
    padding-top: 108px;
    padding-bottom: 54px;
  }

  .hero-visual {
    width: 100%;
    min-height: clamp(350px, 103vw, 470px);
    margin: 26px auto 0;
  }

  .hero-visual img {
    top: 50%;
    left: 50%;
    width: min(100%, 520px);
    max-width: 100%;
    translate: -50% -50%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .visual-glow {
    top: 12%;
    left: 50%;
    width: 80vw;
    height: 80vw;
    translate: -50% 0;
  }

  .floating-card {
    display: none;
  }
}

@media (max-width: 430px) {
  .hero-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .hero-metrics > div {
    border-right: 1px solid #abb7e73d;
    padding: 0 9px;
  }

  .hero-metrics > div:nth-child(2) {
    border-right: 1px solid #abb7e73d;
  }

  .hero-metrics > div:last-child {
    border: 0;
    padding-left: 9px;
  }

  .hero-metrics strong {
    font-size: 19px;
  }

  .hero-metrics span {
    font-size: 8px;
  }
}