@import url("/static/sites/petroantillana/css/cocinarte.css");
@import url("/static/sites/petroantillana/css/recetas_beef_stew_certified_angus_beef.css");

.petro-page-body:has(.petro-recipe-detail) {
  margin: 0;
  padding: 0;
}

/* Related recipes carousel: keeps the same visual style as the old grid */
.petro-recipe-related-carousel {
  position: relative;
  width: 100%;
}

.petro-recipe-related-viewport {
  width: 100%;
  overflow: hidden;
}

.petro-recipe-related-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(
    (100% - ((var(--recipe-related-visible-count, 3) - 1) * 1rem))
    / var(--recipe-related-visible-count, 3)
  );
  gap: 1rem;
  align-items: stretch;
  transition: transform 260ms ease;
  will-change: transform;
}

.petro-recipe-related-card {
  min-width: 0;
}

.petro-recipe-related-card .postCardX,
.petro-recipe-related-card .petro-cocinarte-recipe-card {
  height: 100%;
}

.petro-recipe-related-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.petro-recipe-related-arrow {
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
}

.petro-recipe-related-arrow span {
  line-height: 1;
  font-size: 1.75rem;
}

.petro-recipe-related-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.petro-recipe-related-dot {
  width: 0.65rem;
  height: 0.65rem;
  border: 0;
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  opacity: 0.45;
}

.petro-recipe-related-dot.is-active,
.petro-recipe-related-dot[aria-current="true"] {
  opacity: 1;
}

.petro-recipe-related-arrow[disabled],
.petro-recipe-related-dot[disabled] {
  opacity: 0.35;
  cursor: default;
}

/* Responsive overrides: desktop uses DB, tablet/mobile keep layout usable */
@media (max-width: 900px) {
  .petro-recipe-related-carousel {
    --recipe-related-visible-count: 2;
  }
}

@media (max-width: 640px) {
  .petro-recipe-related-carousel {
    --recipe-related-visible-count: 1;
  }
}