/*
 * V3 section package: services
 *
 * CSS isolation: every selector rooted under
 *   .pd-section--services[data-pd-module]
 *
 * Class/attribute selectors only - no element selectors.
 *
 * Canonical tokens used:
 *   --pd-color-text, --pd-color-muted, --pd-color-surface,
 *   --pd-color-surface-alt, --pd-color-primary, --pd-color-secondary,
 *   --pd-color-accent
 *   --pd-font-heading, --pd-font-body
 *   --pd-radius-md, --pd-radius-lg
 *   --pd-space-2, --pd-space-3, --pd-space-4, --pd-space-5,
 *   --pd-space-6, --pd-space-8
 *
 * Variants:
 *   cards-three    three-column grid, collapses to two, then one
 *   cards-two      two-column grid, collapses to one
 *   list-stacked   single-column vertical row list
 *   checklist      compact unordered list with a primary-color check
 *                  icon before each title; one column on mobile, two
 *                  on desktop
 */

.pd-section--services[data-pd-module] {
  display: block;
  width: 100%;
  font-family: var(--pd-font-body);
  box-sizing: border-box;
}

/* Background tone contrast.
 * Section background and root color come from the shared
 * [data-background-tone] primitive in components.css. The card-bearing
 * variants keep their surface-alt items so cards stay readable on dark
 * tones; only the section header text and the list-stacked items need
 * scoped contrast tweaks. */
/* PASS 4BO: __headline / __eyebrow / __intro tone-aware contrast
 * moved to shared [data-background-tone] rules in components.css. */

.pd-section--services[data-pd-module] .pd-services__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-6);
}

.pd-section--services[data-pd-module] .pd-services__header {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-3);
  max-width: 48rem;
}

/* PASS 4BO: services section header typography moved to shared
 * .pd-eyebrow / .pd-section-heading / .pd-section-intro rules in
 * components.css. The placeholder modifier keeps its empty-state cue. */
.pd-section--services[data-pd-module] .pd-services__headline--placeholder {
  font-style: italic;
  opacity: 0.7;
}

.pd-section--services[data-pd-module] .pd-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--pd-space-5);
}

/* Card visuals (background, padding, radius, hover lift, reduced-motion)
 * are provided by the shared .pd-card / .pd-card--interactive primitives
 * in components.css. The template adds those classes on cards-three and
 * cards-two variants. List-stacked items do not adopt .pd-card and keep
 * their grid-based layout via the variant block below. */

.pd-section--services[data-pd-module] .pd-services__item-title {
  margin: 0;
  font-family: var(--pd-font-heading);
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--pd-color-text);
}

.pd-section--services[data-pd-module] .pd-services__item-description {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pd-color-muted);
}

.pd-section--services[data-pd-module] .pd-services__item-price {
  margin: 0;
  font-family: var(--pd-font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--pd-color-primary);
}

.pd-section--services[data-pd-module] .pd-services__item-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: var(--pd-space-2) var(--pd-space-4);
  border-radius: var(--pd-radius-md);
  font-family: var(--pd-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--pd-color-primary);
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--pd-color-primary);
  transition: background 150ms ease, color 150ms ease;
}

.pd-section--services[data-pd-module] .pd-services__item-cta:hover {
  background: var(--pd-color-primary);
  color: var(--pd-color-surface);
}

.pd-section--services[data-pd-module] .pd-services__item-cta:focus-visible {
  outline: 3px solid var(--pd-color-accent);
  outline-offset: 2px;
}

.pd-section--services[data-pd-module] .pd-services__item-cta-label {
  display: inline-block;
}

.pd-section--services[data-pd-module] .pd-services__empty {
  padding: var(--pd-space-6);
  background: var(--pd-color-surface-alt);
  border-radius: var(--pd-radius-md);
  text-align: center;
}

.pd-section--services[data-pd-module] .pd-services__empty-message {
  margin: 0;
  color: var(--pd-color-muted);
  font-size: 1rem;
  line-height: 1.5;
}

/* Sparse-content baseline for card variants.
 * Title-only items (no description, no price, no CTA) sit on the same
 * grid row as fuller cards. The min-height keeps the card visually
 * complete instead of shrinking to a single text line, while CSS grid
 * row auto-equalization keeps the row's tallest card consistent. */
.pd-section--services[data-pd-module][data-pd-variant="cards-three"] .pd-services__item,
.pd-section--services[data-pd-module][data-pd-variant="cards-two"] .pd-services__item {
  min-height: 9rem;
}

