/* Line 30960 (ai.features.marketplace_cards_reach_and_name_their_agent, default off; MarketplaceCardReach::sheet() links it
   only when lit). The testers after line 30927: at 390 px one card filled the screen (the shelf page's own inline phone rule
   forced one column, /agents went to one column at 480 px) and the signed-in Try menu was as narrow as its button, one word
   a line. Lit: every card names its agent under its face, a phone shows two cards a row on the shelves, the category pages
   and /agents, and the Try menu is as wide as its words. */

/* The card's name, under its face (the overlay that carried it left the card on 13 Oct, 8e7acb857c0), in the card's own
   text colour: the shelves turn the card with the theme, so the name turns with it. */
.mp-card-body > .mp-card-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0 0 .25rem;
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    text-shadow: none;
    overflow-wrap: anywhere;
}
/* A category page keeps the shelf's dark card (#1a1a1a, marketplace-agent-listings-v2.css) in both themes, so its name is
   light; its Google-path form paints the card from the tokens (looks-google-path.css), so the name takes the token text. */
.ns-cat:not(.ns-gp) .mp-card-body > .mp-card-name { color: #f1f1f1; }
.ns-cat.ns-gp .mp-card-body > .mp-card-name { color: var(--ns-text, #e8eaed); }

/* The Try menu is as wide as its words, never its button's width; an open menu is never clipped by its card. */
.mp-action-menu {
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: min(18rem, calc(100vw - 1.5rem));
}
.mp-action-menu a { white-space: nowrap; }
.mp-card:has(.mp-action-dropdown.open) { overflow: visible; }
.mp-card:has(.mp-action-dropdown.open) .mp-card-photo-link {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.row > .col:has(.mp-action-dropdown.open) { position: relative; z-index: 3; }

@media (max-width: 575.98px) {
    /* Two cards a row: the shelf grid (row-cols-2, held to one by the page's inline phone rule) and the category grid. */
    .marketplace-container .row.row-cols-2 > .col,
    .marketplace-container .row.row-cols-1.row-cols-sm-2 > .col {
        flex: 0 0 auto;
        width: 50%;
        max-width: 50%;
    }
    /* A right-hand card's menu opens leftwards, so it stays on the screen. */
    .marketplace-container .row.row-cols-2 > .col:nth-child(2n) .mp-action-menu,
    .marketplace-container .row.row-cols-1.row-cols-sm-2 > .col:nth-child(2n) .mp-action-menu {
        left: auto;
        right: 0;
    }
    /* A half-width card stays short: a smaller name and padding, two lines of words. */
    .marketplace-container .row > .col .mp-card-body { padding: .625rem; }
    .marketplace-container .row > .col .mp-card-body > .mp-card-name { font-size: .9375rem; }
    .marketplace-container .row > .col .mp-card-desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-bottom: .5rem;
        font-size: .8125rem;
        line-height: 1.4;
    }
    .marketplace-container .row > .col .mp-card-tags { gap: .25rem; margin-bottom: .5rem; }
}

/* /agents: two cards a row on a phone too (the directory went to one at 480 px). */
@media (max-width: 480px) {
    .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .directory-card__body { padding: 12px; }
    .directory-card__name { font-size: 15px; overflow-wrap: anywhere; }
    .directory-card__category { font-size: 11px; margin-bottom: 6px; }
    .directory-card__desc { font-size: 13px; -webkit-line-clamp: 2; }
    .directory-card__initial { font-size: 48px; }
}