/* Services: archive cards and the single service layout (body left, image + CTAs + related right,
   includes list below). Owner: SERVICES (Serene). Built 1 Oct 2026. Tokens only (var(--...));
   loads only on service views (inc/theme-enqueue.php). */

/* Right column: the CTA panel sits under the featured image (Richard, 1 Oct). */
.ddc-sc.service-cta {
  display: flex; flex-direction: column; gap: var(--gap-10);
  padding: var(--gap-40) var(--gap-20) var(--gap-20); border-radius: var(--r-card);
  background: var(--ddc-purple); color: var(--white);
}
.ddc-sc .service-cta__title { margin: 0; color: var(--white); }
.ddc-sc .service-cta__text { margin: 0; color: var(--ddc-purple-soft); }
.ddc-sc .service-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-10) var(--gap-20); margin-top: var(--gap-10); }
.ddc-sc .service-cta__phone {
  display: inline-flex; align-items: center; gap: var(--gap-8); min-height: 44px;
  color: var(--white); font-weight: 600; text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.ddc-sc .service-cta__phone .label { color: var(--ddc-purple-soft); font-weight: 500; }
.ddc-sc .service-cta__phone:hover { color: var(--ddc-green); }

/* Right column: the other services, as a short list of whole-row links. */
.ddc-sc.related-services { display: flex; flex-direction: column; gap: var(--gap-10); }
.ddc-sc .related-services__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ddc-sc .related-services__link {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--gap-20); row-gap: var(--gap-4);
  min-height: 44px; padding: var(--gap-20) 0; border-bottom: var(--hair) solid var(--line);
  color: var(--white); text-decoration: none;
}
.ddc-sc .related-services__list li:first-child .related-services__link { border-top: var(--hair) solid var(--line); }
.ddc-sc .related-services__name { font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; }
.ddc-sc .related-services__strap { grid-column: 1; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.ddc-sc .related-services__go { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: var(--icon, 24px); height: var(--icon, 24px); color: var(--ddc-green); }
.ddc-sc .related-services__go svg { width: 100%; height: 100%; transition: transform var(--dur) var(--ease); }
.ddc-sc .related-services__link:hover .related-services__name,
.ddc-sc .related-services__link:focus-visible .related-services__name { color: var(--ddc-green); }
.ddc-sc .related-services__link:hover .related-services__go svg,
.ddc-sc .related-services__link:focus-visible .related-services__go svg { transform: var(--turn, rotate(45deg)); }

/* "Why DDC?" under the body copy. */
.ddc-sc.service-why { margin-top: var(--gap-40); padding-top: var(--gap-40); border-top: var(--hair) solid var(--line); }
.ddc-sc.service-why .h3 { margin: 0 0 var(--gap-20); }

/* "Services include": full width under the body, two columns of brand bullets on wide screens. */
.ddc-sc.service-includes { display: flex; flex-direction: column; gap: var(--gap-20); }
.ddc-sc.service-includes .h3 { margin: 0; }
.ddc-sc .service-includes__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-10) var(--gap-40);
}
.ddc-sc .service-includes__list li {
  position: relative; padding: var(--gap-10) 0 var(--gap-10) calc(var(--gap-20) + var(--gap-10));
  border-bottom: var(--hair) solid var(--line); line-height: 1.5; color: var(--body);
}
/* The bullet: a small green square with a purple keyline, DDC's two colours (Richard: "purple or green"). */
.ddc-sc .service-includes__list li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--gap-10) + 0.75em - 6px);
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--ddc-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddc-purple) 70%, transparent);
}

/* Case studies for this service line. */
.ddc-sc.service-projects { display: flex; flex-direction: column; gap: var(--gap-20); margin-top: var(--gap-40); }
.ddc-sc.service-projects .h3 { margin: 0; }
.ddc-sc.service-projects .cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-40) var(--gap-20); }

/* The featured image in the right column: about 300px tall, as Richard set (29 Sept). Elementor puts the
   global class on the <img> itself. */
img.service-media { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: var(--r-card); }

