/* Digicue components
   Styling for the Digicue Core Elementor widgets. Consumes the tokens defined
   by the Digicue One child theme, with fallbacks so the widgets still render
   sensibly if the child theme is not active. */

.dq-gs {
  --dq-gs-accent: var(--dq-purple-500, #666699);
  --dq-gs-line:   var(--dq-line, #e5e5ea);
  --dq-gs-surface: var(--dq-white, #ffffff);
  --dq-gs-text:   var(--dq-ink-800, #333333);
  --dq-gs-muted:  var(--dq-ink-500, #6b6b70);
  padding-block: var(--dq-space-9, 6rem);
  color: var(--dq-gs-text);
}

.dq-gs--tint { background: var(--dq-purple-50, #f2f2f7); }
.dq-gs--dark {
  background: var(--dq-black, #111111);
  --dq-gs-text: #ffffff;
  --dq-gs-muted: rgba(255, 255, 255, 0.72);
  --dq-gs-line: rgba(255, 255, 255, 0.18);
  --dq-gs-surface: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}

/* Elementor's kit stylesheet targets bare h1-h6 with the legacy presets, which
   force capitalise AND colour every heading purple. Purple is an accent, not a
   heading colour, and sentence case is a brand rule - so our widget headings
   need enough specificity to win. --dq-gs-text resolves to ink on light tones
   and white on the dark tone, so this stays correct in both. */
.dq-gs .dq-gs__title,
.dq-gs .dq-gs__label,
.dq-sp .dq-gs__title,
.dq-sp .dq-gs__label {
  text-transform: none;
  color: var(--dq-gs-text);
  font-family: var(--dq-font-heading, Sora, sans-serif);
}

/* Size is also taken from the legacy kit presets unless we out-specify it.
   These follow the Digicue One type scale: h2 32px, h4 20px. */
.dq-gs .dq-gs__title,
.dq-sp .dq-gs__title {
  font-size: var(--dq-text-h2, 2rem);
  line-height: var(--dq-leading-tight, 1.12);
  letter-spacing: var(--dq-tracking-tight, -0.02em);
  font-weight: 700;
}

.dq-gs .dq-gs__label,
.dq-sp .dq-gs__label {
  font-size: var(--dq-text-h4, 1.25rem);
  line-height: var(--dq-leading-snug, 1.28);
  letter-spacing: 0;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .dq-gs .dq-gs__title,
  .dq-sp .dq-gs__title { font-size: 1.75rem; }
}

@media (max-width: 640px) {
  .dq-gs .dq-gs__title,
  .dq-sp .dq-gs__title { font-size: 1.5rem; }
  .dq-gs .dq-gs__label,
  .dq-sp .dq-gs__label { font-size: 1.125rem; }
}

/* The starting point widget reuses the growth system tokens. */
.dq-sp {
  --dq-gs-text: var(--dq-ink-800, #333333);
  --dq-gs-muted: var(--dq-ink-500, #6b6b70);
  --dq-gs-line: var(--dq-line, #e5e5ea);
  --dq-gs-accent: var(--dq-purple-500, #666699);
  --dq-gs-surface: var(--dq-white, #ffffff);
}

/* Links inside a label keep the heading colour, not the global link purple. */
.dq-sp .dq-gs__label a { color: inherit; }
.dq-sp .dq-gs__label a:hover { color: var(--dq-gs-accent); }

/* ---- Intro ---- */

.dq-gs__intro {
  max-width: 62ch;
  margin-bottom: var(--dq-space-7, 3rem);
}

.dq-gs__eyebrow {
  font-family: var(--dq-font-body, Inter, sans-serif);
  font-size: var(--dq-text-sm, 0.875rem);
  font-weight: 600;
  letter-spacing: var(--dq-tracking-wide, 0.02em);
  color: var(--dq-gs-accent);
  margin: 0 0 var(--dq-space-2, 0.5rem);
}

.dq-gs__title {
  font-family: var(--dq-font-heading, Sora, sans-serif);
  font-size: var(--dq-text-h2, 2rem);
  font-weight: 700;
  line-height: var(--dq-leading-tight, 1.12);
  letter-spacing: var(--dq-tracking-tight, -0.02em);
  text-transform: none;
  margin: 0 0 var(--dq-space-4, 1rem);
  color: inherit;
}

.dq-gs__lead {
  font-size: var(--dq-text-lg, 1.125rem);
  line-height: var(--dq-leading-normal, 1.55);
  color: var(--dq-gs-muted);
  margin: 0;
}

/* ---- Layers ---- */

.dq-gs__layers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--dq-space-5, 1.5rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) { .dq-gs__layers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .dq-gs__layers { grid-template-columns: 1fr; } }

.dq-gs__layer {
  position: relative;
  display: flex;
  gap: var(--dq-space-4, 1rem);
  padding: var(--dq-space-5, 1.5rem);
  background: var(--dq-gs-surface);
  border: 1px solid var(--dq-gs-line);
  border-radius: 0;
  transition:
    border-color var(--dq-dur-normal, 200ms) var(--dq-ease-standard, ease),
    transform var(--dq-dur-normal, 200ms) var(--dq-ease-standard, ease);
}

.dq-gs__layer.is-active,
.dq-gs__layer.is-highlighted {
  border-color: var(--dq-gs-accent);
}

.dq-gs__layer.is-highlighted { background: var(--dq-purple-50, #f2f2f7); }
.dq-gs--dark .dq-gs__layer.is-highlighted { background: rgba(102, 102, 153, 0.18); }

/* Connection lines: drawn between cards, decorative only. */
.dq-gs--connected .dq-gs__layer::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--dq-space-5, 1.5rem) * -1);
  inset-block-start: 50%;
  inline-size: var(--dq-space-5, 1.5rem);
  block-size: 1px;
  background: var(--dq-gs-line);
  pointer-events: none;
}

/* A connector must not hang off the end of a row. Suppress it on the last
   item of each row at every column count, not just the last item overall. */
.dq-gs--connected .dq-gs__layer:last-child::after,
.dq-gs--connected .dq-gs__layer:nth-child(3n)::after { display: none; }

@media (max-width: 1024px) {
  .dq-gs--connected .dq-gs__layer:nth-child(3n)::after { display: block; }
  .dq-gs--connected .dq-gs__layer:nth-child(2n)::after { display: none; }
}

@media (max-width: 640px) {
  .dq-gs--connected .dq-gs__layer::after { display: none; }
}

.dq-gs__marker {
  flex: 0 0 auto;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  color: var(--dq-gs-accent);
  border: 1px solid var(--dq-gs-line);
}
.dq-gs__marker svg { inline-size: 20px; block-size: 20px; }

.dq-gs__label {
  font-family: var(--dq-font-heading, Sora, sans-serif);
  font-size: var(--dq-text-h4, 1.25rem);
  font-weight: 600;
  line-height: var(--dq-leading-snug, 1.28);
  text-transform: none;
  margin: 0 0 var(--dq-space-2, 0.5rem);
  color: inherit;
}

.dq-gs__desc {
  font-size: var(--dq-text-base, 1rem);
  line-height: var(--dq-leading-normal, 1.55);
  color: var(--dq-gs-muted);
  margin: 0;
}

.dq-gs__tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--dq-space-2, 0.5rem);
  margin: var(--dq-space-3, 0.75rem) 0 0;
  padding: 0;
}

.dq-gs__tag {
  font-size: var(--dq-text-xs, 0.8125rem);
  line-height: 1.4;
  padding: 4px 8px;
  border: 1px solid var(--dq-gs-line);
  color: var(--dq-gs-muted);
}

.dq-gs__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--dq-space-3, 0.75rem);
  font-weight: 600;
  color: var(--dq-gs-accent);
}
.dq-gs--dark .dq-gs__link { color: #ffffff; text-decoration: underline; }

/* ---- CTA ---- */

.dq-gs__cta { margin: var(--dq-space-7, 3rem) 0 0; }

.dq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--dq-space-3, 0.75rem) var(--dq-space-5, 1.5rem);
  border-radius: 0;
  border: 1px solid transparent;
  font-family: var(--dq-font-body, Inter, sans-serif);
  font-weight: 600;
  font-size: var(--dq-text-base, 1rem);
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dq-dur-fast, 120ms) var(--dq-ease-standard, ease);
}

.dq-btn--primary {
  background: var(--dq-purple-500, #666699);
  border-color: var(--dq-purple-500, #666699);
  color: #ffffff;
}
.dq-btn--primary:hover { background: var(--dq-purple-600, #565688); border-color: var(--dq-purple-600, #565688); color: #ffffff; text-decoration: none; }
.dq-btn--primary:active { background: var(--dq-purple-700, #474772); }

/* ---- Staggered reveal ----
   Scoped to .dq-motion, which is only added when JavaScript runs and the
   visitor has not requested reduced motion. Without it, content is visible. */

.dq-motion .dq-gs.dq-reveal .dq-gs__layer {
  transition-delay: var(--dq-gs-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .dq-gs__layer { transition: none !important; transform: none !important; }
}