/* Light pink, girly aesthetic tweaks on top of Tailwind */
:root{ --rose:#fce7f3; --rose2:#fbcfe8; --rose3:#f9a8d4; --text:#4a044e; }
body{ background:var(--rose); }
.card{ background:white; border-radius:1rem; box-shadow:0 10px 20px rgba(249,168,212,.25); }
a{ color:#be185d; }
.btn{ padding:0.5rem 1rem; border-radius:0.5rem; background:#ec4899; color:white; transition:all .2s; display:inline-block }
.btn:hover{ background:#be185d }
.btn-light{ background:#fff; color:#be185d; border:1px solid #fbcfe8; }
.btn-light:hover{ background:#fdf2f8 }
.input{ width:100%; border-radius:0.5rem; border:1px solid #fbcfe8; outline:none; padding:0.55rem 0.75rem; background:#fff; color:#4a044e; }
.input:focus{ border-color:#f472b6; box-shadow:0 0 0 3px rgba(244,114,182,.25) }
.btn:focus-visible, .pill:focus-visible, .badge:focus-visible, a:focus-visible{ outline:2px solid #f472b6; outline-offset:2px; border-radius:.25rem; }
.label{ display:block; color:#831843; margin-bottom:0.25rem; font-weight:500 }
.container-narrow{ max-width: 860px; }

/* Recipe page enhancements */
.recipe-hero{ position:relative; overflow:hidden; border-radius:1rem; box-shadow:0 16px 32px rgba(190,24,93,.25); }
.recipe-hero img{ width:100%; height:240px; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02); }
.recipe-hero__placeholder{ height:240px; background:linear-gradient(135deg,#fbcfe8 0%,#f9a8d4 100%); }
@media (min-width: 640px){
	.recipe-hero img{ height:320px; }
	.recipe-hero__placeholder{ height:320px; }
}
@media (min-width: 1024px){
	.recipe-hero img{ height:380px; }
	.recipe-hero__placeholder{ height:380px; }
}
.recipe-hero__overlay{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.0) 20%, rgba(0,0,0,.45) 100%); color:#fff; display:flex; align-items:flex-end; }
.recipe-hero__overlay>div{ padding:1.25rem 1.25rem; }
.recipe-hero__kicker{ font-size:.875rem; opacity:.9; margin-bottom:.25rem; }
.recipe-hero__title{ font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight:700; line-height:1.1; margin:0 0 .5rem; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.recipe-meta{ display:flex; flex-wrap:wrap; gap:.5rem; }
.pill{ background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); padding:.35rem .6rem; border-radius:999px; font-size:.85rem; }
.filter-pill{ border-color:#fbcfe8; background:#fff; color:#be185d; }
label:has(input[type="checkbox"]:checked) .filter-pill{ background:#f9a8d4; color:#fff; border-color:#f9a8d4; }
.pill-link{ text-decoration:none; color:#fff; }
.badge{ background:rgba(255,255,255,.18); border:1px dashed rgba(255,255,255,.4); padding:.25rem .55rem; border-radius:999px; font-size:.75rem; text-transform:capitalize; }

.section-card{ background:white; border-radius:1rem; box-shadow:0 10px 20px rgba(249,168,212,.25); padding:.75rem; }
@media (min-width: 640px){ .section-card{ padding:1rem; } }
.section{ padding:1rem; border-bottom:1px dashed #fbcfe8; }
.section:last-child{ border-bottom:none; }
.section-title{ font-size:1.25rem; color:#be185d; font-weight:600; margin-bottom:.5rem; }
.section-body{ color:#6b1842; }
.prose-lite p{ margin:.5rem 0; }

/* Collapsible description */
.desc-collapsible{ position:relative; max-height: 7.5rem; overflow:hidden; transition:max-height .25s ease; }
.desc-collapsible[aria-expanded="true"], .desc-collapsible[data-collapsed="false"]{ max-height: 9999px; }
.desc-fade{ position:absolute; bottom:0; left:0; right:0; height:3rem; background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 90%); pointer-events:none; }

/* Masonry (Pinterest-like) layout */
.masonry{ column-gap: .75rem; }
@media (min-width: 640px){ .masonry{ column-count: 2; } }
@media (min-width: 1024px){ .masonry{ column-count: 4; } }
.masonry-item{ break-inside: avoid; margin-bottom: .75rem; display: block; }
.masonry-card{ overflow: hidden; background: #fff; border:1px solid #fbcfe8; border-radius: .75rem; box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: transform .15s ease, box-shadow .2s ease; }
.masonry-card:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.masonry-card img{ width:100%; height:auto; display:block; transition: transform .2s ease; }
.masonry-card:hover img{ transform: scale(1.02); }
.masonry-meta{ display:flex; align-items:center; justify-content:space-between; font-size:.8rem; color:#9d174d; }

.ingredients-list{ list-style:disc; padding-left:1.25rem; color:#4a044e; }
.ingredients-list li{ padding:.25rem 0; }
.steps-list{ counter-reset: step; list-style:none; padding-left:0; }
.steps-list li{ position:relative; padding-left:2.25rem; margin:.75rem 0; }
.steps-list li::before{ counter-increment: step; content: counter(step); position:absolute; left:0; top:0; width:1.75rem; height:1.75rem; border-radius:999px; background:#f9a8d4; color:#8a0e46; display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow:0 6px 14px rgba(249,168,212,.5); }
.steps-list li>div{ background:#fff; border:1px solid #fbcfe8; border-radius:.75rem; padding:.75rem .9rem; }
