/**
 * CP · Service Grid — self-contained styles (token-driven, brand-agnostic).
 * Scoped under .cp-service-grid. Ported from the `.services__grid` /
 * `.service-card` rules on the approved services hub.
 */
.cp-service-grid {
  --sg-fg: var(--wp--preset--color--text);
  --sg-primary: var(--wp--preset--color--primary);
  --sg-white: var(--wp--preset--color--white);
  --sg-display: var(--wp--preset--font-family--barlow-condensed);
  --sg-body: var(--wp--preset--font-family--roboto);
  --sg-grey: var(--wp--preset--color--on-surface, #F8F9FA);
  --sg-cream: #FFF9F0;
  --sg-border: #E5E3DF;
  --sg-body-fg: #444444;
  --sg-primary-hover: var(--wp--custom--color--primary-hover);
  --sg-max: 1100px;
  --sg-radius: 4px;
  padding: var(--cp-section-py, 80px) clamp(24px, 5vw, 80px);
}
.cp-service-grid.is-surface-grey { background: var(--sg-grey); }
.cp-service-grid.is-surface-cream { background: var(--sg-cream); }

.cp-service-grid .head { max-width: var(--sg-max); margin: 0 auto; }
.cp-service-grid .eyebrow {
  font-family: var(--sg-body); font-weight: 600; font-size: 11px; line-height: 24px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--sg-fg); margin: 0;
}
.cp-service-grid .head h2 {
  font-family: var(--sg-display); font-weight: 700; font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; letter-spacing: -0.005em; color: var(--sg-fg); margin: 11px 0 0;
}
.cp-service-grid .head h2 em { font-style: normal; color: var(--sg-primary); }
.cp-service-grid .head__lead {
  font-family: var(--sg-body); font-size: 17px; line-height: 27.2px;
  color: var(--sg-fg); margin: 12px 0 0; max-width: none;
}

.cp-service-grid .services__grid {
  max-width: var(--sg-max); margin: 32px auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.cp-service-grid .service-card {
  background: var(--sg-white); border: 1px solid var(--sg-border); border-radius: var(--sg-radius);
  padding: 30px; display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 110px;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.cp-service-grid .service-card:hover {
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); border-color: var(--sg-primary);
}
.cp-service-grid .service-card__num {
  font-family: var(--sg-display); font-weight: 300; font-size: 28px; line-height: 1.1;
  color: var(--sg-primary); margin: 0;
}
.cp-service-grid .service-card h3 {
  font-family: var(--sg-display); font-weight: 700; font-size: 22px; line-height: 27.5px;
  color: var(--sg-fg); margin: 0;
}
.cp-service-grid .service-card__body {
  font-family: var(--sg-body); font-size: 14px; line-height: 23.1px; color: var(--sg-body-fg);
  flex: 1; margin: 0;
}
.cp-service-grid .service-card__link {
  margin-top: 4px; align-self: flex-start; font-family: var(--sg-body); font-weight: 700;
  font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--sg-primary); text-decoration: none;
}
.cp-service-grid .service-card__link:hover { color: var(--sg-primary-hover); }

/* Both Playbooks: two columns below 1100px, one below 980px (client audit TB3). */
@media (max-width: 1100px) { .cp-service-grid .services__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 980px) { .cp-service-grid .services__grid { grid-template-columns: 1fr; gap: 24px; } }

/* Optional product-line image above the card title. */
.cp-service-grid .product-card__img {
  width: 100%; height: 180px; object-fit: contain; background: var(--sg-grey);
  border-radius: var(--sg-radius); padding: 14px;
}

/* Offer artwork (#oil-chooser, #oil-tiers).
 *
 * The oil-change chooser and its tier cards carry a full designed card as the
 * card image -- 412x834 for a tier, 700x550 for a chooser door -- and the plan
 * name and price are set in that artwork. The default rule above boxes an image
 * into 180px of height and `contain`s it, which shrinks a portrait offer card to
 * an illegible thumbnail, so these two grids let their artwork keep its own
 * aspect ratio. No padding or fill either: the artwork is already a card.
 */
#oil-chooser .product-card__img,
#oil-tiers .product-card__img {
  height: auto;
  object-fit: contain;
  background: transparent;
  padding: 0;
}

/* The tier cards read as three equal columns at every width the artwork stays
 * legible at, then stack -- the two-up step the shared grid takes at 980px
 * would leave a lone card on the second row. */
@media (max-width: 980px) and (min-width: 641px) {
  #oil-tiers .services__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Whole-card click target (#oil-chooser, #oil-tiers).
 *
 * Asked for directly: on the chooser the generator photo is the thing people aim
 * at, and on the tier pages the offer artwork is, but only the link text at the
 * bottom of the card was hitting. The link keeps its real href and its real
 * text -- a screen reader and the status bar still get "Click Here to Schedule
 * Service", and it is still one tab stop -- and its ::after is stretched over
 * the card to catch the rest of the box.
 *
 * Only these two grids: the services hub cards carry body copy people select,
 * and a stretched overlay would make that awkward. */
#oil-chooser .service-card,
#oil-tiers .service-card { position: relative; }

#oil-chooser .service-card__link::after,
#oil-tiers .service-card__link::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}

/* The pointer should say "clickable" anywhere on the card, not just over the
 * text, and the whole card should answer the link's own hover and focus. */
#oil-chooser .service-card:hover,
#oil-tiers .service-card:hover { cursor: pointer; }

#oil-chooser .service-card:has(.service-card__link:focus-visible),
#oil-tiers .service-card:has(.service-card__link:focus-visible) {
  outline: 3px solid var(--wp--preset--color--primary, #CC1A2F);
  outline-offset: 3px;
}
/* :has() is widely supported but not universal — without it the link keeps its
 * own focus ring, which is why no outline is removed anywhere above. */

/* is-continued: carries on the section above with no new top padding; its
   heading reads as that section's kicker (client audit SV3). */
.cp-service-grid.is-continued { padding-top: 56px; }
.cp-service-grid.is-continued .head h2 {
  font-family: var(--sg-body); font-weight: 600; font-size: 11px; line-height: 24px;
  letter-spacing: 2.5px; text-transform: uppercase; color: var(--sg-fg);
}
/* is-compare: one generator per brand, two by two, as the hub comparison cards. */
.cp-service-grid.is-compare .services__grid { grid-template-columns: 1fr 1fr; gap: 32px 64px; }
.cp-service-grid.is-compare .service-card { border: 0; }
.cp-service-grid.is-compare .product-card__img { width: 100%; height: 170px; object-fit: contain; background: var(--sg-grey); border-radius: 4px; margin-bottom: 6px; }
.cp-service-grid.is-compare .service-card h3 { font-size: 20px; letter-spacing: 0.5px; text-transform: uppercase; }
@media (max-width: 980px) { .cp-service-grid.is-compare .services__grid { grid-template-columns: 1fr; gap: 24px; } }