@layer components {
  .sl-assemblymen {
    @apply space-y-6;
  }

  .sl-assemblymen__hero {
    @apply grid gap-5 rounded-[24px] border p-5 md:p-7 xl:grid-cols-[minmax(0,1fr)_280px];
    border-color: rgba(202, 217, 235, 0.65);
    background: white;
  }

  .sl-assemblymen__hero-copy {
    @apply min-w-0;
  }

  .sl-assemblymen__eyebrow {
    @apply mb-2 text-[12px] font-extrabold uppercase tracking-[0.22em] text-[var(--sl-primary)];
  }

  .sl-assemblymen__hero h1 {
    @apply m-0 text-[30px] font-black leading-[1.08] text-[#1f2c46] md:text-[40px];
  }

  .sl-assemblymen__lede {
    @apply mt-3 max-w-[720px] text-[15px] leading-7 text-[#5d6880];
  }

  .sl-assemblymen__hero-aside {
    @apply flex flex-col justify-between gap-4 rounded-[20px] border border-[rgba(255,255,255,0.8)] bg-white/80 p-4;
    box-shadow: 0 18px 34px rgba(83, 100, 136, 0.08);
  }

  .sl-assemblymen__hero-metric span {
    @apply block text-[12px] font-bold uppercase tracking-[0.14em] text-[#7a86a1];
  }

  .sl-assemblymen__hero-metric strong {
    @apply mt-3 block text-[34px] font-black leading-none text-[#24324b];
  }

  .sl-assemblymen__chips {
    @apply flex flex-wrap gap-2;
  }

  .sl-assemblymen__chip {
    @apply inline-flex items-center rounded-full bg-[var(--sl-primary-soft)] px-3 py-1.5 text-[12px] font-semibold text-[var(--sl-primary)];
  }

  .sl-assemblymen__grid {
    @apply grid gap-4;
  }

  .sl-assemblyman-card {
    @apply rounded-[22px] border bg-white p-5;
    border-color: rgba(202, 217, 235, 0.55);
    box-shadow: 0 16px 34px rgba(26, 63, 120, 0.08);
  }

  .sl-assemblyman-card__summary {
    @apply min-w-0;
  }

  .sl-assemblyman-card__head {
    @apply flex items-center gap-4;
  }

  .sl-assemblyman-card__avatar {
    @apply flex h-[76px] w-[76px] shrink-0 items-center justify-center overflow-hidden rounded-full bg-white text-[22px] font-extrabold uppercase text-[var(--sl-primary)];
  }

  .sl-assemblyman-card__avatar img {
    @apply h-[100px] w-[100px] object-contain rounded-full;
  }

  .sl-assemblyman-card__identity {
    @apply min-w-0;
  }

  .sl-assemblyman-card__identity h2 {
    @apply m-0 text-[21px] font-extrabold leading-tight text-[#24324b];
    overflow-wrap: anywhere;
  }

  .sl-assemblyman-card__identity p {
    @apply mt-2 mb-0 text-[14px] leading-6 text-[#6c7892];
    overflow-wrap: anywhere;
  }

  .sl-assemblyman-card__meta {
    @apply mt-5 flex flex-wrap gap-2;
  }

  .sl-assemblyman-card__badge {
    @apply inline-flex items-center rounded-full bg-[var(--sl-success-soft)] px-3 py-1.5 text-[12px] font-bold uppercase tracking-[0.08em] text-[#177a57];
  }

  .sl-assemblyman-card__badge.is-soft {
    @apply bg-[#f5f7fb] text-[#5d6880];
  }

  .sl-assemblyman-card__stats {
    @apply mt-5 grid gap-3 md:grid-cols-3;
  }

  .sl-assemblyman-card__stat {
    @apply rounded-[18px] border px-4 py-4;
    border-color: rgba(202, 217, 235, 0.55);
    background: linear-gradient(180deg, #fbfdff, #f4f9ff);
  }

  .sl-assemblyman-card__stat strong {
    @apply block text-[24px] font-black leading-none text-[#24324b];
  }

  .sl-assemblyman-card__stat span {
    @apply mt-2 block text-[11px] font-extrabold uppercase tracking-[0.08em] text-[#7b869c];
    overflow-wrap: anywhere;
  }

  .sl-assemblymen__empty {
    @apply rounded-[22px] border border-dashed border-[var(--sl-border)] bg-[#fbfcff] px-6 py-10 text-center;
    background: linear-gradient(180deg, #fbfdff, #f4f9ff);
  }

  .sl-assemblymen__empty h2 {
    @apply m-0 text-[22px] font-extrabold text-[#24324b];
  }

  .sl-assemblymen__empty p {
    @apply mt-3 mb-0 text-[15px] leading-7 text-[#6c7892];
  }

  @media (min-width: 1024px) {
    .sl-assemblyman-card {
      @apply grid items-center gap-6;
      grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
    }

    .sl-assemblyman-card__stats {
      @apply mt-0;
    }
  }

  @media (max-width: 767px) {
    .sl-assemblymen {
      @apply space-y-5;
    }

    .sl-assemblymen__hero {
      @apply rounded-[20px] p-4;
    }

    .sl-assemblymen__hero h1 {
      @apply text-[28px];
    }

    .sl-assemblymen__lede {
      @apply text-[14px] leading-6;
    }

    .sl-assemblymen__hero-metric strong {
      @apply text-[28px];
    }

    .sl-assemblyman-card {
      @apply rounded-[18px] p-4;
    }

    .sl-assemblyman-card__stats {
      @apply grid-cols-1 gap-2;
    }

    .sl-assemblyman-card__avatar {
      @apply h-[64px] w-[64px] rounded-[18px] text-[18px];
    }

    .sl-assemblyman-card__identity h2 {
      @apply text-[18px];
    }

    .sl-assemblyman-card__stat strong {
      @apply text-[20px];
    }
  }

  @media (max-width: 479px) {
    .sl-assemblymen__hero {
      @apply gap-4 p-3.5;
    }

    .sl-assemblymen__hero h1 {
      @apply text-[24px];
    }

    .sl-assemblymen__hero-aside {
      @apply p-3.5;
    }

    .sl-assemblyman-card {
      @apply p-3.5;
    }

    .sl-assemblyman-card__head {
      @apply flex-col items-start gap-3;
    }

    .sl-assemblyman-card__avatar {
      @apply h-[58px] w-[58px] rounded-[16px] text-[16px];
    }

    .sl-assemblyman-card__identity h2 {
      @apply text-[17px];
    }

    .sl-assemblyman-card__identity p {
      @apply text-[13px] leading-5;
    }
  }
}