/* Signature events options: next event on top, past events below, mailing list at the bottom. */

/* Past events */
.past-head { max-width: 46rem; margin-bottom: var(--s7); }
.past-head h2 { margin-bottom: var(--s4); }
.past-head p { font-size: 1.125rem; line-height: 1.6; margin: 0; }
.past-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--gutter); }
.past-grid.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6) var(--gutter); }
.past { display: grid; gap: var(--s2); align-content: start; }
.past-img { display: block; margin-bottom: var(--s3); }
.past-img img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--navy); }
.past h3, .past h4 { font: 700 1.3125rem/1.2 var(--display); margin: 0; }
.past h4 { font-size: 1.125rem; }
.past h3 a, .past h4 a { color: var(--navy); text-decoration: none; }
.past h3 a:hover, .past h4 a:hover { text-decoration: underline; }
.past p { margin: 0; font-size: 1rem; line-height: 1.5; }
.past .past-when { font-weight: 800; font-size: var(--t-sm); }

/* Option 3: the chef-page photo frames */
.past .chef-ph { margin-bottom: var(--s3); }
.past:nth-child(4n+1) { --c: var(--tangerine); }
.past:nth-child(4n+2) { --c: var(--pink); }
.past:nth-child(4n+3) { --c: var(--lemon); }
.past:nth-child(4n+4) { --c: var(--sky); }

/* Option 4: rows like the homepage news list */
.past-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--gutter); }
.past-rows a { height: 100%; grid-template-columns: 9rem 1fr; gap: var(--s5); border-width: 1px; border-radius: 0; }
.past-rows img { aspect-ratio: 1; border-radius: 0; }
.past-rows em { display: block; font-style: normal; font-weight: 800; font-size: var(--t-sm); margin-bottom: var(--s2); }
.past-rows strong { margin-bottom: var(--s1); }

/* Option 5: grouped by year */
.year-row { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s5) var(--gutter); padding-block: var(--s6); border-top: 1px solid var(--navy); }
.year-row:last-child { padding-bottom: 0; }
.year-h { font: 700 1.75rem/1 var(--display); margin: 0; }

/* Next event card (options 2 and 4) */
.next-ev { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s6) var(--gutter); align-items: center; }
.next-img { grid-column: 1 / span 5; display: block; }
.next-img img { display: block; width: 100%; height: auto; border: 1px solid var(--navy); }
.next-copy { grid-column: 7 / span 6; }
.next-copy .pill { margin-bottom: var(--s5); }
.next-copy h2 { margin-bottom: var(--s4); }
.next-copy .lede { font-size: var(--t-md); line-height: 1.5; max-width: 40ch; }
.next-copy .facts { grid-template-columns: repeat(2, 1fr); border-top-color: var(--navy); }
.next-copy .facts b { color: var(--navy); }
.next-copy .cta-row { margin-top: var(--s6); }
.next-band { padding-block: var(--s8); }

/* Bands */
.page-head .lede { max-width: 52ch; }
.ev-1 .past-band, .ev-3 .past-band, .ev-5 .past-band { padding-top: calc(var(--band) * .5); }

@media (max-width: 900px) {
  .past-grid, .past-grid.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .next-img, .next-copy { grid-column: 1 / -1; }
  .next-img { max-width: 26rem; }
  .year-row { grid-template-columns: 1fr; }
  .past-rows { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .past-grid { gap: var(--s6) var(--s4); }
  .past h3 { font-size: 1.125rem; }
  .past-rows a { grid-template-columns: 6rem 1fr; gap: var(--s4); }
  .next-copy .facts { grid-template-columns: 1fr; }
}

/* Option 1 (Nov 1): "Next event" title above the Sweet & Savory ticket; past events show names only. */
.event-hero .next-title { font-size: var(--t-xl); line-height: 1.08; margin-bottom: var(--s4); }
.event-hero h2.ticket-art { margin: 0 0 var(--s5); max-width: 34rem; line-height: 0; }
.event-hero h2.ticket-art img { width: 100%; height: auto; }
@media (max-width: 640px) { .event-hero h2.ticket-art { max-width: 22rem; } }
.ev-1 .past-img img { border: 0; }

/* Mailing list (Nov 1): homepage mailing list option 2, a full-width band in the logo pink. */
.su-band { background: #ff5d81; padding-block: calc(var(--band) * .5); }
.su-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s5) var(--gutter); align-items: end; }
.su-row > div { grid-column: 1 / span 6; }
.su-row form { grid-column: 8 / span 5; margin-top: 0; }
@media (max-width: 900px) { .su-row > div, .su-row form { grid-column: 1 / -1; } }