/* ==========================================================================
   HARVEST & HEARTH — Responsive Rules
   Breakpoints tested: 320 / 375 / 425 / 768 / 1024 / 1440 / 1920
   Mobile-first overrides layered on top of style.css desktop defaults.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1920px and up — roomier container, larger type
   -------------------------------------------------------------------------- */
@media (min-width: 1600px){
  :root{ --container-max: 1440px; }
  .hero h1{ font-size: var(--fs-4xl); }
}

/* --------------------------------------------------------------------------
   1024px — tighten grids slightly, collapse mega menu columns
   -------------------------------------------------------------------------- */
@media (max-width: 1180px){
  .recipe-grid{ grid-template-columns: repeat(3, 1fr); }
  .cat-grid{ grid-template-columns: repeat(4, 1fr); }
  .insta-grid{ grid-template-columns: repeat(4, 1fr); }
  .footer-top{ grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-top .footer-col:last-child{ display: none; }
}

/* --------------------------------------------------------------------------
   1024px and below — nav becomes drawer, hero stacks
   -------------------------------------------------------------------------- */
@media (max-width: 1024px){
  .main-nav__list{ display: none; }
  .hamburger{ display: block; }
  .hero .container{ grid-template-columns: 1fr; text-align: left; }
  .hero__card{ margin: var(--space-lg) auto 0; max-width: 300px; }
  .recipe-body{ grid-template-columns: 1fr; }
  .ingredients-card{ position: static; }
  .article-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* --------------------------------------------------------------------------
   768px — tablet
   -------------------------------------------------------------------------- */
@media (max-width: 768px){
  :root{ --header-h: 72px; --space-2xl: 4rem; --space-3xl: 5rem; }
  .container{ padding: 0 var(--space-sm); }
  .recipe-grid{ grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); }
  .cat-grid{ grid-template-columns: repeat(3, 1fr); }
  .insta-grid{ grid-template-columns: repeat(3, 1fr); }
  .article-grid{ grid-template-columns: 1fr; }
  .footer-top{ grid-template-columns: 1fr 1fr; gap: var(--space-md) var(--space-lg); }
  .footer-brand{ grid-column: 1 / -1; }
  .newsletter{ grid-template-columns: 1fr; text-align: center; }
  .newsletter-form{ flex-direction: column; }
  .section-head{ flex-direction: column; align-items: flex-start; }
  .listing-toolbar{ flex-direction: column; align-items: stretch; }
  .filter-group{ justify-content: flex-start; }
  .recipe-meta-bar{ flex-wrap: wrap; gap: var(--space-md); margin-top: -30px; }
  .recipe-meta-bar__share{ margin-left: 0; width: 100%; justify-content: flex-start; padding-top: var(--space-sm); border-top: 1px solid var(--color-line); }
  .comment__reply{ margin-left: 0; }
	.logo__text {
    font-size: 1rem;
    line-height: 1.1;
}
}

/* --------------------------------------------------------------------------
   425px and below — small phones
   -------------------------------------------------------------------------- */
@media (max-width: 425px){
  :root{ --fs-4xl: 2.4rem; --fs-3xl: 2rem; --fs-2xl: 1.7rem; --fs-xl: 1.3rem; }
  .hero{ min-height: auto; padding-bottom: var(--space-2xl); }
  .hero__stats{ gap: var(--space-md); flex-wrap: wrap; }
  .recipe-grid{ grid-template-columns: 1fr; }
  .cat-grid{ grid-template-columns: repeat(2, 1fr); }
  .insta-grid{ grid-template-columns: repeat(2, 1fr); }
  .footer-top{ grid-template-columns: 1fr; }
  .section{ padding: var(--space-xl) 0; }
  .section--tight{ padding: var(--space-lg) 0; }
  .mega-menu{ width: 92vw; }
  .step-item{ flex-direction: column; }
  .step-item__img{ margin-left: 0; }
  .btn{ padding: 0.8rem 1.5rem; }
  .footer-bottom{ flex-direction: column; gap: var(--space-xs); text-align: center; }
}

/* --------------------------------------------------------------------------
   320px — smallest supported width, no horizontal scroll guaranteed
   -------------------------------------------------------------------------- */
@media (max-width: 340px){
  .logo__text{ font-size: 1.05rem; }
  .hero__card{ max-width: 250px; padding: var(--space-sm); }
  .seal{ --seal-size: 76px; }
  .header-actions .icon-btn:not(.hamburger-wrap){ display: none; }
}

/* --------------------------------------------------------------------------
   Utility: guarantee no overflow on any breakpoint
   -------------------------------------------------------------------------- */
html, body{ max-width: 100%; overflow-x: hidden; }
img, video, svg{ max-width: 100%; height: auto; }
.recipe-hero__img{ height: auto; max-height: 62vh; }