/*
 * Minimal shared shadow-root reset, prepended once to the bundled
 * `ds.css` every component links to (see `scripts/build-ds-css.mjs` in
 * src). The design-system skill requires a single global reset
 * (`global.css`), but that is light-DOM only and cannot reach into a
 * shadow root. This is the shadow-DOM equivalent: box-sizing plus a
 * token-driven focus ring.
 *
 * Focus-ring color on inverse surfaces is not handled with `:host-context`
 * here: `ds-section[data-surface="inverse"]` re-points the
 * `--elvaio-color-focus` custom property for its whole subtree, and every
 * component (light or shadow DOM) that reads that token for its focus ring
 * inherits the override automatically, because custom properties inherit
 * through shadow boundaries.
 */
:host {
  box-sizing: border-box;
}

:host *,
:host *::before,
:host *::after {
  box-sizing: border-box;
}

:host(:focus-visible) {
  outline: var(--elvaio-focus-width) solid var(--elvaio-color-focus);
  outline-offset: 2px;
  border-radius: var(--elvaio-radius-field);
}


:host {
  display: block;
}

:host([data-surface='inverse']) {
  --elvaio-color-focus: var(--elvaio-color-focus-on-inverse);
  --elvaio-color-accent-text: var(--elvaio-color-accent-text-on-inverse);
  --elvaio-color-accent-text-large: var(--elvaio-color-accent-text-on-inverse);
}

.callout {
  position: relative;
  border-radius: var(--elvaio-radius-band-top);
}

.brand {
  background: var(--elvaio-color-accent);
  color: var(--elvaio-color-on-accent);
  /* The generic muted-text token (gray-700) doesn't have enough contrast
     against gold (2.5:1, needs 4.5:1) — same category of issue as the
     inverse-surface overrides above, just for a mid-tone background
     instead of a dark one. Brown reads clearly on gold. */
  --elvaio-color-text-muted: var(--elvaio-color-text-muted-on-accent);
}

.inverse {
  background: var(--elvaio-color-band-inverse);
  color: var(--elvaio-color-text-inverse);
}

.body {
  display: grid;
  gap: var(--elvaio-space-06);
  padding: clamp(2.25rem, 6vw, 5rem) clamp(1.75rem, 6vw, 5rem) clamp(1.75rem, 4vw, 3rem);
}

.tag:empty,
.copy:empty,
.aside:empty,
.actions:empty {
  display: none;
}

/* Overlaid on the card's top border (half in, half out), not stacked
   inline above the title like a normal grid row — `position: absolute`
   pulls it out of `.body`'s flow entirely, so `left` repeats `.body`'s own
   padding-inline clamp to keep it in the same horizontal alignment as the
   title underneath it. */
.tag {
  position: absolute;
  top: 0;
  left: clamp(1.75rem, 6vw, 5rem);
  transform: translateY(-50%);
  z-index: 1;
}

/* `slot="actions"` is a single slotted wrapper span around however many
   `ds-button`s the caller passes — without this, the host only sees one
   node and has no way to space the buttons it contains. */
.actions ::slotted(*) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--elvaio-space-03);
}

.tag ::slotted(*) {
  display: inline-flex;
  align-items: center;
  background: var(--elvaio-color-accent);
  color: var(--elvaio-color-on-accent);
  font-family: var(--elvaio-font-body);
  font-weight: var(--elvaio-font-weight-medium);
  font-size: var(--elvaio-font-size-label);
  padding: var(--elvaio-space-01) var(--elvaio-space-02);
  border-radius: var(--elvaio-radius-pill);
}

.title {
  margin: 0;
  max-width: 11ch;
  font-size: var(--elvaio-font-size-title-cta);
  line-height: 0.95;
}

/* The brand CTA block's title is the project's largest display size; the
   inverse AI-teaser card is a regular section heading, much smaller. */
:host([data-surface='inverse']) .title {
  font-size: var(--elvaio-font-size-heading);
  line-height: var(--elvaio-line-height-title);
}

/* `.callout` no longer clips (the tag above needs to overflow its top
   edge), so the bottom pattern band clips to the card's own bottom
   corners here instead, matching `.callout`'s radius. `padding-bottom`
   keeps the wave graphic from sitting flush against the card's bottom
   edge — it's transparent, so the card's own background shows through
   as the gap. */
.pattern {
  border-radius: 0 0 var(--elvaio-radius-band-top) var(--elvaio-radius-band-top);
  overflow: hidden;
  padding-bottom: clamp(1rem, 2vw, 2rem);
}

.pattern ::slotted(*) {
  display: block;
}

@media ((min-width: 62.5rem)) {
  .body {
    /* `.title`/`.copy` always span the full width on their own row;
       `.aside`/`.actions` share the final row. Explicit placement, not
       left to default auto-placement: with several independent grid items
       and 2 columns, auto-placement fills cells left-to-right regardless
       of intended grouping, which squeezed the heading into the narrow
       second column and overflowed it on top of the copy text. */
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .title,
  .copy {
    grid-column: 1 / -1;
  }

  .aside {
    grid-column: 1;
    align-self: end;
  }

  .actions {
    grid-column: 2;
    align-self: end;
    justify-self: end;
  }

  /* Inverse (AI-teaser) uses a different arrangement entirely: tag/title/
     copy/actions stack in one column, the checklist is a full-height
     sidebar beside them — not the brand block's "two rows, bottom row
     split" layout above. Row/column gap set separately: a single `gap`
     shorthand would also insert the large column gutter *between* the
     stacked tag/title/copy/actions rows, blowing the stack apart. */
  :host([data-surface='inverse']) .body {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    /* Explicit row tracks, not just implicit ones: `.aside`'s
       `grid-row: 1 / -1` below needs a real last line to span to. With no
       `grid-template-rows` at all, `-1` resolves against an explicit grid
       of zero row tracks, collapsing the span to row 1 alone — which then
       grows to fit the aside's full height while title/copy/actions stack
       below it, as a visible gap under the tag. Only 3 tracks: `.tag` is
       `position: absolute` (overlaid on the card's top border, see
       above), so it no longer flows into this grid at all. */
    grid-template-rows: repeat(3, auto);
    align-items: center;
    column-gap: var(--elvaio-space-09);
    row-gap: var(--elvaio-space-05);
  }

  :host([data-surface='inverse']) .title,
  :host([data-surface='inverse']) .copy,
  :host([data-surface='inverse']) .actions {
    grid-column: 1;
  }

  :host([data-surface='inverse']) .actions {
    justify-self: start;
  }

  :host([data-surface='inverse']) .aside {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
  }
}