/*
 * AIE Solicitor Directory: listing card.
 *
 * The public firm card (views/public/partials/firm-card.php) in the
 * directory (/find-a-solicitor/) and in the solicitor portal's private
 * listing preview (views/public/listing-preview.php), built on AIG's listing
 * card ".org" (design-reference/notes/aig-visual-language.md 4.3,
 * docs/DESIGN_SYSTEM.md section 5). Depends on tokens.css and ui.css: the
 * buttons, chips and the "Verified firm" status pill are the shared
 * components; this sheet adds the card and its layout only.
 *
 * Every rule is scoped to the plugin root (.aie-ui), so two-class selectors
 * win over theme rules such as ".single-content h3" without !important. The
 * chip lists use three classes, because a theme list rule such as Kadence's
 * ".single-content ul:last-child" (0,2,1) outranks two.
 */

/* ------------------------------------------------------------------ */
/* Card (AIG .org)                                                     */
/* ------------------------------------------------------------------ */

/* AIG .org: 20px above and below. The sides use the shared box inset
   (--aie-inset, border included: 24px, 18px on phones) rather than AIG's
   22px, so the card's text lines up with the side box, the disclaimer and
   the empty state when they share a column. */
.aie-ui .aie-firm-card {
    container: aie-firm-card / inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: var(--aie-space-5) calc(var(--aie-inset) - 1px);
    color: var(--aie-ink);
    text-align: left;
    background: var(--aie-white);
    border: 1px solid var(--aie-line-card);
    border-radius: var(--aie-radius-card);
    box-shadow: var(--aie-shadow-card);
    transition: var(--aie-transition);
}

/* Whole cards lift 2px (DESIGN_SYSTEM 3, "Depth"); a keyboard user inside
   the card gets the same lift, so the card in use stands out. */
.aie-ui .aie-firm-card:hover,
.aie-ui .aie-firm-card:has(:focus-visible) {
    box-shadow: var(--aie-shadow-card-hover);
    transform: translateY(-2px);
}

/* Head row: logo or monogram | Verified pill, name, location. The pill sits
   on the first row at every width, above the name, so long firm names keep
   the whole column (AIG .org__head: centred, 12-14px gap). */
.aie-ui .aie-firm-card__heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "media status"
        "media name"
        "media where";
    align-items: center;
    column-gap: 14px;
    row-gap: 0;
    margin: 0 0 14px;
}

.aie-ui .aie-firm-card__logo,
.aie-ui .aie-firm-card__monogram {
    grid-area: media;
    align-self: center;
}

.aie-ui .aie-firm-card__name {
    grid-area: name;
    margin: 0;
    color: var(--aie-plum);
    font-family: var(--aie-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: var(--aie-heading-tracking);
    overflow-wrap: break-word;
}

.aie-ui .aie-firm-card__location {
    grid-area: where;
    margin: 3px 0 0;
    color: var(--aie-muted);
    font-family: var(--aie-font-body);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: break-word;
}

.aie-ui .aie-firm-card__separator {
    margin: 0 0.15em;
}

.aie-ui .aie-firm-card__verified {
    grid-area: status;
    justify-self: start;
    margin: 0 0 6px;
}

/* The same badge when a site has given it a page to point at. It keeps the
   pill's own colour rather than taking the theme's link colour - the selector
   is deliberately specific enough to win against a theme rule such as
   .aig-page a, which loads after this file - and it says it is a link where a
   link should say so: on hover and on keyboard focus. */
.aie-ui a.aie-firm-card__verified {
    color: var(--aie-plum);
    text-decoration: none;
}

.aie-ui a.aie-firm-card__verified:hover,
.aie-ui a.aie-firm-card__verified:focus-visible {
    color: var(--aie-plum);
    text-decoration: underline;
}

/* Logo frame: wide enough for a word mark, white by default. */
.aie-ui .aie-firm-card__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 56px;
    padding: 6px;
    overflow: hidden;
    background: var(--aie-white);
    border: 1px solid var(--aie-line);
    border-radius: var(--aie-radius-field);
}

.aie-ui .aie-firm-card__logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
    object-fit: contain;
}

/* logo-contrast.js marks light logos on transparency: a dark frame keeps
   them visible. */
.aie-ui .aie-firm-card__logo.is-light-logo {
    background: var(--aie-ink);
    border-color: var(--aie-ink);
}

/* Monogram for firms without a logo (AIG .mono): initials on one of the
   six AIG avatar colours, chosen per firm so it never changes. */
.aie-ui .aie-firm-card__monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: var(--aie-white);
    font-family: var(--aie-font-heading);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
    background: var(--aie-plum);
    border-radius: 50%;
}

.aie-ui .aie-firm-card__monogram--1 {
    background: var(--aie-rose);
}

.aie-ui .aie-firm-card__monogram--2 {
    background: var(--aie-teal);
}

.aie-ui .aie-firm-card__monogram--3 {
    background: var(--aie-plum-deep);
}

