/* ============================================
   INTRO — soft cream open, so Portfolio doesn't
   match Services' white-then-peach opening
   ============================================ */

.rb-portfolio-intro {
  background: var(--paper-warm);
  padding-bottom: 4rem;
}

.rb-portfolio-intro .rb-lede {
  margin-top: 1rem;
}

/* ============================================
   PROJECT LIST — the whole section carries a
   peach tint instead, so the color shows up a
   section later than it does on Services
   ============================================ */

.rb-portfolio-list-section {
  background: var(--accent-soft);
  margin-top: 4rem;
  padding-top: 3rem;
}

.rb-portfolio-list {
  display: grid;
  gap: 1.5rem;
}

.rb-project-card {
  padding: 2.75rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
  transition: transform 0.25s ease, border-top-color 0.25s ease;
}

.rb-project-card:hover {
  transform: translateY(-4px);
  border-top-color: var(--accent-strong);
}

.rb-project-card .rb-kicker::before { background: var(--accent-strong); }

/* any card that has a preview image gets the two-column
   layout; "--featured" additionally gets the distinct tint */
.rb-project-card:has(.rb-project-preview) {
  display: grid;
  grid-template-columns: 1.1fr 0.95fr;
  gap: 2.75rem;
  align-items: center;
}

.rb-project-card--featured {
  background: var(--paper-warm);
  border-top-color: var(--accent-strong);
}

.rb-project-card--featured:hover { border-top-color: var(--ink); }

.rb-project-card__copy h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom: 0.75rem;
}

.rb-project-card__copy p { max-width: 54ch; }

.rb-project-points {
  display: grid;
  gap: 0.65rem;
  margin: 1.5rem 0 0;
}

.rb-project-points li {
  position: relative;
  padding-left: 1.3rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.rb-project-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-strong);
}

.rb-project-preview {
  overflow: hidden;
  min-height: 260px;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
}

.rb-project-preview__bar {
  display: flex;
  gap: 0.45rem;
  padding: 0.9rem 1.1rem;
  background: var(--ink);
}

.rb-project-preview__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.rb-project-preview__bar span:nth-child(2) { background: var(--accent-strong); }
.rb-project-preview__bar span:nth-child(3) { background: var(--paper-warm); }

.rb-project-preview__img {
  display: block;
  width: 100%;
  height: 285px;
  object-fit: cover;
  object-position: top center;
}

@media (max-width: 900px) {
  .rb-project-card:has(.rb-project-preview) { grid-template-columns: 1fr; }
  .rb-project-card { padding: 2rem; }
  .rb-project-preview__img { height: 220px; }
}

/* ============================================
   CLOSING CTA — a soft blush tint, lighter than the
   peach list section and warmer than plain white, so
   it still reads as its own distinct close
   ============================================ */

.rb-portfolio-cta-section {
  background: rgba(231, 195, 171, 0.22);
  margin-top: 1.5rem;
  padding: 2rem 0;
}

.rb-portfolio-cta {
  max-width: 640px;
  text-align: center;
  margin: 0 auto;
}

.rb-portfolio-cta p { max-width: 480px; margin-left: auto; margin-right: auto; }

.rb-portfolio-cta .rb-btn-row { justify-content: center; }

/* ============================================
   FOOTER CONTACT ICONS (light-background variant) —
   shared with Services, defined here too since this
   page doesn't load services.css
   ============================================ */

.rb-contact__row--light {
  justify-content: center;
  margin: 1.25rem 0 1.5rem;
}

.rb-contact__icon--light {
  border-color: var(--accent-strong);
  color: var(--ink);
  background: var(--paper);
}

.rb-contact__icon--light:hover {
  border-color: var(--ink);
  color: var(--paper);
  background: var(--ink);
}