/* ==========================================================================
   Listing Card - handoff "IP - Listing Card (Results + Listing Page)", owner 2026-10-08
   ==========================================================================
   Scope: INSIDE the card only (nothing outside it - search bar, breadcrumbs, the category tags below the listing
   page's card, the report / manage buttons, the map - is touched). One design, two places:
     - the results card (.media.listing-card: search / city, category, subcategory pages and the Sponsored block)
     - the listing page's header card (.company-preamble)
   Both draw phone / email / website as the same small outlined pills (web/partials/contact-links.blade.php). They
   differ in size (logo and name sizes are unchanged, they stay in web.css) and in that the whole results card is a
   link, while the listing page's card - the final destination - is not.
   Tokens only; the colours are the existing outline-button family's (ip-outline.css / tokens.css).
   ========================================================================== */

/* ---- 1. Contact pills (both cards) --------------------------------------- */
.contact-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  margin: 0;
}
/* 8px between the address line and the pills. (Adjacent vertical margins collapse - the address line's own 4px
   margin-bottom and this margin-top do not add up - so this is the whole gap.) With no address line the pills follow
   the category line at its usual gap. */
.company_address + .contact-pills {
  margin-top: var(--space-2, 8px);
}

/* Small outlined pill: light border (the same tone as the category tag buttons on the listing page), transparent
   background, caption-size text, icon + label, fully rounded. */
.contact-pill {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  max-width: 100%;
  padding: 3px 10px;
  border: 1px solid var(--button-outline-border, #dedede);
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--button-outline-text, #44555b);
  font-size: var(--caption-size, 12px);
  font-weight: 400;
  line-height: var(--caption-line-height, 16px);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease;
}
.contact-pill .ph {
  flex: none;
  font-size: 14px;
  line-height: 1;
}
.contact-pill__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The link version. The sitewide `a` rules colour and transform links; restated so a pill keeps its own look in every
   state (the colour never changes, only the fill). z-index lifts it above the results card's link layer (section 2),
   so a pill never opens the listing. */
a.contact-pill,
a.contact-pill:hover,
a.contact-pill:focus,
a.contact-pill:active {
  z-index: 2;
  color: var(--button-outline-text, #44555b);
  text-decoration: none;
  cursor: pointer;
}
/* A comfortable tap target without a bigger look: the clickable area reaches 10px above and below and 4px to each
   side of the 24px pill (neighbouring pills are 8px apart, so the areas never overlap). */
a.contact-pill::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -4px;
  bottom: -10px;
  left: -4px;
}
/* Hover (pointer devices only): plain white, the border stays light. */
@media (hover: hover) {
  a.contact-pill:hover {
    background: var(--button-outline-fill, #ffffff);
  }
}
/* Touch has no hover: the same white while pressed. */
a.contact-pill:active {
  background: var(--button-outline-fill, #ffffff);
}
a.contact-pill:focus-visible {
  outline: 2px solid var(--focus-ring, #3270a2);
  outline-offset: 2px;
}
/* Archived listing: shown, but not a link (see contact-links.blade.php). Not lifted above the card link either, so a
   tap on it opens the listing like any other empty part of the card. */
.contact-pill--static {
  color: var(--ink-muted, #757575);
  cursor: inherit;
}

/* ---- 2. Results card: the whole card is one link ------------------------- */
/* The business-name link is stretched over the card (its ::after covers .media, which is position: relative), so the
   logo, name, empty space - everything not lifted below - opens the listing. A real <a> stays the only link, so the
   pills, the address and the category link are never nested inside another link. */
.listing-card__link {
  /* The sitewide `a { transform: rotate(0) }` would make this link the containing block and size the layer to the
     link's own text instead of the card. */
  -webkit-transform: none;
  transform: none;
}
.listing-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  border-radius: var(--radius-md, 8px);
}
/* Keyboard focus rings the whole card, not just the name. */
.listing-card__link:focus-visible {
  outline: none;
}
.listing-card__link:focus-visible::after {
  outline: 2px solid var(--focus-ring, #3270a2);
  outline-offset: -2px;
}
/* Hover: the existing light neutral of the site's light buttons (the outline family's hover, --button-outline-hover)
   - no new colour. Touch has no hover, so a press tints the card instead. */
.media.listing-card {
  transition: background-color .12s ease;
}
@media (hover: hover) {
  .media.listing-card:hover {
    background-color: var(--button-outline-hover, #eef3f7);
  }
}
.media.listing-card:active {
  background-color: var(--button-outline-hover, #eef3f7);
}
/* Separate click targets inside the card, lifted above the link layer: the address (which still centres the map on
   this listing's pin - listingClick() - exactly as before; its link now only covers its text, not the whole row) and
   the status icons with their tooltips. The pills lift themselves (section 1). The category is not one of them: it is
   plain text now (section 3), so a click on it opens the listing like the rest of the card. */
.listing-card .company_address a {
  position: relative;
  z-index: 2;
}
.listing-card .company_address a {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
}
.listing-card .listing-status-icon {
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  .media.listing-card,
  .contact-pill {
    transition: none;
  }
}

/* ---- 3. The category line: plain text, the same size on both cards ------- */
/* Not a link any more (owner 2026-10-08). On a results card a click on it opens the listing like the rest of the card;
   on the listing page it is just a label (the category chips further down the page and the breadcrumb still link to
   the category). Plain coloured text: the link blue it always had, regular weight. */
.listing-card .company-tags li,
.company-preamble .listing-main-category {
  color: var(--brand-blue, #3270a2);
  font-weight: 400;
}
/* One size on both: the text size of the card the line sits in - 14px, and 12px on phones (<= 480px, the same
   breakpoint as the results card's own rule in web.css). The listing page's category used to be 13px (a rule of its own
   in web.css); it has none now, so it follows the page text like the contact rows next to it, and shrinks to the results
   card's phone size below. Line-height stays the page's 1.5, as on the cards. */
@media (max-width: 480px) {
  .company-preamble .listing-main-category {
    font-size: var(--body-sm-size, 12px);
  }
}