.aie-ui .aie-firm-card__monogram--4 {
    background: var(--aie-plum-mid);
}

.aie-ui .aie-firm-card__monogram--5 {
    background: var(--aie-exit);
}

/* Claim types and service information as chips (AIG .chips / .chip): 6px
   between chips and 12px after each group, so the claim group sits 12px above
   the service group and the last group 16px above the description (with its
   4px top margin). The claim list is always the last child of its wrapper, so
   these rules carry three classes: a theme's "ul:last-child" margin reset
   (Kadence: .single-content ul:last-child, 0,2,1) must not remove the gap. */
.aie-ui .aie-firm-card .aie-firm-card__claims {
    margin: 0;
    padding: 0;
}

.aie-ui .aie-firm-card .aie-firm-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--aie-space-3);
    padding: 0;
    list-style: none;
}

.aie-ui .aie-firm-card .aie-firm-card__chips > li {
    margin: 0;
}

.aie-ui .aie-firm-card__service-icon {
    flex: 0 0 auto;
    width: 0.95em;
    height: 0.95em;
    margin: 0 0.3em 0 -0.1em;
    color: var(--aie-rose);
}

/* Description (AIG .org__who: body size). */
.aie-ui .aie-firm-card__description {
    margin: var(--aie-space-1) 0 18px;
    color: var(--aie-ink);
    overflow-wrap: break-word;
}

/* Actions pinned to the bottom of the card, so cards in a row line up:
   website as the plum pill on its own row, telephone and email as rose
   outline pills sharing the next row (all 44px, 10px apart). */
.aie-ui .aie-firm-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: auto 0 0;
    padding: 0;
}

.aie-ui .aie-firm-card__actions > a {
    flex: 1 1 auto;
    min-width: 0;
}

.aie-ui .aie-firm-card__actions > .aie-firm-card__primary {
    flex-basis: 100%;
}

.aie-ui .aie-firm-card__icon {
    display: block;
    flex: 0 0 auto;
    width: 1.15em;
    height: 1.15em;
}

/* A wide card (one column on a tablet, a wide preview) keeps the pills
   inline instead of stretching them. */
@container aie-firm-card (min-width: 520px) {
    .aie-ui .aie-firm-card__actions > a,
    .aie-ui .aie-firm-card__actions > .aie-firm-card__primary {
        flex: 0 1 auto;
    }
}

/* Very narrow cards (320px screens): a smaller logo frame and monogram
   leave room for the firm name. */
@container aie-firm-card (max-width: 250px) {
    .aie-ui .aie-firm-card__heading {
        column-gap: 12px;
    }

    .aie-ui .aie-firm-card__logo {
        width: 72px;
        height: 46px;
        padding: 5px;
    }

    .aie-ui .aie-firm-card__monogram {
        width: 40px;
        height: 40px;
        font-size: 0.92rem;
    }

    .aie-ui .aie-firm-card__verified {
        white-space: normal;
    }
}

/* ------------------------------------------------------------------ */
/* Portal: private listing preview (views/public/listing-preview.php)  */
/* ------------------------------------------------------------------ */

/* Vertical margins here collapse with the section heading's own spacing. */
.aie-ui .aie-listing-preview__notice {
    margin-top: var(--aie-space-6);
}

/* The card at the width of one directory column, with the notes beside it
   when there is room and below it otherwise. */
.aie-ui .aie-listing-preview__layout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px 32px;
    margin: 24px 0 0;
}

.aie-ui .aie-listing-preview__card {
    display: flex;
    flex: 1 1 320px;
    flex-direction: column;
    min-width: 0;
    max-width: 452px;
}

.aie-ui .aie-listing-preview__card > .aie-firm-card {
    flex: 1 1 auto;
}

/* Pale notes box; its text starts at the shared box inset, like the card. */
.aie-ui .aie-listing-preview__notes {
    flex: 1 1 280px;
    min-width: 0;
    max-width: 34rem;
    padding: var(--aie-space-5) calc(var(--aie-inset) - 1px);
    color: var(--aie-ink);
    font-size: 1rem;
    line-height: 1.6;
    background: var(--aie-pale);
    border: 1px solid var(--aie-line);
    border-radius: var(--aie-radius-panel);
}

.aie-ui .aie-listing-preview__notes h3 {
    margin: 0 0 10px;
    font-size: 1.2rem;
}

.aie-ui .aie-listing-preview__notes ul {
    margin: 0 0 14px;
    padding-left: 1.2em;
}

.aie-ui .aie-listing-preview__notes li {
    margin: 0 0 8px;
}

.aie-ui .aie-listing-preview__links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0;
}

.aie-ui .aie-listing-preview__links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .aie-ui .aie-firm-card,
    .aie-ui .aie-firm-card:hover,
    .aie-ui .aie-firm-card:has(:focus-visible) {
        transform: none;
        transition: none;
    }
}

@media print {
    .aie-ui .aie-firm-card {
        break-inside: avoid;
        box-shadow: none;
        transform: none;
    }
}