/* =============================================================================
 * press-wire.css — Push 2, 2026-05-19
 * Scope: /customer-testimonials/ (post ID 26944) — S4 Press Wire section
 * Pattern: Chime.com press-page uniform 3-col card grid (Bryson default)
 * Brand-gate compliance: brand-color accent line, no white-bg-photo + logo combo
 * RUCSS: keep selectors below scoped under .swrs-press-wire-grid so RUCSS
 *        treats the file as "in use" the moment the wrapper renders.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * Grid wrapper
 * -------------------------------------------------------------------------- */
.swrs-press-wire-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin: 32px 0 48px;
  width: 100%;
}

@media (min-width: 768px) {
  .swrs-press-wire-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
  }
}

@media (min-width: 1024px) {
  .swrs-press-wire-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

/* -----------------------------------------------------------------------------
 * Card
 * -------------------------------------------------------------------------- */
.swrs-press-wire {
  --swrs-accent: #0A1F44;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  padding: 28px 24px 24px;
  box-shadow: 0 1px 2px rgba(10, 31, 68, 0.04);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1),
              box-shadow 220ms cubic-bezier(.2,.7,.2,1),
              border-color 220ms ease;
  position: relative;
  overflow: hidden;
  min-height: 100%;
}

/* Accent rule along the top — uses the per-card --swrs-accent var */
.swrs-press-wire::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--swrs-accent);
  opacity: 0.85;
  transition: opacity 220ms ease, height 220ms ease;
}

.swrs-press-wire:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(10, 31, 68, 0.12);
  border-color: #d7dbe5;
}

.swrs-press-wire:hover::before {
  opacity: 1;
  height: 5px;
}

/* -----------------------------------------------------------------------------
 * Logo area (top of card)
 * -------------------------------------------------------------------------- */
.swrs-press-wire__thumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  margin: 4px 0 18px;
}

/* Publication logo image (the new SVG/PNG logos replacing favicons) */
.swrs-press-wire__logo {
  max-height: 40px;
  max-width: 180px;
  width: auto;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.78;
  transition: filter 220ms ease, opacity 220ms ease;
  display: block;
}

.swrs-press-wire:hover .swrs-press-wire__logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* Legacy favicon support — pre-Push-2 cards still use this class.
 * Kept so a partial deploy doesn't render broken images. */
.swrs-press-wire__favicon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  filter: grayscale(40%);
  opacity: 0.85;
}

/* Outlet text-name fallback (used when an SVG logo is not available) */
.swrs-press-wire__outlet-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--swrs-accent);
  margin-left: 12px;
  line-height: 1.2;
}

/* When the logo image is present we hide the inline outlet-text fallback */
.swrs-press-wire__thumb .swrs-press-wire__logo + .swrs-press-wire__outlet-text {
  display: none;
}

/* -----------------------------------------------------------------------------
 * Body
 * -------------------------------------------------------------------------- */
.swrs-press-wire__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 12px;
}

/* -----------------------------------------------------------------------------
 * Pills (publication name + date)
 * -------------------------------------------------------------------------- */
.swrs-press-wire__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 4px;
}

.swrs-press-wire__pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  line-height: 1.4;
}

.swrs-press-wire__pill--outlet {
  background: rgba(10, 31, 68, 0.06);
  color: var(--swrs-accent);
}

.swrs-press-wire__pill--date {
  background: #f4f5f8;
  color: #555f73;
}

/* -----------------------------------------------------------------------------
 * Headline
 * -------------------------------------------------------------------------- */
.swrs-press-wire__headline {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #0A1F44;
  margin: 0;
  letter-spacing: -0.01em;
}

/* -----------------------------------------------------------------------------
 * Excerpt (2-3 line clamp)
 * -------------------------------------------------------------------------- */
.swrs-press-wire__excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: #555f73;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
 * CTA
 * -------------------------------------------------------------------------- */
.swrs-press-wire__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
  font-weight: 600;
  color: #0085CA;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease;
}

.swrs-press-wire__cta:hover,
.swrs-press-wire__cta:focus-visible {
  color: #003B5C;
  text-decoration: none;
  transform: translateX(2px);
}

.swrs-press-wire__cta:focus-visible {
  outline: 2px solid #0085CA;
  outline-offset: 4px;
  border-radius: 2px;
}

/* -----------------------------------------------------------------------------
 * Reduced motion
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .swrs-press-wire,
  .swrs-press-wire__logo,
  .swrs-press-wire__cta,
  .swrs-press-wire::before {
    transition: none;
  }
  .swrs-press-wire:hover {
    transform: none;
  }
}