/*
 * Dual column layout: Bootstrap col-* without .row breaks the grid (sidebar overflows).
 * Single grid definition works for Tailwind + Bootstrap builds.
 */
.page-blog-post-v26-dual-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

.page-blog-post-v26-dual-grid > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .page-blog-post-v26-dual-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Category badge: padding (Tailwind px-sm py-xs). */
.page-blog-post-v26-category-badge {
  box-sizing: border-box;
  padding-inline: 0.5rem;
  padding-block: 0.375rem;
}

/* Key elements card: inner padding (Tailwind p-lg). */
.page-blog-post-v26-key-card {
  box-sizing: border-box;
  padding: 1.5rem;
}

/* Ingredient icon circle: Tailwind w-8 h-8. */
.page-blog-post-v26-ingredient-thumb {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0.25rem;
}

/* Step number badge: Tailwind w-8 h-8 + padding for multi-digit. */
.page-blog-post-v26-step-badge {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 2rem;
  min-height: 2rem;
  padding: 0.25rem 0.375rem;
}

/* Cover image: Tailwind h-64 md:h-80. */
.page-blog-post-v26-cover img {
  width: 100%;
  height: 16rem;
  object-fit: cover;
}

@media (min-width: 768px) {
  .page-blog-post-v26-cover img {
    height: 20rem;
  }
}