/**
 * CP · Media Callout — self-contained, token-driven, scoped under .cp-media-callout.
 * Reproduces the "Who We Are" section (text + image) from the approved homepage.
 */
.cp-media-callout {
  --mc-fg: var(--wp--preset--color--text);
  --mc-primary: var(--wp--preset--color--primary);
  --mc-primary-hover: var(--wp--custom--color--primary-hover);
  --mc-bg: #FFF9F0;
  --mc-white: var(--wp--preset--color--white);
  --mc-border: #E5E3DF;
  --mc-max: 1180px;
  --mc-r-md: 8px;
  background: var(--mc-bg);
  padding: var(--cp-section-py, 80px) clamp(24px, 5vw, 80px);
}
.cp-media-callout.is-surface-white { background: var(--mc-white); }
.cp-media-callout.is-surface-cream { background: var(--mc-bg); }
.cp-media-callout .head { max-width: var(--mc-max); margin: 0 auto; }
/* With the photo layout, the heading runs to the same 1100px as the grid under
   it (the Playbook's .head and .media-grid are both var(--content-max)), so the
   eyebrow, heading and copy share one left edge. At 1180px the heading started
   40px left of the copy (client review 2026-10-06). */
.cp-media-callout.is-layout-media-grid .head { max-width: 1100px; }
.cp-media-callout .eyebrow {
  font-family: var(--wp--preset--font-family--roboto); font-weight: 600; font-size: 11px;
  line-height: 24px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--mc-fg); margin: 0;
}
.cp-media-callout .head h2 {
  font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 700;
  font-size: var(--cp-h2, clamp(28px, 4vw, 44px)); line-height: 1.1; color: var(--mc-fg); margin: 11px 0 0;
}
.cp-media-callout .head h2 em { font-style: normal; color: var(--cp-em, var(--mc-primary)); }
.cp-media-callout .who__grid {
  max-width: var(--mc-max); margin: 24px auto 0;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: start;
}
.cp-media-callout .who__body p { font-family: var(--wp--preset--font-family--roboto); font-size: 16px; line-height: 27.2px; color: var(--mc-fg); margin: 0; }
.cp-media-callout .who__body p + p { margin-top: 16px; }
.cp-media-callout .who__callout { display: flex; align-items: center; justify-content: center; padding: 8px 0; align-self: center; }
.cp-media-callout .who__callout-img { display: block; width: 100%; max-width: 320px; height: auto; }

/* media-grid layout — a bordered (optionally square) photo beside prose.
   Ported from the .media-grid* rules on the approved About page. */
/* 1100px, the Playbook's inner-page measure (its .media-grid is
   var(--content-max)); the 1180px --mc-max is the homepage callout's. */
.cp-media-callout .media-grid {
  max-width: 1100px; margin: 24px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 48px; align-items: center;
}
.cp-media-callout .media-grid--compact { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
.cp-media-callout .media-grid__img {
  width: 100%; height: auto; border-radius: var(--mc-r-md); border: 1px solid var(--mc-border);
}
.cp-media-callout .media-grid__img--square { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.cp-media-callout .media-grid .prose { margin-top: 0; }
.cp-media-callout .media-grid .prose p {
  font-family: var(--wp--preset--font-family--roboto); font-size: 16px; line-height: 27.2px;
  color: var(--mc-fg); margin: 0;
}
.cp-media-callout .media-grid .prose p + p { margin-top: 16px; }
/* Image on the right: swap the column order and mirror the compact ratio. */
.cp-media-callout .media-grid--image-right { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
/* Order the grid ITEM, not the <img>: an image optimiser (ShortPixel on WP Engine)
   wraps the <img> in a <picture>, which then becomes the grid item and ignored an
   order set on the <img>, leaving the photo on the left (client audit, 2026-09-22). */
.cp-media-callout .media-grid--image-right > :not(.prose) { order: 2; }
.cp-media-callout .media-grid--image-right > .prose { order: 1; }
/* Wide (is-media-wide): the Playbook's regular .media-grid, photo on the right
   at 0.85fr (483px at full width; the compact column capped it at 360px, client
   audit 2026-10-06, item 5). */
.cp-media-callout .media-grid--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.cp-media-callout .media-grid--wide > :not(.prose) { order: 2; }
.cp-media-callout .media-grid--wide > .prose { order: 1; }
.cp-media-callout .media-grid > picture { display: block; min-width: 0; }
.cp-media-callout .media-grid > picture > img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .cp-media-callout .who__grid { grid-template-columns: 1fr; gap: 32px; }
  .cp-media-callout .media-grid,
  .cp-media-callout .media-grid--compact,
  .cp-media-callout .media-grid--image-right,
  .cp-media-callout .media-grid--wide { grid-template-columns: 1fr; gap: 24px; }
  .cp-media-callout .media-grid > :not(.prose) { order: 2; }
  .cp-media-callout .media-grid > .prose { order: 1; }
  .cp-media-callout .media-grid--media-first > :not(.prose) { order: 1; }
  .cp-media-callout .media-grid--media-first > .prose { order: 2; }
}

/* Optional red-check list in the media-grid prose column. */
.cp-media-callout .warranty__list { margin-top: 18px; display: flex; flex-direction: column; }
.cp-media-callout .warranty__item {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  font-family: var(--wp--preset--font-family--roboto); font-weight: 500; font-size: 16px; color: #1C1C1C;
}
.cp-media-callout .warranty__check {
  width: 18px; height: 18px; flex-shrink: 0; background: var(--mc-primary); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--mc-white); font-size: 11px; font-weight: 700; line-height: 1;
}

/* is-cols-2: the checklist in two columns, the Playbook's .warranty__list grid
   (Warranty coverage checks, client audit SV2); one column below 640px. */
.cp-media-callout.is-cols-2 .warranty__list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; margin-top: 20px; }
.cp-media-callout.is-cols-2 .warranty__item { align-items: flex-start; }
@media (max-width: 640px) { .cp-media-callout.is-cols-2 .warranty__list { grid-template-columns: 1fr; gap: 0; } }

