/* =============================================================================
   ICON COMPONENT
   Standalone icons and circular icon containers.
   ============================================================================= */

/* Base class for motion bindings and layout */
.hm-icon {
    display: inline-block; /* Required to allow translateY on inline elements */
    transition: color var(--motion-fast), transform var(--motion-fast);
}

.hm-icon--hoverable:hover {
    transform: translateY(-2px);
}

/* ── Size variants (font-size scales FontAwesome glyphs) ─── */
.icon--sm { font-size: 24px; line-height: 1; }
.icon--md { font-size: 32px; line-height: 1; }
.icon--lg { font-size: 48px; line-height: 1; }
.icon--xl { font-size: 64px; line-height: 1; }

/* ── Color variants ──────────────────────────────────────── */
.icon--primary { color: var(--color-trust-blue); }
.icon--secondary { color: var(--color-calm-teal); }
.icon--neutral { color: var(--color-soft-grey); }
.icon--white { color: var(--color-white); }
/* icon--inherit: no rule needed; color cascades from parent */

/* =============================================================================
   ICON CONTAINER
   Circular background wrapper (e.g., for Value Prop Cards, Timelines)
   ============================================================================= */

.icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color var(--motion-fast), border-color var(--motion-fast), transform var(--motion-fast);
}

.icon-container--hoverable:hover {
    transform: translateY(-2px);
}

/* ── Container size variants ─────────────────────────────── */
.icon-container--sm { width: 40px; height: 40px; }
.icon-container--md { width: 48px; height: 48px; }
.icon-container--lg { width: 64px; height: 64px; }
.icon-container--xl { width: 80px; height: 80px; }

/* ── Container color variants ────────────────────────────── */

/* Blue Container: Deep Trust Blue bg, Calm Teal/White icon */
.icon-container--blue {
    background-color: rgba(11, 60, 93, 0.1);
}
.icon-container--blue .icon--primary,
.icon-container--blue .icon--inherit {
    color: var(--color-trust-blue);
}

/* Teal Container: Calm Teal bg, Deep Trust Blue/White icon */
.icon-container--teal {
    background-color: rgba(31, 138, 112, 0.15);
}
.icon-container--teal .icon--primary,
.icon-container--teal .icon--inherit {
    color: var(--color-calm-teal);
}

/* Light Container: Off White bg, Deep Trust Blue icon */
.icon-container--light {
    background-color: var(--color-off-white);
    border: 1px solid #E5E7EB;
}
.icon-container--light .icon--primary,
.icon-container--light .icon--inherit {
    color: var(--color-trust-blue);
}

/* Hover effect helper for parent cards */
.card:hover .icon-container--light {
    background-color: rgba(31, 138, 112, 0.1); /* Subtle Teal tint on hover */
    border-color: rgba(31, 138, 112, 0.2);
    /* Transform managed by motion tokens or parent container */
}