/* ==========================================================================
   Wholesale page (page-wholesale.php)
   On-brand, contained composition consistent with page-about / page-events.
   All rules scoped under .cb-wholesale-page. Form styling lives in cb-forms.css.
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */
.cb-whl-hero { padding-block: clamp(2rem, 5vw, 3.5rem); }
.cb-whl-hero__inner { max-width: 48rem; }
.cb-whl-hero__eyebrow { margin-bottom: 1rem; }
.cb-whl-hero__title { font-size: var(--cb-text-5xl); margin: 0; max-width: 16ch; }
.cb-whl-hero__copy {
  margin-top: 1.25rem;
  max-width: 42rem;
  font-size: var(--cb-text-lg);
  line-height: 1.7;
  color: var(--cb-text-muted);
}
.cb-whl-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }

/* Hero gains a merchandising photo alongside the pitch. Mobile stacks; from
   960px it is a two-column split and the copy column drops its max-width so
   the two columns can share the row. */
.cb-whl-hero__media {
  margin: 2rem 0 0;
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  overflow: hidden;
  background: var(--cb-surface-alt);
}
.cb-whl-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
}
@media (min-width: 960px) {
  .cb-whl-hero__inner {
    max-width: none;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .cb-whl-hero__media { margin-top: 0; }
}

/* --- 2. The program: alternating image + copy components ------------------
   Replaces the old three-paragraph wall. Each row pairs one idea with an
   image chosen for what it shows, so a retailer can scan the offer. */
.cb-whl-story { background: var(--cb-surface-alt); padding-block: var(--cb-section-y); }
.cb-whl-story__head { max-width: 40rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cb-whl-story__title { font-size: var(--cb-text-4xl); margin: 0.5rem 0 0; max-width: 22ch; }

.cb-whl-row { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.cb-whl-row + .cb-whl-row { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cb-whl-row__eyebrow { margin-bottom: 0.75rem; color: var(--cb-accent-2); }
.cb-whl-row__title {
  font-family: var(--cb-font-heading);
  font-size: var(--cb-text-2xl);
  line-height: var(--cb-leading-heading);
  margin: 0 0 0.9rem;
  color: var(--cb-cocoa);
}
.cb-whl-row__copy {
  margin: 0 0 0.9rem;
  font-size: var(--cb-text-lg);
  line-height: 1.75;
  color: var(--cb-text-muted);
  max-width: 46ch;
}
.cb-whl-row__copy:last-child { margin-bottom: 0; }
.cb-whl-row__media {
  margin: 0;
  border: var(--cb-border-width) solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
  overflow: hidden;
  background: var(--cb-surface);
}
.cb-whl-row__image {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
@media (min-width: 860px) {
  .cb-whl-row { grid-template-columns: 1fr 1fr; }
  /* Every other row flips, so the eye zig-zags down the page. Order is set on
     the children (not `direction`) to keep DOM/reading order intact. */
  .cb-whl-row--reverse .cb-whl-row__content { order: 2; }
  .cb-whl-row--reverse .cb-whl-row__media { order: 1; }
}

/* --- 3. Benefits -------------------------------------------------------- */
.cb-whl-benefits { padding-block: var(--cb-section-y); }
.cb-whl-benefits__title { font-size: var(--cb-text-3xl); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.cb-whl-benefits__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cb-whl-benefits__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .cb-whl-benefits__grid { grid-template-columns: repeat(4, 1fr); } }
.cb-whl-benefit {
  padding: 1.5rem 1.5rem 1.6rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
}
.cb-whl-benefit__title { font-size: var(--cb-text-lg); margin: 0 0 0.6rem; color: var(--cb-cocoa); }
.cb-whl-benefit__body { margin: 0; font-size: var(--cb-text-base); line-height: 1.65; color: var(--cb-text-muted); }

/* --- 4. Apply ------------------------------------------------------------ */
.cb-whl-apply { background: var(--cb-surface-alt); padding-block: var(--cb-section-y); }
.cb-whl-apply__inner { max-width: 44rem; }
.cb-whl-apply__head { max-width: 34rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cb-whl-apply__title { font-size: var(--cb-text-4xl); margin: 0.5rem 0 0; }
.cb-whl-apply__copy {
  margin-top: 1.25rem;
  font-size: var(--cb-text-lg);
  line-height: 1.7;
  color: var(--cb-text-muted);
}
.cb-whl-apply__form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-xl);
}
.cb-whl-apply__login {
  margin: 1.5rem 0 0;
  font-size: var(--cb-text-base);
  color: var(--cb-text-muted);
}
.cb-whl-apply__login a { color: var(--cb-accent-text); font-weight: 600; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--cb-caramel) 45%, transparent); }
.cb-whl-apply__login a:hover { color: var(--cb-cocoa); border-bottom-color: currentColor; }