/* Keep the offer board readable at a glance: one row, shared baselines, shared actions. */
#private {
  scroll-margin-top: 5.5rem;
}

@media (min-width: 1101px) {
  #about-classes .offer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
  }

  #about-classes .offer {
    min-height: 31rem;
    display: grid;
    grid-template-rows: auto minmax(5.7rem, auto) minmax(7.5rem, auto) minmax(3.6rem, auto) auto;
    align-items: start;
  }

  #about-classes .offer h3,
  #about-classes .offer p,
  #about-classes .offer .offer-meta {
    min-height: 0;
  }

  #about-classes .offer > h3 {
    min-height: 7.5rem;
  }

  #about-classes .offer:nth-child(4) > .offer-meta {
    transform: translateY(0.25rem);
  }

  #about-classes .offer .offer-meta {
    display: flex;
    align-items: flex-start;
    margin-top: 0;
    padding: 1.5rem 0;
  }
}

@media (min-width: 801px) and (max-width: 1100px) {
  #about-classes .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
}

/* Every offer has the same visual CTA weight. */
#about-classes .offer-grid > .offer > a.button {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

#about-classes .offer-grid > .offer > a.button.ghost {
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #fff !important;
}

#about-classes .offer-grid > .offer > a.button:hover,
#about-classes .offer-grid > .offer > a.button:focus-visible {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--black) !important;
}

/* Keep all card copy on shared horizontal reading lines. */
@media (min-width: 1101px) {
  #about-classes .offer > h3 { grid-row: 2; }
  #about-classes .offer > p { grid-row: 3; }
  #about-classes .offer > .offer-meta { grid-row: 4; }
  #about-classes .offer > .button { grid-row: 5; align-self: end; }
}

/* A real archive image gives the booking desk a visual anchor. */
.booking-desk-photo {
  display: block !important;
  width: 100%;
  height: clamp(14rem, 24vw, 22rem);
  margin: clamp(1.5rem, 3vw, 3rem) 0 0;
  background: var(--wine) url("assets/performance.webp") center / cover no-repeat;
}

.booking-desk-photo a {
  display: block;
  overflow: hidden;
  background: var(--wine);
}

.booking-desk-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.booking-desk-photo a:hover img,
.booking-desk-photo a:focus-visible img {
  transform: scale(1.03);
}

@media (max-width: 800px) {
  .booking-desk-photo {
    display: block !important;
    width: 100%;
    height: 16rem;
    margin: 2rem 0 0;
    background: var(--wine);
  }
}

/* Lower the contact form slightly so it sits beneath the editorial headline rhythm. */
@media (min-width: 801px) {
  #contact.contact .contact-form {
    margin-top: clamp(6rem, 8vw, 8rem);
  }
}

@media (max-width: 800px) {
  #contact.contact .contact-form {
    margin-top: 0;
  }
}