/* Recipe category archive — full masonry grid */

/* No hero — solid green header from load */
#recipe-category-page #main-header {
  background-color: color-mix(in srgb, var(--color-green-800) 94%, transparent);
  backdrop-filter: blur(0.75rem);
  -webkit-backdrop-filter: blur(0.75rem);
  box-shadow: var(--shadow-header);
}

#recipe-category-page .rc-intro {
  --rc-intro-breathe: clamp(3rem, 6vw, 5rem);
  --rc-header-clear: clamp(2.25rem, 4vw + 1rem, 6.125rem);
  padding-top: calc(var(--rc-header-clear) + var(--rc-intro-breathe));
  padding-bottom: var(--rc-intro-breathe);
  padding-inline: clamp(1rem, 2.5vw, 2rem);
  background: var(--color-cream);
  text-align: center;
}

#recipe-category-page .rc-intro .section-headline {
  max-width: min(42rem, 100%);
  margin-inline: auto;
  margin-bottom: 1rem;
}

#recipe-category-page .rc-intro .section-body {
  color: var(--color-text-muted);
  max-width: min(40rem, 100%);
  margin-inline: auto;
}

#recipe-category-page .recipe-archive {
  display: flex;
  flex-direction: column;
  gap: clamp(0.85rem, 1.75vw, 1.35rem);
}

/* --- Left-to-right staggered card entrance --- */
#recipe-category-page {
  --rc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --rc-enter-duration: 0.9s;
}

#recipe-category-page .rc-recipe-enter {
  opacity: 0;
  transform: translate3d(-2.25rem, 0.4rem, 0) scale(0.97);
  transform-origin: left center;
  transition:
    opacity var(--rc-enter-duration) var(--rc-ease-out),
    transform var(--rc-enter-duration) var(--rc-ease-out),
    box-shadow 0.45s ease;
  transition-delay: var(--rc-enter-delay, 0ms);
  will-change: opacity, transform;
}

#recipe-category-page .rc-recipe-enter.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

#recipe-category-page .rc-recipe-enter img {
  transform: scale(1.07);
  transition: transform calc(var(--rc-enter-duration) + 0.1s) var(--rc-ease-out);
  transition-delay: var(--rc-enter-delay, 0ms);
}

#recipe-category-page .rc-recipe-enter.is-visible img {
  transform: scale(1);
}

#recipe-category-page .rc-recipe-enter .recipe-card-overlay {
  transition: opacity 0.5s var(--rc-ease-out);
  transition-delay: calc(var(--rc-enter-delay, 0ms) + 0.08s);
}

#recipe-category-page .rc-recipe-enter .recipe-card-overlay h5 {
  opacity: 0;
  transform: translate3d(-0.35rem, 0.35rem, 0);
  transition:
    opacity 0.6s var(--rc-ease-out),
    transform 0.6s var(--rc-ease-out);
  transition-delay: calc(var(--rc-enter-delay, 0ms) + 0.18s);
}

#recipe-category-page .rc-recipe-enter.is-visible .recipe-card-overlay h5 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#recipe-category-page .rc-recipe-enter.is-visible:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}

#recipe-category-page .rc-band-enter {
  /* Bands stay static — motion is on cards only */
}

@media (prefers-reduced-motion: reduce) {
  #recipe-category-page .rc-recipe-enter {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #recipe-category-page .rc-recipe-enter img {
    transform: none;
    transition: none;
  }

  #recipe-category-page .rc-recipe-enter .recipe-card-overlay h5 {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

#recipe-category-page .dish-grid .recipe-card--tall {
  min-height: clamp(12rem, 28vw, 22rem);
}

#recipe-category-page .dish-grid .recipe-card--half {
  min-height: clamp(8rem, 16vw, 12rem);
}

/* --- Masonry pattern variants (7-card bands) --- */

/* Classic: wide | stack | wide | stack | wide */
#recipe-category-page .dish-grid--classic {
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 2fr);
}

#recipe-category-page .dish-grid--classic .recipe-card--col-wide-1 { grid-column: 1 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--classic .recipe-card--col-wide-2 { grid-column: 3 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--classic .recipe-card--col-wide-3 { grid-column: 5 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--classic .recipe-card--col-narrow-1 { grid-column: 2 !important; }
#recipe-category-page .dish-grid--classic .recipe-card--col-narrow-2 { grid-column: 4 !important; }

/* Inner: stack | wide | stack | wide | tall */
#recipe-category-page .dish-grid--inner {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 1fr);
}

