/* Well Fed: full-bleed cookbook photography with an editorial caption panel. */
.block-well-fed-recipe-slider {
  width: 100%;
  margin: 0;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--foreground);
}

.block-well-fed-recipe-slider__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.block-well-fed-recipe-slider__track {
  display: flex;
  transform: translateX(0);
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1);
}

.block-well-fed-recipe-slider__slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  flex: 0 0 100%;
  min-width: 0;
  min-height: clamp(500px, 47vw, 680px);
  overflow: hidden;
  background: #dfceb0;
}

.block-well-fed-recipe-slider__image,
.block-well-fed-recipe-slider__image img {
  display: block;
  width: 100%;
  height: 100%;
}

.block-well-fed-recipe-slider__image {
  position: relative;
  min-height: 100%;
}

.block-well-fed-recipe-slider__image img {
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.block-well-fed-recipe-slider__image[data-focus="left"] img { object-position: 35% center; }
.block-well-fed-recipe-slider__image[data-focus="right"] img { object-position: 65% center; }

.block-well-fed-recipe-slider__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: clamp(2.5rem, 5vw, 5rem) max(2rem, calc((100vw - var(--wp--custom--layout--wide)) / 2)) clamp(2.5rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem);
}

.block-well-fed-recipe-slider__copy h2 {
  max-width: 19ch;
  margin: 0;
  color: inherit;
  font-family: var(--wp--custom--typography--heading--font-family);
  font-size: clamp(2.4rem, 4vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}

.block-well-fed-recipe-slider__copy p {
  max-width: 48ch;
  margin: 1.25rem 0 0;
  color: inherit;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.45;
}

.block-well-fed-recipe-slider__nav {
  display: none;
  justify-content: center;
  gap: .15rem;
  padding: .5rem var(--wp--custom--layout--padding);
  color: var(--wp--preset--color--quinary);
}

.block-well-fed-recipe-slider.is-interactive .block-well-fed-recipe-slider__nav { display: flex; }

.block-well-fed-recipe-slider__nav button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.block-well-fed-recipe-slider__nav button span {
  display: block;
  width: 28px;
  height: 3px;
  background: currentColor;
  opacity: .38;
  transition: opacity 160ms ease-out, height 160ms ease-out;
}

.block-well-fed-recipe-slider__nav button[aria-pressed="true"] span {
  height: 5px;
  opacity: 1;
}

.block-well-fed-recipe-slider__nav button:hover span { opacity: .75; }
.block-well-fed-recipe-slider__nav button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }

.block-well-fed-recipe-slider__empty {
  margin: 0;
  padding: 2rem;
  color: var(--wp--preset--color--foreground);
}

@media (max-width: 700px) {
  .block-well-fed-recipe-slider__slide { grid-template-columns: 1fr; min-height: 0; }
  .block-well-fed-recipe-slider__image { min-height: 0; aspect-ratio: 1 / 1; }
  .block-well-fed-recipe-slider__copy {
    padding: 2rem max(1rem, var(--wp--custom--layout--padding)) 2.5rem;
  }
  .block-well-fed-recipe-slider__copy h2 { font-size: clamp(1.7rem, 6.5vw, 2.2rem); }
  .block-well-fed-recipe-slider__copy p { margin-top: .75rem; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .block-well-fed-recipe-slider__track,
  .block-well-fed-recipe-slider__nav button span { transition: none; }
}