.container {
  width: var(--container);
  margin: 0 auto;
}

.container > * {
  min-width: 0;
}

.section {
  padding: 56px 0;
}

.section-soft {
  background: #fafaf8;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.header-inner,
.footer-inner,
.section-heading,
.results-meta,
.filter-row,
.planner-toolbar,
.panel-header {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.header-inner > *,
.footer-inner > *,
.section-heading > *,
.results-meta > *,
.filter-row > *,
.planner-toolbar > *,
.panel-header > * {
  min-width: 0;
}

.site-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-grid,
.two-column-promo,
.shopping-layout,
.planner-layout {
  display: grid;
  gap: 24px;
}

.hero-grid > *,
.two-column-promo > *,
.shopping-layout > *,
.planner-layout > *,
.feature-grid > *,
.recipe-grid > *,
.course-grid > *,
.planner-grid > *,
.guide-grid > * {
  min-width: 0;
}

.hero-grid {
  grid-template-columns: 1.35fr minmax(240px, 0.8fr);
  align-items: stretch;
}

.feature-grid,
.recipe-grid,
.course-grid,
.planner-grid,
.guide-grid {
  display: grid;
  gap: 20px;
}

.feature-grid,
.guide-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.recipe-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.course-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.planner-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.two-column-promo {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.shopping-layout {
  grid-template-columns: minmax(260px, 320px) 1fr;
  align-items: start;
}

.planner-layout {
  grid-template-columns: minmax(360px, 1.1fr) minmax(340px, 0.9fr);
  align-items: start;
}

@media (max-width: 900px) {
  .hero-grid,
  .shopping-layout,
  .planner-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .section,
  .hero {
    padding: 40px 0;
  }

  .footer-inner,
  .section-heading,
  .results-meta,
  .filter-row,
  .planner-toolbar,
  .panel-header {
    flex-direction: column;
    align-items: stretch;
  }

  .site-nav {
    justify-content: flex-start;
    gap: 14px;
  }

  .header-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
  }
}