/**
 * Catering homepage teaser — PDF p.8.
 */

.catering-teaser {
  background: var(--color-noir-temp);
  padding-block: var(--section-pad-y);
  min-height: var(--section-min-height-flow);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.catering-teaser__grid {
  display: grid;
  /* Client feedback: video felt too small relative to the copy — a modest
     bump (was 0.62fr), not a redesign. */
  grid-template-columns: 1fr 0.72fr;
  gap: var(--space-8);
  align-items: center;
}

.catering-teaser__eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper-on-dark-soft);
  margin: 0 0 var(--space-4);
}
.catering-teaser__heading {
  font-size: clamp(2.25rem, 4vw, var(--fs-5));
  line-height: 1.15;
  color: var(--color-paper-on-dark);
  margin: 0;
}
.catering-teaser__rule {
  width: 64px;
  height: 0;
  margin-inline: 0;
  border: none;
  border-block-start: 2px solid var(--color-cherry-temp);
  margin-block: var(--space-6);
}
.catering-teaser__description {
  color: var(--color-paper-on-dark-soft);
  font-size: var(--fs-1);
  line-height: 1.75;
  max-width: 34rem;
  margin: 0 0 var(--space-7);
}
.catering-teaser__cta {
  display: inline-block;
  background: var(--color-cherry-temp);
  color: var(--color-paper-on-dark);
  font-family: var(--font-ui);
  font-size: var(--fs-00);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-4) var(--space-7);
  transition: background var(--transition-fast);
}
.catering-teaser__cta:hover,
.catering-teaser__cta:focus-visible {
  background: color-mix(in srgb, var(--color-cherry-temp) 85%, black);
}

.catering-teaser__media-frame {
  position: relative;
  aspect-ratio: 732 / 988;
  /* Client feedback: "slightly larger" — was min(70vh, 640px); a modest
     increase, not a dramatic resize. Aspect ratio (and so the video's own
     crop/composition) is unchanged, this only scales the frame up. */
  max-height: min(78vh, 720px);
  width: min(100%, calc(min(78vh, 720px) * 732 / 988));
  margin-inline: auto;
  border: 1px solid var(--color-copper-temp);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.catering-teaser__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 900px) {
  .catering-teaser__grid {
    grid-template-columns: 1fr;
  }
  .catering-teaser__media-frame {
    max-width: 410px;
    margin: 0 auto;
  }
}
/* Client feedback: mobile typography still slightly large — small further
   reduction, not a redesign. */
@media (max-width: 640px) {
  .catering-teaser__heading {
    font-size: clamp(2rem, 4vw, var(--fs-5));
  }
}

/* Client feedback, round 2: still slightly large — one further ~5% pass.
   Desktop (the var(--fs-X) ceiling) is untouched either way. */
@media (max-width: 640px) {
  .catering-teaser__heading {
    font-size: clamp(1.9rem, 4vw, var(--fs-5));
  }
}