/* Shortcode components - ported from the mock (kit.css .pill, .project, .need).
   Only what the shortcodes still render (carousels + map). People, accreditations and the Our Work
   grid are Elementor V4 loops styled by global classes. Every rule is scoped to .ddc-sc (the
   shortcode root) so it out-ranks Elementor's same-named global classes and keeps the mock's look. */
.ddc-sc { font-family: var(--font); color: var(--body); }

.ddc-sc .pill {
  display: inline-flex; align-items: center; gap: var(--gap-8); width: fit-content; margin: 0;
  padding: var(--gap-6) var(--gap-10); border-radius: var(--r-pill); background: var(--ddc-purple-tint);
  color: var(--heading); font: 500 var(--fs-label)/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase;
}

/* Project card */
.ddc-sc .project { display: grid; gap: var(--gap-20); align-content: start; flex: none; text-decoration: none; color: var(--body); }
.ddc-sc .project__media { margin: 0; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper); }
.ddc-sc .project__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.ddc-sc .project__meta { display: flex; flex-wrap: wrap; gap: var(--gap-10); }
.ddc-sc .project__title { margin: 0; font: 700 var(--fs-h4)/1.3 var(--font); color: var(--heading); }
.ddc-sc .project:hover .project__media img { transform: scale(1.04); }
.ddc-sc .projects-empty { color: var(--muted); font-size: var(--fs-small); }

/* Need card ("Where do you need us?") */
.ddc-sc .need {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--gap-40);
  min-height: calc(var(--tile-min) + var(--gap-20)); padding: var(--gap-40) var(--gap-20) var(--gap-20);
  background: var(--paper); border-radius: var(--r-card); text-decoration: none; color: var(--body);
  transition: background-color var(--dur) var(--ease);
}
.ddc-sc .need__icon {
  width: calc(var(--gap-100) + var(--gap-20)); height: calc(var(--gap-100) + var(--gap-20)); margin-inline: auto;
  color: var(--heading); transition: transform var(--dur-slow) var(--ease);
}
.ddc-sc .need__text { display: grid; gap: var(--gap-10); }
.ddc-sc .need__q { margin: 0; font: 700 var(--fs-h4)/1.3 var(--font); color: var(--heading); }
.ddc-sc .need__a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap-10);
  padding-top: var(--gap-10); border-top: var(--hair) solid var(--line); font-size: var(--fs-small); font-weight: 500;
}
.ddc-sc .need__a svg { width: var(--icon); height: var(--icon); color: var(--ddc-green); transition: transform var(--dur) var(--ease); }
.ddc-sc .need:hover { background: var(--ddc-purple-tint); }
.ddc-sc .need:hover .need__icon { transform: translateY(calc(var(--gap-4) * -1)); }
.ddc-sc .need:hover .need__a svg, .ddc-sc .need:focus-visible .need__a svg { transform: var(--turn); }

/* Elementor's Shortcode widget is a flex item sized to its content inside V4 containers, so a
   shortcode with no intrinsic width (the map, a carousel) collapsed to 0px. Stretch any widget that
   holds one of ours to the full row. */
.elementor-widget-shortcode:has(.ddc-sc) { width: 100%; max-width: 100%; flex: 1 1 100%; min-width: 0; align-self: stretch; }
.elementor-widget-shortcode:has(.ddc-sc) :is(.elementor-widget-container, .elementor-shortcode) { width: 100%; }