/* Banner for our own products (promo.js). Each slide sets --promo-accent and --promo-bg. */

.promo { max-width: 1100px; margin: 0 auto; padding: 0 var(--pad) clamp(48px, 6vw, 80px); }
.promo-tag { font: 700 12px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--soft); margin-bottom: 10px; }
.promo-stage { position: relative; }
.promo-slide {
  display: grid; grid-template-columns: minmax(150px, auto) 1fr auto; align-items: center; gap: clamp(16px, 3vw, 36px);
  min-height: 112px; padding: 22px clamp(20px, 3vw, 32px);
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--promo-accent) 22%, transparent), transparent 60%), var(--promo-bg);
  border: 2px solid color-mix(in srgb, var(--promo-accent) 55%, transparent);
  color: #f2f2f2; text-decoration: none;
  animation: promo-in 0.45s ease;
}
.promo-slide:hover { border-color: var(--promo-accent); }
.promo-name { display: flex; flex-direction: column; gap: 6px; font: 700 34px/1 var(--label); letter-spacing: 0.02em; color: var(--promo-accent); }
.promo-name small { font: 700 12px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 242, 242, 0.65); }
.promo-line { font: 500 18px/1.4 var(--body); }
.promo-cta {
  padding: 12px 18px; white-space: nowrap;
  font: 700 15px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--promo-accent); color: var(--promo-bg);
}
.promo-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.promo-dots { display: flex; gap: 8px; }
.promo-dots button { width: 26px; height: 6px; border: 0; padding: 0; cursor: pointer; background: var(--line); }
.promo-dots button[aria-pressed="true"] { background: var(--ink); }
.promo-remove { font: 700 13px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--soft); }
.promo-remove:hover { color: var(--ink); }

@keyframes promo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 760px) {
  .promo-slide { grid-template-columns: 1fr; gap: 12px; }
  .promo-cta { justify-self: start; }
}

/* "Our other projects" cards (site content, shown even with No ads). */

.projects { max-width: 1100px; margin: 0 auto; padding: clamp(56px, 7vw, 90px) var(--pad) clamp(28px, 4vw, 40px); }
.projects-label { font: 700 14px/1.2 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.projects-title { margin-top: 10px; font-size: clamp(32px, 4vw, 48px); }
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-top: 24px; }
.project-card {
  display: flex; flex-direction: column; gap: 10px; padding: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--promo-accent) 14%, transparent), transparent 55%), var(--promo-bg);
  border: 2px solid color-mix(in srgb, var(--promo-accent) 35%, transparent);
  color: #f2f2f2; text-decoration: none; transition: border-color 0.2s, transform 0.12s;
}
.project-card:hover { border-color: var(--promo-accent); transform: translateY(-2px); }
.project-logo {
  display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px;
  background: color-mix(in srgb, var(--promo-accent) 16%, #000); box-shadow: inset 0 0 0 2px var(--promo-accent);
  font: 700 22px/1 var(--label); letter-spacing: 0.02em; color: #f2f2f2;
}
.project-logo b { color: var(--promo-accent); }
.project-name { display: flex; flex-direction: column; gap: 4px; font: 700 26px/1 var(--label); color: var(--promo-accent); }
.project-name small { font: 700 12px/1 var(--label); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(242, 242, 242, 0.6); }
.project-line { flex: 1; font: 500 16px/1.45 var(--body); color: #dcdcdc; }
.project-link { font: 700 14px/1 var(--label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--promo-accent); }