/* ==========================================================================
   CATERING — full-bleed brand-red split, copy left / truck illustration
   right. Reuses the shared .split grid; the truck graphic is a second grid
   item so it naturally drops below the copy on mobile, no duplicate markup
   needed.
   Markup: section#catering.catering > .split.catering__inner
             > .catering__content.panel, .catering__image
   ========================================================================== */

.catering {
  background: var(--color-brand-red);
  overflow: hidden;
}

/* ---- Content column --------------------------------------------------------*/
.catering__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.catering__eyebrow {
  color: var(--color-white-70);
}

.catering__heading {
  color: var(--color-white);
  margin-bottom: var(--space-md);
}

.catering__paragraph {
  max-width: 480px;
  margin-bottom: var(--space-sm-lg);
}

.catering__paragraph strong {
  color: var(--color-white);
}

.catering__paragraph + .btn {
  align-self: flex-start;
  margin-top: var(--space-md);
}

/* Primary / secondary CTA pair, matching the hero's Order Now / View Menu */
.catering__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm-lg);
  margin-top: var(--space-md);
}

/* ---- Image column ------------------------------------------------------------*/
.catering__image {
  position: relative;
  min-height: 320px;
}

.catering__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: var(--space-lg);
}

/* ---- Mobile: stack; the image is square, so size the box off its own
   width instead of a fixed min-height carried over from the desktop
   column (which left it capped to a short strip once full-width). -------- */
@media (max-width: 899px) {
  .catering__image {
    min-height: 0;
    aspect-ratio: 1 / 1;
  }
}

/* ---- Mobile: keep the two CTAs side by side, each filling half the row -- */
@media (max-width: 768px) {
  .catering__actions {
    flex-wrap: nowrap;
    align-self: stretch;
  }

  .catering__actions .btn {
    flex: 1 1 0;
  }
}