/* D108 paid-listing public integration — cards reuse the site's existing global
   .card / .card--partner / .pill / .pill--partner / .btn / .thumb / .logo classes
   (includes/header.php) on purpose, so these sections look like part of the same
   theme rather than a bolted-on design. Only the grid/carousel layout is new here. */

.d108-paid-section{padding-top:26px;}
.d108-paid-section .serve-sub{margin-top:2px;}

/* Full-width "Verified Partners" section (listing.php / area-home.php, above free results) */
.d108-paid-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
  margin-top:14px;
}

/* Latest-listings horizontal-scroll carousel (index.php sitewide / area-home.php area-scoped) */
.d108-carousel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.d108-carousel-head h2{margin:0;}
.d108-carousel-nav{display:none;gap:8px;}
.d108-carousel-arrow{
  width:34px;height:34px;border-radius:50%;border:1.5px solid var(--border-strong);background:#fff;
  color:var(--navy-700);font-size:18px;line-height:1;cursor:pointer;flex-shrink:0;
}
.d108-carousel-arrow:hover{background:var(--bg);border-color:var(--navy-600);}

.d108-carousel{
  display:flex;
  gap:14px;
  margin-top:14px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px;
  scrollbar-width:thin;
}
.d108-carousel::-webkit-scrollbar{height:6px;}
.d108-carousel::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px;}

/* 2 cards visible on mobile */
.d108-carousel .d108-paid-card{
  flex:0 0 calc(50% - 7px);
  scroll-snap-align:start;
  margin:0;
}
.d108-paid-card--compact .card__top{align-items:flex-start;}
.d108-paid-card--compact h3{font-size:14.5px;}
.d108-paid-card--compact .card__place-line{font-size:12px;}

/* 4 cards visible on desktop */
@media(min-width:900px){
  .d108-carousel-nav{display:flex;}
  .d108-carousel .d108-paid-card{flex:0 0 calc(25% - 10.5px);}
}

/* ---------- Paid-card logo frame ----------
   The logo a customer uploads is shown WHOLE (object-fit:contain, never cropped or stretched) inside
   a fixed-size frame, so every card keeps the same height and rhythm whatever the artwork's shape:
     square / near-square logo  -> 56 x 56  (same footprint as the standard .thumb / .logo avatar)
     wide, horizontal wordmark  -> 92 x 56  (aspect >= 1.5:1)
   The frame is white with a thin border and inner padding so transparent PNG logos and logos with
   their own white background both sit cleanly on the cream partner-card gradient. Mirrors the
   profile page's logo box (fixed height, contain, padded). */
.d108-logo-slot{
  width:56px;height:56px;flex:0 0 56px;box-sizing:border-box;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--gold-border,#E6D2A0);border-radius:12px;overflow:hidden;
}
.d108-logo-slot img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;}
.d108-logo-slot--wide{width:92px;flex-basis:92px;}
/* In a narrow card the "D108 Verified Premium" pill may not fit beside the wide frame — let it wrap
   onto two lines rather than spill over the card edge. */
.d108-paid-card:not(.d108-paid-card--compact) .d108-logo-slot--wide + .card__heading .pill{white-space:normal;line-height:1.35;}
/* Carousel cards are only ~half the screen wide on a phone — a 104px frame would squeeze the name to
   nothing, so wide logos stay in the 56px frame there (still shown whole) and get the wide frame from
   desktop width up, where the cards are ~250px. */
.d108-paid-card--compact .d108-logo-slot--wide{width:56px;flex-basis:56px;}
@media(min-width:900px){
  .d108-paid-card--compact .d108-logo-slot--wide{width:92px;flex-basis:92px;}
}

/* Small Google-Maps pin next to the place line */
.d108-card-map{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;
  background:#e8f0fe;border:1px solid #c6dafc;color:#1a73e8;text-decoration:none;flex:0 0 20px;
}
.d108-card-map:hover,.d108-card-map:focus-visible{background:#d2e3fc;}
.d108-card-map svg{display:block;}

/* ---------- Wide-logo ("stacked") card + tidy action row ----------
   A horizontal wordmark (aspect >= 1.5:1, e.g. a 600x158 logo) was being squeezed into a 92x56 side
   slot, leaving it ~20px tall and the name wrapping into a 130px column. Cards with a wide logo now
   stack instead: the logo gets its own full-width frame on top (still shown whole, object-fit:contain),
   and the name/pill/place line below it use the full card width. Square logos, photos and initials keep
   the original side-by-side layout. */
.d108-paid-card--stacked .card__top{display:block;}
.d108-paid-card--stacked .d108-logo-slot--wide{
  width:100%;height:64px;flex:none;margin-bottom:12px;padding:0;
}
.d108-paid-card--stacked.d108-paid-card--compact .d108-logo-slot--wide{height:48px;padding:0;margin-bottom:10px;}
.d108-paid-card--stacked .d108-logo-slot--wide img{max-height:100%;max-width:100%;}

/* Call + WhatsApp share the first row equally; View Profile takes a full-width row of its own — so
   three buttons never wrap into an orphan. A missing Call/WhatsApp simply lets the other one grow. */
.d108-paid-card .card__actions-row .btn{flex:1 1 0;min-width:0;justify-content:center;}
.d108-paid-card .card__actions-row .btn--ghost{flex:1 1 100%;}

/* Equal-height cards in the same grid row: pin the action row to the bottom so buttons line up
   across neighbouring cards even when one name wraps to more lines than another. */
.d108-paid-card{display:flex;flex-direction:column;}
.d108-paid-card .card__top{margin-bottom:12px;}
.d108-paid-card .card__footer{margin-top:auto;}

/* ---------- Card heading order + full address (Sept 2026) ----------
   Verified badge sits ABOVE the name; the main area is a rounded bubble (the site's .pill--landmark) just
   BELOW it; the customer's full address follows under the heading, with the Google Maps pin at its end. */
.d108-paid-card .card__badge-row{margin:0 0 6px;display:flex;flex-wrap:wrap;gap:6px;}
.d108-paid-card .card__heading p{margin-bottom:0;}
.d108-paid-card .card__heading .card__pill-row{margin-top:7px;}
.d108-card-address{
  display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;
  font-size:13px;line-height:1.45;color:var(--text-700);
}
.d108-card-address .pin-icon{color:var(--navy-600);margin-top:2px;flex:0 0 16px;}
.d108-card-address__text{flex:1;min-width:0;overflow-wrap:anywhere;}
.d108-card-landmark{display:block;margin-top:3px;font-size:12px;color:var(--text-500);}
.d108-card-address .d108-card-map{margin-top:0;}
/* Carousel cards are small: keep the address to three lines so the row stays even. */
.d108-paid-card--compact .d108-card-address{margin-bottom:0;font-size:12px;}
.d108-paid-card--compact .d108-card-address__text{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}