/* =========================================================================
   CHOMP — Wholesale program page
   Hero / proof bar / steps / form-split / sign-off reuse catering.css.
   Only the "who it's for" + "why" grids are page-specific.
   ========================================================================= */

/* --- Who it's for -------------------------------------------------------- */
.wholesale-who__grid { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 640px) { .wholesale-who__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .wholesale-who__grid { grid-template-columns: repeat(3, 1fr); } }
/* Photo-led cards (this page is icon-heavy, so "who it is for" leads with imagery). */
.wholesale-card { background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-xl); overflow: hidden; overflow: clip; display: flex; flex-direction: column; transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out); }
.wholesale-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
/* display:block matters here: an inline box would drop aspect-ratio + overflow. */
.wholesale-card__media { display: block; position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--chomp-primary-soft); }
.wholesale-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.wholesale-card:hover .wholesale-card__media img { transform: scale(1.05); }
.wholesale-card__body { padding: var(--space-lg) var(--space-xl) var(--space-xl); }
.wholesale-card__title { font-size: var(--fs-lg); margin: 0 0 .3rem; }
.wholesale-card__text { color: var(--chomp-ink-2); font-size: var(--fs-sm); margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.wholesale-card, .wholesale-card__media img { transition: none; }
	.wholesale-card:hover { transform: none; }
	.wholesale-card:hover .wholesale-card__media img { transform: none; }
}

/* --- Why partner --------------------------------------------------------- */
.wholesale-why__grid { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); grid-template-columns: 1fr; }
@media (min-width: 760px) { .wholesale-why__grid { grid-template-columns: 1fr 1fr; } }
.wholesale-benefit { display: flex; gap: var(--space-md); align-items: flex-start; background: var(--chomp-surface); border: 1px solid var(--chomp-border); border-radius: var(--radius-lg); padding: var(--space-lg); }
.wholesale-benefit__icon { flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--chomp-primary-soft); color: var(--chomp-primary-800); }
.wholesale-benefit__title { font-size: var(--fs-lg); margin: 0 0 .2rem; }
.wholesale-benefit__text { color: var(--chomp-ink-2); font-size: var(--fs-sm); margin: 0; }