/* ==========================================================================
   COMPONENT: icon-card
   --------------------------------------------------------------------------
   Card with an icon at top, title, and description body. Used by every
   "feature grid" pattern on the site (Integrations, ListsHowItWorks,
   InboundFeatures, McpCapabilities, ApolloAgentFeatures, etc.).

   Compose with .e-wrap--3 (or --2 / --4) for a multi-column layout.

   Markup contract:
     <article class="e-icon-card">
         <div class="e-icon-card__icon">...</div>
         <h3  class="e-icon-card__title">Title</h3>
         <p   class="e-icon-card__description">Description</p>
     </article>
   ========================================================================== */

/* Mirror of legacy `.integrations-card` (components.css 1961-2000). Cards
   sit on a white surface, no transparent background tint, no preset icon
   container — the SVG/IMG inside the icon slot renders raw at 40px height. */

.e-icon-card {
    display: flex;
    flex-direction: column;
    background: var(--e-color-surface);
    border: 1px solid var(--e-color-border);
    border-radius: 25px;
    padding: 50px 25px;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.e-icon-card:hover {
    border-color: var(--e-color-primary);
    box-shadow: 0 10px 50px rgba(28, 145, 228, 0.1);
}

.e-icon-card__icon {
    margin-bottom: 25px;
    color: var(--e-color-primary);
}

.e-icon-card__icon svg {
    height: 40px;
    width: auto;
    color: var(--e-color-primary);
}

.e-icon-card__icon img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.e-icon-card__title {
    color: var(--e-color-ink);
    font-weight: var(--e-font-weight-semibold);
    margin: 0 0 10px;
}

.e-icon-card__description {
    color: var(--e-color-muted);
    line-height: var(--e-leading-relaxed);
    margin: 0;
}


/* DARK SURFACE INHERITANCE */

.e-section--dark .e-icon-card {
    background: var(--e-color-ink-soft);
    border-color: rgba(28, 145, 228, 0.15);
    box-shadow: none;
}

.e-section--dark .e-icon-card__icon {
    background: rgba(79, 190, 254, 0.10);
    color: var(--e-color-secondary);
}

.e-section--dark .e-icon-card__title       { color: var(--e-text-on-dark); }
.e-section--dark .e-icon-card__description { color: var(--e-text-on-dark-muted); }


/* ACCENT VARIANT — orange icon background. */

.e-icon-card--accent .e-icon-card__icon {
    background: var(--e-color-accent-50);
    color: var(--e-color-accent);
}