/* Page sections from Jet's round 2 (8 Oct 2026, built 9 Oct). Tokens only. Loads on every view after
   rules.css (inc/theme-enqueue.php): small, and the Elementor sections that use it are on several pages.
   Owner: Serene. */

/* --- Home: "Data Perfection." photo under the intro ------------------------------------------------ */
body .elementor .about-media { margin-top: var(--gap-40); border-radius: var(--r-panel); overflow: hidden; }
body .elementor img.about-media__img { display: block; width: 100%; height: clamp(280px, 38vw, 520px); object-fit: cover; }

/* --- Responsible Business (Jet's copy 9 Oct, built 12 Oct 2026) ------------------------------------- */
/* Each topic: text left, "The evidence" boxout right - Jet's purple box, the service page's Why DDC panel. */
body .elementor .rb-topic + .rb-topic { margin-top: var(--gap-20); padding-top: var(--gap-40); border-top: var(--hair) solid var(--line); }
body .elementor .evidence { padding: var(--gap-40); border-radius: var(--r-panel); background-color: var(--ddc-purple); color: var(--white); }
body .elementor .evidence .evidence__title { color: var(--white); margin: 0 0 var(--gap-10); }
body .elementor .evidence p { color: var(--ddc-purple-soft); margin: 0; }
body .elementor .evidence .evidence__item { position: relative; padding-left: var(--gap-20); }
body .elementor .evidence .evidence__item::before { content: ""; position: absolute; left: 0; top: .5em; width: var(--gap-8); height: var(--gap-8); background-color: var(--ddc-green); }
body .elementor .evidence .evidence__quote { color: var(--white); font-size: var(--fs-lead); line-height: 1.45; margin-top: var(--gap-10); }
@media (max-width: 767px) { body .elementor .evidence { padding: var(--gap-20); } }

/* --- About: Where we come from (Jet's floppy disk) --------------------------------------------------- */
body .elementor .where-media { flex: 1 1 0; border-radius: var(--r-panel); overflow: hidden; }
body .elementor img.where-media__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* --- About: What makes us tick, six value cards (3 / 2 / 1 across) ----------------------------------- */
body .elementor .values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-40) var(--gap-20); margin-top: var(--gap-20); padding: 0; }
body .elementor .value { display: flex; flex-direction: column; gap: var(--gap-20); padding: 0; }
body .elementor img.value__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-panel); }
body .elementor .value__body { display: flex; flex-direction: column; gap: var(--gap-10); padding: 0; }
body .elementor .value__body p { margin: 0; }
@media (max-width: 1024px) { body .elementor .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body .elementor .values { grid-template-columns: minmax(0, 1fr); } }

/* --- Accreditations: mono at rest, colour on hover (Jet: "as in your first demo") -------------------- */
/* Touch screens have no hover, so they show colour all the time. */
@media (hover: hover) {
  body .elementor :is(.accred-logo, .strip__item) img { filter: grayscale(1); opacity: 0.7; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
  body .elementor :is(.accred-logo, .strip__item):hover img,
  body .elementor img.accred-logo:hover { filter: none; opacity: 1; }
  body .elementor img.accred-logo { filter: grayscale(1); opacity: 0.7; transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease); }
}
@media (prefers-reduced-motion: reduce) { body .elementor :is(.accred-logo, .strip__item) img, body .elementor img.accred-logo { transition: none; } }

/* --- Case study: Project details panel ---------------------------------------------------------------- */
.ddc-sc.project-details { display: flex; flex-direction: column; gap: var(--gap-20); }
.ddc-sc.project-details .pill { align-self: flex-start; margin: 0; }
.ddc-sc .project-details__list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-10); margin: 0;
}
.ddc-sc .project-details__item {
  display: flex; flex-direction: column; gap: var(--gap-6);
  padding: var(--gap-20); border-radius: var(--r-card); background: var(--paper);
}
.ddc-sc .project-details__item dt { color: var(--muted); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ddc-sc .project-details__item dd { margin: 0; font-weight: 600; line-height: 1.4; }
/* Links in the details (the service line): light on the dark item, never brand purple on it (Richard, 12 Oct:
   "not friendly on the eyes"). White, underlined; brand green on hover and focus. */
.ddc-sc .project-details__item dd a { color: var(--white); text-decoration: underline; text-underline-offset: 0.2em; }
.ddc-sc .project-details__item dd a:is(:hover, :focus-visible) { color: var(--ddc-green); }
.ddc-sc .project-details__sep { color: var(--muted); }
@media (max-width: 900px) { .ddc-sc .project-details__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ddc-sc .project-details__list { grid-template-columns: minmax(0, 1fr); } }

/* The story: photos placed in the content (a gallery block) sit on the measure, rounded. */
body .elementor .project-story :is(figure, .wp-block-gallery) { margin: var(--gap-40) 0; }
body .elementor .project-story img { border-radius: var(--r-panel); height: auto; }
body .elementor .project-story .wp-block-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-10); }
body .elementor .project-story .wp-block-gallery figure { margin: 0; }
body .elementor .project-story .wp-block-gallery img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 640px) { body .elementor .project-story .wp-block-gallery { grid-template-columns: minmax(0, 1fr); } }

