/* The two house-ad tiles — 90-day guide and free seller evaluation.
   Markup: window.padsterPromoTiles() in js/data.js.

   ONE definition, in its own file, because the tiles appear on pages that load
   different stylesheets: search.html and the listing page load css/site.css,
   index.html loads css/app.css + css/home.css. Both copies used to exist and
   they drifted — the search page got this saturated treatment while the
   homepage kept an older pale-peach version with dark text, so the same
   component looked like two different components depending on where you
   found it. Any page that can render a tile links THIS file.

   SPECIFICITY. The photo box is `.ph` on the search grid's .rcard and
   `.dg-card-photo` on the homepage's .dg-card, so neither of those is a hook
   that works in both places. `.pd-promo-ph` is on both — but alone it is
   0-1-0 and loses to `.rcard .ph` (0-2-0). Everything here is therefore
   scoped `.pd-promo .pd-promo-ph`: present in both shapes, 0-2-0, and this
   file is linked after the others so it wins the tie on source order. */

.pd-promo .pd-promo-ph {
  /* The shared card shape — 4:3, 18px — is set by .rcard .ph and
     .dg-card-photo. Only the promo's own treatment lives here. */
  background-image: none;
  /* A saturated ground, not a tint. Both gradients were picked against the
     contrast maths rather than by eye: the LIGHTEST point of each is the
     worst case for white text, and both clear 4.5:1 there — 6.68:1 on the
     course tile, 13.44:1 on the sell tile. The brand orange #f4551f is only
     3.41:1 against white and is deliberately NOT used as a text ground; it
     stays as the accent on the badge. */
  background-color: transparent;
  background: linear-gradient(155deg, #a8330b 0%, #6d2105 100%);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px;
}
.pd-promo-sell .pd-promo-ph {
  background: linear-gradient(155deg, #2b2f36 0%, #0f1113 100%);
}

/* The "bold graphic": one oversized soft disc bleeding off the top-right
   corner, drawn in CSS so the tiles stay at zero extra page weight and cannot
   404 the way a hotlinked image can. Decorative only — it sits behind the
   text and never carries meaning. */
.pd-promo .pd-promo-ph::after {
  content: ""; position: absolute; top: -38%; right: -22%;
  width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 32% 32%,
              rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.pd-promo-sell .pd-promo-ph::after {
  background: radial-gradient(circle at 32% 32%,
              rgba(244, 85, 31, 0.42), rgba(244, 85, 31, 0) 70%);
}

.pd-promo .pd-promo-badge {
  align-self: flex-start; background: #fff; color: #8f2c08;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
  position: relative; z-index: 1;
}
/* Ink on brand orange is 5.00:1 — the one place #f4551f can carry text. */
.pd-promo .pd-promo-badge-dark { background: #f4551f; color: #1c1c1c; }

.pd-promo .pd-promo-body {
  position: relative; z-index: 1;
  /* The homepage rewrites this element to also carry .dg-card-body, which
     adds padding meant for the text UNDER a card. In here it is the tile's
     own copy and needs none. */
  padding: 0;
}
.pd-promo .pd-promo-body h3 {
  font-size: 17px; font-weight: 700; line-height: 1.2; margin-bottom: 5px;
  letter-spacing: -0.01em; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pd-promo .pd-promo-body p {
  font-size: 12.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.88);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Below the tile: the title, meta and call to action sit on the page ground,
   not on the gradient, so they take the page's own ink. */
.pd-promo .t, .pd-promo .dg-card-title { color: #1c1c1c; }
.pd-promo .pd-promo-cta { color: #d94512; font-weight: 600; }