/* This stylesheet is loaded only by the homepage. Every photo keeps its full width. */
.home-page .home-recipes-accordion { max-width: var(--page-width); margin-inline: auto; }
.home-page .home-recipes-deck { --recipe-card-width: min(44%, 540px); position: relative; height: clamp(420px, 34vw, 490px); isolation: isolate; }
.home-page .home-recipe-panel { position: absolute; top: 8px; left: calc((100% - var(--recipe-card-width)) * var(--recipe-index) / 4); width: var(--recipe-card-width); height: calc(100% - 40px); transform: translateY(var(--recipe-arc)); overflow: hidden; border-radius: 8px; background: #334535; box-shadow: -12px 0 30px rgb(12 30 19 / 20%); transition: left 1.5s cubic-bezier(.4,0,.2,1), transform 1.2s cubic-bezier(.25,.46,.45,.94), box-shadow 1.2s ease; }
.home-page .scroll-deck-ready:not(.is-in-view) .home-recipe-panel { left: calc((100% - var(--recipe-card-width)) / 2); }
.home-page .home-recipe-panel:nth-child(1) { --recipe-index: 0; --recipe-arc: 24px; z-index: 1; }
.home-page .home-recipe-panel:nth-child(2) { --recipe-index: 1; --recipe-arc: 8px; z-index: 2; }
.home-page .home-recipe-panel:nth-child(3) { --recipe-index: 2; --recipe-arc: 0px; z-index: 3; }
.home-page .home-recipe-panel:nth-child(4) { --recipe-index: 3; --recipe-arc: 8px; z-index: 2; }
.home-page .home-recipe-panel:nth-child(5) { --recipe-index: 4; --recipe-arc: 24px; z-index: 1; }
.home-page .home-recipe-panel.is-active { z-index: 6; transform: translateY(calc(var(--recipe-arc) - 6px)); box-shadow: -8px 8px 32px rgb(12 30 19 / 24%); }
.home-page .home-recipe-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.home-page .home-recipe-panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(9 27 17 / 12%) 45%, rgb(9 27 17 / 85%) 100%); pointer-events: none; }
.home-page .home-recipe-name { position: absolute; z-index: 1; left: 28px; bottom: 28px; color: #fff; writing-mode: vertical-rl; text-orientation: upright; font-size: var(--font-card); font-weight: var(--weight-heading); letter-spacing: .12em; text-shadow: 0 1px 8px rgb(0 0 0 / 25%); }
.home-page .is-active .home-recipe-name { opacity: 0; }
.home-page .home-recipe-details { position: absolute; z-index: 2; bottom: 28px; left: 30px; right: 30px; color: #fff; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility 0s .35s; }
.home-page .is-active .home-recipe-details { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.home-page .home-recipe-meta { font-size: var(--font-small); color: #f1f5eb; margin-bottom: 10px; }
.home-page .home-recipe-details h3 { color: #fff; margin: 0 0 12px; }
.home-page .home-recipe-details p { color: #f1f5eb; margin-bottom: 18px; }
.home-page .home-recipe-details a { display: inline-flex; align-items: center; gap: 45px; padding-block: 4px; color: #fff; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / 55%); pointer-events: auto; }
.home-page .home-recipe-details a:hover { border-color: #fff; }
.home-page .home-recipe-selectors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.home-page .home-recipe-toggle { border: 0; border-bottom: 1px solid #bacbb5; background: transparent; color: var(--text-body); padding: 12px 4px; text-align: center; cursor: pointer; line-height: 1.7; }
.home-page .home-recipe-toggle[aria-expanded="true"] { color: var(--primary-dark); border-bottom: 2px solid var(--primary); font-weight: var(--weight-heading); }
.home-page .home-recipe-toggle:hover { color: var(--primary-dark); }
.home-page .home-recipe-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (max-width: 760px) {
  .home-page .home-recipes-deck { --recipe-card-width: calc(100% - 48px); height: 410px; }
  .home-page .home-recipe-panel { box-shadow: -6px 0 16px rgb(12 30 19 / 20%); }
  .home-page .home-recipe-details { bottom: 24px; left: 24px; right: 24px; }
  .home-page .home-recipe-name { display: none; }
  .home-page .home-recipe-selectors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin-top: 16px; }
  .home-page .home-recipe-toggle { padding: 10px 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .home-recipe-panel, .home-page .home-recipe-details, .home-page .home-recipe-image, .home-page .is-active .home-recipe-details { transition: none; }
}