#recipe-category-page .dish-grid--inner .recipe-card--col-wide-1 { grid-column: 2 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--inner .recipe-card--col-wide-2 { grid-column: 4 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--inner .recipe-card--col-wide-3 { grid-column: 5 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--inner .recipe-card--col-narrow-1.recipe-card--row-top { grid-column: 1 !important; grid-row: 1 !important; }
#recipe-category-page .dish-grid--inner .recipe-card--col-narrow-1.recipe-card--row-bottom { grid-column: 3 !important; grid-row: 2 !important; }
#recipe-category-page .dish-grid--inner .recipe-card--col-narrow-2.recipe-card--row-top { grid-column: 3 !important; grid-row: 1 !important; }
#recipe-category-page .dish-grid--inner .recipe-card--col-narrow-2.recipe-card--row-bottom { grid-column: 1 !important; grid-row: 2 !important; }

/* Center block: stack | wide | wide | wide | stack */
#recipe-category-page .dish-grid--center {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 2fr)
    minmax(0, 2fr)
    minmax(0, 1fr);
}

#recipe-category-page .dish-grid--center .recipe-card--col-wide-1 { grid-column: 2 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--center .recipe-card--col-wide-2 { grid-column: 3 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--center .recipe-card--col-wide-3 { grid-column: 4 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--center .recipe-card--col-narrow-1.recipe-card--row-top { grid-column: 1 !important; grid-row: 1 !important; }
#recipe-category-page .dish-grid--center .recipe-card--col-narrow-1.recipe-card--row-bottom { grid-column: 1 !important; grid-row: 2 !important; }
#recipe-category-page .dish-grid--center .recipe-card--col-narrow-2.recipe-card--row-top { grid-column: 5 !important; grid-row: 1 !important; }
#recipe-category-page .dish-grid--center .recipe-card--col-narrow-2.recipe-card--row-bottom { grid-column: 5 !important; grid-row: 2 !important; }

/* Left cluster: wide | wide | stack | wide | stack */
#recipe-category-page .dish-grid--left {
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 1fr);
}

#recipe-category-page .dish-grid--left .recipe-card--col-wide-1 { grid-column: 1 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--left .recipe-card--col-wide-2 { grid-column: 2 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--left .recipe-card--col-wide-3 { grid-column: 4 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--left .recipe-card--col-narrow-1.recipe-card--row-top { grid-column: 3 !important; grid-row: 1 !important; }
#recipe-category-page .dish-grid--left .recipe-card--col-narrow-1.recipe-card--row-bottom { grid-column: 3 !important; grid-row: 2 !important; }
#recipe-category-page .dish-grid--left .recipe-card--col-narrow-2.recipe-card--row-top { grid-column: 5 !important; grid-row: 1 !important; }
#recipe-category-page .dish-grid--left .recipe-card--col-narrow-2.recipe-card--row-bottom { grid-column: 5 !important; grid-row: 2 !important; }

/* Mirrored classic: wide columns flipped */
#recipe-category-page .dish-grid--mirror {
  grid-template-columns:
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 1fr)
    minmax(0, 2fr);
}

#recipe-category-page .dish-grid--mirror .recipe-card--col-wide-1 { grid-column: 5 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--mirror .recipe-card--col-wide-2 { grid-column: 3 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--mirror .recipe-card--col-wide-3 { grid-column: 1 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--mirror .recipe-card--col-narrow-1 { grid-column: 4 !important; }
#recipe-category-page .dish-grid--mirror .recipe-card--col-narrow-2 { grid-column: 2 !important; }

/* Right cluster: stack | stack | wide | wide | wide */
#recipe-category-page .dish-grid--right {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 2fr)
    minmax(0, 2fr)
    minmax(0, 2fr);
}

#recipe-category-page .dish-grid--right .recipe-card--col-wide-1 { grid-column: 3 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--right .recipe-card--col-wide-2 { grid-column: 4 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--right .recipe-card--col-wide-3 { grid-column: 5 !important; grid-row: 1 / -1 !important; }
#recipe-category-page .dish-grid--right .recipe-card--col-narrow-1.recipe-card--row-top { grid-column: 1 !important; grid-row: 1 !important; }
#recipe-category-page .dish-grid--right .recipe-card--col-narrow-1.recipe-card--row-bottom { grid-column: 1 !important; grid-row: 2 !important; }
#recipe-category-page .dish-grid--right .recipe-card--col-narrow-2.recipe-card--row-top { grid-column: 2 !important; grid-row: 1 !important; }
#recipe-category-page .dish-grid--right .recipe-card--col-narrow-2.recipe-card--row-bottom { grid-column: 2 !important; grid-row: 2 !important; }

/* Desktop: keep pattern placement over global dish-grid defaults */
@container dishes (min-width: 52rem) {
  #recipe-category-page [class*="dish-grid--"] .recipe-card--tall {
    grid-row: 1 / -1 !important;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Load more footer */
#recipe-category-page .recipe-dishes__footer {
  display: flex;
  justify-content: center;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem) 0;
}

#recipe-category-page .recipe-dishes__load-more[hidden] {
  display: none;
}

#recipe-category-page .recipe-dishes__load-more {
  cursor: pointer;
  font-family: var(--font-body);
}