/** * Step-by-step recipe photo walkthroughs — consistent image frames, mobile-friendly. * Link from page ; set . * Image “stage” is 75% of the former max size (25% smaller); colors match layout / recipe_card. */ .recipe-step-page .header-wrapper { position: relative; z-index: 100; background: var(--white); box-shadow: 0 2px 6px rgba(96, 3, 41, 0.06); } .recipe-step-page .recipe-step { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--berry-blush-40); } .recipe-step-page .recipe-step:first-of-type { border-top: none; padding-top: 0; margin-top: 1rem; } .recipe-step-page .recipe-step h2 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); color: var(--berry); margin-bottom: 1rem; line-height: 1.35; padding: 0 0.125rem; } .recipe-step-page .recipe-step p { line-height: 1.65; max-width: min(31.5rem, 100%); margin-left: auto; margin-right: auto; padding: 0 0.125rem; color: var(--text-dark); } .recipe-step-page .back-link { color: var(--berry-primary); font-weight: 600; text-decoration: none; display: inline-block; padding: 0.35rem 0.5rem; -webkit-tap-highlight-color: var(--berry-primary-20); } .recipe-step-page .back-link:hover { color: var(--berry-deep); text-decoration: underline; } /* Photo stage: 25% smaller than prior 42rem cap (31.5rem); shadows like recipe tiles */ .recipe-step-page .recipe-step figure:has(> img) { position: relative; width: 100%; max-width: min(31.5rem, 100%); margin: 0 auto 0.9375rem auto; aspect-ratio: 4 / 3; background: var(--blush); border: 1px solid var(--berry-blush-40); border-radius: 9px; overflow: hidden; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.05); } .recipe-step-page .recipe-step figure:has(> img) img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: center; border-radius: 0; box-shadow: none; } @media (max-width: 400px) { .recipe-step-page .recipe-step figure:has(> img) { aspect-ratio: 1 / 1; max-width: 100%; border-radius: 7px; } } @media (max-width: 576px) { .recipe-step-page main.container { max-width: 100%; padding-left: max(0.75rem, env(safe-area-inset-left, 0px)); padding-right: max(0.75rem, env(safe-area-inset-right, 0px)); } .recipe-step-page h1.recipe-title-b { font-size: clamp(1.35rem, 5vw, 1.75rem); padding-left: 0.25rem; padding-right: 0.25rem; color: var(--berry); } } @media print { .recipe-step-page .header-wrapper, .recipe-step-page footer { display: none !important; } .recipe-step-page .recipe-step figure:has(> img) { aspect-ratio: auto; min-height: 0; background: transparent; border: none; box-shadow: none; overflow: visible; } .recipe-step-page .recipe-step figure:has(> img) img { position: static; width: 100%; max-width: 100%; height: auto; object-fit: none; } }