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

    .sl-law-details__hero {
        background:
            linear-gradient(135deg, rgba(11, 126, 107, 0.12), rgba(255, 255, 255, 0.94) 58%),
            linear-gradient(180deg, rgba(77, 128, 208, 0.05), rgba(77, 128, 208, 0));
    }

    .sl-law-details__amendment {
        @apply grid gap-3 rounded-[18px] border border-[#dbe9e4] bg-[#f7fcfa] p-4 md:grid-cols-2;
    }

    .sl-law-details__amendment div {
        @apply min-w-0;
    }

    .sl-law-details__amendment strong {
        @apply block text-[12px] font-extrabold uppercase tracking-[0.14em] text-[#5f7d76];
    }

    .sl-law-details__amendment span {
        @apply mt-2 block text-[15px] font-semibold text-[#29443f];
    }

    .sl-law-details__processing-meta {
        @apply mt-3 flex flex-wrap gap-2;
    }

    .sl-law-details__processing-meta span {
        @apply inline-flex items-center rounded-full bg-[#eef5f1] px-3 py-1 text-[12px] font-semibold text-[#4f6660];
    }

    .sl-law-details__session-pill {
        @apply inline-flex items-center rounded-full bg-[#f5f7fb] px-3 py-1.5 text-[12px] font-bold uppercase tracking-[0.12em] text-[#78859f];
    }

    @media (max-width: 767px) {
        .sl-law-details__amendment {
            @apply p-3;
        }

        .sl-law-details__amendment span {
            @apply text-[14px] leading-6;
            overflow-wrap: anywhere;
        }

        .sl-law-details__processing-meta span,
        .sl-law-details__session-pill {
            @apply w-full justify-center text-center;
        }
    }
}