/* Shared mobile recipe reader: Explore and Meal Prep both use #recipeDialog. */
@media (max-width: 600px) {
  .recipe-dialog {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    left: 8px;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: contain;
    border-radius: 20px;
  }

  .recipe-dialog #recipeDetail {
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .recipe-dialog .close {
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 0;
    line-height: 1;
  }

  .recipe-dialog .recipe-hero { min-height: clamp(220px, 68vw, 290px); }
  .recipe-dialog .recipe-hero-content { padding: 28px 20px 22px; }
  .recipe-dialog .recipe-hero-content h2 { overflow-wrap: anywhere; }
}