/* ================================================================
   components/cards.css  –  Compliance Checker
   Shared card primitives reused by the directory / index pages
   (companies, commodities, …). Class-based only, so it is safe to
   load globally; each page adds its own radius / layout / overflow.
     .cc-card    — surface + soft-lift hover + keyboard focus ring
     .cc-search  — pill search field with a leading icon
     .cc-empty   — centred "nothing matches" line
   ================================================================ */

/* Card surface. Pages set their own border-radius / display / overflow. */
.cc-card {
    background: var(--white);
    border: 1px solid var(--color-input-border);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--ae-black);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}
/* Soft lift on hover; a clear ring on keyboard focus (hover alone
   isn't an accessible focus cue). */
.cc-card:hover,
.cc-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}
.cc-card:focus-visible {
    outline: 2px solid var(--ae-darkblue);
    outline-offset: 2px;
}

/* Pill search field + leading icon. Pages set width / flex / margin. */
.cc-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--color-muted);
    transition: border-color var(--transition-base);
}
.cc-search:focus-within { border-color: var(--ae-darkblue); }
.cc-search > i { font-size: 13px; flex-shrink: 0; }
.cc-search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-family: inherit; font-size: 14px; color: var(--ae-black);
}
.cc-search input::placeholder { color: var(--color-muted); }

/* Centred empty-state line (no results). */
.cc-empty {
    text-align: center;
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    padding: var(--space-2xl) 0;
}