/* Variant: cards-three */
.pd-section--services[data-pd-module][data-pd-variant="cards-three"] .pd-services__list {
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .pd-section--services[data-pd-module][data-pd-variant="cards-three"] .pd-services__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 60rem) {
  .pd-section--services[data-pd-module][data-pd-variant="cards-three"] .pd-services__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Variant: cards-two */
.pd-section--services[data-pd-module][data-pd-variant="cards-two"] .pd-services__list {
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .pd-section--services[data-pd-module][data-pd-variant="cards-two"] .pd-services__list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--pd-space-6);
  }
}

.pd-section--services[data-pd-module][data-pd-variant="cards-two"] .pd-services__item {
  padding: var(--pd-space-6);
}

.pd-section--services[data-pd-module][data-pd-variant="cards-two"] .pd-services__item-title {
  font-size: 1.375rem;
}

/* Variant: list-stacked */
.pd-section--services[data-pd-module][data-pd-variant="list-stacked"] .pd-services__list {
  grid-template-columns: 1fr;
  gap: var(--pd-space-3);
}

.pd-section--services[data-pd-module][data-pd-variant="list-stacked"] .pd-services__item {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "title"
    "description"
    "price"
    "cta";
  gap: var(--pd-space-2);
  padding: var(--pd-space-4) var(--pd-space-5);
  background: var(--pd-color-surface-alt);
  border-radius: var(--pd-radius-md);
}

@media (min-width: 48rem) {
  .pd-section--services[data-pd-module][data-pd-variant="list-stacked"] .pd-services__item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title       price"
      "description price"
      "cta         cta";
    align-items: start;
    gap: var(--pd-space-2) var(--pd-space-5);
  }
}

.pd-section--services[data-pd-module][data-pd-variant="list-stacked"] .pd-services__item-title {
  grid-area: title;
}

.pd-section--services[data-pd-module][data-pd-variant="list-stacked"] .pd-services__item-description {
  grid-area: description;
}

.pd-section--services[data-pd-module][data-pd-variant="list-stacked"] .pd-services__item-price {
  grid-area: price;
  align-self: center;
  justify-self: end;
  text-align: right;
}

.pd-section--services[data-pd-module][data-pd-variant="list-stacked"] .pd-services__item-cta {
  grid-area: cta;
  justify-self: start;
}

/* Respect reduced-motion preference for the package-local CTA transition.
 * Card hover/lift reduced-motion is handled by the shared utilities. */
@media (prefers-reduced-motion: reduce) {
  .pd-section--services[data-pd-module] .pd-services__item-cta {
    transition: none;
  }
}

/* Variant: checklist
 *
 * Renders services as a clean checklist. Each <li> is a flex row:
 * a circular check badge sits to the left of the title; the
 * description (when present) sits beneath the title; a per-item CTA
 * (when present) sits beneath the description. Two columns above
 * 48rem; single column below. Item background is transparent so the
 * variant feels lightweight against any tone. */

.pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__list {
  grid-template-columns: 1fr;
  gap: var(--pd-space-3) var(--pd-space-5);
  list-style: none;
}

@media (min-width: 48rem) {
  .pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pd-space-4) var(--pd-space-6);
  }
}

.pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--pd-space-2) var(--pd-space-3);
  align-items: start;
  padding: var(--pd-space-2) 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
}

.pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  border-radius: 999px;
  background: rgb(15 23 42 / 0%);
  color: var(--pd-color-primary);
  border: 2px solid var(--pd-color-primary);
  box-sizing: border-box;
}

.pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__check-icon {
  width: 0.95rem;
  height: 0.95rem;
  display: block;
}

.pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__check-body {
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-2);
  min-width: 0;
}

.pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__item-title {
  font-size: 1.0625rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__item-description {
  font-size: 0.9375rem;
  line-height: 1.5;
}

.pd-section--services[data-pd-module][data-pd-variant="checklist"] .pd-services__item-cta {
  align-self: flex-start;
  padding: var(--pd-space-2) var(--pd-space-3);
  font-size: 0.875rem;
}

/* On dark tones the primary-bordered check stays readable, but the
 * primary stroke against a primary section root would vanish. Flip the
 * check ring + stroke to surface so the icon stays visible. */
.pd-section--services[data-pd-module][data-pd-variant="checklist"][data-background-tone="primary"] .pd-services__check,
.pd-section--services[data-pd-module][data-pd-variant="checklist"][data-background-tone="secondary"] .pd-services__check {
  color: var(--pd-color-surface);
  border-color: var(--pd-color-surface);
}