/*
 * Safari / iPhone (WebKit) fixes, loaded after styles.css.
 * Chrome on iPhone is WebKit too, so these are the "works on Android, not on iPhone" cases.
 */

/* HOME HERO — the video box is absolutely positioned without top/left: Chrome centers
   it on the grid, WebKit drops it at the grid's top-left. Center it explicitly. */
.home-hero .hero-grid.hero-wrapper {
  position: relative;
}

.home-hero .home-visual {
  top: 50%;
  left: 50%;
  width: max-content; /* same size as before: the left offset would otherwise halve it */
  transform: translate(-50%, -50%);
}

@media (max-width: 991.98px) {
  /* the grid has 2rem of top padding here: center on its content, as Chrome does */
  .home-hero .home-visual {
    top: calc(50% + 1rem);
  }
}

/* PRODUCT "COME USARE" STEPS (mobile) — max-height: 90% has no definite height to
   resolve against, so WebKit stretches the video to the whole card. Give the box its
   own shape instead (the 5:8 that Chrome ends up showing). */
@media (max-width: 991.98px) {
  .routine-section .routine-card {
    align-content: start;
  }

  .routine-section .routine-media {
    position: relative;
    align-self: start;
    aspect-ratio: 5 / 8;
    max-height: none;
    margin-bottom: 3rem;
  }

  .routine-section .routine-media-image {
    position: absolute;
    inset: 0;
  }
}