/*
 * service-page-email-platforms.css - Toro Legal Marketing
 *
 * Email Marketing page only. Platforms strip sits INSIDE the third
 * features card ("Build, send, and management") on the right-hand
 * side at desktop, beneath the list on mobile.
 *
 * Visual:
 *   - Mobile: list + platforms stack vertically inside the card.
 *   - >=900px: 2-col split inside the card, list left / platforms right.
 *   - Platforms render as a labelled list of inline navy SVG logos +
 *     labels, no card chrome of their own.
 */

/* ============================================
 * Platforms slot in the features grid
 * ============================================
 * The features grid renders 2-up at desktop. Three feature cards
 * leave row 2 col 2 empty; the platforms strip fills that slot as
 * its own grid item with no card chrome.
 *
 * Mobile (<768px) the platforms slot stacks below Build/send like
 * any other features item, with extra top breathing room. */
.tlm-service-page-features__item--platforms {
  padding-top: var(--space-md);
}

@media (min-width: 768px) {
  .tlm-service-page-features__item--platforms {
    padding-top: 0;
  }
}


/* ============================================
 * Platforms aside (lede + logo list)
 * ============================================ */

.tlm-email-platforms {
  display: flex;
  flex-direction: column;
  /* Wider gap between the lede and the logo list so the lede
     isn't crammed against the first row. */
  gap: var(--space-xl);
}

/* Match the 12px H3-to-content gap the list cards use, so the platforms
   column lines up with the left column. */
.tlm-service-page-features__item-title + .tlm-email-platforms__lead {
  margin-top: 12px;
}

.tlm-email-platforms__lead {
  margin: 0 0 var(--space-md);
  font-family: var(--font-sans);
  /* Match the bullet copy in the adjacent list so the two columns
     read at the same typographic weight. */
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-navy-muted);
}

.tlm-email-platforms__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-sm);
}

.tlm-email-platforms__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-navy);
}

.tlm-email-platforms__logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

/* Brand-coloured SVG asset; object-fit contains any logo with an
   off-square viewBox so the chrome fits without distortion. */
.tlm-email-platforms__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tlm-email-platforms__name {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
}