/* ========== Sponsored business listings ==========
   Everything here renders only for a company POI with a live sponsorship (see
   scripts/build_data.py, which stops emitting the fields the day one expires).
   It extends the popup shell in css/popup.css rather than replacing it: a
   sponsored card is the same design system with more in it, not a second one.

   The 320px popup is the budget. A sponsor does not get a taller card than a
   boat ramp - the hours table hides behind a disclosure and the gallery scrolls
   sideways precisely so it doesn't. */

/* ---------- Sponsored badge ----------
   Rendered from the tier by js/helpers.js, never from a field an author can
   leave blank: advertising has to be identifiable as advertising. */
.pp-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pp-sponsor {
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sponsor-gold) 16%, #fff);
  color: var(--sponsor-gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* ---------- Logo ----------
   Beside the name, not above it: at this width a full-bleed logo becomes the
   largest thing on the card, which is not what the listing is for. */
.pp-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pp-logo {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
}

/* ---------- Open now ----------
   The reason a cafe buys a listing, so it leads the card. */
.pp-hours {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.pp-hours-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px;
  cursor: pointer;
  list-style: none;          /* Firefox */
}

.pp-hours-summary::-webkit-details-marker { display: none; }

.pp-hours-summary:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
  border-radius: 10px;
}

.pp-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
  font-weight: 700;
}

.pp-open.is-open { color: #15803d; }
.pp-open.is-shut { color: var(--muted); }

.pp-open-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.pp-hours-note {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.79rem;
  color: var(--muted);
}

/* The caret is the last child and turns to point down when the table is open. */
.pp-hours-summary .pp-icon {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s ease;
}

.pp-hours[open] .pp-hours-summary .pp-icon { transform: rotate(180deg); }

.pp-hours-list {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 2px 10px 10px;
}

.pp-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.81rem;
  color: var(--muted);
}

.pp-hours-row dt { font-weight: 600; }
.pp-hours-row dd { margin: 0; }

.pp-hours-row.is-today {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Gallery ----------
   Lives in popup.css as .pp-carousel now: a sponsor's gallery and a grouped
   photo pin are the same control, and photos are by far the bigger user of it
   (a pin can stand for sixteen). Nothing sponsor-specific was left here. */

/* ---------- Offer ---------- */
.pp-offer {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--sponsor-gold) 9%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sponsor-gold) 25%, #fff);
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink);
}

.pp-offer-tag {
  flex-shrink: 0;
  color: var(--sponsor-gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ---------- Contact ----------
   Wrapping rather than shrinking: three buttons on one 288px row would each be
   too narrow to read, and a half-width pair reads fine. */
.pp-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pp-contact .pp-btn {
  flex: 1 1 44%;
  min-width: 0;
}

/* Leaflet ships `.leaflet-container a { color: #0078A8 }` - two classes, so it
   beats every single-class rule in popup.css. The secondary buttons are new
   anchors and hit exactly that; :not() keeps this off the primary one, whose
   own white rule lives in popup.css and would otherwise lose on source order. */
.leaflet-popup-content a.pp-btn:not(.pp-btn--primary) { color: var(--brand); }

.pp-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 0.78rem;
}

.leaflet-popup-content a.pp-social {
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
}

/* Same 1px outline as a secondary contact button, at pill scale - the two sit
   directly under that row and reading as the same family is the point. */
.pp-social--pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
}

/* currentColor on the glyph, so the mark tracks the text through hover and
   whatever the card's muted grey resolves to. */
.pp-social--pill .pp-icon { flex: none; }

.leaflet-popup-content a.pp-social:hover { text-decoration: underline; }

.leaflet-popup-content a.pp-social--pill:hover {
  text-decoration: none;
  border-color: var(--brand);
  color: var(--brand);
}

.pp-social:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- List and search rows ----------
   The same disclosure the popup makes, wherever a business appears as a row. */
.row-sponsor {
  color: var(--sponsor-gold);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* In the search list the badge is a chip on the right rather than trailing
   text, because the row has no meta line to hang it off. */
.search-result .row-sponsor {
  flex-shrink: 0;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sponsor-gold) 14%, #fff);
}

/* ---------- Map pin ----------
   The gold ring itself is drawn in the SVG (js/icons.js) so it scales with the
   pin. This is the halo that makes it register before you have tapped anything,
   kept well under the trip-stop glow so a saved stop still reads as the
   stronger state. */
.sc-pin--sponsored .pin-svg {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--sponsor-gold) 55%, transparent))
          drop-shadow(0 2px 3px rgba(15, 23, 42, 0.35));
}

.sc-pin--sponsored.is-trip-stop .pin-svg {
  filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.9))
          drop-shadow(0 2px 3px rgba(15, 23, 42, 0.35));
}

@media (prefers-reduced-motion: reduce) {
  .pp-hours-summary .pp-icon { transition: none; }
}