@media (max-width: 1024px) {
  .ddc-sc.service-projects .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .ddc-sc .service-includes__list { grid-template-columns: minmax(0, 1fr); }
  .ddc-sc.service-projects .cards { grid-template-columns: minmax(0, 1fr); }
  img.service-media { height: auto; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .ddc-sc .related-services__go svg, .ddc-sc .service-cta__phone { transition: none; }
}
@media (forced-colors: active) {
  .ddc-sc .service-includes__list li::before { background: CanvasText; box-shadow: none; }
}

/* --- Jet's round 2 (8 Oct 2026) ----------------------------------------------------------------------- */
/* "Why DDC?" in a purple box, more prominent (replaces the hairline rule above). 13 Oct 2026 (Jet's round 4, R4-6):
   the panel spans the full shell width under the two columns (build-tb-services.mjs); the copy runs in two
   columns on wide screens and carries more weight: DDC can act as Principal Contractor, and this is where the
   page says so. The slot's own margin spaces it from the row above, so no top margin here. */
.ddc-sc.service-why {
  margin-top: 0; padding: var(--gap-40);
  border-top: 0; border-radius: var(--r-panel);
  background: var(--ddc-purple); color: var(--white);
}
.ddc-sc.service-why .h3 { color: var(--white); margin: 0 0 var(--gap-20); }
.ddc-sc .service-why__body { columns: 2; column-gap: var(--gap-60); }
.ddc-sc .service-why__body p { color: var(--white); font-size: 18px; font-weight: 600; line-height: 1.5; margin: 0 0 var(--gap-20); break-inside: avoid; }
.ddc-sc .service-why__body p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) { .ddc-sc .service-why__body { columns: 1; } }
@media (max-width: 767px) { .ddc-sc.service-why { padding: var(--gap-40) var(--gap-20); } .ddc-sc .service-why__body p { font-size: var(--fs-body); } }

/* The opening paragraph reads as a subheading (Jet). The first paragraph of the service body only. */
/* Markup checked on staging 9 Oct: the paragraphs sit directly in the post-content widget. */
.single-ddc_service .elementor-widget-theme-post-content > p:first-child {
  font-size: var(--fs-h4); line-height: 1.4; font-weight: 500; color: var(--ink); max-width: 40ch;
}

/* Hero quick links to the other two services. */
.ddc-sc.service-links { display: flex; flex-wrap: wrap; gap: var(--gap-10); margin-top: var(--gap-10); }
@media (max-width: 767px) { .ddc-sc.service-links .btn { width: 100%; justify-content: space-between; } }

/* Services archive: full-width stacked panels, photo and text sides alternating. */
.ddc-sc.service-panels { display: flex; flex-direction: column; gap: var(--gap-10); }
.ddc-sc .service-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch;
  border-radius: var(--r-panel); overflow: hidden; background: var(--paper);
}
.ddc-sc .service-panel__media { min-height: 360px; }
.ddc-sc .service-panel__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ddc-sc .service-panel__body {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--gap-20);
  padding: var(--gap-60) var(--gap-40);
}
.ddc-sc .service-panel--flip .service-panel__media { order: 2; }
.ddc-sc .service-panel__title { margin: 0; }
.ddc-sc .service-panel__title a { color: inherit; text-decoration: none; }
.ddc-sc .service-panel__title a:hover { color: var(--ddc-purple); }
.ddc-sc .service-panel__strap { margin: 0; color: var(--muted); max-width: 40ch; }
.ddc-sc .service-panel .service-includes__list { width: 100%; grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .ddc-sc .service-panel { grid-template-columns: minmax(0, 1fr); }
  .ddc-sc .service-panel--flip .service-panel__media { order: 0; }
  .ddc-sc .service-panel__media { min-height: 0; aspect-ratio: 16 / 9; }
  .ddc-sc .service-panel__body { padding: var(--gap-40) var(--gap-20) var(--gap-20); }
}

/* 12 Oct 2026: service page loops. The other-services buttons and the related case studies are Pro Loop
   Grids (cards = Theme Builder loop items). The slot container carries the class. */
.service-links-loop .elementor-loop-container { display: flex; flex-wrap: wrap; gap: var(--gap-10); }
.service-links-loop .e-loop-item { width: auto; }
.service-links-loop .e-loop-item > .btn { display: inline-flex; }
/* A service with no case studies yet: the whole block (heading included) stays out of the page. 21 Oct 2026: needs
   `body .elementor` - mock.css `body .elementor .slot { display: block }` (0,2,1) out-ranked it, so VRS showed the
   heading alone (Richard). */
body .elementor .service-projects-loop:not(:has(.e-loop-item)) { display: none; }
/* The heading is a classic Pro widget: Elementor prints its global defaults (post-268.css, Primary colour and
   typography) at (0,2,0), above the site's heading rule, so "Surveys in action" came out in the kit's default
   blue (Richard, 12 Oct). This rule out-ranks it and gives the heading the site's h2.h3 look. */
