/* Brand-collaboration pages (partner-template.html, scripts/build/clone_partner.py).
   Almost everything on these pages is an existing component -- the gift hero,
   .steps-grid, .allow-deny-grid, .pill-row, .faq-item, the sources list. This
   file holds only what is new: the story with the partner's logo beside it,
   the outlet chips, and the closing call-to-action row. */

.partner-story { display: flex; gap: 40px; align-items: flex-start; }
.partner-story__logo { flex: 0 0 auto; background: var(--white); border: 1px solid #f0e2d1; border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); }
.partner-story__logo img { display: block; width: 220px; height: auto; }
.partner-story__text { flex: 1 1 auto; min-width: 0; margin: 0; }
.partner-story__text h2 { color: var(--primary); margin-bottom: 16px; }

.partner-outlets { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 20px; padding: 0; }
.partner-outlets li { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-pill); padding: 10px 20px; font-weight: 600; color: var(--primary); box-shadow: var(--shadow-sm); }
.partner-links a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.partner-cta-row { justify-content: center; }

/* Five steps: narrower cards so they sit five across on a wide screen and
   three-and-two on a narrow one, instead of four and a lonely fifth. */
.partner-steps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

@media (max-width: 768px) {
  .partner-story { flex-direction: column; gap: 20px; }
  .partner-story__logo { align-self: center; padding: 16px; }
  .partner-story__logo img { width: 170px; }
}