/* ============================================================================
   gll-cards.css: firm and lawyer cards, Option E in LIST VIEW only (owner-approved 2026-10-20; grid revert same day).
   Markup: phpls/app/Views/default/widgets/cards/listing-1.html.php (firms) and listing-4.html.php (lawyers);
   images and tones: App\Src\GllCards\Panel. Report: /private/tmp/gll-audit-fixes/CARDS-E.md
   List view = the results switcher added col-md-4 / col-md-8 to the card columns (listing-search-results changeView).
   GRID cards, sliders and every other card stay exactly as they were: the place photo with the small overhanging logo
   (or round headshot), the original body and the original button. The list-view parts below are hidden there.
   1. List view image panel: a firm's own logo, whole, centred on a black or white panel matched to it; a lawyer's
      headshot filling the panel; no logo or headshot: the place photo, as before.
   2. List view body: normal-case name, "Practice:", one-line address, gold stars, two-box CTA + bookmark square.
   3. Related tab on a lawyer's profile (gll-card--related, desktop): lower cover, larger logo, profile-size text.
   Line tokens are owned by gll-type.css and are only read here (--gll-card-line).
   ============================================================================ */

/* ── 0. outside list view the list-only parts never show ────────────────────────────────────── */
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-cp--alt,
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-cl-list,
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-ca-line{display:none !important}
html:root body .listing-card:not(.gll-card--related):not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6) .listing-card-body:not(.col-md-8) .card-footer > .gll-card-cta--list{display:none !important}

/* ── 1. list view image panel ───────────────────────────────────────────────────────────────── */
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-cp{
  position:relative;display:block;width:100%;aspect-ratio:960/560;overflow:hidden;background:#fff;border-radius:0}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-img.col-md-4 .gll-cp--alt{display:block !important}
html:root body .listing-card.gll-card--panel:not(#gc1):not(#gc2):not(#gc3) .listing-card-img.col-md-4 .position-relative{display:none !important}
html:root body .listing-card.gll-card--panel:not(#gc1):not(#gc2):not(#gc3) .listing-card-img.col-md-4{background-color:transparent !important}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-cp--logo.gll-cp--dark{background:#0a0a0a}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-cp--photo{background:#e8e8e8}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-cp > img.gll-cp-img{
  position:absolute;display:block;max-width:none;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}
/* the logo, never cropped: 10% breathing room on every side */
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-cp--logo > img.gll-cp-img{
  top:10%;left:10%;width:80%;height:80%;object-fit:contain;object-position:50% 50%}
/* the headshot fills the panel, biased to the top so faces are never cut */
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .gll-cp--photo > img.gll-cp-img{
  top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
/* the tier label keeps its full name on the panel ("Unclaimed Listing" was cut to "UNCLAIMED LISTIN...") */
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-img.col-md-4 .gll-tier-badge{max-width:calc(100% - 20px) !important}
/* 768px and up the panel fills the left column like the photo does; phones stack it on top */
@media (min-width:768px){
  html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) > .row.g-0 > .listing-card-img.col-md-4 .gll-cp{height:100%}
}

/* ── 2. list view body ──────────────────────────────────────────────────────────────────────── */
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 :is(h2,h3,h4,h5).display-9,
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 :is(h2,h3,h4,h5).display-9 a{
  text-transform:none !important;letter-spacing:-.01em !important}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 :is(.gll-cl-grid,.gll-ca-rows){display:none !important}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 .gll-cl-list{display:inline !important}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 .gll-ca-line{display:block !important}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 .gll-card-stars,
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 .gll-card-stars :is(i,svg,span){color:var(--gll-gold,#b8922a) !important}
/* one row: the two-box CTA left, the bookmark square right, both on the card's 16px padding */
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6) .listing-card-body.col-md-8 .card-footer > .gll-card-cta--grid{display:none !important}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 .card-footer{
  display:flex !important;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3) .listing-card-body.col-md-8 .card-footer > .gll-card-cta--list{flex:0 1 auto;min-width:0}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3):not(#gc4) .listing-card-body.col-md-8 .card-footer > .btn.float-end{
  float:none !important;flex:0 0 48px;width:48px !important;height:48px !important;min-width:48px !important;min-height:48px !important;
  margin:0 0 0 auto !important;padding:0 !important;display:inline-flex !important;align-items:center;justify-content:center;
  background:#fff !important;border:1px solid var(--gll-card-line,#e8e8e8) !important;border-radius:0 !important;box-shadow:none !important}
html:root body .listing-card:not(#gc1):not(#gc2):not(#gc3):not(#gc4) .listing-card-body.col-md-8 .card-footer > .btn.float-end:is(:hover,:focus-visible){border-color:#0a0a0a !important;color:#0a0a0a !important}

/* ── 3. related tab on a lawyer's profile (desktop): one wide firm card. A lower cover (21:9, at most 440px), the
   logo grown with the card at the same spot with the same fixed 40px overhang (title and text never move for it),
   and the text at the profile body sizes, read like a list card. Phones keep the card as it was. ── */
@media (max-width:991.98px){
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6) .card-footer > .gll-card-cta--list{display:none !important}
}
@media (min-width:992px){
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3) .listing-card-img .d-block > .position-relative > img:not(.position-absolute):not(.rounded-circle){
    aspect-ratio:21/9;height:auto !important;max-height:440px;object-fit:cover;object-position:50% 55%}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3) .listing-card-img .d-block > .position-relative > img.position-absolute:not(.rounded-circle){
    width:clamp(220px,28%,420px) !important;transform:translateY(40px) !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6):not(#gc7) :is(h2,h3,h4).display-9,
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6):not(#gc7) :is(h2,h3,h4).display-9 a{
    font:600 26px/1.2 'Inter Tight','Inter',sans-serif !important;letter-spacing:-.01em !important;text-transform:none !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6):not(#gc7) p.gll-card-desc{
    font-size:17px !important;line-height:1.65 !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6):not(#gc7) .display-11 > div > p,
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6):not(#gc7) .display-11 > .m-0 > .mb-2{
    font-size:16px !important;line-height:1.6 !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6):not(#gc7) .display-11 p strong{font-size:inherit !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6):not(#gc7) .gll-card-stars{font-size:18px !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3) .gll-card-stars,
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3) .gll-card-stars :is(i,svg,span){color:var(--gll-gold,#b8922a) !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3) :is(.gll-cl-grid,.gll-ca-rows){display:none !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3) .gll-cl-list{display:inline !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3) .gll-ca-line{display:block !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4):not(#gc5):not(#gc6) .card-footer > .gll-card-cta--grid{display:none !important}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3) .card-footer{display:flex !important;align-items:center;justify-content:space-between;gap:12px}
  html:root body .listing-card.gll-card--related:not(#gc1):not(#gc2):not(#gc3):not(#gc4) .card-footer > .btn.float-end{
    float:none !important;width:48px !important;height:48px !important;padding:0 !important;margin:0 0 0 auto !important;display:inline-flex !important;
    align-items:center;justify-content:center;border:1px solid var(--gll-card-line,#e8e8e8) !important;border-radius:0 !important}
}