.service-projects-loop .elementor-widget-heading .elementor-heading-title {
  margin: 0 0 var(--gap-20); font: 900 var(--fs-h3)/1.15 var(--font); color: var(--heading); text-wrap: balance;
}
/* The lone case study fills the row (pages.css carries the featured rules for .service-projects-loop too). */
.service-projects-loop .elementor-loop-container { gap: var(--gap-40) var(--gap-20); }
.service-links-loop { margin-top: var(--gap-10); }
.service-projects-loop { margin-top: var(--gap-40); }

/* --- Field widgets (21 Oct 2026) ---------------------------------------------------------------------- */
/* "Why DDC?" and "Services include" on the service template are now Elementor widgets Jet can select and style:
   a Heading + Text Editor (the "DDC field (paragraphs)" tag) and a Heading + Field List. These rules give them the
   look the shortcodes had. They sit at (0,2,0)-(0,3,0): above Elementor's global widget defaults, below anything
   Jet sets on a widget's Style tab (those print through the element id). Type sits on the widget wrapper, never on
   the <p>/<li>, so her colour and typography reach the text. The purple panel itself stays here. */
body .elementor .e-con:has(> .service-why__body) {
  display: flex; flex-direction: column; gap: var(--gap-20);
  padding: var(--gap-40); border-radius: var(--r-panel); background: var(--ddc-purple); color: var(--white);
}
body .elementor .e-con:has(> .service-includes__list) { display: flex; flex-direction: column; gap: var(--gap-20); }
/* No field on this service = no body widget: the heading must not stand alone (the shortcode printed nothing). */
body .elementor .e-con:has(> .service-why__title):not(:has(> .service-why__body)),
body .elementor .e-con:has(> .service-includes__title):not(:has(> .service-includes__list)) { display: none; }

.elementor-widget-heading.service-why__title .elementor-heading-title,
.elementor-widget-heading.service-includes__title .elementor-heading-title {
  margin: 0; font: 900 var(--fs-h3)/1.15 var(--font); color: var(--heading); text-wrap: balance;
}
.elementor-widget-heading.service-why__title .elementor-heading-title { color: var(--white); }

.elementor-widget-text-editor.service-why__body {
  columns: 2; column-gap: var(--gap-60);
  color: var(--white); font-size: 18px; font-weight: 600; line-height: 1.5;
}
.elementor-widget-text-editor.service-why__body p { margin: 0 0 var(--gap-20); break-inside: avoid; }
.elementor-widget-text-editor.service-why__body p:last-child { margin-bottom: 0; }

.elementor-widget-ddc-field-list.service-includes__list .elementor-icon-list-items {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-10) var(--gap-40);
}
.elementor-widget-ddc-field-list.service-includes__list .elementor-icon-list-item {
  position: relative; margin: 0; padding: var(--gap-10) 0 var(--gap-10) calc(var(--gap-20) + var(--gap-10));
  border-bottom: var(--hair) solid var(--line); line-height: 1.5; color: var(--body);
}
/* Elementor gives the Field List the kit's Icon List default (post-268.css: `.elementor-widget-ddc-field-list
   .elementor-icon-list-text { color: secondary }`, (0,2,0)), grey on this ground: the text takes the item's colour
   instead. Jet's Text colour control prints through the element id at (0,4,0) and still wins. */
.elementor-widget-ddc-field-list.service-includes__list .elementor-icon-list-text { color: inherit; font-weight: inherit; }
/* The bullet: DDC's green square with a purple keyline, as on the shortcode list. */
.elementor-widget-ddc-field-list.service-includes__list .elementor-icon-list-item::before {
  content: ""; position: absolute; left: 0; top: calc(var(--gap-10) + 0.75em - 6px);
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--ddc-green); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ddc-purple) 70%, transparent);
}
@media (max-width: 1023px) { .elementor-widget-text-editor.service-why__body { columns: 1; } }
@media (max-width: 767px) {
  body .elementor .e-con:has(> .service-why__body) { padding: var(--gap-40) var(--gap-20); }
  .elementor-widget-text-editor.service-why__body { font-size: var(--fs-body); }
  .elementor-widget-ddc-field-list.service-includes__list .elementor-icon-list-items { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
  .elementor-widget-ddc-field-list.service-includes__list .elementor-icon-list-item::before { background: CanvasText; box-shadow: none; }
}