/* Harvest (/harvest/): the harvest season strip, a sheet of photos for each
   ingredient, and processing and storage. Shared tokens, page intro, category
   bar, photo frames, text links and the call-to-action band come from site.css. */

/* ---------- Intro ---------- */

.harvest-intro .lead {
  margin-top: 1rem;
}

/* Harvest season: twelve months with the season filled in. The caption says the
   same thing, so screen readers skip the month boxes. */
.season {
  container-type: inline-size;
  max-width: 36rem;
  margin-top: 0.5rem;
  padding: 1rem 0.875rem 0.875rem;
  background: var(--cream-50);
  border: 1px solid var(--line);
}

.season__months {
  display: flex;
  gap: 0.1875rem;
}

.season__months li {
  display: grid;
  flex: 1;
  place-items: center;
  height: 2.5rem;
  background: var(--cream-100);
  border: 1px solid var(--line-strong);
  font-size: 0.65625rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-600);
}

.season__months .season__in {
  background: var(--gold-500);
  border-color: var(--gold-600);
  font-weight: 700;
  color: var(--ink-900);
}

.season__long {
  display: none;
}

.season figcaption {
  display: flex;
  align-items: flex-start;
  gap: 0.5625rem;
  margin-top: 0.75rem;
  font-size: 0.84375rem;
  line-height: 1.4;
  color: var(--ink-700);
}

.season figcaption::before {
  content: "";
  flex: none;
  width: 0.75rem;
  aspect-ratio: 1.1547;
  margin-top: calc(0.7em - 0.325rem);
  background: var(--gold-500);
  clip-path: var(--hexagon);
}

/* Month names once the boxes have room for three letters. */
@container (min-width: 25rem) {
  .season__months {
    gap: 0.3125rem;
  }

  .season__months li {
    height: 3.375rem;
    font-size: 0.6875rem;
  }

  .season__long {
    display: inline;
  }

  .season__short {
    display: none;
  }
}

/* ---------- Photo sheets ---------- */

.harvest {
  display: grid;
  gap: 2.375rem;
  padding-block: 1.75rem 2.125rem;
}

.harvest-section {
  min-width: 0;
  scroll-margin-top: 0.75rem;
}

.harvest-section h2 {
  padding-top: 0.875rem;
  border-top: 3px solid var(--gold-500);
  font-size: clamp(1.6875rem, 1.4rem + 0.9vw, 2.125rem);
}

.harvest-section__text p {
  margin-top: 0.625rem;
  font-size: clamp(0.96875rem, 0.93rem + 0.15vw, 1.03125rem);
  line-height: 1.6;
  color: var(--ink-700);
}

.harvest .photo-frame {
  padding: 0.5rem;
}

/* On phones the heading, sentence and link join the photo column, so the link
   can come after the photos. */
.harvest-group {
  display: flex;
  flex-direction: column;
}

.harvest-group .harvest-section__text {
  display: contents;
}

.harvest-group__more {
  order: 1;
  align-self: flex-start;
  margin-top: 0.875rem;
  font-size: 0.90625rem;
  font-weight: 600;
}

/* Photos never display wider than their 600px files: the grids stop growing
   before they would. */
.harvest-group__photos,
.harvest-storage__photos {
  display: grid;
  gap: 0.625rem;
  max-width: 38rem;
  margin-top: 1rem;
}

.harvest-group__photos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* A sheet opens with one wide photo. With an even number of photos the last one
   is wide too, so no photo sits alone. */
.harvest-group__photos .photo-frame:first-child,
.harvest-group__photos .photo-frame:nth-child(even):last-child {
  grid-column: 1 / -1;
}

/* The warehouse photo is a thin strip, so phones crop it taller. */
.harvest-storage__wide img {
  aspect-ratio: 5 / 2;
  object-fit: cover;
}

/* ---------- Breakpoints ---------- */

@media (min-width: 40rem) {
  .harvest-storage__wide img {
    aspect-ratio: 940 / 250;
  }
}

/* Tablets: the text sits beside its photos. */
@media (min-width: 48rem) {
  .harvest .photo-frame {
    padding: 0.625rem;
  }

  .harvest-group,
  .harvest-storage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    align-items: start;
    gap: 1.5rem 2rem;
  }

  .harvest-group .harvest-section__text {
    display: block;
  }

  .harvest-group__more {
    display: inline-block;
    margin-top: 1rem;
  }

  .harvest-group__photos {
    max-width: none;
    margin-top: 0;
  }

  .harvest-storage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .harvest-storage__photos {
    display: contents;
  }

  .harvest-storage__wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64rem) {
  .harvest-intro {
    padding-block: 4.75rem 3.625rem;
  }

  .harvest-intro .page-intro__inner {
    grid-template-columns: 1.3fr 1fr;
    gap: 4.5rem;
  }

  .harvest-intro .lead {
    margin: 1.375rem 0 0;
  }

  .season {
    max-width: none;
    margin-top: 0;
    padding: 1.5rem 1.625rem 1.375rem;
  }

  .season figcaption {
    gap: 0.6875rem;
    margin-top: 1rem;
    font-size: 0.90625rem;
  }

  .season figcaption::before {
    width: 0.8125rem;
    margin-top: calc(0.7em - 0.352rem);
  }

  .harvest {
    gap: 4.625rem;
    padding-block: 4.125rem 5.625rem;
  }

  .harvest-section {
    scroll-margin-top: 1.25rem;
  }

  .harvest-section h2 {
    padding-top: 1.125rem;
  }

  .harvest-section__text p {
    margin-top: 0.875rem;
  }

  .harvest .photo-frame {
    padding: 0.75rem;
  }

  /* The text takes the first cell of a three-column sheet. */
  .harvest-group {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.125rem 2.5rem;
  }

  .harvest-group__more {
    margin-top: 1.125rem;
  }

  .harvest-group__photos {
    display: contents;
  }

  .harvest-group__photos .photo-frame:first-child,
  .harvest-group__photos .photo-frame:nth-child(even):last-child {
    grid-column: auto;
  }

  /* With four photos the text runs down both rows, so the photos form a 2 × 2 block. */
  .harvest-group:has(.photo-frame:nth-child(4):last-child) .harvest-section__text {
    grid-row: span 2;
  }

  /* Processing and storage: the text on top, then both photos in one row at the
     same height. Each frame grows in proportion to its photo's shape (600 × 500
     and 940 × 250), starting from its own padding and border. */
  .harvest-storage {
    display: block;
  }

  .harvest-storage .harvest-section__text {
    max-width: 40rem;
  }

  .harvest-storage__photos {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    max-width: none;
    margin-top: 2.125rem;
  }

  .harvest-storage__photos .photo-frame {
    flex: 1.2 1 1.625rem;
    min-width: 0;
  }

  .harvest-storage__photos .harvest-storage__wide {
    flex-grow: 3.76;
  }
}