/* --- Case study: Project facts, purple panel of figures ------------------------------------------------ */
.ddc-sc.project-facts {
  display: flex; flex-direction: column; gap: var(--gap-20);
  padding: var(--gap-40) var(--gap-40) var(--gap-20); border-radius: var(--r-panel);
  background: var(--ddc-purple); color: var(--white);
}
.ddc-sc.project-facts .h3 { margin: 0; color: var(--white); }
.ddc-sc .project-facts__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--gap-10) var(--gap-20);
}
.ddc-sc .project-facts__item {
  position: relative; padding: var(--gap-10) 0 var(--gap-10) calc(var(--gap-20) + var(--gap-4));
  border-top: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  color: var(--white); font-weight: 600; line-height: 1.4;
}
.ddc-sc .project-facts__item::before {
  content: ""; position: absolute; left: 0; top: calc(var(--gap-10) + 0.7em - 5px);
  width: 10px; height: 10px; border-radius: 3px; background: var(--ddc-green);
}
@media (max-width: 767px) { .ddc-sc.project-facts { padding: var(--gap-40) var(--gap-20) var(--gap-20); } }

/* --- Our Work: variable project grid, the first case study featured ----------------------------------- */
.ddc-sc.projects-featured { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-40) var(--gap-20); }
.ddc-sc.projects-featured .project--featured { grid-column: span 2; grid-row: span 2; }
.ddc-sc.projects-featured .project--featured .project__media { aspect-ratio: 16 / 10; }
.ddc-sc.projects-featured .project--featured .project__title { font-size: var(--fs-h3); }
/* One case study: it takes the whole row, not two thirds of it. */
.ddc-sc.projects-featured--single .project--featured { grid-column: 1 / -1; grid-row: auto; }
.ddc-sc.projects-featured--single .project--featured .project__media { aspect-ratio: 21 / 9; }
@media (max-width: 900px) {
  .ddc-sc.projects-featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ddc-sc.projects-featured .project--featured { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 640px) {
  .ddc-sc.projects-featured { grid-template-columns: minmax(0, 1fr); }
  .ddc-sc.projects-featured--single .project--featured .project__media { aspect-ratio: 4 / 3; }
}

/* --- Our Work: framework cards -------------------------------------------------------------------------- */
.ddc-sc.frameworks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-20); }
.ddc-sc .framework { display: flex; flex-direction: column; border-radius: var(--r-panel); overflow: hidden; background: var(--paper); }
.ddc-sc .framework__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.ddc-sc .framework__body { display: flex; flex-direction: column; gap: var(--gap-20); padding: var(--gap-40) var(--gap-20) var(--gap-20); }
.ddc-sc .framework__title { margin: 0; font-size: var(--fs-h4); line-height: 1.3; }
.ddc-sc .framework__facts { display: flex; flex-wrap: wrap; gap: var(--gap-10); margin: 0; }
.ddc-sc .framework__fact { display: flex; flex-direction: column; gap: var(--gap-4); padding: var(--gap-10) var(--gap-20) var(--gap-10) 0; }
.ddc-sc .framework__fact dt { color: var(--muted); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ddc-sc .framework__fact dd { margin: 0; font-weight: 600; }
.ddc-sc .framework__text p { margin: 0 0 var(--gap-10); }
.ddc-sc .framework__text p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .ddc-sc.frameworks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ddc-sc.frameworks { grid-template-columns: minmax(0, 1fr); } }

