@layer dasy.components {

  /* Shared card patterns back-ported from the vanilla DaSy component
     library. The grid collapses naturally without breakpoint-specific
     markup, and cards remain ordinary semantic Group blocks. */
  .wp-block-group.is-style-dasy-card-grid,
  .wp-block-group.dasy-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: var(--dasy-pad-x);
    margin-block: var(--dasy-pad-y) calc(var(--dasy-pad-y) * 2);
  }

  .wp-block-group.is-style-dasy-card,
  .wp-block-group.dasy-card {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dasy-pad-y) * .75);
    min-width: 0;
    margin: 0;
    padding: var(--dasy-pad-y) var(--dasy-pad-x) var(--dasy-pad-x);
    border: 2px solid var(--dasy-color-border);
    border-radius: var(--dasy-radius-md);
    background: var(--dasy-paper);
  }

  .wp-block-group.is-style-dasy-card > *,
  .wp-block-group.dasy-card > * {
    margin-block: 0 !important;
  }

  .wp-block-group.is-style-dasy-card > :is(h2, h3, h4),
  .wp-block-group.dasy-card > :is(h2, h3, h4) {
    color: var(--dasy-blue-deep);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.25;
  }

  .wp-block-group.is-style-dasy-card > .wp-block-buttons:last-child,
  .wp-block-group.dasy-card > .wp-block-buttons:last-child {
    margin-top: auto !important;
    padding-top: calc(var(--dasy-pad-y) * .25);
  }

  .wp-block-group.is-style-dasy-card.is-dasy-current-stage,
  .wp-block-group.dasy-card.is-dasy-current-stage {
    border-color: var(--dasy-blue);
    background: var(--dasy-paper-alt);
  }

  .wp-block-group.is-style-dasy-card .dasy-card__status,
  .wp-block-group.dasy-card .dasy-card__status {
    color: var(--dasy-blue-deep);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
  }

  /* Audience cards are a source-informed variant for role-specific guidance.
     They retain the stronger navy frame and generous interior rhythm without
     forcing equal text lengths or embedding decorative legacy artwork. */
  .wp-block-group.is-style-dasy-audience-grid,
  .wp-block-group.dasy-audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--dasy-pad-x);
    margin-block: var(--dasy-pad-y) calc(var(--dasy-pad-y) * 2);
  }

  .wp-block-group.is-style-dasy-audience-card,
  .wp-block-group.dasy-audience-card {
    --dasy-audience-icon: none;
    display: flex;
    flex-direction: column;
    gap: var(--dasy-pad-y);
    min-width: 0;
    margin: 0;
    padding: calc(var(--dasy-pad-y) * 1.5) var(--dasy-pad-x);
    border: 2px solid var(--dasy-blue);
    border-radius: calc(var(--dasy-radius-md) + .25rem);
    background: var(--dasy-paper);
  }

  .wp-block-group.dasy-audience-card--analyst {
    --dasy-audience-icon: url("../../icons/audience-analyst.svg");
  }

  .wp-block-group.dasy-audience-card--leader {
    --dasy-audience-icon: url("../../icons/audience-leader.svg");
  }

  .wp-block-group.dasy-audience-card--stakeholder {
    --dasy-audience-icon: url("../../icons/audience-stakeholder.svg");
  }

  .wp-block-group.is-style-dasy-audience-card::before,
  .wp-block-group.dasy-audience-card::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    align-self: center;
    width: 5rem;
    height: 5rem;
    margin-block-end: calc(var(--dasy-pad-y) * .25);
    background: var(--dasy-audience-icon) center / contain no-repeat;
  }

  .wp-block-group.is-style-dasy-audience-card > *,
  .wp-block-group.dasy-audience-card > * {
    margin-block: 0 !important;
  }

  .wp-block-group.is-style-dasy-audience-card > :is(h2, h3, h4),
  .wp-block-group.dasy-audience-card > :is(h2, h3, h4) {
    color: var(--dasy-blue-deep);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.25;
    text-align: start;
  }

  /* Module roadmap: a compact, semantic alternative to the source site's
     image-based timeline. Stages stay in reading order, and their established
     colors act as orientation cues without becoming the only state signal. */
  .wp-block-group.is-style-dasy-module-roadmap,
  .wp-block-group.dasy-module-roadmap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: calc(var(--dasy-pad-y) * 2);
    margin-block: var(--dasy-pad-y) calc(var(--dasy-pad-y) * 2);
  }

  .wp-block-group.is-style-dasy-module-stage,
  .wp-block-group.dasy-module-stage {
    --dasy-stage-color: var(--dasy-gray);
    display: flex;
    flex-direction: column;
    gap: var(--dasy-pad-y);
    min-width: 0;
    margin: 0;
    padding: 0 0 0 var(--dasy-pad-x);
    border: 0;
    border-inline-start: .5rem solid var(--dasy-stage-color);
    border-radius: 0;
    background: transparent;
  }

  .wp-block-group.is-style-dasy-module-stage > *,
  .wp-block-group.dasy-module-stage > * {
    margin-block: 0 !important;
  }

  .wp-block-group.is-style-dasy-module-stage > :is(h2, h3, h4),
  .wp-block-group.dasy-module-stage > :is(h2, h3, h4) {
    color: var(--dasy-blue-deep);
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.25;
  }

  .wp-block-group.dasy-module-stage--begin {
    --dasy-stage-color: var(--dasy-purple);
  }

  .wp-block-group.dasy-module-stage--engage {
    --dasy-stage-color: var(--dasy-blue);
  }

  .wp-block-group.dasy-module-stage--enrich {
    --dasy-stage-color: var(--dasy-green);
  }

  .wp-block-group.dasy-module-stage--apply {
    --dasy-stage-color: var(--dasy-yellow);
  }

  .wp-block-group.dasy-module-stage--review {
    --dasy-stage-color: var(--dasy-plum);
  }

  .wp-block-group.dasy-module-stage--resources {
    --dasy-stage-color: var(--dasy-gray);
  }

  .wp-block-group.is-style-dasy-module-stage.is-dasy-current-stage,
  .wp-block-group.dasy-module-stage.is-dasy-current-stage {
    background: var(--dasy-paper-alt);
  }

  .dasy-module-stage__status {
    color: var(--dasy-blue-deep);
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }

  .dasy-module-stage__link {
    margin-top: auto !important;
    padding-top: calc(var(--dasy-pad-y) * .25);
  }

  .dasy-module-stage__link a {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    min-height: 44px;
    font-weight: 700;
    cursor: pointer;
  }

  .dasy-module-stage__link a::after {
    content: "";
    display: inline-block;
    width: .5em;
    height: .5em;
    border-block-start: 2px solid currentColor;
    border-inline-end: 2px solid currentColor;
    transform: rotate(45deg);
  }

  @media (min-width: 48rem) {
    .wp-block-group.is-style-dasy-module-roadmap,
    .wp-block-group.dasy-module-roadmap {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wp-block-group.is-style-dasy-module-stage,
    .wp-block-group.dasy-module-stage {
      padding: calc(var(--dasy-pad-y) * 1.25) var(--dasy-pad-x) var(--dasy-pad-x);
      border: 2px solid var(--dasy-color-border);
      border-block-start: .5rem solid var(--dasy-stage-color);
      border-radius: var(--dasy-radius-md);
      background: var(--dasy-paper);
    }

    .wp-block-group.is-style-dasy-module-stage.is-dasy-current-stage,
    .wp-block-group.dasy-module-stage.is-dasy-current-stage {
      border-inline-color: var(--dasy-blue);
      border-block-end-color: var(--dasy-blue);
      background: var(--dasy-paper-alt);
    }
  }

  @media (min-width: 64rem) {
    .wp-block-group.is-style-dasy-module-roadmap,
    .wp-block-group.dasy-module-roadmap {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

/* WordPress's unlayered flow-layout margins also apply to Group blocks used
   as grid children. Let each shared grid own its outer rhythm and reset its
   direct children so the second and later cards align with the first. */
.wp-block-group:is(
  .is-style-dasy-card-grid,
  .dasy-card-grid,
  .is-style-dasy-audience-grid,
  .dasy-audience-grid,
  .is-style-dasy-module-roadmap,
  .dasy-module-roadmap
) {
  margin-block: var(--dasy-pad-y) calc(var(--dasy-pad-y) * 2);
}

.wp-block-group:is(
  .is-style-dasy-card-grid,
  .dasy-card-grid,
  .is-style-dasy-audience-grid,
  .dasy-audience-grid,
  .is-style-dasy-module-roadmap,
  .dasy-module-roadmap
) > * {
  margin-block: 0 !important;
}