/* Race Calendar ads: Plan your race bar (event pages) and sponsored grid tiles.
   Built to line up with a race card line for line. Self-contained: no event-card classes, so page
   filters and card scripts ignore them. */

.rc-ad-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s, transform 0.2s;
  text-align: left;
  min-width: 0;
}
.rc-ad-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); transform: translateY(-2px); }

/* Image band: height set to match the race cards on the page (160px on event pages). */
.rc-ad-media { display: block; height: 160px; overflow: hidden; background: #fff; border-bottom: 1px solid #f1f1f4; }
.rc-ad-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-ad-img.is-contain { object-fit: contain; padding: 8px; box-sizing: border-box; background: transparent; }
.rc-ad-img-empty { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-weight: 700; font-size: 1.1rem; color: #6b7280; }

/* Body: a faint neutral tint marks it out from race cards without borrowing Featured's green border. */
.rc-ad-body { display: flex; flex-direction: column; flex: 1; padding: 1rem; background: #f8f9fa; }
.rc-ad-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 0.6rem; }
.rc-ad-head { min-width: 0; flex: 1; display: flex; flex-direction: column; }

.rc-ad-label { color: #0d7a47; font-size: 0.8rem; font-weight: 600; margin-bottom: 0.4rem; }
.rc-ad-title { margin: 0 0 0.5rem; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: #111827; }
.rc-ad-title a { color: inherit; text-decoration: none; }
.rc-ad-title a:hover { text-decoration: underline; }

/* Tag row: same size and shape as the distance tags; kept (empty) when there's no price. */
.rc-ad-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; min-height: 1.45rem; margin-bottom: 0.6rem; }
.rc-ad-price-tag { background: #334155; color: #fff; padding: 0.25rem 0.6rem; border-radius: 20px; font-size: 0.7rem; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; }

/* Retailer pinned directly above the button, so it lines up across cards whatever the title length. */
.rc-ad-retailer { margin-top: auto; display: flex; align-items: center; gap: 0.35rem; color: #6b7280; font-size: 0.85rem; margin-bottom: 0.75rem; min-width: 0; }
.rc-ad-retailer span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-ad-link-ic { flex: 0 0 auto; color: #9ca3af; }

.rc-ad-logo { flex: 0 0 80px; width: 80px; height: 80px; object-fit: contain; border-radius: 8px; display: block; background: #fff; }

/* Button: same size as the race card buttons, full width, grey so it never outshouts Enter. */
.rc-ad-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.25rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: #e9ecef;
  color: #374151;
  font-size: 0.75rem; font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}
.rc-ad-btn:hover { background: #dee2e6; color: #111827; }

/* Footer strip: matches the race cards' organiser bar; tagline or blank. */
.rc-ad-foot { padding: 0.6rem 1rem; border-top: 1px solid #eceef0; background: #f1f3f5; font-size: 0.7rem; color: #6b7280; min-height: 1rem; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Plan your race bar (event pages) ---- */
.rc-plan { max-width: 900px; margin: 0 auto 3rem; padding: 0 1rem; }
.rc-plan[hidden] { display: none; }
.rc-plan-heading { text-align: center; font-size: 1.5rem; font-weight: 800; margin: 0 0 1.25rem; color: #111827; }
.rc-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.rc-plan-grid.rc-plan-n1 { grid-template-columns: minmax(0, 300px); justify-content: center; }
.rc-plan-grid.rc-plan-n2 { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
.rc-ad-disclosure { text-align: center; font-size: 0.78rem; color: #9ca3af; margin: 0.9rem 0 0; }
@media (max-width: 760px) {
  .rc-plan-grid,
  .rc-plan-grid.rc-plan-n2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Grid tiles: one grid cell like a race card ---- */
.rc-ad-tile { height: 100%; }