/* --- 12 Oct 2026: the Our Work listings as Pro Loop Grids ------------------------------------------------
   The cards are Theme Builder loop items (DDC Project Card / Client Logo / Framework Card) that Jet edits
   herself; Pro's grid owns columns and gaps. These rules carry the shortcode versions' layout over. The
   slot container around each grid carries the class (projects-featured / clients-grid / frameworks-grid).
   12 Oct 22:20: Pro prints the loop item's CSS as an inline <style> that is the container's FIRST child (optimised
   CSS files are off on this site), so :first-child / :only-child never matched a card and the single case study
   rendered a third wide on live. Count cards only: :nth-child(n of .e-loop-item).
   13 Oct: the service page's "<Service> in action" grid (.service-projects-loop, services.css) takes the same
   treatment, so its lone case study fills the row like Our Work's instead of sitting a third wide. */
:is(.projects-featured, .service-projects-loop) .e-loop-item:nth-child(1 of .e-loop-item) { grid-column: span 2; grid-row: span 2; }
:is(.projects-featured, .service-projects-loop) .e-loop-item:nth-child(1 of .e-loop-item) .project__media { aspect-ratio: 16 / 10; }
:is(.projects-featured, .service-projects-loop) .e-loop-item:nth-child(1 of .e-loop-item) .project__title { font-size: var(--fs-h3); }
:is(.projects-featured, .service-projects-loop) .e-loop-item:nth-child(1 of .e-loop-item):nth-last-child(1 of .e-loop-item) { grid-column: 1 / -1; grid-row: auto; }
:is(.projects-featured, .service-projects-loop) .e-loop-item:nth-child(1 of .e-loop-item):nth-last-child(1 of .e-loop-item) .project__media { aspect-ratio: 21 / 9; }
@media (max-width: 1024px) { :is(.projects-featured, .service-projects-loop) .e-loop-item:nth-child(1 of .e-loop-item) { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 640px) { :is(.projects-featured, .service-projects-loop) .e-loop-item:nth-child(1 of .e-loop-item):nth-last-child(1 of .e-loop-item) .project__media { aspect-ratio: 4 / 3; } }
.frameworks-grid .e-loop-item { display: flex; }
.frameworks-grid .framework { display: flex; flex-direction: column; width: 100%; border-radius: var(--r-panel); overflow: hidden; background: var(--paper); }
.frameworks-grid .framework__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.frameworks-grid .framework__body { display: flex; flex-direction: column; gap: var(--gap-20); padding: var(--gap-40) var(--gap-20) var(--gap-20); }
.frameworks-grid .framework__title { margin: 0; font-size: var(--fs-h4); line-height: 1.3; }
.frameworks-grid .framework__facts { display: flex; flex-wrap: wrap; gap: var(--gap-10); margin: 0; }
.frameworks-grid .framework__fact { display: flex; flex-direction: column; gap: var(--gap-4); padding: var(--gap-10) var(--gap-20) var(--gap-10) 0; }
.frameworks-grid .framework__label { color: var(--muted); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.frameworks-grid .framework__value { margin: 0; font-weight: 600; }
/* A fact whose field is blank on that framework hides itself, label and all. */
.frameworks-grid .framework__fact:has(> .framework__value:empty), .frameworks-grid .framework__fact:not(:has(> .framework__value)) { display: none; }
.frameworks-grid .framework__text p { margin: 0 0 var(--gap-10); }
.frameworks-grid .framework__text p:last-child { margin-bottom: 0; }

/* Row heroes (14 Oct, Richard): a hero whose shell holds the title and its text side by side with no button row
   (the Services archive, Contact). Elementor's flexbox stretched each paragraph to the title's height, so the text
   floated at the top of its box; it now sits on the title's last baseline. Below desktop the row never wrapped
   (three 97px columns on a phone), so it stacks. */
body .elementor .hero > .shell:has(> h1):not(:has(> div)) { align-items: last baseline; }
@media (max-width: 1024px) {
  body .elementor .hero > .shell:has(> h1):not(:has(> div)) { flex-direction: column; align-items: stretch; }
}

/* --- Case study: field widgets + sidebar (21 Oct 2026) ------------------------------------------------- */
/* Template 179 body = Project Columns: Project Side (360px: "Project details" pill + Field Details, then the
   Project facts panel: Heading + Field List) beside Project Main (the story). Jet asked for the details in a left
   sidebar (13 Oct); Richard set 360px and the phone order (21 Oct). Same look as the shortcodes had; these rules
   sit at (0,2,0)-(0,3,0), so anything Jet sets on a widget's Style tab (printed through the element id) wins. */
body .elementor .e-con:has(> .project-details__fields) { display: flex; flex-direction: column; gap: var(--gap-20); }
body .elementor .e-con:has(> .project-details__fields) > .pill { align-self: flex-start; margin: 0; }
.elementor-widget-ddc-field-details.project-details__fields .ddc-details { gap: var(--gap-10); }
.elementor-widget-ddc-field-details.project-details__fields .ddc-details__row {
  display: flex; flex-direction: column; gap: var(--gap-6);
  padding: var(--gap-20); border-radius: var(--r-card); background: var(--paper);
}
.elementor-widget-ddc-field-details.project-details__fields .ddc-details__label {
  margin: 0; color: var(--muted); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.elementor-widget-ddc-field-details.project-details__fields .ddc-details__value { font-weight: 600; line-height: 1.4; }
/* The service links: white and underlined on the dark card, brand green on hover and focus (Richard, 12 Oct). */
.elementor-widget-ddc-field-details.project-details__fields .ddc-details__value a { color: var(--white); text-underline-offset: 0.2em; }
.elementor-widget-ddc-field-details.project-details__fields .ddc-details__value a:is(:hover, :focus-visible) { color: var(--ddc-green); }
.elementor-widget-ddc-field-details.project-details__fields .project-details__sep { color: var(--muted); }

body .elementor .e-con:has(> .project-facts__list) {
  display: flex; flex-direction: column; gap: var(--gap-20);
  padding: var(--gap-40) var(--gap-40) var(--gap-20); border-radius: var(--r-panel);
  background: var(--ddc-purple); color: var(--white);
}
/* No facts on this case study = no list widget: the heading must not stand alone (the shortcode printed nothing). */
body .elementor .e-con:has(> .project-facts__title):not(:has(> .project-facts__list)) { display: none; }
.elementor-widget-heading.project-facts__title .elementor-heading-title {
  margin: 0; font: 900 var(--fs-h3)/1.15 var(--font); color: var(--white); text-wrap: balance;
}
.elementor-widget-ddc-field-list.project-facts__list .elementor-icon-list-items {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--gap-10) var(--gap-20);
}
.elementor-widget-ddc-field-list.project-facts__list .elementor-icon-list-item {
  position: relative; margin: 0; padding: var(--gap-10) 0 var(--gap-10) calc(var(--gap-20) + var(--gap-4));
  border-top: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
  color: var(--white); font-weight: 600; line-height: 1.4;
}
/* The kit's Icon List text default (grey) reaches the Field List too: the facts take the item's white + weight. */
.elementor-widget-ddc-field-list.project-facts__list .elementor-icon-list-text { color: inherit; font-weight: inherit; }
.elementor-widget-ddc-field-list.project-facts__list .elementor-icon-list-item::before {
  content: ""; position: absolute; left: 0; top: calc(var(--gap-10) + 0.7em - 5px);
  width: 10px; height: 10px; border-radius: 3px; background: var(--ddc-green);
}
/* 21 Oct 11:55 (Richard: "the body content doesn't stretch"): the story kept the old full-width reading cap
   (Elementor local max-width, 658px) inside its 1100px column. Beside a sidebar the column IS the measure. */
body .elementor .e-con:has(> .project-story) > .project-story { max-width: none; }
/* Two-photo galleries in a story sat at half a grid cell: WordPress core sizes nested gallery images with an id inside
   :not() plus :first-child:nth-last-child(2) purely to win on specificity, over this file's 2-column grid. Scoped
   to case-study stories, the honest override is !important. */
body .elementor .project-story .wp-block-gallery.has-nested-images figure.wp-block-image { width: 100% !important; margin: 0; }
/* Stacked (Elementor's tablet breakpoint and below): details, story, facts, as the page read before the sidebar.
   The side column steps aside (display: contents) so its two blocks and the story order as one list. */
@media (max-width: 1024px) {
  body .elementor .e-con:has(> .e-con > .project-details__fields) { display: contents; }
  body .elementor .e-con:has(> .project-story) { order: 1; }
  body .elementor .e-con:has(> .project-facts__list) { order: 2; }
}
@media (max-width: 767px) { body .elementor .e-con:has(> .project-facts__list) { padding: var(--gap-40) var(--gap-20) var(--gap-20); } }
@media (forced-colors: active) {
  .elementor-widget-ddc-field-list.project-facts__list .elementor-icon-list-item::before { background: CanvasText; }
}