@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400&display=swap');

.fihan-card {
  display: flex;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--fihan-card-border);
  background: transparent;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--fihan-text);
  box-sizing: border-box;
}

.fihan-card--simples {
  flex-direction: column;
  width: 218px;
}

.fihan-card--complex {
  flex-direction: row;
  align-items: stretch;
  width: 401px;
}

/* ─── shared text styling ─────────────────────────────────── */
.fihan-card__title,
.fihan-card__desc,
.fihan-card__eyebrow {
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  color: var(--fihan-text);
}

/* ─── COMPLEX: 3 columns (superarrow · text · diagonal) ──── */
.fihan-card--complex .fihan-card__icon {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  display: block;
}

.fihan-card--complex .fihan-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.fihan-card--complex .fihan-card__corner {
  flex-shrink: 0;
  width: 26.97px;
  height: 26.98px;
  align-self: flex-start;
}