@charset "utf-8";
/* Recipe detail pages. Scoped to .recipe-detail; shared stylesheet rules are unchanged.
   Loaded after personal-use.css, which supplies the shared .page-main container, font and footer image rules.
   Mirrors product-detail.css (same tokens and spacing). */
.page-main.recipe-detail .master-title { overflow-wrap: anywhere; }
.page-main.recipe-detail .recipe-detail-container { display: flex; flex-direction: column; gap: 1.5rem; padding: 3rem 0; }

.recipe-detail-notice { padding: 0.5rem 1rem; font-size: 0.8rem; line-height: 1.2rem; background-color: rgba(180, 165, 130, 0.25); border-left: solid 4px #ca7a2c; overflow-wrap: anywhere; }

.recipe-detail-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; }
.recipe-detail-back { font-weight: 600; }

.recipe-detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 3rem; align-items: start; }
.recipe-detail-media { aspect-ratio: 1 / 1; background-color: rgba(180, 165, 130, 0.25); overflow: hidden; }
.recipe-detail-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recipe-detail-info { min-width: 0; }
.recipe-detail-desc { line-height: 1.5rem; overflow-wrap: anywhere; }

.recipe-detail-meta { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: 1rem 0; border-top: solid 2px rgba(0, 50, 63, 0.25); border-bottom: solid 2px rgba(0, 50, 63, 0.25); }
.recipe-detail-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-right: auto; min-width: 0; }
.recipe-detail-fact dt { font-size: 0.8rem; line-height: 1.2rem; font-weight: 600; }
.recipe-detail-fact dd { line-height: 1.5rem; overflow-wrap: anywhere; }
.recipe-detail-icon { font-size: 1.5rem; line-height: 1; }
.recipe-detail-icon:hover { text-decoration: none; }
.recipe-detail-heart:hover .ri-heart-3-line { display: none; }
.recipe-detail-heart:hover .ri-heart-3-fill { display: inline-block; }

.recipe-detail-section { max-width: 48rem; }
.recipe-detail-heading { padding-bottom: 0.5rem; border-bottom: solid 2px rgba(0, 50, 63, 0.25); font-size: 1.25rem; line-height: 1.5rem; font-weight: 600; overflow-wrap: anywhere; }
.recipe-detail-ingredient { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 1rem; padding: 0.5rem 0; border-bottom: solid 2px rgba(0, 50, 63, 0.25); line-height: 1.5rem; overflow-wrap: anywhere; }
.recipe-detail-product { font-weight: 600; }
.recipe-detail-amount { margin-left: auto; text-align: end; }
.recipe-detail-steps { margin: 0; padding: 0; list-style: none; counter-reset: recipe-step; }
.recipe-detail-steps li { position: relative; padding: 0.75rem 0 0.75rem 2.5rem; border-bottom: solid 2px rgba(0, 50, 63, 0.25); line-height: 1.5rem; overflow-wrap: anywhere; counter-increment: recipe-step; }
.recipe-detail-steps li::before { content: counter(recipe-step); position: absolute; left: 0; top: 0.75rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: #00323f; color: #fff; font-size: 0.8rem; line-height: 1.5rem; font-weight: 600; text-align: center; }
.recipe-detail-tip { max-width: 48rem; padding: 0.5rem 1rem; line-height: 1.5rem; background-color: rgba(180, 165, 130, 0.25); overflow-wrap: anywhere; }
.recipe-detail-tip-label { font-weight: 600; margin-right: 0.5rem; }

@media (max-width: 43.75em) {
    .recipe-detail-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .recipe-detail-media { max-width: 24rem; }
}
@media (max-width: 25.875em) {
    .recipe-detail-ingredient { flex-direction: column; gap: 0; }
    .recipe-detail-amount { margin-left: 0; text-align: start; }
}