/* Only the original homepage layout at tablet and phone widths. */
.hero__mobile-art { display: none; }

@media (max-width: 900px) {
  /* The desktop negative offset places the heading underneath the mobile header. */
  .hero { margin-top: 0; }
  /* The hero title has an inline desktop font size. */
  .hero__title { font-size: clamp(36px, 5vw, 42px) !important; }
  .hero__subtitle { font-size: 20px !important; }

  .about-section__title { white-space: normal; overflow-wrap: anywhere; }
  .about-section__inner,
  .contact-section__inner { min-width: 0; }
}

@media (max-width: 700px) {
  /* Inline flex styles on the benefits otherwise make the page wider than the screen. */
  .hero .benefits ul {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px !important;
    max-width: 100% !important;
  }
  .hero .benefits li { width: auto !important; min-width: 0; }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 88px;
    padding-bottom: 36px;
    background-image: none !important;
  }
  .hero__overlay { display: none; }
  .hero__title { font-size: clamp(30px, 8vw, 36px) !important; }
  .hero__subtitle { font-size: 17px !important; }
  .hero__desc { margin-bottom: 18px !important; }
  .hero__mobile-art {
    display: block;
    aspect-ratio: 4 / 3;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 22px;
    background-color: #f4ecdf;
    background-size: cover;
    background-position: 70% center;
    background-repeat: no-repeat;
    box-shadow: 0 12px 28px rgba(58, 37, 25, 0.08);
  }
  .hero__actions { flex-direction: column; gap: 8px !important; margin-bottom: 22px !important; }
  .hero__actions .btn--primary,
  .hero__actions .hero__btn-ghost {
    width: 100% !important;
    justify-content: center;
  }
  .hero__actions .btn--primary { white-space: normal; text-align: center; }
  .hero__actions .hero__btn-ghost {
    padding: 8px 12px !important;
    border: 0 !important;
    background: transparent !important;
  }

  .hero .benefits ul { gap: 10px !important; }
  .hero .benefits li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    padding: 12px 10px;
    text-align: left !important;
    border: 1px solid rgba(58, 37, 25, 0.1);
    border-radius: 16px;
    background: #f4ecdf;
  }
  .hero .benefits li > div:first-child {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    margin-bottom: 0 !important;
  }
  .hero .benefits li > div:last-child { font-size: 11px !important; text-align: left; }

  /* Keep the existing cards, but avoid a full-screen image for every recipe. */
  .flavors { padding-block: 36px 40px; }
  .flavors-scroll { margin-inline: 0; padding-inline: 0; }
  .recipes { padding-block: 40px; }
  .recipes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .recipe-card__title { font-size: 16px; margin: 12px 6px 6px; }
  .recipe-card__desc { margin-inline: 6px; }
  .recipe-card__link { margin-inline: 6px; padding-inline: 10px; text-align: center; }

  .about-section { padding-block: 42px; }
  .about-section__inner { gap: 28px; }
  .about-section__features { gap: 18px; }
  .tips { padding-block: 40px; }
  .contact-section { padding-block: 42px; }
  .contact-section__inner { grid-template-columns: minmax(0, 1fr); }
  .contact-form { max-width: 100%; }
}

@media (max-width: 360px) {
  .hero .benefits li { padding: 10px 7px; gap: 5px; }
  .hero .benefits li > div:first-child { width: 32px !important; height: 32px !important; min-width: 32px; }
  .recipes-grid { grid-template-columns: minmax(0, 1fr); }
}