import Badge from "./Badge.wrn"

component Hero {
  props {
    eyebrow: string = ""
    eyebrowIcon: string = ""
    icon: string = ""
    title: string = "Build something remarkable"
    highlight: string = ""
    description: string = ""

    align: string = "left"
    size: string = "default"
    color: string = "primary"
    variant: string = "default"
    layout: string = "split"
    visualPosition: string = "right"
    visualStyle: string = "plain"
    showDecorations: boolean = true
    fullBleed: boolean = true

    visualEyebrow: string = ""
    visualTitle: string = ""
    visualDescription: string = ""
    visualIcon: string = ""
    visualImage: string = ""
    visualAlt: string = ""
    visualItems: unknown[] = []

    primaryLabel: string = ""
    primaryHref: string = ""
    primaryIcon: string = ""
    primaryTarget: string = ""

    secondaryLabel: string = ""
    secondaryHref: string = ""
    secondaryIcon: string = ""
    secondaryTarget: string = ""

    tertiaryLabel: string = ""
    tertiaryHref: string = ""
    tertiaryIcon: string = ""
    tertiaryTarget: string = ""

    badges: unknown[] = []
    trustItems: unknown[] = []
    maxWidth: string = "xl"
    class: string = ""
  }

  view {
    <section
      {...attrs}
      data-ui-component="Hero"
      data-size='{size}'
      data-color='{color}'
      data-variant='{variant}'
      data-layout='{layout}'
      data-align='{align}'
      data-visual-position='{visualPosition}'
      data-visual-style='{visualStyle}'
      data-max-width='{maxWidth}'
      data-full-bleed='{fullBleed}'
      aria-label='{title}'
      class='wrn-hero {class}'
    >
        {#if showDecorations}
          <div class="wrn-hero__decorations" aria-hidden="true">
            <span class="wrn-hero__glow wrn-hero__glow--one"></span>
            <span class="wrn-hero__glow wrn-hero__glow--two"></span>
            <span class="wrn-hero__grid-pattern"></span>
          </div>
        {/if}

        <div class="wrn-hero__inner">
          <div class="wrn-hero__layout">
            <div class="wrn-hero__content">
              <slot name="eyebrow"></slot>

              {#if eyebrow}
                <div class="wrn-hero__eyebrow">
                  {#if eyebrowIcon}
                    <span class='wrn-hero__eyebrow-icon {eyebrowIcon}' aria-hidden="true"></span>
                  {:else}
                    <span class="wrn-hero__eyebrow-dot" aria-hidden="true"></span>
                  {/if}
                  <span>{eyebrow}</span>
                </div>
              {/if}

              <div class="wrn-hero__heading-row">
                {#if icon}
                  <div class="wrn-hero__icon" aria-hidden="true">
                    <span class='{icon}'></span>
                  </div>
                {/if}

                <div class="wrn-hero__heading-copy">
                  <h1 class="wrn-hero__title">
                    <span>{title}</span>
                    {#if highlight}
                      <span class="wrn-hero__highlight">{highlight}</span>
                    {/if}
                  </h1>

                  {#if description}
                    <p class="wrn-hero__description">{description}</p>
                  {/if}
                </div>
              </div>

              {#if badges.length > 0}
                <div class="wrn-hero__badges">
                  {#each badges as badge}
                    <Badge
                      label='{badge.label || badge.title || badge}'
                      icon='{badge.icon || ""}'
                      color='{badge.color || color}'
                      variant='{badge.variant || "soft"}'
                      size='{badge.size || "sm"}'
                    />
                  {/each}
                </div>
              {/if}

              <div class="wrn-hero__actions">
                {#if primaryLabel}
                  <a
                    href='{primaryHref || "#"}'
                    target='{primaryTarget}'
                    rel='{primaryTarget === "_blank" ? "noopener noreferrer" : ""}'
                    class="wrn-hero__action wrn-hero__action--primary"
                  >
                    <span>{primaryLabel}</span>
                    {#if primaryIcon}
                      <span class='wrn-hero__action-icon {primaryIcon}' aria-hidden="true"></span>
                    {/if}
                  </a>
                {/if}

                {#if secondaryLabel}
                  <a
                    href='{secondaryHref || "#"}'
                    target='{secondaryTarget}'
                    rel='{secondaryTarget === "_blank" ? "noopener noreferrer" : ""}'
                    class="wrn-hero__action wrn-hero__action--secondary"
                  >
                    {#if secondaryIcon}
                      <span class='wrn-hero__action-icon {secondaryIcon}' aria-hidden="true"></span>
                    {/if}
                    <span>{secondaryLabel}</span>
                  </a>
                {/if}

                {#if tertiaryLabel}
                  <a
                    href='{tertiaryHref || "#"}'
                    target='{tertiaryTarget}'
                    rel='{tertiaryTarget === "_blank" ? "noopener noreferrer" : ""}'
                    class="wrn-hero__action wrn-hero__action--tertiary"
                  >
                    <span>{tertiaryLabel}</span>
                    {#if tertiaryIcon}
                      <span class='wrn-hero__action-icon {tertiaryIcon}' aria-hidden="true"></span>
                    {/if}
                  </a>
                {/if}

                <slot name="actions"></slot>
              </div>

              {#if trustItems.length > 0}
                <div class="wrn-hero__trust" aria-label="Highlights">
                  {#each trustItems as item}
                    <span class="wrn-hero__trust-item">
                      <span
                        class='wrn-hero__trust-icon {(item.icon || "icon-[lucide--check-circle-2]")}'
                        aria-hidden="true"
                      ></span>
                      <span>{item.label || item.title || item}</span>
                    </span>
                  {/each}
                </div>
              {/if}

              <slot name="trust"></slot>
              <slot></slot>
            </div>

            <div class="wrn-hero__visual">
              <slot name="visual"></slot>

              {#if visualImage || visualTitle || visualDescription || visualItems.length > 0}
                <div class="wrn-hero__visual-card">
                  {#if visualImage}
                    <div class="wrn-hero__visual-media">
                      <img
                        src='{visualImage}'
                        alt='{visualAlt || visualTitle || title}'
                        class="wrn-hero__visual-image"
                      />
                    </div>
                  {/if}

                  {#if visualIcon || visualEyebrow || visualTitle || visualDescription}
                    <div class="wrn-hero__visual-header">
                      {#if visualIcon}
                        <span class="wrn-hero__visual-icon" aria-hidden="true">
                          <span class='{visualIcon}'></span>
                        </span>
                      {/if}

                      <div class="wrn-hero__visual-copy">
                        {#if visualEyebrow}
                          <p class="wrn-hero__visual-eyebrow">{visualEyebrow}</p>
                        {/if}

                        {#if visualTitle}
                          <h2 class="wrn-hero__visual-title">{visualTitle}</h2>
                        {/if}

                        {#if visualDescription}
                          <p class="wrn-hero__visual-description">{visualDescription}</p>
                        {/if}
                      </div>
                    </div>
                  {/if}

                  {#if visualItems.length > 0}
                    <div class="wrn-hero__visual-items">
                      {#each visualItems as item}
                        <div class="wrn-hero__visual-item">
                          {#if item.icon}
                            <span class='wrn-hero__visual-item-icon {item.icon}' aria-hidden="true"></span>
                          {/if}

                          <div class="wrn-hero__visual-item-copy">
                            <span class="wrn-hero__visual-item-label">{item.label || item.title}</span>
                            {#if item.description}
                              <span class="wrn-hero__visual-item-description">{item.description}</span>
                            {/if}
                          </div>

                          {#if item.value}
                            <strong class="wrn-hero__visual-item-value">{item.value}</strong>
                          {/if}
                        </div>
                      {/each}
                    </div>
                  {/if}
                </div>
              {/if}
            </div>
          </div>

          <div class="wrn-hero__footer">
            <slot name="footer"></slot>
          </div>
      </div>
    </section>
  }

  style {
    .wrn-hero {
      --wrn-hero-accent: var(--wrn-color-primary);
      --wrn-hero-accent-soft: var(--wrn-color-primary-soft);
      --wrn-hero-accent-muted: var(--wrn-color-primary-muted);
      --wrn-hero-contrast: var(--wrn-color-primary-contrast);

      position: relative;
      isolation: isolate;
      overflow: hidden;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      color: var(--wrn-color-text);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 2rem;
    }

    .wrn-hero[data-full-bleed="true"] {
      width: 100%;
      max-width: 100%;
      margin-inline: 0;
      border-right-width: 0;
      border-left-width: 0;
      border-radius: 0;
    }

    .wrn-hero[data-color="secondary"] {
      --wrn-hero-accent: var(--wrn-color-secondary);
      --wrn-hero-accent-soft: var(--wrn-color-secondary-soft, var(--wrn-color-primary-soft));
      --wrn-hero-accent-muted: var(--wrn-color-secondary-muted, var(--wrn-color-primary-muted));
      --wrn-hero-contrast: var(--wrn-color-secondary-contrast, var(--wrn-color-primary-contrast));
    }

    .wrn-hero[data-color="success"] {
      --wrn-hero-accent: var(--wrn-color-success);
      --wrn-hero-accent-soft: var(--wrn-color-success-soft, var(--wrn-color-primary-soft));
      --wrn-hero-accent-muted: var(--wrn-color-success-muted, var(--wrn-color-primary-muted));
      --wrn-hero-contrast: var(--wrn-color-success-contrast, var(--wrn-color-primary-contrast));
    }

    .wrn-hero[data-color="info"] {
      --wrn-hero-accent: var(--wrn-color-info);
      --wrn-hero-accent-soft: var(--wrn-color-info-soft, var(--wrn-color-primary-soft));
      --wrn-hero-accent-muted: var(--wrn-color-info-muted, var(--wrn-color-primary-muted));
      --wrn-hero-contrast: var(--wrn-color-info-contrast, var(--wrn-color-primary-contrast));
    }

    .wrn-hero[data-color="warning"] {
      --wrn-hero-accent: var(--wrn-color-warning);
      --wrn-hero-accent-soft: var(--wrn-color-warning-soft, var(--wrn-color-primary-soft));
      --wrn-hero-accent-muted: var(--wrn-color-warning-muted, var(--wrn-color-primary-muted));
      --wrn-hero-contrast: var(--wrn-color-warning-contrast, var(--wrn-color-primary-contrast));
    }

    .wrn-hero[data-color="danger"] {
      --wrn-hero-accent: var(--wrn-color-danger);
      --wrn-hero-accent-soft: var(--wrn-color-danger-soft, var(--wrn-color-primary-soft));
      --wrn-hero-accent-muted: var(--wrn-color-danger-muted, var(--wrn-color-primary-muted));
      --wrn-hero-contrast: var(--wrn-color-danger-contrast, var(--wrn-color-primary-contrast));
    }

    .wrn-hero[data-variant="soft"] {
      background:
        linear-gradient(135deg, var(--wrn-hero-accent-soft), transparent 58%),
        var(--wrn-color-surface-raised);
      border-color: var(--wrn-color-border);
    }

    .wrn-hero[data-variant="raised"] {
      background: var(--wrn-color-surface-raised);
      border-color: var(--wrn-color-border);
      box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.14);
    }

    .wrn-hero[data-variant="outline"] {
      background: var(--wrn-color-surface);
      border-color: color-mix(in srgb, var(--wrn-hero-accent) 35%, var(--wrn-color-border));
    }

    .wrn-hero[data-variant="gradient"] {
      background:
        radial-gradient(circle at 10% 15%, var(--wrn-hero-accent-muted), transparent 32%),
        radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--wrn-color-secondary) 24%, transparent), transparent 34%),
        linear-gradient(145deg, var(--wrn-color-surface-raised), var(--wrn-color-surface));
      border-color: color-mix(in srgb, var(--wrn-hero-accent) 24%, var(--wrn-color-border));
    }

    .wrn-hero[data-variant="solid"] {
      color: var(--wrn-hero-contrast);
      background:
        radial-gradient(circle at 85% 15%, rgb(255 255 255 / 0.16), transparent 30%),
        linear-gradient(135deg, var(--wrn-hero-accent), color-mix(in srgb, var(--wrn-hero-accent) 76%, black));
      border-color: transparent;
    }

    .wrn-hero[data-variant="minimal"] {
      border-radius: 0;
    }

    .wrn-hero__decorations {
      position: absolute;
      inset: 0;
      z-index: -1;
      overflow: hidden;
      pointer-events: none;
    }

    .wrn-hero__glow {
      position: absolute;
      width: 22rem;
      height: 22rem;
      border-radius: 999px;
      background: var(--wrn-hero-accent-muted);
      filter: blur(5rem);
      opacity: 0.42;
    }

    .wrn-hero__glow--one {
      top: -12rem;
      right: -8rem;
    }

    .wrn-hero__glow--two {
      bottom: -15rem;
      left: -10rem;
      opacity: 0.22;
    }

    .wrn-hero__grid-pattern {
      position: absolute;
      inset: 0;
      opacity: 0.035;
      background-image:
        linear-gradient(var(--wrn-color-text) 1px, transparent 1px),
        linear-gradient(90deg, var(--wrn-color-text) 1px, transparent 1px);
      background-size: 2.5rem 2.5rem;
      mask-image: linear-gradient(to bottom, black, transparent 84%);
    }

    .wrn-hero__inner {
      width: 100%;
      max-width: 80rem;
      margin-inline: auto;
      padding: 3rem 1.25rem;
      box-sizing: border-box;
    }

    .wrn-hero[data-max-width="compact"] .wrn-hero__inner,
    .wrn-hero[data-max-width="sm"] .wrn-hero__inner {
      max-width: 64rem;
    }

    .wrn-hero[data-max-width="default"] .wrn-hero__inner,
    .wrn-hero[data-max-width="lg"] .wrn-hero__inner {
      max-width: 72rem;
    }

    .wrn-hero[data-max-width="wide"] .wrn-hero__inner,
    .wrn-hero[data-max-width="xl"] .wrn-hero__inner {
      max-width: 80rem;
    }

    .wrn-hero[data-max-width="2xl"] .wrn-hero__inner {
      max-width: 90rem;
    }

    .wrn-hero[data-max-width="full"] .wrn-hero__inner {
      max-width: none;
    }

    .wrn-hero[data-size="compact"] .wrn-hero__inner,
    .wrn-hero[data-size="sm"] .wrn-hero__inner {
      padding-block: 2rem;
    }

    .wrn-hero[data-size="lg"] .wrn-hero__inner,
    .wrn-hero[data-size="large"] .wrn-hero__inner {
      padding-block: 4rem;
    }

    .wrn-hero[data-size="xl"] .wrn-hero__inner {
      padding-block: 5rem;
    }

    .wrn-hero__layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: 2.5rem;
    }

    .wrn-hero__content {
      min-width: 0;
      max-width: 46rem;
    }

    .wrn-hero[data-align="center"] .wrn-hero__content {
      margin-inline: auto;
      text-align: center;
    }

    .wrn-hero[data-align="right"] .wrn-hero__content {
      margin-left: auto;
      text-align: right;
    }

    .wrn-hero__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      width: fit-content;
      margin-bottom: 1.4rem;
      padding: 0.55rem 0.9rem;
      color: var(--wrn-hero-accent);
      font-size: 0.75rem;
      font-weight: 600;
      line-height: 1;
      letter-spacing: 0.04em;
      background: var(--wrn-hero-accent-soft);
      border: 1px solid color-mix(in srgb, var(--wrn-hero-accent) 24%, transparent);
      border-radius: 999px;
    }

    .wrn-hero[data-align="center"] .wrn-hero__eyebrow {
      margin-inline: auto;
    }

    .wrn-hero[data-align="right"] .wrn-hero__eyebrow {
      margin-left: auto;
    }

    .wrn-hero__eyebrow-dot {
      width: 0.45rem;
      height: 0.45rem;
      flex: 0 0 auto;
      background: currentColor;
      border-radius: 999px;
      box-shadow: 0 0 0 0.25rem color-mix(in srgb, currentColor 12%, transparent);
    }

    .wrn-hero__eyebrow-icon {
      width: 0.9rem;
      height: 0.9rem;
      flex: 0 0 auto;
    }

    .wrn-hero__heading-row {
      display: flex;
      align-items: flex-start;
      gap: 1.25rem;
    }

    .wrn-hero[data-align="center"] .wrn-hero__heading-row {
      justify-content: center;
    }

    .wrn-hero[data-align="right"] .wrn-hero__heading-row {
      justify-content: flex-end;
    }

    .wrn-hero__heading-copy {
      min-width: 0;
    }

    .wrn-hero__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3.5rem;
      height: 3.5rem;
      flex: 0 0 auto;
      color: var(--wrn-hero-accent);
      font-size: 1.5rem;
      background: var(--wrn-hero-accent-soft);
      border-radius: 1.1rem;
    }

    .wrn-hero__title {
      max-width: 18ch;
      margin: 0;
      color: var(--wrn-color-text);
      font-size: clamp(2.35rem, 6vw, 4.8rem);
      font-weight: 650;
      line-height: 1.02;
      letter-spacing: -0.045em;
      text-wrap: balance;
    }

    .wrn-hero[data-size="compact"] .wrn-hero__title,
    .wrn-hero[data-size="sm"] .wrn-hero__title {
      font-size: clamp(2rem, 5vw, 3.4rem);
    }

    .wrn-hero[data-size="lg"] .wrn-hero__title,
    .wrn-hero[data-size="large"] .wrn-hero__title {
      font-size: clamp(2.8rem, 7vw, 5.6rem);
    }

    .wrn-hero[data-size="xl"] .wrn-hero__title {
      font-size: clamp(3.1rem, 8vw, 6.4rem);
    }

    .wrn-hero[data-variant="solid"] .wrn-hero__title,
    .wrn-hero[data-variant="solid"] .wrn-hero__description,
    .wrn-hero[data-variant="solid"] .wrn-hero__trust {
      color: var(--wrn-hero-contrast);
    }

    .wrn-hero__highlight {
      display: block;
      color: var(--wrn-hero-accent);
      background: linear-gradient(90deg, var(--wrn-hero-accent), var(--wrn-color-secondary));
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .wrn-hero[data-variant="solid"] .wrn-hero__highlight {
      color: inherit;
      background: none;
      -webkit-text-fill-color: currentColor;
      opacity: 0.9;
    }

    .wrn-hero__description {
      max-width: 42rem;
      margin: 1.5rem 0 0;
      color: var(--wrn-color-text-muted);
      font-size: 1.05rem;
      line-height: 1.8;
      text-wrap: pretty;
    }

    .wrn-hero[data-align="center"] .wrn-hero__title,
    .wrn-hero[data-align="center"] .wrn-hero__description {
      margin-inline: auto;
    }

    .wrn-hero[data-align="right"] .wrn-hero__title,
    .wrn-hero[data-align="right"] .wrn-hero__description {
      margin-left: auto;
    }

    .wrn-hero__badges,
    .wrn-hero__actions,
    .wrn-hero__trust {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .wrn-hero__badges {
      gap: 0.5rem;
      margin-top: 1.5rem;
    }

    .wrn-hero__actions {
      gap: 0.75rem;
      margin-top: 2rem;
    }

    .wrn-hero__actions:empty {
      display: none;
    }

    .wrn-hero__action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      min-height: 3rem;
      padding: 0.75rem 1.15rem;
      font-size: 0.9rem;
      font-weight: 650;
      line-height: 1.2;
      text-decoration: none;
      border: 1px solid transparent;
      border-radius: 0.85rem;
      transition:
        transform 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
    }

    .wrn-hero__action:hover {
      transform: translateY(-2px);
    }

    .wrn-hero__action:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--wrn-hero-accent) 30%, transparent);
      outline-offset: 3px;
    }

    .wrn-hero__action--primary {
      color: var(--wrn-hero-contrast);
      background: var(--wrn-hero-accent);
      box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--wrn-hero-accent) 24%, transparent);
    }

    .wrn-hero__action--primary:hover {
      box-shadow: 0 1rem 2.4rem color-mix(in srgb, var(--wrn-hero-accent) 34%, transparent);
    }

    .wrn-hero__action--secondary {
      color: var(--wrn-hero-accent);
      background: color-mix(in srgb, var(--wrn-color-surface-raised) 76%, transparent);
      border-color: color-mix(in srgb, var(--wrn-hero-accent) 45%, var(--wrn-color-border));
    }

    .wrn-hero__action--secondary:hover {
      background: var(--wrn-hero-accent-soft);
    }

    .wrn-hero__action--tertiary {
      color: var(--wrn-color-text-muted);
      background: transparent;
    }

    .wrn-hero__action--tertiary:hover {
      color: var(--wrn-hero-accent);
      background: var(--wrn-hero-accent-soft);
    }

    .wrn-hero__action-icon {
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
    }

    .wrn-hero__trust {
      gap: 0.75rem 1.25rem;
      margin-top: 1.75rem;
      color: var(--wrn-color-text-muted);
      font-size: 0.82rem;
      line-height: 1.5;
    }

    .wrn-hero__trust-item {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
    }

    .wrn-hero__trust-icon {
      width: 1rem;
      height: 1rem;
      flex: 0 0 auto;
      color: var(--wrn-hero-accent);
    }

    .wrn-hero[data-align="center"] .wrn-hero__badges,
    .wrn-hero[data-align="center"] .wrn-hero__actions,
    .wrn-hero[data-align="center"] .wrn-hero__trust {
      justify-content: center;
    }

    .wrn-hero[data-align="right"] .wrn-hero__badges,
    .wrn-hero[data-align="right"] .wrn-hero__actions,
    .wrn-hero[data-align="right"] .wrn-hero__trust {
      justify-content: flex-end;
    }

    .wrn-hero__visual {
      position: relative;
      min-width: 0;
      width: 100%;
    }

    .wrn-hero__visual:not(:has(> *)) {
      display: none;
    }

    .wrn-hero__layout:not(:has(.wrn-hero__visual > *)) {
      grid-template-columns: minmax(0, 1fr);
    }

    .wrn-hero[data-visual-style="card"] .wrn-hero__visual {
      padding: 0.75rem;
      background: color-mix(in srgb, var(--wrn-color-surface-raised) 88%, transparent);
      border: 1px solid var(--wrn-color-border);
      border-radius: 1.75rem;
      box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.14);
    }

    .wrn-hero[data-visual-style="soft"] .wrn-hero__visual {
      padding: 1.25rem;
      background: var(--wrn-hero-accent-soft);
      border-radius: 1.75rem;
    }

    .wrn-hero__visual > * {
      width: 100%;
      max-width: 100%;
    }

    .wrn-hero__visual-card {
      width: 100%;
      overflow: hidden;
      padding: 1.25rem;
      color: var(--wrn-color-text);
      background: color-mix(in srgb, var(--wrn-color-surface-raised) 92%, transparent);
      border: 1px solid color-mix(in srgb, var(--wrn-hero-accent) 18%, var(--wrn-color-border));
      border-radius: 1.75rem;
      box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.14);
      backdrop-filter: blur(1rem);
    }

    .wrn-hero__visual-media {
      overflow: hidden;
      margin: -0.5rem -0.5rem 1.25rem;
      border-radius: 1.25rem;
    }

    .wrn-hero__visual-image {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 10;
      object-fit: cover;
    }

    .wrn-hero__visual-header {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }

    .wrn-hero__visual-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 3rem;
      height: 3rem;
      flex: 0 0 auto;
      color: var(--wrn-hero-accent);
      background: var(--wrn-hero-accent-soft);
      border-radius: 1rem;
    }

    .wrn-hero__visual-icon > span {
      width: 1.35rem;
      height: 1.35rem;
    }

    .wrn-hero__visual-copy {
      min-width: 0;
    }

    .wrn-hero__visual-eyebrow {
      margin: 0 0 0.35rem;
      color: var(--wrn-hero-accent);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .wrn-hero__visual-title {
      margin: 0;
      color: var(--wrn-color-text);
      font-size: 1.35rem;
      font-weight: 650;
      line-height: 1.25;
    }

    .wrn-hero__visual-description {
      margin: 0.55rem 0 0;
      color: var(--wrn-color-text-muted);
      font-size: 0.9rem;
      line-height: 1.65;
    }

    .wrn-hero__visual-items {
      display: grid;
      gap: 0.75rem;
      margin-top: 1.25rem;
    }

    .wrn-hero__visual-item {
      display: flex;
      align-items: center;
      gap: 0.8rem;
      min-width: 0;
      padding: 0.9rem 1rem;
      background: color-mix(in srgb, var(--wrn-color-surface) 82%, transparent);
      border: 1px solid var(--wrn-color-border);
      border-radius: 1rem;
    }

    .wrn-hero__visual-item-icon {
      width: 1.1rem;
      height: 1.1rem;
      flex: 0 0 auto;
      color: var(--wrn-hero-accent);
    }

    .wrn-hero__visual-item-copy {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      min-width: 0;
    }

    .wrn-hero__visual-item-label {
      color: var(--wrn-color-text);
      font-size: 0.88rem;
      font-weight: 600;
      line-height: 1.35;
    }

    .wrn-hero__visual-item-description {
      margin-top: 0.15rem;
      color: var(--wrn-color-text-muted);
      font-size: 0.76rem;
      line-height: 1.4;
    }

    .wrn-hero__visual-item-value {
      flex: 0 0 auto;
      color: var(--wrn-hero-accent);
      font-size: 0.9rem;
      font-weight: 700;
    }

    .wrn-hero[data-variant="solid"] .wrn-hero__visual-card,
    .wrn-hero[data-variant="solid"] .wrn-hero__visual-title,
    .wrn-hero[data-variant="solid"] .wrn-hero__visual-item-label {
      color: var(--wrn-hero-contrast);
    }

    .wrn-hero[data-variant="solid"] .wrn-hero__visual-description,
    .wrn-hero[data-variant="solid"] .wrn-hero__visual-item-description {
      color: color-mix(in srgb, var(--wrn-hero-contrast) 74%, transparent);
    }

    .wrn-hero__footer:not(:has(> *)) {
      display: none;
    }

    .wrn-hero__footer {
      margin-top: 2rem;
      padding-top: 1.5rem;
      border-top: 1px solid var(--wrn-color-border);
    }

    @media (min-width: 640px) {
      .wrn-hero__inner {
        padding-inline: 2rem;
      }
    }

    @media (min-width: 768px) {
      .wrn-hero__actions {
        gap: 0.9rem;
      }

      .wrn-hero__action {
        padding-inline: 1.35rem;
      }
    }

    @media (min-width: 1024px) {
      .wrn-hero__inner {
        padding-inline: 3rem;
      }

      .wrn-hero[data-layout="split"] .wrn-hero__layout {
        grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
        gap: 4rem;
      }

      .wrn-hero[data-layout="stacked"] .wrn-hero__layout,
      .wrn-hero[data-layout="content"] .wrn-hero__layout {
        grid-template-columns: minmax(0, 1fr);
      }

      .wrn-hero[data-layout="stacked"] .wrn-hero__content {
        max-width: 58rem;
      }

      .wrn-hero[data-layout="stacked"] .wrn-hero__visual {
        max-width: 68rem;
      }

      .wrn-hero[data-layout="content"] .wrn-hero__visual {
        display: none;
      }

      .wrn-hero[data-visual-position="left"] .wrn-hero__visual {
        grid-column: 1;
        grid-row: 1;
      }

      .wrn-hero[data-visual-position="left"] .wrn-hero__content {
        grid-column: 2;
        grid-row: 1;
      }

      .wrn-hero[data-layout="stacked"][data-visual-position="left"] .wrn-hero__visual,
      .wrn-hero[data-layout="stacked"][data-visual-position="left"] .wrn-hero__content {
        grid-column: 1;
      }

      .wrn-hero[data-layout="stacked"][data-visual-position="left"] .wrn-hero__visual {
        grid-row: 1;
      }

      .wrn-hero[data-layout="stacked"][data-visual-position="left"] .wrn-hero__content {
        grid-row: 2;
      }
    }

    @media (max-width: 639px) {
      .wrn-hero:not([data-full-bleed="true"]) {
        border-radius: 1.25rem;
      }

      .wrn-hero__inner {
        padding: 2.25rem 1rem;
      }

      .wrn-hero__heading-row {
        gap: 0.85rem;
      }

      .wrn-hero__icon {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.2rem;
        border-radius: 0.85rem;
      }

      .wrn-hero__description {
        font-size: 0.95rem;
        line-height: 1.7;
      }

      .wrn-hero__actions {
        align-items: stretch;
      }

      .wrn-hero__action {
        width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .wrn-hero__action {
        transition: none;
      }

      .wrn-hero__action:hover {
        transform: none;
      }
    }
  }
}