/*
    recipe-detail.css
    This stylesheet provides custom styles for the recipe detail page, including category tags,
    related recipe items, aspect ratio containers for images, and responsive adjustments for mobile devices.
    It ensures a visually consistent and interactive UI for recipe-related views.
*/

/* Styling for recipe category tag */
.text-custom-red {
    color: #BF161C;
}

/* Resep Lainnya (Other Recipes) section spacing */
.mt-16 {
    padding-top: 2rem;
}

/* Recipe item hover effect for related recipes */
.recipe-item a:hover {
    color: #BF161C;
    transition: color 0.3s ease;
}

/* Recipe title hover effect in recipe grid */
.recipe-item h3 {
    transition: color 0.3s ease;
}

.recipe-item a:hover h3 {
    color: #BF161C;
}

/* Aspect ratio containers for images and media */
[class*='aspect-'] {
  position: relative;
}

[class*='aspect-'] > * {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 16:9 Aspect Ratio */
.aspect-w-16.aspect-h-9 {
  padding-bottom: 56.25%;
}

/* 4:3 Aspect Ratio */
.aspect-w-4.aspect-h-3 {
  padding-bottom: 75%;
}

/* 1:1 Aspect Ratio */
.aspect-w-1.aspect-h-1 {
  padding-bottom: 100%;
}

/* Responsive adjustments for mobile devices */
@media (max-width: 792px) {
    .mt-16 {
        margin-top: 3rem;
    }
}