/* Optional CTA under the media-grid copy (Playbook: "Powered by Canter"). */
.cp-media-callout .media-grid__cta { margin-top: 24px; }
.cp-media-callout .btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--wp--preset--font-family--roboto); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 22px; border: 0; border-radius: 4px; text-decoration: none;
}
.cp-media-callout .btn--primary { background: var(--mc-primary); color: var(--wp--custom--color--on-primary); }
.cp-media-callout .btn--primary:hover { background: var(--mc-primary-hover); }

/* is-with-chart: the copy and the coverage chart, 1fr / 0.85fr with a 48px gap,
   as the Playbook's Warranty .media-grid; stacked under 980px, the chart second. */
.cp-media-callout.is-with-chart .media-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 48px; align-items: center; }
.cp-media-callout.is-with-chart .media-grid > .prose { order: 1; }
.cp-media-callout.is-with-chart .media-grid > .cp-warranty-compare { order: 2; }
@media (max-width: 980px) { .cp-media-callout.is-with-chart .media-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* is-brand-intro: the Playbook's .brand-intro (Generator One's Briggs & Stratton
   and Towable pages; re-audit R6): copy 1.4fr with its own 32px heading, media
   1fr on the right, a 56px gap. The two pages style it apart, so the variants do:
   with a logo card (is-logo-card, Briggs & Stratton) the emphasis keeps the
   browser's italic in the heading colour (the page styles none), the grid stacks
   below 980px with the card capped at 420px, and the heading is 26px on phones;
   with a photo (Towable) the emphasis is the accent, upright, the photo runs the
   column with a soft shadow, and the grid stacks below 900px. */
.cp-media-callout.is-brand-intro .media-grid { margin-top: 0; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cp-media-callout.is-brand-intro .media-grid > .prose { order: 1; }
.cp-media-callout.is-brand-intro .media-grid > :not(.prose) { order: 2; }
.cp-media-callout.is-brand-intro .prose h2 {
  font-family: var(--wp--preset--font-family--barlow-condensed); font-weight: 700; font-size: 32px; line-height: 1.12;
  color: var(--mc-fg); margin: 0;
}
.cp-media-callout.is-brand-intro .media-grid .prose p:not(.eyebrow) { margin-top: 14px; }
.cp-media-callout.is-brand-intro .media-grid .prose .eyebrow { margin: 0 0 8px; }
.cp-media-callout.is-brand-intro .prose h2 em { font-style: normal; color: var(--cp-em, var(--mc-primary)); }
.cp-media-callout.is-brand-intro.is-logo-card .prose h2 em { font-style: italic; color: inherit; }
.cp-media-callout.is-brand-intro:not(.is-logo-card) .media-grid__img { width: 100%; height: auto; border: 0; border-radius: 8px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12); }
/* The phone CTA is a flex box (cps-phone-number), which drops the space before
   the number; the gap puts it back ("Call Sales (855) 929-6620"). */
.cp-media-callout .media-grid__cta.cps-phone-number { display: inline-flex; gap: 0.3em; }
/* is-logo-card: the logo in its card, a hairline border under the 3px accent top
   rule, the mark at most 220 x 110px (.brand-intro__logo). */
.cp-media-callout.is-logo-card .media-grid__img {
  box-sizing: border-box; width: 100%; height: 166px; padding: 28px 24px; object-fit: contain;
  background: var(--mc-white); border: 1px solid var(--mc-border); border-top: 3px solid var(--cp-accent, var(--mc-primary)); border-radius: 2px;
}
@media (max-width: 980px) {
  .cp-media-callout.is-brand-intro.is-logo-card .media-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cp-media-callout.is-brand-intro.is-logo-card .media-grid > :not(.prose) { max-width: 420px; }
}
@media (max-width: 900px) {
  .cp-media-callout.is-brand-intro:not(.is-logo-card) .media-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 640px) {
  .cp-media-callout.is-brand-intro.is-logo-card .prose h2 { font-size: 26px; }
}